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.
Use the share button below if you liked it.
It makes me smile, when I see it.