What is React

TL;DR: Here is the template to get started immediately!

If you’re reading this guide, there is good chance you are new to React. If you’re anything like me, diving in and messing around with a library is the fastest and most effective way for you to learn.

When I was following the Getting Started guide from the official ReactJS site, I immediately ran into some unexpected errors when following the rest of their tutorial.

Below is the very first snippet of code from the React tutorial:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

Surprisingly, my application would not load. One quick check into the console and I was given this warning:

Uncaught SyntaxError: Unexpected token '<' (at app.js:34:9)

It was erroring out when trying to return the JSX. But why?

Compiling React with Babel

To properly render our JSX the code has to be compiled by Babel. We will need to make the following adjustments to our project:

  1. We need to include Babel
  2. We need to set the type on our react javascript file.

For my personal projects, I use Babel from a CDN, so that’s what we’ll discuss here. Add the following script link to your project:

<script src="https://unpkg.com/[email protected]/babel.js"></script>

Then, we will need to add “type=text/babel” to our React script:

<script type="text/babel" src="app.js"></script>

Now, we’ll able to run our code with no error.

What is happening?

Under the hood, babel is converting JSX to React.createElement() calls. Remember our earlier snippet with the ShoppingList? The two examples below are identical:

class ShoppingList extends React.Component {
  render() {
    return /*#__PURE__*/React.createElement("div", {
      className: "shopping-list"
    }, /*#__PURE__*/React.createElement("h1", null, "Shopping List for ", this.props.name), /*#__PURE__*/React.createElement("ul", null, /*#__PURE__*/React.createElement("li", null, "Instagram"), /*#__PURE__*/React.createElement("li", null, "WhatsApp"), /*#__PURE__*/React.createElement("li", null, "Oculus")));
  }

}

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h1>Shopping List for {this.props.name}</h1>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

Starter Template

If you need a boilerplate template for your CDN react app, simply copy and paste below. Happy coding!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React CDN</title>
    <link rel="icon" type="image/x-icon" href="/favicon.ico">


    <!-- React CDN -->
    <script crossorigin src="https://unpkg.com/react@18/umd/react.development.js"></script>
    <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
    <!-- BABEL. Needed to help react render HTML -->
    <script src="https://unpkg.com/[email protected]/babel.js"></script>


    <!-- Personal Styles -->
    <link rel="stylesheet" href="style.css"


</head>
<body>

<main id="main">

    
<div id="app">

</div>
    
</section>

</main>

<script type="text/babel" src="app.js"></script>
</body>
</html>