S01・V04: Try React with JSX for Development

Course: Section

Get Started with Modern React: Intro, Setup, and ES6 Basics

Episode: Title

S01・V04: Try React with JSX for Development

Date Created: July 17th, 2019

Last Updated: 27 days ago

Objectives

We will set up a basic HTML page, and load “react” and “react-dom” modules from a CDN, as we did in the previous video.
We will load a stand-alone Babel compiler from a CDN, to compile JSX in the browser.
We will write the same React component as before, using the more concise JSX syntax.

Watch Video

Duration: 3m 34s

HTML

We will start with a simple HTML page. View it in the browser.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Development</title>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
  </body>
</html>

Now, as we did in the previous video, we will add a div container to render our React component to. And, again, we will load the development react and react-dom modules from a content delivery network.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React without JSX</title>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
    <div id="like_button_container"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>    <script src="https://unpkg.com/react-dom@16/umd/react.development.js" crossorigin></script>  </body>
</html>

JSX

Now, we will be writing our React code with JSX, which is an HTML-like syntax extension to JavaScript. JSX makes React easier for developers to read and write. Most React code nowadays is written using JSX.

Browsers, however, cannot read JSX, so the code we write using JSX must first be compiled to pure JavaScript. We will use a compiler called “Babel” to convert JSX to JavaScript. We can load a stand-alone Babel compiler from a CDN, and compile our code in the browser. However, this is a relatively slow process, using a large development build of React, so this approach should only be used for development, and not in production.

Let’s load the Babel compiler from a CDN.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Development</title>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
    <div id="like_button_container"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin></script>  </body>
</html>

Now, to add JSX code that should be compiled using Babel in script tags, we need to add a type attribute of text/babel.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Development</title>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
    <div id="like_button_container"></div>
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js" crossorigin></script>
    <script type="text/babel"></script>  </body>
</html>

We are now able to add React code written using JSX.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Try React with JSX for Development</title>
  </head>
  <body>
    <h2>My Website</h2>
    <p>This could be a very simple website somewhere on the web.</p>
    <p>Imagine there is some content here...</p>
    <div id="like_button_container"></div>
    <script
      src="https://unpkg.com/react@16/umd/react.development.js"
      crossorigin></script>
    <script
      src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"
      crossorigin></script>
    <script
      src="https://unpkg.com/babel-standalone@6.26.0/babel.min.js"
      crossorigin></script>
    <script type="text/babel">
      function LikeButton() {        const [liked, setLiked] = React.useState(false);        if (liked) {          return "You liked this";        }        return <button onClick={() => setLiked(true)}>Like</button>;      }      const element = <LikeButton />;      const domContainer = document.getElementById("like_button_container");      ReactDOM.render(element, domContainer);    </script>
  </body>
</html>

If you compare this React code to the code written without JSX in the previous video, you will see that the JSX code is simpler and terser.

Now, save the file and test it out in the browser. Reload the page in the browser. Click on the “Like” button. It works as expected.

We have successfully created a development-only setup for trying React with JSX, using a stand-alone Babel compiler that runs in the browser.

Summary

We set up a basic HTML page, and loaded react and react-dom modules from a CDN, as we did in the previous video. We loaded a stand-alone Babel compiler from a CDN, to compile JSX in the browser. And, we wrote the same React component as before, using the more concise JSX syntax.

Next Up…

In the next video, we will try out React with JSX for production.

Get Started with Modern React: Intro, Setup, and ES6 Basics