# Core React Concept: JSX Hello Fellow Codenewbies 👋, Say we want to create an element in DOM that has not existed yet and append it to a `
` with an `id` called `root`.
Then this is what we would do in vanilla Javascript: HTML: ```html
``` 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(

Hello World

, document.getElementById("root")) ``` We have a `

` tag inside Javascript's method in the example above.
We tell JSX to "render `

` 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 ``` - 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 `
...
` as a wrapper.
For accessibility purposes, we better use fragments because they won't give extra `
`. Thus, it's less confusing for people who use screen readers.
```jsx const element = ( <>

Hello World

How are you?

) 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 ``, ``, `
`, `
`, and so on.
In JSX, we have to close those tags. Otherwise, we will get syntax errors. ```javascript const element = ( <>

Hello World


How are you?

) 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 = (

{title}

My number is: {randomNum()}

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

` 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: `

...

`. - Self-closed: ``. - Have a wrapper when there are many JSX elements;
`<>...` or `
...
` - 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! 😊