# Using JSX
### What is JSX
It is a **syntax extension** for JS. It was written to be used with React. A basic unit of JSX is called a JSX **element**.
This element looks exactly like HTML, expect that we find it in a JS file instead of a HTML file.
```
const h1 =
Hello world
```
Syntax extension means that JSX is not valid JS. Web browsers can't read it. If a JS file contains JSX code, that file will need to be **compiled**.
#### **CODING TIME**
* Create an `index.html` and `index.js` file
{% code title="index.html" %}
```
First React
console.log(element);
ReactDOM.render(element, document.getElementById("root"));;
```
When you run this, you will see an error in the console:
In order for JS to read it, we need to use Babel (a compiler for JS) which takes in next generation JS syntax and compiles (transforms) them into valid JS that your browser can understand.
Think of Babel as a translator which converts React JSX to JS.
We add Babel by making the following changes to your `index.html`
```
First React
First React
```
Now your code should work!
#### **🏆CODING TIME COMPLETED**
### JSX Elements & Their Surroundings
JSX elements are treated as JS **expressions**. They can go anywhere that JS expressions can go. This means that JSX elements can be saved in a variable, passed to a function, stored in an object, etc.
Example of JSX element in a variable:
```
const navBar = ;
```
Example of JSX element in an object:
```
const myTeam = {
center:
Benzo Walli
,
powerForward:
Rasha Loa
,
smallForward:
Tayshaun Dasmoto
,
shootingGuard:
Colmar Cumberbatch
,
pointGuard:
Femi Billon
};
```
### Attributes in JSX
JSX elements can have **attributes** similar to HTML elements. A JSX attribute written using HTML-like syntax:
```
Welcome to the Web;
const title =
Introduction to React.js: Part I
;
```
A single JSX element can have many attributes:
```
const panda = ;
```
### Nested JSX
Just like HTML, you can also nest JSX elements. But if it takes up more than one line, you will need to wrap the multi-line JSX expression in parentheses:
```
(
);
```
*Note: We use parentheses around multi-line JSX expressions to avoid JS automatic semicolon insertion which adds semicolons to terminate statements which we don't necessarily want that behaviour in a JSX expression.*
### JSX Outer Elements
A JSX expression must have exactly ONE outermost element. The first opening tag and the final closing tag of a JSX expression must belong to the same JSX element.
This code will not work:
```
const paragraphs = (
I am a paragraph.
I, too, am a paragraph.
);
```
We need to add an element outside like this:
```
const paragraphs = (
I am a paragraph.
I, too, am a paragraph.
);
```
### Rendering JSX
To render a JSX expression means we are making it appear onscreen:
```
import React from 'react';
import ReactDOM from 'react-dom';
ReactDOM.render(
Hello world
, document.getElementById('app'));
```
Output:
`ReactDOM` is the **name** of a JS library. This library contains several React-specific methods.
`ReactDOM.render()` **renders** the JSX. It takes a JSX expression, creates a corresponding tree of DOM nodes, and adds that tree to the DOM.
`
Hello world
` is the **argument** being passed to `ReactDOM.render().`
`document.getElementById('app')` acted as a container for `ReactDOM.render()`'s first argument.
`ReactDOM.render()` first argument should evaluate to a JSX expression, which means it can also be a variable:
```
const toDoList = (
Learn React
Become a Developer
);
ReactDOM.render(
toDoList,
document.getElementById('app')
);
```
The compiling is handled by [Babel](https://babeljs.io), a JS compiler. It converts ECMAScript intro a backwards compatible version of JS in current and older browsers or environments.
---
# Agent Instructions: Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter:
```
GET https://chrysalis-1.gitbook.io/sei-ga-web-development-notes/react/using-jsx.md?ask=
```
The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
;
```
### Nested JSX
Just like HTML, you can also nest JSX elements. But if it takes up more than one line, you will need to wrap the multi-line JSX expression in parentheses:
```
(