What’s JSX in React?
One of the first concepts you will stumble upon when working with React is JSX. It stands for JavaScript XML and is a syntax extension to JavaScript that is used to help us define our UIs.
JSX might seem similar to other templating systems, but keep in mind that whereas in other templating systems, we have an HTML-first approach, here we have the full power of JavaScript at our hands!
This article has been initially published here.
Introduction
You can imagine JSX as being a combination of HTML and JavaScript, as that’s what it basically is.
A snippet of JSX would look something like this:
const element = <div>Hello, JSX</div>Why JSX?
React fully embraces the fact that rendering logic is tightly coupled with other UI logic. That’s reflected in caring about how events are handled, how the state changes over time, and how the data is being prepared for being displayed.
Instead of artificially separating technologies by putting markup and logic in separate files (creating separate .css, .html, .js files), React separates concerns with loosely coupled units called components that contain both.
