JSX stands for JavaScript XML. So what does that mean? It basically means we can write HTML in React. This came as a surprise but also a relief at first. It was nice to see that one of the first concepts a web developer learns, HTML, we can revisit when doing much more complicated things, like creating something using React.
So why should we use JSX? According to the React documentation found of reactjs.org, “React embraces the fact that rendering logic is inherently coupled with other UI logic: how events are handled, how the state changes over time, and how the data is prepared for display. React doesn’t require using JSX, but most people find it helpful as a visual aid when working with UI inside the JavaScript code. It also allows React to show more useful error and warning messages.”
So how to we write JSX in React? Here is an example:
We can also use expressions in JSX. The expression can be a variable, any valid JavaScript expression, or property. Below is an example of an expression in JSX:
This is just a short introduction to JSX in React. Hope you enjoyed reading! Check out the links below to get a little more of an in depth look at all that JSX and React are about!
