ReactJs - JSX

1. ReactJs : Tutorial-02-JSX
What is JSX?
 JSX is an extension to javascript.
 It is a template script where you will have the power of using HTML and Javascript
together.
Here is a simple example of a JSX code.
const h1tag = "<h1>Hello, from RTDL Tutorials!</h1>";
Why we need JSX in React?
For a UI, we need Html, and each element in the DOM will have events to be handled, state
changes, etc.
In case of React, it allows us to make use of Html and javascript in the same file and take care
of the state changes in the DOM in an efficient manner.
Expressions in JSX
index.js
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
<h1>Hello, from RTDL Tutorials!</h1>,
document.getElementById('root')
);
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const display = "Hello, from RTDL Tutori
als!";
const h1tag = "<h1>{display}</h1>";
ReactDOM.render(
h1tag,
document.getElementById('root')
);
The Output will show the line as

2. ReactJs : Tutorial-02-JSX
What is the solution of this?
Create a text.jsx file and put the code in the file.
Import the test.jsx file in to index.js file and use it.
test.jsx
import React from 'react';
import ReactDOM from 'react-dom';
const display = "Hello, to RTDL Tutorial
s";
const h1tag =<h1>{display}</h1>;
export default h1tag;
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import h1tag from './test.jsx';
ReactDOM.render(
h1tag,
document.getElementById('root')
);
Check the same in the browser: http://www.localhost:3000/index.html
Difference between js and jsx files
ReactJS - .JS vs .JSX
There is none when it comes to file extensions. Your bundler/transpiler/whatever takes care of
resolving what type of file contents there is.
There are however some other considerations when deciding what to put into a .js or a .jsx file
type. Since JSX isn't standard JavaScript one could argue that anything that is not "plain"
JavaScript should go into its own extensions ie., .jsx for JSX and .ts for TypeScript for example.