Understanding JSX

JSX is a XML-like syntax extension to ECMAScript (the acronym stands for JavaScript XML). Basically it just provides syntactic sugar for the React.createElement() function, giving us expressiveness of JavaScript along with HTML like template syntax.

Before React V17, we have to use import React from "react" in every JavaScript file to use the React.createElement for creating an elemet.

We are using React.createElement for creating an elemet, But the code gets bigger and cumberstone when our line of codes increases. For solving the same we are using JSX. From v17 we don’t need to use use import React from "react" in every JavaScript file.

JSX Method

 return (
     <div>
       <h2>Let's get started!</h2>
       <Expenses expenses={expenses}/>    
     </div>
   );

Takes three elements are argument, first one is the element, next is the object of the attribuites of the element and last one is the list of elements inside the main element.

return React.createElement(
    'div',{},
    React.createElement('h2', {}, "Let's get started!"),
    React.createElement(Expenses, { expenses: expenses})
  )

Restrictions in JSX

• class keyword cannot be used.
• React is converting the JSX in the backend.
• Wrap element in a single root.