React: How to create the simplest app using Atom

/ Chris Nielsen

This article is a continuation of the previous article where I created the simplest possible React app in Codepen:

React.js: How to create the simplest app using Codepen

A second way to create React apps is to use a text editor such as Atom, and reference the necessary resources via CDNs (content delivery networks).  In this case, I will start with a blank index.html file that looks like this:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Project Name</title>
  </head>
  <body>
  </body>
</html>

Step 1: Add CDNs to the <head>

For this React project to work, we need three resources:

1. react.development.js
2. react-dom.development.js
3. babel.min.js

These can either be downloaded and referrred to as local references, or we can refer to the outside CDNs. For example:

<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

Step 2: Add div to the <body>

<div id="chris"></div>

 

Step 3: Add <script> tags in the <body>

Since we are using Babel to transpile the React JSX code, we need to use type=”text/babel” in the opening script tag:

<script type="text/babel">
</script>

 

Step 4: Add the React code in the <script> container

      ReactDOM.render(
        <h1>Simplest React App</h1>,
        document.getElementById('chris')
        );

Here is the complete code:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/react/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
    <title>Simplest React</title>
  </head>
  <body>
    <div id="chris"></div>

    <script type="text/babel">

      ReactDOM.render(
        <h1>Simplest React App</h1>,
        document.getElementById('chris')
      );

    </script>

  </body>
</html>

Here is what it looks like in Atom:

When opening the index.html file, the result looks like this:

Simplest React App