Creating a React App with create-react-app

Setting up a React app can be confusing, since you have to take care of a lot of stuff that you don’t want to think about—at least at the beginning of your React journey. Fortunately there is a tool called create-react-app that is a neat shortcut. It allows you to start developing right away without having to worry about stuff like webpack and/or babel.

This is the first part of a series of articles. Over the whole series, we’re going to build a functional contact management system with React.

Who is this for?

If you just started learning React, or you want to walk through the process of creating a React app with create-react-app, this is for you.

Source Code

You can find the source code to this article on GitHub:

git clone https://github.com/areiterer/contacts-manager
cd contacts-manager

git checkout part-1

What is create-react-app?

With this tool, you can easily bootstrap a new React app with one command. In addition, it takes care of a lot of advanced stuff like build scripts and configuration in the backend. All of this is hidden and performed in the background, so you don’t get overwhelmed by all of it.

The coolest part? You can build apps with it and run them in production. See some productive apps that were built with create-react-app.

Also, it won’t lock you in if your app grows. If you get to the point where you need to change some of the hidden configs or build scripts, you can simply eject the app. This will write out every file so you can access and modify them. (Warning: This is a one-way operation. From this point on you’re in charge of all that stuff)

Prerequisites

Be sure to have installed the latest (or at least the LTS) version of NodeJS. We’re using a package manager called NPM, which is installed with NodeJS.

After you installed NodeJS, spin up a terminal window and execute the following command to install create-react-app:

npm install -g create-react-app

This installs create-react-app globally on your machine. If you’re working on Linux or Mac OS, you might probably need admin rights – otherwise you’ll get an error message:

sudo npm install -g create-react-app

That’s it! Now you’re prepared for the next steps.

Create a new app with create-react-app

Open a terminal, and navigate to a folder where you want to create your app and execute the following command to create your app. (We’ll call the app “contacts-manager”)

create-react-app contacts-manager

Now create-react-app downloads the latest scripts and packages that you will need for your app. As soon as it is finished, you can navigate into the folder and start the app.

cd contacts-manager
npm start

Note: The terminal output suggests to use Yarn, another package manager, but for now, we will stick to NPM.

create-react-app-initial-template
The initial app that you just generated with create-react-app

Congratulations – you just created a working React app with just one simple command! Next, let’s have a look at the generated app.

Folder Structure

Open the newly created folder with a code editor of your choice. I’m using VSCode because it’s lightweight and fast and it provides every functionality I need. If you want to use something else like SublimeText, WebStorm or Atom, feel free to make your own choice—the editor doesn’t matter for this article.

create-react-app folder structure
The folder structure of our newly generated React app

Now what are those folders and files for?

  • node_modules: Here you can find all the packages you install with NPM and use with your app (including those for React)
  • public: all the publicly available files are located in this folder. This includes the index.html
  • src: Your source files are located here
  • .gitignore: Exclude certain folders that you don’t want to check in (e.g.: node_modules)
  • package.json: This one contains some information about your app, like name and version and all the packages you use.

Now let’s have a look at our source code. Our main entry point is the index.js

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

It does two things:

  • It uses ReactDOM.render to render the App component to a DOM element with the id “root”. This is a <div> inside our index.html file.
  • A service worker is registered. I’m not going into detail on that – this is something for a more advanced article about Progressive Web Apps.

That said, let’s dive into our App.js:

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

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

What you’re seeing here is a React class based component. It’s render function returns some markup which looks like HTML at the first glance, but is in fact something called JSX. This is how we define a component’s user interface that is rendered into the DOM later on.

And that’s basically everything about our generated application. Next I’m going to show you something that is also shipped with create-react-app.

File Watcher & Automatic Reload

Apps generated with create-react-app have a “built-in” file watcher, which is absolutely great for development. Of course, you could just install and configure your own, but it’s nice that this is already built in. This file watcher takes care that every change you make in your source files while your app is running, leads to a reload of the application.

But let’s try that out. Before we start, be sure that your app is still running. If this is not the case, open a terminal window, navigate to the application folder and execute npm run again and wait until everything is up and running. Also assure that you’ve got your app open in a browser. (You can access it via http://localhost:3000)

Now open your App.js and change the header title of our app to something more suitable for this article series: “Welcome to our Contact Manager”. You’ll see, as soon as you save your changes, the browser window will reload and display your new header title.

Wrapping Up

create-react-app is a great tool to bootstrap a React application. It’s not only good for a beginner, but there are also some bigger apps in production that use this tool – so this is definitely a way to go.

In the next parts of this series we’re going to learn about components and lists, so subscribe to my newsletter to be notified as soon as I post the next parts.

I hope you liked what you’ve learned today! I’m currently working on a guide to help people learn React from scratch – I’m sure it’ll also contain something interesting for you too!


Thanks for reading the article until the end! I appreciate if you let me know what you think. Leave a comment, contact me on Twitter or send an email to hi@andreasreiterer.at – I’m happy to respond to any message I get.

Leave a Reply

Your email address will not be published. Required fields are marked *