Getting Started with React (Part 2): Using CREATE-REACT-APP

Introduction

In the first part of this tutorial, we set up a simple React project using a single HTML file, created a “Hello World” App, used inline styles as well as expressions. This second tutorial will be looking at another approach to setting up React projects, using a tool called create-react-app.

What Is create-react-app

This is a tool created by the Facebook team to assist in quickly setting up a React development environment. It takes away the need to manually setup the tools and dependencies (e.g. Babel) required to create, run and test React applications and creates a preconfigured extendable ‘boilerplate’ project for the user to work with.

In order to use create-react-app you will need to have Node >= 8.10 installed on your local development machine. If you do not have the required version of Node, download it from the official Node website, run and install the executable file, and follow the instructions in the next section to use create-react-app.

Creating React Projects Using create-react-app

You can use create-react-app to create a new app using npx, npm init or yarn commands. To do that, open your command line interface and navigate to your projects root folder, then run one of the commands shown below:

Using npx
npx create-react-app my-react-app
Using npm init
npm init react-app my-react-app
Using yarn
yarn create react-app my-react-app

This results in the creation of an app, with a project folder structured as illustrated in the picture below:

my-react-app folder structure
my-react-app project structure

To run the app, navigate into the my-react-app folder using your command line interface and then run npm start if you created your project using either npx or npm init, or run yarn start if you created your project using yarn. This compiles the app and makes it available to view at http://localhost:3000/ (opens in a browser window automatically).

compiled react app
compiled react app

The boilerplate project created by create-react-app displays a landing page as shown in the image below:

my-react-app

You can now edit the React components in the boilerplate project’s App.js file, or create and add a new components.

Conclusion

You can now use create-react-app, a very useful tool for creating Single-Page React applications. It’s great for quickly setting up feature rich React development environments, with all dependencies taken care of, allowing you to focus on writing your React code.

1
0

Related Posts