ReactJS JSX

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

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 Element**
Here's an example of a JSX element being saved in a variable:

```javascript
const navBar = <nav>I am nav bar </nav>;
```
**Nested JSX**
You can nest JSX elements inside of other JSX elements, just like in HTML.
Example:

```javascript
const myDiv = (<div><h1>Here is my Div</h1></div>);
```
**Rendering JSX**
To render a JSX expression means to make it appear onscreen.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello World</h1>, document.getElementById('app'));
```
*ReactDOM* is the name of Javascript Library. This library contains several React-specific methods, all of which deal with the *DOM* in some way or another.
**Variable in JSX**
When you inject javascript into JSX, you can access variables while inside of a JSX expression, even if those variables were declared on the outside.

```javascript
//Declare variable 
const name = 'Pich';

//Access variable from inside JSX expression
const greeting = <p>Hello, {name}!</p>;
```
**Variable Attribute in JSX**
When writing JSX, it's common to use variables to set attributes.

Here's an example of how that might work:

```javascript
// Use a variable to set the `height` and `width` attributes:
const sideLength = "200px";
const panda = (<img 
                src='examples/panda.jpg'
                alt="panda" 
                height={sideLength} 
                width={sideLength} />);
```
**Event Listeners in JSX**
JSX elements can have event listeners, just like HTML elements can. You create an event listener by giving a JSX element a special attribute. Here's an example:

```javascript
function myFunc() {
  alert('Make myFunc the pFunc... omg that was horrible i am so sorry');
}

<img onClick={myFunc} />
```
You can see the list of event names [here](https://reactjs.org/docs/events.html#supported-events).
**.map in JSX**
The array method .map() comes up often in React. If you want to create a list of JSX elements, then .map() is often your best bet. It can look odd at first:

```javascript
const items = ['Home', 'Shop', 'About Me'];
const listItems = items.map(item => <li>{item}</li>);
<ul>{listItems}</ul>
```
We call .map() on this array of items, and the .map() call returns a new array of ```<li>``` s.

On the last line of the example, note that {listItems} will evaluate to an array, because it's the returned value of .map()! JSX ```<li>``` s don't have to be in an array like this, but they can be.

```javascript
// This is fine in JSX, not in an explicit array:

<ul>
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>

// This is also fine!

const liArray = [
  <li>item 1</li>, 
  <li>item 2<li>, 
  <li>item 3</li>
];

<ul>{liArray}</ul>
```

**Key**
A key is a JSX attribute. The attribute's name is key. The attribute's value should be something unique, similar to an id attribute.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map((person, i) =>
  // expression goes here:
  <li key={'person_' + i}>{person}</li>
);

// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'));
```
**React.createElement**
You can write React code without using JSX at all!

The following JSX expression: 

```javascript
const h1 = <h1>Hello World</h1>
```
can be rewritten without JSX, like this:

```javascript
const h1 = React.createElement(
  "h1",
  null,
  "Hello, world"
);
```
When a JSX element is compiled, the compiler transforms the JSX element into the method that you see above: React.createElement(). Every JSX element is secretly a call to React.createElement().