Section 2 - JSX

What is JSX?

1. Let’s start with the Codepen setup so we can get started quickly!

2. JSX is an extension to JavaScript. It allows you to write HTML-like code in JavaScript itself! Look at the following example:

let div = <div>Hello World</div>

3. Now you have a variable div that contains some HTML <div>Hello World</div>.

4. Excellent! How exactly do you render it? ReactDOM provides a render() function that takes in two arguments, (1) a JSX expression and (2) a DOM container where you want the JSX to be rendered in.

5. Lets try adding the following code! In your JavaScript panel, type in:

ReactDOM.render(

div,

document.getElementById('root')

);

document.getElementById() is a function that returns the element with the specified id, which is “root” in this case.

6. Then you’ll need a tag with the id “root” in your HTML for the JSX to be rendered on. In your HTML panel, type in:

<div id=”root”></div>

7. See your “Hello World” being rendered? Congratulations! You’ve completed your hello world React webpage!

Adding Attributes to JSX

1. Just as you can add attributes to HTML tags, you can also add attributes to your JSX tags!

2. Let’s add some color to our text! To make your text red with HTML, you’d write:

<div style="color:red">Hello World</div>

3. However, in JSX, you’ll have to write:

<div style={{color:"red"}}>Hello World</div>

4. What’s going on? Let’s break it down. First of all, all styles in JSX have to be written in the form of an object.

{color:"red"}

5. If you want to add more styles, you’d just add more keys to the object like so:

{

    color: “red”,

    fontSize: “30px”

}

6. Have you noticed anything? In CSS, the font size attribute is written as font-size, but style attributes in React are camelCased! This is the same with all other attributes!

7. Okay, we have the style object settled. But what’s the deal with the other pair of curly brackets? It turns out that in order to write JavaScript within JSX, you have to put curly brackets between your JavaScript code. So the following code:

style={ ... }

Just means that style is an attribute that takes in a JavaScript object! That’s the reason for the weird-looking double curly brackets! You’re now writing JavaScript inside HTML inside JavaScript, how cool!

8. In fact, you can extract out your style object like so:

const style = {color:”red”}

<div style={style}>Hello World</div>

Nested Elements in JSX

1. Let’s move on! Just like in HTML, we can also construct nested elements in JSX. Try to render the following:

const list = (

  <ol>

    <li>Eat</li>

    <li>Code</li>

    <li>Sleep</li>

  </ol>

);

ReactDOM.render(

  list,

  document.getElementById('root')

);

2. Cool! You technically don’t need the parenthesis around the <ol></ol> tag, but it is recommended here for clarity. Now, let’s try something else:

const content = (

  <h1>Title</h1>

  <p>blah blah blah blah</p>

);

ReactDOM.render(

  content,

  document.getElementById('root')

);

3. Wait, what is this error?

        Adjacent JSX elements must be wrapped in an enclosing tag

4. This is because in React, every JSX component must be wrapped in one outermost tag. To fix it, let’s just wrap our JSX around a <div></div> tag like so:

const content = (

  <div>

    <h1>Title</h1>

    <p>blah blah blah blah</p>

  </div>

);

5. Now it works! Great job! Congratulations on finishing this section!

Summary

JSX allows you to write HTML-like code in JavaScript. You can write normal JavaScript within JSX by enclosing it with a { pair of curly brackets }. Also, each JSX must contain one tag that wraps around everything. A <div> tag is most commonly used.