1. Introduction

JSX stands for JavaScript XML. It is a syntax extension used with React and React Native to describe user interfaces.

JSX allows developers to write UI elements using HTML-like syntax inside JavaScript code. However, JSX is not HTML. React Native uses its own components, such as View, Text, Image, and Pressable, instead of HTML elements like div, p, and button.

Example:

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

export default function App() {
  return (
    <View>
      <Text>Hello, React Native!</Text>
    </View>
  );
}

2. What Is JSX?

JSX is a JavaScript syntax extension that makes it easier to describe UI structures.

Without JSX:

const element = React.createElement(
  'h1',
  null,
  'Hello World'
);

With JSX:

const element = <h1>Hello World</h1>;

In React Native:

const element = (
  <View>
    <Text>Hello World</Text>
  </View>
);

JSX is transformed into JavaScript during the build process. It is not interpreted as HTML by the mobile device.

3. Basic JSX Syntax and Rules

Rule 1: Return One Parent Element

Incorrect:

return (
  <Text>Hello</Text>
  <Text>Welcome</Text>
);

Correct:

return (
  <View>
    <Text>Hello</Text>
    <Text>Welcome</Text>
  </View>
);

You can also use React Fragment:

return (
  <>
    <Text>Hello</Text>
    <Text>Welcome</Text>
  </>
);

Rule 2: Close Every Tag

<Text>Hello</Text>
<Image source={require('./assets/logo.png')} />

Self-closing components use />.

Rule 3: Use camelCase for Properties

<View
  style={{
    backgroundColor: 'blue',
    padding: 20,
  }}
>
  <Text>Welcome</Text>
</View>

Rule 4: Use Curly Braces for JavaScript Expressions

const studentName = 'Rahul';
const age = 21;

return (
  <View>
    <Text>Name: {studentName}</Text>
    <Text>Age: {age}</Text>
  </View>
);

4. JSX and React Native Components

React Native provides components that are used inside JSX to create mobile interfaces.

View Component

View works as a container for arranging other components.

<View>
  <Text>Student Details</Text>
</View>

Text Component

Text displays text content.

<Text>Welcome to Param Classes</Text>

Image Component

Image displays an image.

<Image
  source={require('./assets/logo.png')}
  style={{ width: 100, height: 100 }}
/>

Pressable Component

Pressable creates an interactive area that responds to touch.

<Pressable onPress={() => console.log('Button pressed')}>
  <Text>Click Here</Text>
</Pressable>

5. Using JavaScript Variables in JSX

You can display variable values directly inside JSX using curly braces.

const name = 'Amit';
const course = 'React Native';
const duration = 30;

return (
  <View>
    <Text>Student Name: {name}</Text>
    <Text>Course: {course}</Text>
    <Text>Duration: {duration} Days</Text>
  </View>
);

Output:

Student Name: Amit
Course: React Native
Duration: 30 Days

6. Using Expressions in JSX

You can perform calculations and use JavaScript expressions inside curly braces.

const firstNumber = 20;
const secondNumber = 10;

return (
  <View>
    <Text>Addition: {firstNumber + secondNumber}</Text>
    <Text>Subtraction: {firstNumber - secondNumber}</Text>
    <Text>Multiplication: {firstNumber * secondNumber}</Text>
  </View>
);

Output:

Addition: 30
Subtraction: 10
Multiplication: 200

Expressions are allowed inside JSX braces, but normal JavaScript statements such as if blocks cannot be placed directly inside them.

7. Conditional Rendering in JSX

Conditional rendering means displaying different UI elements based on a condition.

Using the Ternary Operator

const isLoggedIn = true;

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

If isLoggedIn is true, the screen displays Welcome Back. Otherwise, it displays Please Login.

Using the Logical AND Operator

const isStudent = true;

return (
  <View>
    {isStudent && <Text>Student Account</Text>}
  </View>
);

The text appears only when the condition is true.

8. Rendering Lists Using JSX

JavaScript's map() method can display multiple items from an array.

const students = ['Amit', 'Rahul', 'Priya', 'Neha'];

return (
  <View>
    <Text>Student List</Text>

    {students.map((student, index) => (
      <Text key={index}>
        {index + 1}. {student}
      </Text>
    ))}
  </View>
);

Output:

Student List
1. Amit
2. Rahul
3. Priya
4. Neha

The key property helps React identify individual list items. In production applications, use a stable unique ID from your data instead of an array index whenever possible.

9. JSX Styling in React Native

React Native uses JavaScript objects for styling.

<View style={{ backgroundColor: '#eaf2ff', padding: 20 }}>
  <Text
    style={{
      color: '#1646a0',
      fontSize: 24,
      fontWeight: 'bold',
    }}
  >
    Learn JSX
  </Text>
</View>

You can also organize styles using StyleSheet.create().

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Welcome to React Native</Text>
      <Text style={styles.description}>
        Learn JSX step by step.
      </Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#f5f5f5',
    padding: 20,
  },
  heading: {
    fontSize: 22,
    fontWeight: 'bold',
    color: '#1d4ed8',
  },
  description: {
    fontSize: 16,
    marginTop: 10,
    color: '#333',
  },
});

10. Complete Practical Project: Student Profile Screen

Objective: Create a student profile screen displaying a name, course, email, enrollment status, and an interactive button.

Use the appropriate entry screen for your project. For example, an Expo Router project may use app/index.tsx, while another project template may use App.js.

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

export default function App() {
  const student = {
    name: 'Rahul Sharma',
    course: 'React Native Development',
    email: 'rahul@example.com',
    status: 'Active',
  };

  return (
    <View style={styles.container}>
      <Text style={styles.heading}>Student Profile</Text>

      <Image
        source={{
          uri: 'https://via.placeholder.com/120',
        }}
        style={styles.profileImage}
      />

      <Text style={styles.name}>{student.name}</Text>

      <Text style={styles.details}>
        Course: {student.course}
      </Text>

      <Text style={styles.details}>
        Email: {student.email}
      </Text>

      <Text style={styles.status}>
        Status: {student.status}
      </Text>

      <Pressable
        style={styles.button}
        onPress={() =>
          Alert.alert('Profile', 'Profile opened successfully!')
        }
      >
        <Text style={styles.buttonText}>View Profile</Text>
      </Pressable>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#f0f4f8',
  },
  heading: {
    fontSize: 26,
    fontWeight: 'bold',
    marginBottom: 25,
  },
  profileImage: {
    width: 120,
    height: 120,
    borderRadius: 60,
    marginBottom: 15,
  },
  name: {
    fontSize: 22,
    fontWeight: 'bold',
    marginBottom: 10,
  },
  details: {
    fontSize: 16,
    marginBottom: 8,
  },
  status: {
    fontSize: 16,
    color: 'green',
    marginTop: 5,
  },
  button: {
    backgroundColor: '#2563eb',
    padding: 14,
    borderRadius: 8,
    marginTop: 20,
  },
  buttonText: {
    color: 'white',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

Practical Project Explanation

1. The student object stores student information.

2. JSX displays object properties using curly braces.

3. View creates the main screen container.

4. Text displays student details.

5. Image displays the profile picture.

6. Pressable creates an interactive button.

7. Alert.alert() displays a message when the button is pressed.

8. StyleSheet.create() defines the screen styling.

Note: The placeholder image URL is for demonstration. Replace it with a valid image URL or a local image asset if necessary.

11. Common JSX Mistakes

Mistake 1: Forgetting to Close Tags

Incorrect:

<Text>Hello

Correct:

<Text>Hello</Text>

Mistake 2: Using HTML Elements in React Native

Incorrect:

<div>Hello</div>

Correct:

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

Mistake 3: Using Variables Without Curly Braces

Incorrect:

<Text>name</Text>

Correct:

<Text>{name}</Text>

Mistake 4: Forgetting List Keys

Incorrect:

{students.map(student => (
  <Text>{student}</Text>
))}

Correct:

{students.map((student, index) => (
  <Text key={index}>{student}</Text>
))}

Mistake 5: Using HTML-Style CSS Strings

Incorrect:

<View style="background-color: blue">

Correct:

<View style={{ backgroundColor: 'blue' }}>

12. Best Practices for Writing JSX

• Keep components small and reusable.

• Use meaningful variable and component names.

• Always close JSX tags.

• Use React Native components instead of HTML elements.

• Use curly braces for JavaScript expressions.

• Use stable keys when rendering lists.

• Keep complex calculations outside the JSX return statement.

• Use StyleSheet.create() for organized styling.

• Maintain readable indentation and consistent formatting.

13. Conclusion

JSX is an essential part of React Native development. It allows developers to create mobile application interfaces using readable, component-based syntax.

By learning JSX, developers can display dynamic data, use JavaScript expressions, render lists, apply conditional rendering, and build interactive mobile screens.

Practise creating a student profile screen and experiment with variables, conditions, lists, and styling.

14. Frequently Asked Questions

Q1. What is JSX?

JSX is a JavaScript syntax extension used to describe UI elements in React and React Native.

Q2. Is JSX the same as HTML?

No. JSX looks similar to HTML, but it follows JavaScript syntax rules and uses React components.

Q3. Can we use HTML tags in React Native?

No. React Native uses components such as View, Text, Image, and Pressable.

Q4. Why do we use curly braces in JSX?

Curly braces allow JavaScript expressions and variable values to be used inside JSX.

Q5. Can JSX display dynamic data?

Yes. JSX can display values from variables, objects, arrays, and expressions.

Q6. What is conditional rendering?

Conditional rendering displays UI elements based on a condition, using techniques such as ternary operators and logical AND.

Q7. Why is the key property important in lists?

It helps React identify individual list items efficiently when items are added, removed, or reordered.

Q8. Does JSX run directly on a mobile device?

JSX is transformed into JavaScript during the build process before the application runs.