JSX

JSX is a new type in Javascript which is used to represent HTML.

const banana = "banana" // string
const appleCount = 1 // number
const myArray = [] //array
const myObject = {hello: 1} // object

const someHtml = <p>Hello</p> // JSX
const someMoreHtml = <div><p>World</p></div> // JSX

Notice there are no quotes around it - it's not a string. It's a whole new type.

Differences from normal HTML

Although JSX looks very similar to HTML, there are some minor differences.

Some attribute names are different

• Attributes in JSX are camel cased e.g. tabIndex instead of tabindex
• Attributes in JSX are sometimes slightly different

A good example is <button class="red">

e.g.

HTML                                               JSX
<button class="red">Click Me</button>  ->  <button className="red">Click Me</button>
        ^^^^^                                      ^^^^^^^^^

If you ever need it, here is a full list from the React Docs

Side note: The attribute names actually come from HTMLElement which we learned about in the Vanilla Javascript section!

You can write Javascript inside your JSX.

This process is similar to the string interpolation technique we learned earlier on:

`one plus one is: ${1+1}`
// => 'one plus one is: 2'

With JSX if you put {} then inside the brackets you can write javascript expressions.

const x = 1
const someHtml = <div>{x + 1}</div>
// => <div>2</div>

const buttonClass = 'my-css-class'
const button = <button className={buttonClass}>Click Me</button>
//=> <button className="my-css-class">Click Me</button>

All this interpolation is done with {} but there is one exception to this rule:

const elementType = 'div'
const someHtml = <elementType></elementType>
// => <div></div>

JSX inside JSX

Since JSX is just a new type in javascript you can interpolate it into itself.

const apple = <p>Apple</p>
<div>{apple}</div>
// => <div><p>Apple</p></div>

Arrays and JSX

If you use {} with an array. JSX will put each thing in the array one after another.

const fruits = [
  <p>Apple</p>,
  <p>Banana</p>,
  <p>Pear</p>
]
const result = <div>{fruits}</div>
// => <div><p>Apple</p><p>Banana</p><p>Pear</p></div>

This means you can do the following using .map(:

const numbers = [1, 2, 3]
const numbersJsx= numbers.map((number) => <p>{number}</p>)
// numbersJsx is: [<p>1</p>, <p>2</p>, <p>3</p>]
<div>{numbersJsx}</div>
// =>  <div><p>1</p><p>2</p><p>3</p></div>

The style= attribute

In normal HTML you may remember the style attribute can be used to apply CSS styles directly like this:

<p style="color: red;">

With JSX this is a little different.

The style= attribute no longer takes a string, but instead takes an object:

const myStyle = {color: 'red'}
<p style={myStyle}>

You can do this in one line like this:

<p style={{color: 'red'}}>

Confusingly the { and } mean two different things in the above example.

The outer: {} e.g. <p style={}> tell JSX we want to write some javascript in our JSX (interpolation).

The inner: {} e.g. {color: 'red'} is just a regular Javascript object.