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

Nested JSX elements

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

When viewing the code of a JSX element you may wonder if it is HTML or Javascript. JSX is an extension for Javascript and allows us to put HTML into JavaScript. In order for the code to compile the JSX expression must have exactly one outermost element. In the below block of code the tags are the outermost elements.

JSX Syntax and Javascript

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

JSX is a syntax extension of JavaScript used to create DOM elements which are rendered in the React DOM. Before JSX can render in a web browser it must first be compiled into regular JavaScript.

Multiline JSX Expression

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

When writing a JSX expression that is on multiple lines it needs to be wrapped in parentheses. In the code block example we see this rule in action. The code block begins with a constant. Since the JSX expression has multiple lines after the constant we see the opening parentheses and at the end of the JSX expression we see the closing parentheses.

JSX syntax and HTML

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

In the block of code we see the similarities between JSX syntax and HTMl with the use of the angle bracket opening and closing tags. The JSX element will render the content put inside these tags.

JSX attributes

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

The syntax of JSX attributes resemble HTML attributes.

JSX attribute example: 

const example = <h1 id="example">JSX Attributes</h1>;

In the example we see inside the opening tag of the JSX element that the h1 tag is paired with the value “example”. Now this JSX attribute will be accessed with the #example selector when it is rendered to the DOM.

ReactDOM JavaScript library

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

The JavaScript library ReactDOM renders JSX element to the DOM through taking a JSX expression, creating a corresponding tree of DOM nodes, and adding that tree to the DOM.

The code example begins with ReactDOM.render() which is ReactDOM‘s method. We see the first argument <h1>"This is an example."</h1> followed by a , and the second argument document.getElementById('app').

This is how to make the JSX expression appear on the screen. Based on this block of code the text: “This is an example.” will appear on the screen.

Chevron Left Icon
Intro to JSX
Lesson 1 of 2
Chevron Right Icon
  1. 1
    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 …
  2. 2
    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,…
  3. 3
    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…
  4. 4
    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…
  5. 5
    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…
  6. 6
    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…
  7. 7
    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…
  8. 8
    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, …
  9. 9
    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,…
  10. 10
    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.
  11. 11
    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…
  12. 12
    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…
  13. 13
    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…
  14. 14
    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…
  15. 15
    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…
  1. 1
    This lesson will cover more advanced JSX. You’ll learn some powerful tricks, and some common errors to avoid. Grammar in JSX is mostly the same as in HTML, but there are subtle differences to wat…
  2. 2
    Another JSX ‘gotcha’ involves self-closing tags. What’s a self-closing tag? Most HTML elements use two tags: an opening tag ( ), and a closing tag ( ). However, some HTML elements such as…
  3. 3
    So far, we’ve focused on writing JSX expressions. It’s similar to writing bits of HTML, but inside of a JavaScript file. In this lesson, we’re going to add something new: regular JavaScript, wri…
  4. 4
    The code in the last exercise didn’t behave as one might expect. Instead of adding 2 and 3, it printed out “2 + 3” as a string of text. Why? This happened because 2 + 3 is located in between a…
  5. 5
    You can now inject regular JavaScript into JSX expressions! This will be extremely useful. In the code editor, you can see a JSX expression that displays the first twenty digits of pi. Study th…
  6. 6
    When you inject JavaScript into JSX, that JavaScript is part of the same environment as the rest of the JavaScript in your file. That means that you can access variables while inside of a JSX expr…
  7. 7
    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”…
  8. 8
    JSX elements can have event listeners, just like HTML elements can. Programming in React means constantly working with event listeners. You create an event listener by giving a JSX element a sp…
  9. 9
    Great work! You’ve learned how to use curly braces to inject JavaScript into a JSX expression! Here’s a rule that you need to know: you can not inject an if statement into a JSX expression. Th…
  10. 10
    How can you write a conditional, if you can’t inject an if statement into JSX? Well, one option is to write an if statement, and not inject it into JSX. Look at if.js. Follow the if stat…
  11. 11
    There’s a more compact way to write conditionals in JSX: the ternary operator. The ternary operator works the same way in React as it does in regular JavaScript. However, it shows up in React s…
  12. 12
    We’re going to cover one final way of writing conditionals in React: the && operator. Like the ternary operator, && is not React-specific, but it shows up in React surprisingly often. In the la…
  13. 13
    The array method .map() comes up often in React. It’s good to get in the habit of using it alongside JSX. If you want to create a list of JSX elements, then .map() is often your best bet. It can …
  14. 14
    When you make a list in JSX, sometimes your list will need to include something called keys: Example1 Example2 Example3 A key is a JSX attribute. The attribute’s name is key. …
  15. 15
    You can write React code without using JSX at all! The majority of React programmers do use JSX, and we will use it for the remainder of this tutorial, but you should understand that it is possib…
  16. 16
    Congratulations! You have completed the unit on JSX. You have learned a wide variety of JSX concepts. If you don’t feel like you’ve mastered them all yet, that’s okay! These concepts will come …

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo