What is React JSX?

JSX stands for JavaScript XML. It is a syntax extension for JavaScript that allows you to write HTML-like code in React components.

Basically, JSX makes it easier to create React elements and manage the component structure visually.

A Simple JSX Example

The following is a simple example of JSX, where we write a H2 element in JavaScript code.

App.js

</>
Copy
import React from 'react';

function App() {
  return (
      <h2>Hello World</h2>
  );
}

export default App;

Why Use JSX?

  • Improved Readability: JSX syntax closely resembles HTML, making it intuitive for developers familiar with web development.
  • Integration of Logic and Markup: Allows embedding JavaScript expressions within the markup, facilitating dynamic content rendering.
  • Enhanced Tooling: Provides better error messages and debugging experiences due to its strict syntax and integration with tools like Babel.

JSX Syntax and Rules

1 Embedding Expressions

JSX allows embedding JavaScript expressions within curly braces {}. This feature enables dynamic content rendering based on variables or functions.

</>
Copy
import React from 'react';

function App() {
  const user = 'Arjun';
  return (
    <div>
      <h1>Welcome, {user}!</h1>
    </div>
  );
}

export default App;

In this example, the value of user is embedded within the <h1> tag, resulting in a personalised greeting.

2 Attributes in JSX

Attributes in JSX are similar to HTML but follow camelCase naming conventions. For instance, class becomes className, and tabindex becomes tabIndex.

App.js

</>
Copy
import React from 'react';

function App() {
  const user = 'Arjun';
  return (
    <div className="container">
      <h1>Welcome, {user}!</h1>
    </div>
  );
}

export default App;

Here, className and tabIndex are used as attributes in JSX.

index.css

</>
Copy
body {
  margin: 0;
  padding: 1rem;
}

.container {
  padding: 1rem;
  background-color: yellow;
}

Output

3 Self-Closing Tags

Elements without children must be self-closed in JSX, similar to XML syntax.

App.js

</>
Copy
import React from 'react';

function App() {
  return (
    <div>
      <img src="logo192.png" alt="Logo" />
      <br />
    </div>
  );
}

export default App;

Both <img /> and <br /> are self-closing tags in this example.

Output

4 Conditional Rendering

JSX doesn’t support if-else statements directly within the markup. Instead, use ternary operators or logical && operators for conditional rendering.

</>
Copy
import React from 'react';

function App() {
  const isLoggedIn = true;
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please sign in.</h1>
      )}
    </div>
  );
}

export default App;

Depending on the value of isLoggedIn, a different message is displayed.

Output

Change const isLoggedIn = false; and you would get the following output.

5 Lists and Keys

When rendering lists of elements, each item should have a unique key attribute to help React identify which items have changed, been added, or removed.

App.js

</>
Copy
import React from 'react';

function App() {
  const fruits = ['Apple', 'Banana', 'Cherry'];
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}>{fruit}</li>
      ))}
    </ul>
  );
}

export default App;

Each <li> element is assigned a unique key based on its index in the array.

Output

6 Event Handling

Event handlers in JSX are written in camelCase and passed as functions. For example, onclick in HTML becomes onClick in JSX.

App.js

</>
Copy
import React from 'react';

function App() {
  const handleClick = () => {
    alert('Button clicked!');
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
}

export default App;

Clicking the button triggers the handleClick function, displaying an alert with the message ‘Button clicked!’.

Output