React JSX

In the realm of React, JSX, or JavaScript XML, is a powerful syntax extension. It provides a familiar and concise way to describe the structure of your user interface. JSX resembles HTML, making it a natural choice for writing React components.

Coding in JSX

In the early days of React, creating HTML elements involved using methods like createElement() or appendChild(). Let's contrast the old and the new:

// Traditional way with React.createElement()
const elem = React.createElement('h1', {}, 'Hello World!');

And the modern, more direct approach using JSX:

// Using JSX
const elem = <h1>Hello World!</h1>;

This simplicity in syntax enhances the readability and writability of React components.

Expressions in JSX

One of the key features of JSX is the ability to embed expressions within curly braces {}. This opens up a world of possibilities for dynamic content.

Mathematical Operations

const elem1 = <h1>React was released in {2010 + 3}</h1>;
const elem2 = <p>2 + 2 equals {2 + 2}</p>;

Variables/States

const name = "rJ";
const role = "Developer";
const elem3 = <h1>{name} is a {role}</h1>;

Ternary Operators

const isLoggedIn = true;
const userGreeting = isLoggedIn ? "Welcome back!" : "Please log in";
const elem4 = <h1>{userGreeting}</h1>;

Mapping Arrays

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

Embracing expressions in JSX allows for the seamless integration of variables, states, and even complex operations.