JSX in React

JSX stands for JavaScript XML. It's a syntax extension for JavaScript that allows us to write HTML-like code within React components. JSX makes it easier and more intuitive to integrate HTML structures and elements into React applications.

What is JSX?

JSX allows developers to write HTML directly within their JavaScript code, blending the two seamlessly. This approach simplifies the process of creating React components by combining the UI markup and logic in a single file.

How to Write JSX in React

To use JSX in React, you simply write HTML elements within JavaScript code.

const Index = () => {
  return <h1 className="title">React App</h1>;
};

In the above example, we define a functional component Index that returns a JSX element <h1> with the class name title. the <h1> element is written inside the return statement of a JavaScript function, making it straightforward to include HTML in your React components.

Rendering Multiple Elements inside JSX

Rendering multiple elements within JSX or by enclosing them within a parent element. Here's an example:

const Index = () => {
  return (
    <div className="parent">
      <div className="container">
        <h1 className="title">React App</h1>
        <p>Lorem ipsum dolor, sit amet consectetur elit.</p>
      </div>
    </div>
  );
};

In this examples, we use a div tag with parent class name to enclose multiple elements, including a <div> with a class name container, an <h1> element, and a <p> element.

By leveraging JSX, developers can build dynamic and interactive user interfaces efficiently within React applications.