How to Create Your First React App

Today we’re going to start digging into React, the popular frontend JavaScript framework from the engineers over at Facebook. This is the start of a new tutorial series, and we will begin by getting our React development environment set up and creating our “Hello World” component.

Goals:

• Get all of the Pre-requisites required for React development.
• Create a brand new react application.
• Create a sample component.

For this tutorial series we will be creating a web application to work with the ChordPro text format to create a way to easily work with chord charts.

Setting up the Environment

Before we get started you will need to have Node.js (and NPM) installed on your development machine. These are used for the frontend tooling that we will be using. Follow the installation instructions for your operating system here:

Install Node.js & NPM

Once you have both node and npm then you’re ready to start digging into React. The first thing that we’re going to work with will be the create-react-app utility that Facebook has provided. Let’s install that now:

$ npm install -g create-react-app

Once that is installed you should have access to the create-react-app command line utility, and we’ll use that to create our project directory structure.

$ create-react-app chords

<>Note This will likely take a little bit of time. <>

Looking at the output from this command we can see some of the default commands that we were given.

  npm start
    Starts the development server.

  npm run build
    Bundles the app into static files for production.

  npm test
    Starts the test runner.

  npm run eject
    Removes this tool and copies build dependencies, configuration files
    and scripts into the app directory. If you do this, you can’t go back!

We suggest that you begin by typing:

  cd chords
  npm start

Happy hacking!

Let’s do as it suggested and cd into our project and run it using npm start.

$ cd chords
$ npm start

That opens up a browser and renders the default React landing page for us. This development server will stay running and load our files as we change them so keep that terminal session running while we make changes.

Creating a React Component

The code rendering the page that we see by default can be found in src/App.js, here’s what’s there to start:

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h2>Welcome to React</h2>
        </div>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
      </div>
    );
  }
}

export default App;

If you aren’t familiar with ES6 then this might look a little foreign having a class and import statements, but it really gets weird when you see that there is HTML in the JavaScript. This is JSX. The JavaScript in this application will be processed before the final product is rendered out to the page and these HTML tags will be turned into React.createElement() function calls.

We don’t want all of this extra stuff so let’s strip this down to only what we need to create a valid component:

src/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <h1>Hello World</h1>
    );
  }
}

export default App;

The only required method on a React component is render. We’re importing both React and the Component class from witin React because we extend the component and need React proper in order to use JSX within our class.

If you look at your browser window again you should see the “Hello World” now instead of the landing page.

Cleaning Up the Application

Since we’re starting this as a new project with a goal we can go about removing some of the boilerplate code that create-react-app generated for use that we don’t actually need just yet. Delete the following file:

• src/logo.svg
• src/App.css

Recap

This was obviously a short tutorial, but we’ve now got our application up an running. From here we will break down our application requirements and start implementing what we need to make an awesome web application.