Get Started with Modern React: Intro, Setup, and ES6 Basics
S01・V06: Create React App
- We will explain what “Create React App” is.
- We will set up a project using Create React App, run it, and make an optimized production build.
Front-End Build Pipeline
Nowadays, the end users of web applications have high demands. They expect apps to be fast, visually pleasing, and have lots of features. Web applications have become increasingly complex over the last decade, to deal with the ever growing needs of end users.
- Package manager, such as “npm” or “Yarn”. A package manager lets you take advantage of a vast ecosystem of third-party packages, and easily install or update them.
- Bundler, such as “webpack”. A bundler lets you write modular code and bundle it together into small packages to optimize load time.
Create React App
In Sections 2 and 3 of this video course, we will be using a build toolchain called “Create React App”, or “CRA” for short. Create React App creates a front-end build pipeline. It doesn’t handle back-end logic or databases. You can use Create React App with any back-end you want.
Under the hood, Create React app uses the Babel compiler and the webpack bundler, but you don’t need to know anything about them to use it.
Create React app is the best way to start building a new single-page application in React. A single-page application is an application that loads a single HTML page and all the necessary assets required for the application to run. Any interactions with the page or subsequent pages do not require a round trip to the server, which means the page is not reloaded. This makes for a better end-user experience.
When you are ready to deploy your web app to production, you can easily create an optimized build of your app, by running a single command, which we will show you later in this video.
Let’s get started in Terminal.
We will assume you have Node installed on your local development machine.
node --version to check that you have Node installed.
It should be at least version
Next, check your current version of “npm”, which is distributed with Node.js. This means that when you download Node.js, you automatically get npm installed on your computer.
It should be at least version
We will also be using “Yarn”, which is an alternative package manager. Yarn is faster than npm for installing packages.
You can use either npm or Yarn during this course, so it isn’t a requirement to download it. If you only want to use npm, then substitute
yarn when it is typed in this video.
Next, we will use a package runner tool that comes with npm. This package runner tool is called “npx”. We will create a project called
my-app, using the
create-react-app package, run by the
npx create-react-app my-app
This usually takes a few seconds to run.
Change directory into
Now, run the app on your local development machine using the command
yarn start, or
In a few seconds, your app, with its default view, will automatically show in your browser, at
You can shut down your local development server with the key combination “Control, C”.
To create an optimized production build of your app, simply type
yarn build, or
You have successfully built your app using Create React App! You can find out more in the official Create React App documentation.