React Starter: Using Create React App to Make React Applications

Usually when you create a React application, you’ll be creating a single page app (SPA). In order to make setting up single page apps easier, a CLI tool called Celý článek

Usually when you create a React application, you’ll be creating a single page app (SPA). In order to make setting up single page apps easier, a CLI tool called create-react-app was made.

https://scotch.io/embed/vimeo/336412467

The CLI tool makes it quick to create React applications. Here are the commands we can use to create a React application with Create React App:

# generate a new react app called my-new-app
npx create-react-app my-new-app

# go into our newly created folder
cd my-new-app

# start our app
yarn start

npx is a tool that comes with npm 5.2+. It let’s us grab the latest version of create-react-app and use that to install it.

What comes with create-react-app?

There are lots of goodies that come out of the box. We can also easily add more support for things like Sass or TypeScript.

We can run a single command and get a brand new React application that comes with:

• A recommended starting folder structure
• A solid build setup with webpack and Babel (that you don't have to worry about setting up)
• Scripts to run our React application
• Extensibility
• And more!

Let's take a look!

Installing create-react-app

There are many ways to install create-react-app. Use whichever works best for your team and environment:

# using npx (npm 5.2+)
npx create-react-app my-new-app

# using npm (npm 6+)
npm init react-app my-new-app

# using yarn (yarn 0.25+)
yarn create react-app my-new app

I personally use the npx way since that's what's familiar to me and I've been using first.

Starting a new React project

We’ll use npx to create a new project:

npx create-react-app super-duper-app

This is the new folder structure we’ll see:

Let's explore what we can do with our new application.

Starting our React App

To start developing on our React app, we can tell the CLI to run everything and open our app in the browser at http://localhost:3000.

# with npm
npm run start

# with yarn
yarn start

The start command will run webpack and Babel and get our app loaded.

Essentially what this command does is compile all of our React code including transpiling, checking for errors, compiling Sass, creating a JavaScript bundle of all our code, injecting this into the public/index.html file and finally loading it all up in our browser.

What do we get by default?

Create React App comes with many things out of the box including a starting point for every React application.

• Build setup (webpack and Babel for transpiling)
• Convenient folder structure
• Scripts to run our application
• Scripts to bundle for production
• Ability to extend with Sass, TypeScript, and more

A Build Setup

Our React applications need a build step to transpile our ES6 code to something that all browsers can read. This is why you will see many setups that don't use Create React App will set up webpack and Babel.

Create React App comes configured with webpack and Babel so you don't have to set it all up.

Folder Structure

Here's the folder structure for a starting Create React App application:

my-app
├── public
│   ├── favicon.ico
│   ├── index.html
│   └── manifest.json
└── src
    ├── App.css
    ├── App.js
    ├── App.test.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    └── serviceWorker.js
├── README.md
├── node_modules
├── package.json
├── .gitignore

public/ folder: Everything in the public folder will be the things that are available to browsers. We won't be working in here too often. This is just the assets that we will bundle with our application with minimal work.

src/ folder: This is where we'll do the majority of our work. All of our React components will live inside the src/ folder.

root folder: This is where our configuration files are located. Most of our configuration lives in package.json

Build Scripts

Create React App comes with a few scripts that are helpful for our development. We will use these scripts whenever we want to:

• Run our application for development
• Build our application for production
• Test our application if we've created tests

You can see inside our package.json where the scripts are located:

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },

We can run any of the above commands using the following:

# starting our app for development
npm start
npm run start
yarn start

# building our app for production
npm run production
yarn production

# testing our application
npm run test

# ejecting our application (ONLY DO IF YOU KNOW WHAT YOURE DOING)
npm run eject

start: This command will start our application for development. It will even open up our application for development in browser at http://localhost:3000.

build: We can bundle our application for production and generate only a few files that we can host for our users.

test: This will run all of our tests like the one that comes with Create React App in App.test.js

eject: Ejecting will give you access to configure every aspect of your React application. This means that Create React App is no longer handling the configuration for your application. This command is only for those that are 100% sure they want to leave the comfort of CRA and need extra configuration.

Ability to Run Tests

Here's a quick look at what running tests looks like with npm run test:

Bundling for Production

In order to host our application for users to use, we need to bundle all of our code into a few JavaScript files that our users can load. Create React App comes with a convenient script

We can run the following and see a few build files get created.

# bundle this app for production
npm run build

Notice the new files that are created. This is all we need to provide our React app to our users!

We can then see our new files in a newly created build folder. This is what we will host on a server and point users towards our index.html file. React will take care of the rest.

We'll talk more on what bundling for production means in a following post.

Conclusion

Create React App is an awesome tool for React developers. We used to have to configure our own webpack and Babel setups in the past.

Now, React developers can get straight to developing awesome React apps. They no longer have to worry about setup.

Use Create React App to start your applications. It provides a solid base and keeps getting updated by the React team.