What is JSX?

• In this article, we will learn together about what ReactJS JSX is, what it does and how it is structured. Why look like HTML but don’t call it HTML, what makes it different?
• Let’s find out together

What Happens with JSX?

• In this article, what we are interested in is what happens after we write a JSX paragraph. The way the browser understands JSX and converts it into regular HTML.
• Let’s take a look at an example of a component Card:

• At first glance we know right away what is the JSX syntax:

• We already know that our web browsers can’t understand JSX code, they don’t even know what JSX is. Even if we try to attach a specific description of JSX, that is why we need to use the Babel library to translate JSX into something the browser can understand: Javascript.
• That means the above JSX code after translation, it will become a pure Javascript like this:

• All components, this property is called in the createElement constructor with initialization values. And here is the whole JavaScript code of the component Card after converting into javascript:

• And that answers our original question, how does one of our JSX snippets work? It will be transformed from JSX to Javascript in a very friendly way.

Evaluating Expressions

• JSX is similar to Javascript. And of course JSX also doesn’t have to bind us to fixed content:

• We can still do a few other things, such as giving a random number, our job is to put that expression into braces {}.

• And of course Math.random () * 100 is an expression that takes a random number, and if we don’t include it in {}, it will just be a piece of text. This reminds only everyone knows it.

Returning Multiple Elements

• In many previous examples. We often return elements, like a div. We can actually do more like return on many different elements.
• There are 2 possible ways to do so:
• The first way is that we use the same syntax as Array:

• Above, we return 3 ‘p’ tags, Between them there is no common 1 element. Now we will return so many times, and here one thing to note is that when returning 3 p tags they have nothing to distinguish so it can be confusing in the purpose of reuse later. this.
• So we should add one key to distinguish them:

• This helps React understand, specifically in each element that you return, which is changing, which is not. And of course if we don’t need to do anything, we don’t need to add the Key. If you forget, React will also remind you through the Dev Tools Console.
• Something like: Warning: Each child in an array or iterator should have a unique “key” prop.
• The second way we can do it, not to declare the type [] is to use React.Fragment.
• The code above will become:

• But there are a few things to keep in mind when using Fragment:

1. This component does not actually generate a DOM element, they are just a JSX and cannot be converted into HTML.
2. It doesn’t have the syntax like an Array, so we write them without using the sign
3. No need to specify a key.
4. Instead of calling <React.Fragment and </ React.Fragment> we write simply as <> and </>.

Can’t Specify CSS Inline

• In the previous post about styling in React we know that JSX is different from HTML and you won’t be able to write inline CSS like:

With JSX, we have to define it separately:

Comment code

• Regarding block comments, JSX is similar to JS. But notice a little bit, if we comment into an element then we still have to add the braces {} to React know this is the comment part.

• And if used for multiple lines and inside a tag, it will look like this:

Conclude

• In this article, we have a quick look at how our browser can understand JSX and some notes when using JSX. It looks like HTML but it is not.
• Thank you for watching and have a great day!