JSX Basics in React

In React, we use a syntax extension of JavaScript called JSX (JavaScript XML) to build our user interfaces. JSX allows us to wriReact components describe what the user interface should look like. To do this, React uses a syntax called JSX.

JSX looks similar to HTML, but it is written inside JavaScript. It allows you to describe UI elements directly in your component code instead of building them step by step with JavaScript.

Even though JSX looks like HTML, it is not HTML. Under the hood, JSX is converted into JavaScript that React understands. This makes JSX both expressive and powerful while still being part of the JavaScript language.

In JSX, you can embed JavaScript expressions directly inside the markup. This makes it easy to display dynamic data and control what appears on the screen. Below is the same component as before, now shown with JSX:

function Welcome() {
  const name = "React";
  return <h1>Welcome to {name}</h1>;
}

Here, JSX is used to describe the UI. The {name} syntax allows JavaScript values to be inserted into the UI. React automatically updates the displayed output when the data changes.