Intro to JSX

Let's examine the code that you just wrote in the last exercise.  

```js
const container = document.getElementById('app');
const root = createRoot(container);
root.render(<h1>Hello world</h1>);
```

Before we get started it is essential to understand that React relies on two things to render: what content to render and where to place the content.

With that in mind, let's look at the first line:

```js
const container = document.getElementById('app')
``` 

This line:
- Uses [the `document` object](https://developer.mozilla.org/en-US/docs/Web/API/Document) which represents our web page.
- Uses the `getElementById()` method of `document` to get [the `Element` object](https://developer.mozilla.org/en-US/docs/Web/API/Element) representing the HTML element with the passed in id (`app`).
- Stores the element in `container`.

In the next line:

```js
const root = createRoot(container)
```

we use `createRoot()` from the `react-dom/client` library, which creates a React root from `container` and stores it in `root`. `root` can be used to render a JSX expression. This is the "where to place the content" part of React rendering. 

Finally, the last line:

```js
root.render(<h1>Hello world</h1>)
``` 

uses the `render()` method of `root` to render the content passed in as an argument. Here we pass an `<h1>` element, which displays `Hello world`. This is the "what content to render" part of React rendering. 

Rendering JSX Explained

A basic unit of JSX is called a JSX *element*.
 
Here's an example of a JSX element:

```html
<h1>Hello world</h1>
```

This JSX element looks exactly like HTML! The only noticeable difference is that you would find it in a JavaScript file, instead of in an HTML file. 

JSX Elements

Congratulations! You've learned to create and render JSX elements! This is the first step toward becoming fluent in React. 

In this lesson, we learned that:
- React is a modular, scalable, flexible, and popular front-end framework.
- JSX is a syntax extension for JavaScript which allows us to treat HTML as expressions.
  - They can be stored in variables, objects, arrays, and more!
- JSX elements can have attributes and be nested within each other, just like in HTML.
- JSX must have exactly one outer element, and other elements can be nested inside.
- `createRoot()` from `react-dom/client` can be used to create a React root at the specified DOM element.
- A React root's `render()` method can be used to render JSX on the screen.
- A React root's `render()` method only updates DOM elements that have changed using the virtual DOM.
 
As you continue to learn more about React, you'll learn some powerful things you can do with JSX, some common JSX issues, and how to avoid them.

Review

*JSX* is a syntax extension for JavaScript. It was written to be used with React. JSX code looks a lot like HTML.

What does "syntax extension" mean?

In this case, it means that JSX is not valid JavaScript. Web browsers can't read it!

If a JavaScript file contains JSX code, then that file will have to be *compiled*. This means that before the file reaches a web browser, a *JSX compiler* will translate any JSX into regular JavaScript. 

Codecademy's servers already have a JSX compiler installed, so you don't have to worry about that for now. Eventually we'll walk through how to set up a JSX compiler on your personal computer.

What is JSX?

React.js is a JavaScript library developed by engineers at Facebook. Here are just a few of the reasons why people choose to program with React:
- React is *fast*. Apps made in React can handle complex updates and still feel quick and responsive.  
- React is *modular*. Instead of writing large, dense files of code, you can write many smaller, reusable files. React's modularity can be a beautiful solution to JavaScript's [maintainability problems](https://en.wikipedia.org/wiki/Spaghetti_code).
- React is *scalable*. Large programs that display a lot of changing data are where React performs best.
- React is *flexible*. You can use React for interesting projects that have nothing to do with making a web app. People are still figuring out React's potential. [There's room to explore](https://github.com/jiwonbest/amazing-react-projects).
 - React is *popular*. While this reason has admittedly little to do with React's quality, the truth is that understanding React will make you more employable. 

If you are new to React, then this course is for you—no prior React knowledge is expected. We will start at the very beginning and move slowly. By the end, you will be ready to program in React with a real understanding of what you're doing.

Why React?

In the previous exercise, we saw how we can create a React root using `createRoot()` and use its `render()` method to render JSX.

The `render()` method's argument doesn't need to be JSX, but it should *evaluate* to a JSX expression. The argument could also be a variable, so long as that variable evaluates to a JSX expression.

In this example, we save a JSX expression as a *variable* named `toDoList`. We then pass `toDoList` as the argument of `render()`:

```js
const toDoList = (
  <ol>
    <li>Learn React</li>
    <li>Become a Developer</li>
  </ol>
);

const container = document.getElementById('app');
const root = createRoot(container);
root.render(toDoList);
```

Passing a Variable to render()

There's a rule that we haven't mentioned: a JSX expression must have exactly *one* outermost element.

In other words, this code will work:

```js
const paragraphs = (
  <div id="i-am-the-outermost-element">
    <p>I am a paragraph.</p>
    <p>I, too, am a paragraph.</p>
  </div>
);
```

But this code will not work:

```js
const paragraphs = (
  <p>I am a paragraph.</p> 
  <p>I, too, am a paragraph.</p>
);
``` 

The *first opening tag* and the *final closing tag* of a JSX expression must belong to the same JSX element!
 
It's easy to forget about this rule and end up with errors that are tough to diagnose.

If you notice that a JSX expression has multiple outer elements, the solution is usually simple: wrap the JSX expression in a `<div>` element.

JSX Outer Elements

One special thing about a React root's `render()` method is that it *only updates DOM elements that have changed*.
 
That means that if you render the exact same thing twice in a row, the second render will do nothing:

```js
const hello = <h1>Hello world</h1>;

// This will add "Hello world" to the screen:
root.render(hello, document.getElementById('app'));

// This won't do anything at all:
root.render(hello, document.getElementById('app'));
```

This is significant! Only updating the necessary DOM elements is a large part of what makes React so successful. This is accomplished using React's *virtual DOM*.

The Virtual DOM

You've learned how to write JSX elements! Now it's time to learn how to *render* them. 

To *render* a JSX expression means to make it appear on screen. 

Rendering JSX

You can *nest* JSX elements inside of other JSX elements, just like in HTML.

Here's an example of a JSX `<h1>` element, *nested* inside of a JSX `<a>` element:

```html
<a href="https://www.example.com"><h1>Click me!</h1></a>
```

To make this more readable, you can use HTML-style line breaks and indentation:

```html
<a href="https://www.example.com">
  <h1>
    Click me!
  </h1>
</a>
```

If a JSX expression takes up more than one line, then you must wrap the multi-line JSX expression in parentheses. This looks strange at first, but you get used to it:

```html
(
  <a href="https://www.example.com">
    <h1>
      Click me!
    </h1>
  </a>
)
```
 
*Nested* JSX expressions can be saved as variables, passed to functions, etc., just like non-nested JSX expressions can! Here's an example of a *nested* JSX expression being saved as a variable: 
 
```js
 const theExample = (
   <a href="https://www.example.com">
     <h1>
       Click me!
     </h1>
   </a>
 );
```

Nested JSX

JSX elements are treated as JavaScript *expressions*. They can go anywhere that JavaScript expressions can go. This means that a JSX element can be saved in a variable, passed to a function, stored in an object or array... you name it.
 
Here's an example of a JSX element being saved in a variable:

```js
const navBar = <nav>I am a nav bar</nav>;
```

Here's an example of several JSX elements being stored in an object:

```js
const myTeam = {
  center: <li>Benzo Walli</li>,
  powerForward: <li>Rasha Loa</li>,
  smallForward: <li>Tayshaun Dasmoto</li>,
  shootingGuard: <li>Colmar Cumberbatch</li>,
  pointGuard: <li>Femi Billon</li>
};
```

JSX Elements And Their Surroundings

Take a look at the following line of code:
 
```js
const h1 = <h1>Hello world</h1>;
```
  
What kind of weird hybrid code is that? Is it JavaScript? HTML? Or something else?
 
It seems like it must be JavaScript since it starts with `const` and ends with `;`. If you tried to run that in an HTML file, it wouldn't work.

However, the code also contains `<h1>Hello world</h1>`, which looks exactly like HTML. *That* part wouldn't work if you tried to run it in a JavaScript file. 

What's going on?

Hello World

JSX elements can have *attributes*, just like how HTML elements can.

A JSX attribute is written using HTML-like syntax: a *name*, followed by an equals sign, followed by a *value*. The *value* should be wrapped in quotes, like this:

```js
my-attribute-name="my-attribute-value"
```

Here are some JSX elements with *attributes*:

```js
<a href='http://www.example.com'>Welcome to the Web</a>;

const title = <h1 id='title'>Introduction to React.js: Part I</h1>; 
```

A single JSX element can have many attributes, just like in HTML:

```js
const panda = <img src='images/panda.jpg' alt='panda' width='500px' height='500px'>;
```

Attributes In JSX

Take another look at the line of code that you wrote. Does this code belong in a JavaScript file, an HTML file, or somewhere else?

The answer is... a JavaScript file! Despite what it looks like, your code doesn't actually contain any HTML at all.

The part that looks like HTML, `<h1>Hello world</h1>`, is something called *JSX*.

Click Next to learn about JSX.