JSX

What is JSX?

JSX stands for JavaScript XML.JSX is an HTML or not it's a fun tag syntax. Looks like an HTML tag, it is converted to JavaScript.

Many might think it might be HTML, but it's actually JSX. This is a syntax extension of JavaScript. It comes from the full power of JavaScript.This allows us to write HTML in React.

One of the requirements, when you start learning React, is to learn JSX. The first time you look at the syntax when you are new to it, you will see that it is a mixture of JavaScript and HTML. Here I show an example;

const heading = <h1>Hello World</h1>
      console.log(heading)

JSX is popularly used in React, i.e. between JSX and HTML syntax, I will try to show some differences.

Use className instead of just class attributes:

As you can see in JSX we use the className attribute, but in HTML we only use the class attribute. This is because JSX is converted to JavaScript and the class is a saved word in JavaScript.

Example: JSX

<div className="container">
     <h1 className="heading">Hello World</h1>
<div

Example: HTML

<div className="container">
     <h1 class="heading">Hello World</h1>
<div

Self-closing tags:

JSX must have a forward slash on self-closing tags whereas a forward slash is optional on HTML self-closing tags.

Example: JSX

<div className="container">
   <img src="#" alt="" />
   <br/>
<div

Example: HTML

<div className="container">
   <img src="#" alt="" >
   <br>
<div

Event listeners:

In JSX, event listeners have to type in camelcase, such as onClick, on the other hand, in HTML, in lowercase letters, for example, onclick.

If you want to know more about JSX in a more detailed way, I recommend you You can follow the documentation of React.

Why JSX is popular with developers?

JSX is one of the best features that not only make ReactJS easier, it also makes it a lot more fun. Developers can easily create a new UI feature and display it in real-time. It can bring HTML directly to your JS. A component is given to developers to break the complex UI.So JSX is very popular with all developers today.

What are the props in React?

Props mean "property". They are reading components only. It is an object that stores the value of the tag attribute and acts as an HTML attribute. It provides a way to transmit data from one component to another.

Props work that way

What is the state in React?

The State is a JavaScript object that is capable of storing the component's dynamic data. It can keep track of changes in a component's render. Since the state dynamically reserves it only for interactivity, you should not use it for static react projects.