React JS: JSX - School4Tech

JSX stands for JavaScript XML.
it let you create and add HTML code in react.
It was introduced by Facebook as a way to simplify the creation of user interfaces in React.
JSX is not natively understood by JavaScript engines, so it needs to be transformed into regular JavaScript code before it can be executed. This is typically done using a transpiler such as Babel.

With JSX, you can write components that look like this:

index.js

In this example , App is function based component of react which return HTML wrapped inside div .

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

function App() {

  return (
    <div>
      <h1>Hello, World!</h1>
      <p>This is a example of expression in JSX.</p>
    </div>
  );
}

const root = ReactDOM.createRoot(document.getElementById("root"));   //creating a root React component in your application

root.render(<App />)                                                 // rendering React components into a DOM node.

import React from 'react';

import ReactDOM from 'react-dom/client';

function App() {

return (

<div>

<h1>Hello, World!</h1>

<p>This is a example of expression in JSX.</p>

</div>

);

}

const root = ReactDOM.createRoot(document.getElementById("root")); //creating a root React component in your application

root.render(<App />) // rendering React components into a DOM node.

Output:

Another Example : JavaScript expression within JSX: