Introduction of JSX

const element = <h1> Hello, world! </ h1>;

This weird tag syntax is neither a string nor HTML.
This is a JavaScript syntax extension called JSX.

READ ALSO

If you want to learn React JS within 3 months, the following 8 basics must first be known

December 22, 2020

16

Pathway to learn javascript to reactjs

December 21, 2020

16

JSX has all the functionality of JavaScript and is
used to describe what the UI looks like.

JSX creates React “elements”.
In the next article, I will write about “How to convert React elements to DOM”.

Below, you’ll learn the basics you need to get started with JSX.

Preface: Reasons to use JSX

The logic for display is

・ Response to events, changes in state over time,
・ How to prepare data for screen display

It’s essentially a combination of other UI logic, such as, and
React accepts that fact.

Rather than writing markup and logic in separate files to artificially separate technologies,
React uses loosely coupled “components” that contain both markup and logic to separate interests.

If you don’t like writing markup in JavaScript at this point,
this discussion may change your mind.

Using JSX with React isn’t required, but
most people find
JSX to be visually useful when dealing with the UI in JavaScript code .
Also, because of JSX,
React can display more useful errors and warnings.

JSX Prevents Injection Attacks
It is safe to embed user input in JSX:

const title = response.PotentiallyMaliciousInput ; 
// This IS safe: 
const element = <h1>{title}</h1> ;

By default, the React DOM escapes values ​​embedded in JSX before rendering.
This guarantees that any code that is not explicitly written in your application cannot be injected.

Everything is converted to a string before rendering.
This helps prevent XSS (cross-site-scripting) attacks.

Tip:
We recommend that you use the “Babel” language definition in your editor to ensure that ES6 and JSX are properly highlighted
.