This content originally appeared on DEV Community and was authored by The Nerdy Dev
Hey guys 👋🏻,
In this post, let us learn what JSX is in React and why it is important for us as React developers to understand it.
In this post, let us understand
âś” What is JSX ?
âś” Example of JSX
âś” JSX code being equivalent to React.createElement calls.
âś” JSX Restrictions
What is JSX ?
JSX is a syntax extension to JavaScript. *It is used to write HTMLish code in JavaScript files which later gets transpiled to normal JavaScript by our development workflow.
Example of JSX
In the above example, you can see we are returning HTMLish kind of code from our component function. personName is a variable that we are interpolating right inside the template of our component. This in the end gets transpiled to JavaScript.
Before Transpilation
After Transpilation
JSX code is nothing but multiple calls to the React.createElement method to build up the HTML for our component.
JSX Restrictions
It allows us to write HTMLish code that we write in JavaScript files.
It enforces restrictions on some keywords that we cannot use like class, for etc that are reserved keywords in JavaScript. We have equivalents for them though.
JSX expression must have exactly one root element and it is under this root element that you nest your JSX code.
So this is it for this article. Thanks for reading.
Don't forget to leave a like if you loved the article. Also share it with your friends and colleagues.
This content originally appeared on DEV Community and was authored by The Nerdy Dev
The Nerdy Dev | Sciencx (2021-11-17T09:10:37+00:00) React.js – JSX. Retrieved from https://www.scien.cx/2021/11/17/react-js-jsx/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.