How does JSX work in React.js?

 JSX is a syntax extension for JavaScript that allows developers to write HTML-like elements in their JavaScript code. It is used in React.js to create and manipulate the elements of a user interface.

When a JSX file is transpiled, it is converted into plain JavaScript that can be understood by the browser. The transpiler replaces the JSX elements with JavaScript function calls that create the corresponding HTML elements.

For example, the following JSX code creates a div element with a class of "container" and a child h1 element with the text "Hello World":

const element = <div className="container"> <h1>Hello World</h1> </div>;

When this code is transpiled, it becomes the following JavaScript:

const element = React.createElement("div", { className: "container" }, React.createElement("h1", null, "Hello World") );

This JavaScript code creates a div element with a class of "container" and a child h1 element with the text "Hello World" using the React.createElement function.

Another example is when we want to create a list of items in a component, we can use JSX to create the list by iterating over an array of data and creating list items for each element in the array:

const items = ["item 1", "item 2", "item 3"]; const List = () => { return ( <ul> { items.map((item, index) => ( <li key={index}>{item}</li> ))} </ul> ); };

In this example, the JSX code maps over the items array and creates a list item for each element in the array. The resulting JavaScript code creates a ul element and multiple li elements with the text of each item in the array.

In conclusion, JSX allows React developers to write HTML-like elements in their JavaScript code and transpiles it into JavaScript that can be understood by the browser and create the corresponding HTML elements. This enables developers to create and manipulate the elements of a user interface in a more efficient and expressive way.