Understanding JSX and JavaScript Expressions in React Native

Course: React Native Training

Topic: Understanding JSX and JavaScript Expressions

Course Link: React Native Training Course

Demo Link: Register for a Free Course Demo

JustAcademy Website: Visit JustAcademy

1. Introduction to JSX and JavaScript Expressions

JSX and JavaScript expressions are fundamental concepts in React Native development. JSX allows developers to describe the user interface using HTML-like syntax, while JavaScript expressions make the interface dynamic by displaying variables, calculations, function results, and conditional content.

React Native uses JSX to describe mobile application interfaces through components such as View, Text, Image, and Pressable. Unlike traditional HTML, React Native JSX uses native interface components instead of browser elements such as div and span.

JavaScript expressions can be embedded inside JSX using curly braces { }. This allows developers to combine interface structure with application data and logic.

Example

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const name = 'Rahul';
  return (
    <View>
      <Text>Welcome to React Native!</Text>
      <Text>Hello, {name}!</Text>
    </View>
  );
}

In this example, JSX defines the interface, while the JavaScript variable name provides dynamic content.

2. Learning Objectives

After completing this topic, learners will be able to:

• Understand the meaning and purpose of JSX.
• Explain how JSX works in React Native applications.
• Differentiate JSX from traditional HTML.
• Embed JavaScript expressions inside JSX.
• Display variables, calculations, and function results in components.
• Use expressions in component props and styles.
• Apply conditional rendering using logical and ternary operators.
• Display lists using JavaScript array methods.
• Identify and resolve common JSX errors.
• Write readable, reusable React Native components.

3. What Is JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows developers to write markup-like structures directly inside JavaScript code.

JSX makes React Native interfaces easier to read because the component structure resembles the hierarchy of the mobile interface being created. JSX is transformed into JavaScript instructions that React can use to create and update elements.

3.1 Basic JSX Syntax

import React from 'react';
import { View, Text } from 'react-native';

const Welcome = () => {
  return (
    <View>
      <Text>Hello, World!</Text>
    </View>
  );
};

export default Welcome;

Explanation:

• import brings the required components into the file.
• View acts as a container for other components.
• Text displays text on the screen.
• return specifies the JSX that the component renders.
• export default makes the component available for import elsewhere.

3.2 Why Is JSX Used?

• Readability: Makes interface structures easier to understand.
• Integration: Keeps UI structure close to its related JavaScript logic.
• Dynamic content: Allows values and expression results to appear in the interface.
• Component composition: Makes it easy to nest reusable components.
• Maintainability: Helps developers organize complex interfaces into smaller components.

4. JSX vs Traditional HTML

JSX resembles HTML, but it follows JavaScript and React conventions. React Native also has its own set of components and styling rules.

Example of HTML:

<div>
  <p>Hello World</p>
</div>

Equivalent React Native JSX:

<View>
  <Text>Hello World</Text>
</View>

Remember that React Native does not render ordinary HTML elements such as div, p, and span as its standard native UI components.

5. Rules of Writing JSX

5.1 Return a Single Root Element

A component should return one root JSX element. Multiple sibling elements can be wrapped in a View or a React Fragment.

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>First item</Text>
      <Text>Second item</Text>
    </View>
  );
}

A Fragment can group elements without adding another visible native container.

import React from 'react';
import { Text } from 'react-native';

export default function App() {
  return (
    <>
      <Text>First item</Text>
      <Text>Second item</Text>
    </>
  );
}

5.2 Close Every Tag

JSX requires elements to be properly closed. Components without children can use self-closing syntax.

<Text>Welcome</Text>
<TextInput placeholder="Enter your name" />

5.3 Use Correct Component Names

React Native core component names are case-sensitive. For example, use View and Text, not view and text.

import { View, Text } from 'react-native';

const App = () => (
  <View>
    <Text>Correct component names</Text>
  </View>
);

5.4 Use JavaScript Expressions Correctly

JavaScript expressions inside JSX must be enclosed in curly braces. String literals can be written inside quotation marks when assigning string props.

const title = 'My Application';

<Text>{title}</Text>
<Text accessibilityLabel="Application title">Home</Text>

6. What Are JavaScript Expressions?

A JavaScript expression is a piece of code that evaluates to a value. Expressions can produce strings, numbers, booleans, arrays, objects, or other values.

In React Native, expressions help developers calculate values and display dynamic information inside JSX.

6.1 Common Types of Expressions

7. Using Curly Braces in JSX

Curly braces { } allow developers to insert JavaScript expressions into JSX. They are commonly used in two places: inside an element's content and inside a prop value.

7.1 Expressions Inside Text Content

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const username = 'Priya';
  const score = 95;

  return (
    <View>
      <Text>User: {username}</Text>
      <Text>Score: {score}</Text>
      <Text>Next score: {score + 5}</Text>
    </View>
  );
}

The values of username and score, along with the calculated score, are evaluated and displayed by the relevant Text components.

7.2 Expressions Inside Props

Props configure a component's behavior, appearance, and content. A JavaScript expression can provide the value of a prop.

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const heading = 'Dashboard';
  const fontSize = 24;

  return (
    <View>
      <Text style={{ fontSize: fontSize }}>
        {heading}
      </Text>
    </View>
  );
}

In this example, style receives a JavaScript object. The outer braces indicate a JavaScript expression, while the inner braces define the object literal.

8. Displaying Variables in JSX

Variables store data that can be displayed inside components. Common examples include user names, product names, prices, scores, and status messages.

import React from 'react';
import { View, Text } from 'react-native';

export default function Profile() {
  const firstName = 'Amit';
  const lastName = 'Sharma';
  const age = 25;

  return (
    <View>
      <Text>First Name: {firstName}</Text>
      <Text>Last Name: {lastName}</Text>
      <Text>Full Name: {firstName + ' ' + lastName}</Text>
      <Text>Age: {age}</Text>
    </View>
  );
}

Variables declared inside a component are available to that component's JSX. A regular variable changing does not automatically trigger a React render; use state when a value must change the displayed interface in response to an event.

9. Arithmetic Expressions in JSX

Arithmetic expressions perform calculations directly within JSX. They are useful for totals, discounts, quantities, marks, and other numeric values.

9.1 Basic Arithmetic Operators

9.2 Practical Example: Shopping Total

import React from 'react';
import { View, Text } from 'react-native';

export default function ShoppingCart() {
  const price = 500;
  const quantity = 3;
  const discount = 100;
  const total = price * quantity - discount;

  return (
    <View>
      <Text>Price: Rs. {price}</Text>
      <Text>Quantity: {quantity}</Text>
      <Text>Discount: Rs. {discount}</Text>
      <Text>Final Total: Rs. {total}</Text>
    </View>
  );
}

The final total is calculated as 500 multiplied by 3, minus 100, resulting in Rs. 1,400.

10. String Expressions and Template Literals

String expressions combine text with values. Developers can use concatenation or template literals to create readable messages.

10.1 String Concatenation

const firstName = 'Neha';
const lastName = 'Patel';
const fullName = firstName + ' ' + lastName;

10.2 Template Literals

Template literals use backticks and the ${ } syntax to insert expressions into strings.

import React from 'react';
import { View, Text } from 'react-native';

export default function Greeting() {
  const name = 'Neha';
  const course = 'React Native';

  return (
    <View>
      <Text>{`Hello, ${name}!`}</Text>
      <Text>{`You are learning ${course}.`}</Text>
    </View>
  );
}

Template literals are especially useful when constructing personalized messages, summaries, and formatted labels.

11. Conditional Expressions in JSX

Conditional expressions allow a component to display different content depending on a condition. Two commonly used techniques are the ternary operator and logical AND operator.

11.1 Ternary Operator

The ternary operator uses the format condition ? valueIfTrue : valueIfFalse.

import React from 'react';
import { View, Text } from 'react-native';

export default function LoginStatus() {
  const isLoggedIn = true;

  return (
    <View>
      <Text>
        {isLoggedIn ? 'Welcome Back!' : 'Please Log In'}
      </Text>
    </View>
  );
}

If isLoggedIn is true, the component displays the welcome message. Otherwise, it displays the login message.

11.2 Logical AND Operator

The logical AND operator && is useful when content should appear only if a condition is true.

import React from 'react';
import { View, Text } from 'react-native';

export default function Notification() {
  const hasNotification = true;

  return (
    <View>
      {hasNotification && (
        <Text>You have a new notification!</Text>
      )}
    </View>
  );
}

Important: Avoid using a number directly as the left side of && when it might be zero. For example, {`{items.length && Items available}`} can render the number 0. Use items.length > 0 && ... instead.

11.3 Conditional Rendering with Multiple Conditions

import React from 'react';
import { View, Text } from 'react-native';

export default function Result() {
  const marks = 78;

  return (
    <View>
      <Text>
        {marks >= 90
          ? 'Grade A'
          : marks >= 75
          ? 'Grade B'
          : marks >= 50
          ? 'Grade C'
          : 'Needs Improvement'}
      </Text>
    </View>
  );
}

Nested ternary operators can become difficult to read. For complex conditions, calculate a result in a descriptive variable or use a separate function before returning JSX.

12. Using Function Calls in JSX

Functions can calculate values or return formatted text. A function call inside curly braces displays the value returned by the function.

import React from 'react';
import { View, Text } from 'react-native';

function getFullName(firstName, lastName) {
  return `${firstName} ${lastName}`;
}

export default function Profile() {
  return (
    <View>
      <Text>{getFullName('Rohan', 'Mehta')}</Text>
    </View>
  );
}

The getFullName() function returns a string, which is displayed by the Text component.

12.1 Calling Functions in Props

Function references can also be passed as props, such as event handlers. In this situation, pass the function without calling it unless you specifically intend to evaluate it during rendering.

import React from 'react';
import { View, Text, Pressable } from 'react-native';

export default function App() {
  const handlePress = () => {
    console.log('Button pressed');
  };

  return (
    <View>
      <Pressable onPress={handlePress}>
        <Text>Press Me</Text>
      </Pressable>
    </View>
  );
}

Here, handlePress is passed as a function reference. React Native calls it when the user presses the component.

13. Using JavaScript Objects in JSX

JavaScript objects group related information into key-value pairs. Objects can be used for component props, styling, configuration, and application data.

13.1 Displaying Object Properties

import React from 'react';
import { View, Text } from 'react-native';

export default function UserProfile() {
  const user = {
    name: 'Ananya',
    city: 'Mumbai',
    age: 24
  };

  return (
    <View>
      <Text>Name: {user.name}</Text>
      <Text>City: {user.city}</Text>
      <Text>Age: {user.age}</Text>
    </View>
  );
}

Individual properties such as user.name can be rendered as text. Passing a complete ordinary object as a child, such as {`{user}`}, is not supported because React cannot render an arbitrary object directly as text.

13.2 Passing Objects as Style Props

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const titleStyle = {
    fontSize: 24,
    color: 'blue',
    fontWeight: 'bold'
  };

  return (
    <View>
      <Text style={titleStyle}>Welcome</Text>
    </View>
  );
}

In JSX, style={titleStyle} passes the existing object. The syntax style={{ fontSize: 24 }} creates an object directly inside the JSX expression.

14. Using Arrays and the map() Method in JSX

Arrays store multiple values. In React Native, the JavaScript map() method is commonly used to convert an array of data into a collection of components.

14.1 Rendering a Simple List

import React from 'react';
import { View, Text } from 'react-native';

export default function CourseList() {
  const courses = ['React Native', 'JavaScript', 'MySQL'];

  return (
    <View>
      {courses.map((course) => (
        <Text key={course}>{course}</Text>
      ))}
    </View>
  );
}

The map() method processes each array item and returns a corresponding Text component. Each rendered sibling should have a stable, unique key so React can track changes efficiently.

14.2 Rendering Objects from an Array

import React from 'react';
import { View, Text } from 'react-native';

export default function ProductList() {
  const products = [
    { id: 'p1', name: 'Keyboard', price: 1200 },
    { id: 'p2', name: 'Mouse', price: 600 },
    { id: 'p3', name: 'Monitor', price: 8500 }
  ];

  return (
    <View>
      {products.map((product) => (
        <View key={product.id}>
          <Text>{product.name}</Text>
          <Text>Price: Rs. {product.price}</Text>
        </View>
      ))}
    </View>
  );
}

For very large or scrollable lists, React Native's FlatList is generally more appropriate than rendering every item directly with map().

15. Using Expressions with React Native Styles

React Native styles are JavaScript objects. Expressions allow styles to depend on component variables, values, and conditions.

15.1 Dynamic Font Size

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const isHeading = true;

  return (
    <View>
      <Text
        style={{
          fontSize: isHeading ? 26 : 16,
          fontWeight: isHeading ? 'bold' : 'normal'
        }}
      >
        Dynamic Styling
      </Text>
    </View>
  );
}

15.2 Conditional Background Color

import React from 'react';
import { View, Text } from 'react-native';

export default function StatusCard() {
  const isAvailable = true;

  return (
    <View
      style={{
        padding: 16,
        backgroundColor: isAvailable ? 'lightgreen' : 'lightgray'
      }}
    >
      <Text>
        {isAvailable ? 'Available' : 'Unavailable'}
      </Text>
    </View>
  );
}

This technique is useful for status badges, active tabs, validation messages, and buttons with different states.

16. Boolean, Null, and Undefined Values in JSX

JavaScript expressions can evaluate to booleans, null, or undefined. These values have special behavior when used as JSX children.

• Boolean: Values such as true and false do not normally display text when used directly as children.
• Null: Represents an intentional absence of a value and renders no child content.
• Undefined: Also normally renders no child content.
• Number: Numeric values can render as text, so check expressions that may produce zero.
• String: Strings are commonly rendered through a Text component in React Native.

Example

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const isVisible = false;
  const message = null;
  const count = 0;

  return (
    <View>
      {isVisible && <Text>Visible message</Text>}
      {message !== null && <Text>{message}</Text>}
      <Text>Count: {count}</Text>
    </View>
  );
}

The first two conditions do not display their optional messages. The count is explicitly displayed as zero. In React Native, visible text should be placed inside Text components rather than directly inside a View.

17. JSX Expressions and State

Expressions can display the current value of React state. When state changes through a state setter, React can render the component again using the updated value.

import React, { useState } from 'react';
import { View, Text, Pressable } from 'react-native';

export default function Counter() {
  const [count, setCount] = useState(0);

  return (
    <View>
      <Text>Count: {count}</Text>
      <Pressable onPress={() => setCount(count + 1)}>
        <Text>Increase Count</Text>
      </Pressable>
    </View>
  );
}

Explanation:

• useState(0) initializes the count to zero.
• count stores the current state value.
• setCount requests a state update.
• {count} displays the current value in JSX.
• onPress runs the callback when the user presses the control.

When the next state depends on the previous state, a functional update is often safer:

onPress={() => setCount(previousCount => previousCount + 1)}

18. Event Handler Expressions in JSX

Event handlers let users interact with mobile applications. In React Native, props such as onPress receive functions that execute in response to user actions.

18.1 Correct Event Handler

import React from 'react';
import { View, Text, Pressable } from 'react-native';

export default function App() {
  const showMessage = () => {
    console.log('Welcome to the application');
  };

  return (
    <View>
      <Pressable onPress={showMessage}>
        <Text>Show Message</Text>
      </Pressable>
    </View>
  );
}

18.2 Passing Arguments to a Function

import React from 'react';
import { View, Text, Pressable } from 'react-native';

export default function App() {
  const greetUser = (name) => {
    console.log(`Hello, ${name}`);
  };

  return (
    <View>
      <Pressable onPress={() => greetUser('Aman')}>
        <Text>Greet Aman</Text>
      </Pressable>
    </View>
  );
}

Use onPress={showMessage} to pass a function reference. Use onPress={() => greetUser('Aman')} when you need a callback that supplies an argument.

19. JSX Expressions vs JavaScript Statements

An expression evaluates to a value, while a statement performs an action or controls program execution. JSX curly braces accept expressions, not arbitrary statements such as a standard if block or a for loop.

Correct Alternative Using if

import React from 'react';
import { View, Text } from 'react-native';

export default function App() {
  const age = 20;
  let message;

  if (age >= 18) {
    message = 'You are an adult';
  } else {
    message = 'You are a minor';
  }

  return (
    <View>
      <Text>{message}</Text>
    </View>
  );
}

Here, the if statement executes before the JSX is returned. The resulting string is then displayed using an expression.

20. Common JSX Errors and Their Solutions

20.1 Incorrect and Correct Variable Usage

Incorrect:

<Text>"{name}"</Text>

This renders the variable name as literal text rather than evaluating the variable.

Correct:

<Text>{name}</Text>

20.2 Incorrect and Correct Event Usage

Incorrect:

<Pressable onPress={showMessage()}>
  <Text>Click Me</Text>
</Pressable>

This calls the function during rendering rather than waiting for the press.

Correct:

<Pressable onPress={showMessage}>
  <Text>Click Me</Text>
</Pressable>

21. Best Practices for JSX and JavaScript Expressions

• Keep JSX readable and avoid deeply nested expressions.
• Use descriptive variable and function names.
• Use curly braces when inserting JavaScript expressions.
• Use React Native components such as View and Text appropriately.
• Keep complex calculations outside the JSX return statement.
• Use the ternary operator for simple two-way conditions.
• Use separate functions or variables for complex business logic.
• Use stable, unique keys when rendering arrays.
• Pass event handler references instead of calling handlers during rendering.
• Use React state for values that need to trigger UI updates.
• Avoid unnecessary function calls with side effects during rendering.
• Keep component responsibilities focused and reusable.
• Test expressions with empty arrays, missing values, zero, and other edge cases.
• Use consistent formatting and automatic code formatting tools.

22. Practical Project: Student Result Card

Objective: Create a React Native result card that uses JSX, JavaScript variables, arithmetic expressions, conditional rendering, and dynamic styles.

Project Requirements

• Display a student's name and subject.
• Display total marks and maximum marks.
• Calculate the percentage.
• Show a pass or fail message.
• Change the message color depending on the result.

Complete Code

import React from 'react';
import { View, Text, StyleSheet } from 'react-native';

export default function StudentResult() {
  const studentName = 'Aarav Sharma';
  const subject = 'JavaScript';
  const marks = 82;
  const maximumMarks = 100;
  const percentage = (marks / maximumMarks) * 100;
  const passed = percentage >= 40;

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Student Result</Text>
      <Text>Name: {studentName}</Text>
      <Text>Subject: {subject}</Text>
      <Text>Marks: {marks}/{maximumMarks}</Text>
      <Text>Percentage: {percentage.toFixed(2)}%</Text>
      <Text style={{ color: passed ? 'green' : 'red' }}>
        {passed ? 'Result: Pass' : 'Result: Fail'}
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
    margin: 16,
    backgroundColor: '#F2F5F9',
    borderRadius: 10
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 12
  }
});

Project Explanation

1. Variables: Store the student's name, subject, and marks.
2. Arithmetic expression: Calculate the percentage from the marks.
3. Method call: Use toFixed(2) to format the percentage to two decimal places.
4. Boolean expression: Determine whether the student has passed.
5. Conditional expression: Choose the result message and color.
6. JSX: Arrange all information in the component hierarchy.
7. Styles: Use StyleSheet.create() to organize the layout and appearance.

23. Practice Exercises

Exercise 1: Personal Greeting

Create a component that displays your name, city, and a personalized welcome message using JavaScript variables.

Exercise 2: Calculator

Create a component that defines two numbers and displays their sum, difference, product, and quotient using JSX expressions.

Exercise 3: Age Verification

Declare an age variable and use the ternary operator to display whether the person is eligible to register for an adult account.

Exercise 4: Product Summary

Create an array containing at least three products. Use map() to display each product's name and price with a stable key.

Exercise 5: Dynamic Styling

Create a status message that changes its text and color depending on a boolean variable.

Exercise 6: Counter Application

Build a counter using useState and a Pressable component. Display the current count and increase it whenever the user presses the control.

24. Interview Questions and Answers

Q1. What is JSX?

Answer: JSX is a JavaScript syntax extension that allows developers to describe React and React Native interfaces using markup-like syntax inside JavaScript files.

Q2. What is the full form of JSX?

Answer: JSX stands for JavaScript XML.

Q3. Why is JSX used in React Native?

Answer: JSX makes component hierarchies readable and allows developers to combine interface structure with dynamic JavaScript values.

Q4. What are JavaScript expressions?

Answer: Expressions are pieces of JavaScript code that evaluate to values, such as numbers, strings, booleans, and function return values.

Q5. How do you use JavaScript variables inside JSX?

Answer: Place the variable inside curly braces. For example, <Text>{name}</Text>.

Q6. Can you use an if statement directly inside JSX curly braces?

Answer: No. JSX curly braces accept expressions, not ordinary if statements. Use a ternary expression or calculate the value before returning JSX.

Q7. What is the ternary operator?

Answer: It is a conditional expression written as condition ? valueIfTrue : valueIfFalse.

Q8. What is the purpose of the logical AND operator in JSX?

Answer: It is commonly used to render optional content when a condition is true. Care is required when the condition can evaluate to zero.

Q9. How can you render an array in JSX?

Answer: Use an array method such as map() to return a component for each item, and provide a stable, unique key for each sibling.

Q10. Why are keys important in lists?

Answer: Keys help React identify list items across renders, making updates and insertions more predictable.

Q11. How do you apply dynamic styles?

Answer: Pass a JavaScript object to the style prop and use expressions to calculate property values.

Q12. What is the difference between a function reference and a function call in an event prop?

Answer: A function reference, such as onPress={handlePress}, lets React Native invoke the handler after an event. A call, such as onPress={handlePress()}, executes the function during rendering.

Q13. Can a JavaScript object be rendered directly as text?

Answer: No. Render individual properties or convert the object into a suitable string representation.

Q14. What is the difference between JSX and HTML?

Answer: JSX is a JavaScript syntax extension that describes React elements. React Native JSX uses native components such as View and Text, while HTML describes web page elements.

Q15. How does state work with JSX?

Answer: State stores values managed by React. When state is updated using its setter, React can re-render the component and display the updated value through JSX.

25. Quick Revision Notes

• JSX means JavaScript XML.
• JSX allows markup-like syntax inside JavaScript.
• React Native uses components such as View, Text, and Pressable.
• Use curly braces to embed JavaScript expressions.
• Use variables to display dynamic data.
• Use arithmetic expressions to calculate values.
• Use template literals to combine text and variables.
• Use ternary expressions for simple conditional rendering.
• Use logical AND expressions for optional content.
• Use map() to render collections and provide stable keys.
• Use JavaScript objects to define dynamic styles and props.
• Pass function references to event handlers.
• Use React state for data that should update the interface.
• Wrap visible text in React Native's Text component.
• Close all JSX tags and return one root element or a Fragment.

26. Conclusion

Understanding JSX and JavaScript expressions is an essential step toward building interactive React Native applications. JSX describes the component structure, while expressions allow that structure to display dynamic values, calculate information, apply conditional logic, and respond to changing data.

By practising variables, arithmetic operations, template literals, conditional rendering, object properties, array mapping, event handlers, and state-driven interfaces, learners can develop a strong foundation for creating maintainable mobile applications.

To continue learning, explore the React Native Training Course, visit the JustAcademy website, or register for a course demo.