Core React Concept: JSX
Tags: react, javascript, codenewbie, beginners
Published: 2021-05-08 11:47:21

Hello Fellow Codenewbies 👋,

Say we want to create an element in DOM that has not existed yet and append it to a `<div>` with an `id` called `root`.
Then this is what we would do in vanilla Javascript:

HTML:
```html
<body>
  <div id="root"></div>
</body>
``` 

Javascript:
```javascript
const root = document.getElementById('root')
const h1 = document.createElement("h1")

h1.innerHTML = "Hello World"
root.appendChild(h1)
``` 
React has a unique syntax called JSX which will benefit us from writing long codes as above.

---

## What Is JSX?

[JSX](https://reactjs.org/docs/introducing-jsx.html) is a syntax extension to JavaScript.
It allows us to *combine UI with Javascript logic* in a Javascript file.

```jsx
ReactDOM.render(<h1>Hello World</h1>, document.getElementById("root"))
``` 

We have a `<h1>` tag inside Javascript's method in the example above.
We tell JSX to "render `<h1>` in an element with `id` of `root`."

✏ **Notes:**
Please read [the previous post](https://adiati.com/reactdomrender), if you haven't, to understand how `ReactDOM.render()` works.


Since JSX combines HTML and Javascript, we need [Babel](https://babeljs.io/) to translate JSX and render the HTML onto the page.

- When we use CDN, we need to include Babel's CDN.
    ```html
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    ``` 

- We need to import the React library to enable Babel when using the `create-react-app` package.
    ```javascript
import React from 'react'
    ``` 


✏ **Side Note:**
It's optional, but we can save files that contain JSX codes as `.jsx` instead of `.js` (e.g.: `Header.jsx`). That way, we are aware that the files contain JSX codes.


## Many Elements In JSX
It's important to note that we *cannot* have more than one element next to each other in JSX.
When we have many elements to render, we need to *wrap* those elements inside an opening and closing tag.
Some developers use fragments (`<>...</>`), and some use `<div>...</div>` as a wrapper.
For accessibility purposes, we better use fragments because they won't give extra `<div>`. Thus, it's less confusing for people who use screen readers.

```jsx
const element = (
  <>
    <h1>Hello World</h1>
    <p>How are you?</p>
  </>
)

ReactDOM.render(element, document.getElementById("root"))
``` 
For the readable purpose, it's common practice to wrap a return JSX code in `()`.

Anything inside the opening and closing wrapper tag are called [children property](https://reactjs.org/docs/jsx-in-depth.html#children-in-jsx).

## Closing Tag
JSX is more strict than HTML.
One basic rule of JSX is that **every element has to have a closing tag**.
Think about HTML tags such as `<input>`, `<img>`, `<br>`, `<hr>`, and so on.
In JSX, we have to close those tags. Otherwise, we will get syntax errors.
```javascript
const element = (
  <>
    <h1>Hello World</h1>
    <br />
    <p>How are you?</p>
    <input type="text" placeholder="Type your message" />
    <button>Submit</button>
  </>
)

ReactDOM.render(element, document.getElementById("root"))
``` 


## Embedding Javascript In JSX

In the previous example, we hardcoded the heading and the paragraph.
What if we want to be able to change a value dynamically?
Writing Javascript inside `{}` allows us to run Javascript functions and methods.
We can see it as a separator between Javascript and HTML.

```jsx
const title = "Random Number"
function randomNum() {
  return Math.floor((Math.random() * 10) + 1)
}

const myNum = (
  <div>
      <h1>{title}</h1>
      <h2>My number is: {randomNum()}</h2>
  </div>
)

ReactDOM.render(myNum, document.getElementById("root"))
``` 

Now, the `<h1>` will get updated when we change the title. And whenever we refresh the page, there will be a random number generated.

✏ **Important Notes:**
Whatever comes inside `{}` should be a [Javascript expression](https://flaviocopes.com/javascript-expressions/).

## Conclusion
- JSX is a syntax that allows us to type an HTML-like code directly in Javascript.
- Basic rules of JSX:
  - Have an explicit closing tag: `<p>...</p>`.
  - Self-closed: `<input />`.
  - Have a wrapper when there are many JSX elements; 
    `<>...</>` or `<div>...</div>`
  - Writing Javascript inside `{}` allows us to use Javascript logics in JSX. And the logic inside `{}` should be a Javascript expression.

---

Thank you for reading!
Last but not least, you can find me on [Twitter](https://twitter.com/AdiatiAyu). Let's connect! 😊