Learn React: Course OverviewCourse Overview

JSX

Learn to use JSX, the basic syntax of React.js

Start

Key Concepts

Review core concepts you need to learn to master this subject

Nested JSX elements

JSX Syntax and JavaScript

Multiline JSX Expression

JSX syntax and HTML

JSX attributes

ReactDOM JavaScript library

Embedding JavaScript in JSX

The Virtual Dom

Nested JSX elements

const myClasses = (
  <a href="https://www.codecademy.com">
    <h1>
      Sign Up!
    </h1>
  </a>
);

In order for the code to compile, a JSX expression must have exactly one outermost element. In the below block of code the <a> tag is the outermost element.

Intro to JSX

Lesson 1 of 2

1
Why React?
React.js is a JavaScript library. It was 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 …
Start
2
Hello World
Take a look at the following line of code: const h1 = Hello world ; What kind of weird hybrid code is that? Is it JavaScript? HTML? Or something else? It seems like it must be JavaScript,…
Start
3
The Mystery, Revealed
Good! 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…
Start
4
What is JSX?
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…
Start
5
JSX Elements
A basic unit of JSX is called a JSX element. Here’s an example of a JSX element: Hello world This JSX element looks exactly like HTML! The only noticeable difference is that you would find i…
Start
6
JSX Elements And Their Surroundings
JSX elements are treated as JavaScript expressions. They can go anywhere that JavaScript expressions can go. That means that a JSX element can be saved in a variable, passed to a function, sto…
Start
7
Attributes In JSX
JSX elements can have attributes, just like 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 shoul…
Start
8
Nested JSX
You can nest JSX elements inside of other JSX elements, just like in HTML. Here’s an example of a JSX element, nested inside of a JSX element: Click me! To make this more readable, …
Start
9
JSX Outer Elements
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: const paragraphs = ( I am a paragraph. I,…
Start
10
Rendering JSX
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 onscreen.
Start
11
ReactDOM.render() I
Let’s examine the code that you just wrote. Start in previous.js, on line 5, all the way to the left. You can see something called ReactDOM. What’s that? ReactDOM is the name of a JavaScript…
Start
12
ReactDOM.render() II
Move to the right a little more, and you will see this expression: document.getElementById(‘app’) You just learned that ReactDOM.render() makes its first argument appear onscreen. But where…
Start
13
Passing a Variable to ReactDOM.render()
ReactDOM.render()’s first argument should evaluate to a JSX expression, it doesn’t have to literally be a JSX expression. The first argument could also be a variable, so long as that variable…
Start
14
The Virtual DOM
One special thing about ReactDOM.render() 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 no…
Start
15
JSX Recap
Congratulations! You’ve learned to create and render JSX elements! This is the first step towards becoming fluent in React. In the next lesson, you’ll learn some powerful things that you can do w…
Start