Introducing JSX in React

In React, we use a syntax extension of JavaScript called JSX (JavaScript XML) to build our user interfaces. JSX allows us to write HTML-like code directly within JavaScript.

JavaScript within HTML

One of the great things about JSX is that it combines the power of JavaScript with HTML. We can use JavaScript expressions and logic directly within the HTML-like code. To embed JavaScript, place it within curly braces, like this: { JavaScript code }.

How JSX Works: An Example

Let's see JSX in action with a simple example. Suppose we want to render a heading element in the React app:

In this example, we're using JSX to create a const called element that holds an <h1> element with the text "Hello, React!".

Note

Under the hood, React takes this JSX code and efficiently renders it to the DOM, making it a seamless and powerful way to build user interfaces.