What is JSX?

We have written some pieces of JSX in this lectures already but what actually is JSX and why is it such a big deal in React?

Well, when we first talked about components, we talked about how a component contains its own data, logic, and appearance. And that makes sense, right?Because if a component is a piece of the user interface, it means that we must be able to describe exactly what that component looks like. And so that’s where JSX comes into play.

So, JSX is a declarative syntax that we use to describe what components look like and how they work based on their data and logic. So, it’s all about the components appearance.

In practice, this means that each component must return one block of JSX, which React will then use to render the component on the UI.

Now, looking at this code, this JSX looks a lot like HTML, right? But in fact, JSX is an extension of JavaScript, which allows us to combine parts of HTML, CSS, and JavaScript all into one block of code. So basically, we can write HTML and embed some pieces of JavaScript where necessary, for example, to reference some JavaScript variables and we can even reference other React components so that we can then combine Nest and reuse multiple components.

But now, you might be thinking if React is a JavaScript framework then how will it understand this HTML looking code?

Well, remember that JSX is just an extension of JavaScript, which means that there is a simple way of converting JSX to JavaScript. This is done by a tool called Babel, which was automatically included in our application by Create-React-App. And the result of this conversion looks something like this code on the right where each JSX element was converted to a React.createElement function call. And does this look familiar? Well, I hope it does because this is exactly what we returned from the app component in the pure React lecture. So in that lecture where we couldn’t use JSX because we didn’t have that Babel tool. But anyway, this conversion is necessary because browsers of course, do not understand JSX. They only understand HTML. So behind the scenes, all the JSX that we write is converted into many nested React.createElement function calls. And these function calls are what in the end, create the HTML elements that we see on the screen.

Now, what this means is that we could actually use React without JSX at all. So, we could just manually write these createElement functions instead of JSX but that doesn’t look like a lot of fun, right? It also makes the code really hard to read and to understand. And so, actually, everyone just uses JSX.

Alright, so now that we know what JSX is all about, let’s go back to that first paragraph where I say that JSX is a declarative syntax.

So, what does it actually mean that JSX is declarative?

Well, before we can understand what declarative means, we first have to review what imperative means.

So when we try to build UIs using vanilla JavaScript, we will by default use an imperative approach. This means that we manually select elements, traverse the DOM, and attach event handlers to elements. Then each time something happens in the app like a click on the button, we give the browser a step-by-step instructions on how to mutate those thumb elements until we reach the desired updated UI.

So in the imperative approach, we basically tell the browser exactly how to do things. However, doing this in a complex app is completely unfeasible for all the reasons that we have learned about before. And remember that that’s the reason why frameworks like React exist in the first place and it’s why React chose to use a declarative approach to building user interfaces.

DECLARATIVE APPROACH,

So, a declarative approach is to simply describe what the UI should look like at all times, always based on the current data that’s in the component. And we will soon learn that this data is props and state. And so again, basically, we use JSX to describe the UI based on props and state. So the data that’s currently in the component and all that happens without any DOM manipulation at all. So, there are no Query selectors, no ad event listeners, no class list, no text content properties anywhere to be seen here because in fact, React is basically a huge abstraction away from the DOM, so that we, developers never have to touch the DOM directly. Instead, we think of the UI as a reflection of the current data and let React automatically synchronize the UI with that data.

So in essence, the difference between imperative and declarative is that in the declarative approach, we use JSX to tell React what we want to see on the screen but not how to achieve it step-by-step. React can figure that out on its own, basically. And this has many, many advantages as we will see throughout the lectures.

BONUS SUMMARIZE FOR ME: