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:

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

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:

const myDiv = (<div><h1>Here is my Div</h1></div>);

Rendering JSX
To render a JSX expression means to make it appear onscreen.

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.

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

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

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

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.

// 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.

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:

const h1 = <h1>Hello World</h1>

can be rewritten without JSX, like this:

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

ReactJS JSX

Introduction to JSX