Understanding JSX

JSX stands for JavaScript XML. It allows you to write HTML-like syntax directly within JavaScript, making your code more readable and declarative. While it looks similar to HTML, JSX has the full power of JavaScript, enabling you to embed expressions and manipulate the DOM efficiently.

• JSX syntax is straightforward but has some differences from HTML:
  • You can use JavaScript expressions within JSX by wrapping them in curly braces {}.
  • JSX tags must be properly closed, either with a closing tag (</>), or self-closing for elements with no children (< />).
    
  Here’s an example of JSX syntax:

const element = <h1>Hello, world!</h1>;

This is how you would render this element using React:

import React from 'react';
import ReactDOM from 'react-dom';

const element = <h1>Hello, world!</h1>;

ReactDOM.render(element, document.getElementById('root'));

One of the powerful features of JSX is the ability to embed JavaScript expressions directly within your markup. This is done by wrapping the expressions in curly braces {}.

For example:

const name = 'Niraj';
const element = <h1>Hello, {name}!</h1>;

This will render as:

<h1>Hello, Niraj!</h1>

You can also embed more complex expressions:

const user = {
  firstName: 'Niraj',
  lastName: 'Kumar'
};

const element = <h1>Hello, {user.firstName} {user.lastName}!</h1>;

This allows you to dynamically render content based on your application’s state or props.

JSX supports attributes similar to HTML. These attributes can be used to pass data to components, just like props in React.

For example:

const element = <img decoding="async" src="logo.png" alt="Logo" />;

Notice the use of camelCase for attributes, like className instead of class and onClick instead of onclick.

Children in JSX

JSX allows you to nest elements inside other elements, enabling you to build complex structures.

For example:

const element = (
  <div>
    <h1>Hello, world!</h1>
    <p>Welcome to learning React.</p>
  </div>
);

This nests a <h1> and a <p> element inside a <div>, creating a parent-child relationship.

JSX can also contain JavaScript expressions as children:

const items = ['Apple', 'Banana', 'Cherry'];
const element = (
  <ul>
    {items.map((item) => (
      <li key={item}>{item}</li>
    ))}
  </ul>
);

Here, the map function iterates over an array of items and returns a list of <li> elements. Each list item is assigned a unique key attribute, which is crucial for performance and managing dynamic lists in React.

JSX is a powerful and flexible syntax that blends HTML-like structure with JavaScript’s capabilities. It makes writing and understanding React components easier and more intuitive. By leveraging JSX, you can create dynamic, interactive UIs efficiently and effectively. As you continue to explore React, you’ll see how JSX plays a central role in building and managing your application’s user interface.

Next, we’ll dive into components, the building blocks of any React application, and learn how to create and use them effectively.