Introduction to JSX

It is known as JavaScript XML and also known as JavaScript Syntax Extension.

Its main benefit is it allows us to write HTML in React. JSX is an extension of JavaScript. It's based on ECMAScript 2015(ES6). It is faster than regular JavaScript. We can write HTML code easily in React and it gives more functionality of JavaScript. It comes with the full power of JavaScript in a simple language.

JSX was introduced by React in 2023. Over time, JSX has become a fundamental part of React's approach to building user interfaces. It reduces development time.

JSX is easy for developers but browsers can't understand JSX. In short, at that time new questions arise. JSX is not part of JavaScript? How does JSX work in React if the browser doesn't understand JSX? How JSX is compiled? How does it work simply in react?

Babel solves all these questions. It's a JavaScript Compiler. It helps to convert the ECMAScript 2015+ version's code into core JavaScript.

So how has it helped us with JSX?

In JSX Babel converts HTML code in core Javascript. So, the browser easily understands core JavaScript. And our JSX code easily compiles and runs. A big confusing task becomes easy with the help of Babel.

With its help, the developer's work became very easy and fast.

Let's take some examples,

return (
				<h1> This is Example of JSX </h1>
		) 

We can write CSS in JSX code and make our website interactive.

<div className="testmonial">
  <p> This is Example of JSX with CSS</p>
</div> 

Another big benefit of JSX is we can write JavaScript expressions in JSX. Let's understand it through an example.

return(
        <div> { 5 + 5 } </div>
      ) 

Hear, used {} (curly braces ) for JavaScript expressions. Using them easily write expressions in JSX. And it returns the answers. In the above example, it returns 10 in Output. It easily worked.

We can also use conditional expressions in JSX, yes, we can use if else statements in JSX but JSX can't support if else syntax. instead of an if-else statement, we can use the ternary operator in JSX. Let's take a simple example of a ternary operator in JSX.

const Demo = () => {
   const num = 5;
   return (
     <div>
       <h1>{ num === 5 ? 'true' : 'false' }</h1>
     </div>
   );
} 

num === 5 is checked as the correct value. if this condition returns true then it returns true otherwise returns false. In the above example, it returns true in the answer. You can see that everything is done smoothly and easily.

One important thing, you need your JSX code wrapped in an enclosing tag.

return(
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
      ) 

The above example Is not good for writing in JSX code. Let's revise and rewrite it.

return(
        <div>
        <div>One</div>
        <div>Two</div>
        <div>Three</div>
        </div>
      ) 

Otherwise, you can use opening <> and closing </> tag. This is the best solution for wrapping tags. Let's see how to use the opening and closing tags in JSX.

return(
        <>
            <section>
              <div>One</div>
              <div>Two</div>
            </section>
            <div>
              <img src="image-path" alt="" />
            </div>
         </>
       ) 

It is not mandatory to use JSX, we can also use JavaScript instead. But due to that, the code becomes lengthy and also seems complicated.

we can see that the above code of JSX is trying to convert into pure JavaScript.

React.createElement(React. Fragment, null, React.createElement("section", null, React.createElement("div", null, "One"), /React.createElement("div", null, "Two")), React.createElement("div", null, React.createElement("img", { src: "image-path", alt: "" }))); 

This seems very difficult to understand and writing is also difficult. So, JSX is very helpful to write in React and it's easy to understand.