React’s fastest-growing developer adoption rate was ranked as the most loved technology in the 2019 StackOverflow developer survey. However, setting up the tools to develop a React application can be intimidating and time-
There are a lot of moving parts. For example, setting up Babel to transpile JSX into the browser-ready code and configuring Webpack to bundle your project assets.
The solution is the create react app CLI tool, which allows you to create and run the React applications without configuration.
How to Create React App
To create a react app, use the create-react-app command. Creating React App is the best way to build a new React application. It sets up your development environment so that you can use the latest JavaScript features, provides an excellent developer experience, and optimizes your app for production.
You will need to have Node >= 6 on your machine.
We start this tutorial by installing React using the following command. At the time of this post, we are using React 16.3.1 version. It comes with a new lifecycle and context API.
Official Context API
For many years, React js has offered an experimental API for context. It was a powerful tool, but its use was discouraged because of inherent problems in the API and because the core team of developers always intended to replace the experimental API with a better one.
Version 16.3 introduces a new context API that is more efficient and supports both static type checking and in-depth updates. You can find more on its official blog.
Install the create react app on a mac
To install a create react app on our mac machine, we need to have already installed Node.js. I have installed the Node.js of version 9.8.0, and npm has a 5.6.0 version. Now, open your terminal and install the following.
npx create-react-app reactstarter
It will take 30-40 seconds to install, and then you will see the terminal like below.
That means the React boilerplate is successfully created on our mac machine. Now, we need to start the webpack server to access our application on the browser. Type the following command in your terminal.
cd reactstarter yarn start
Yarn is a package manager developed by Facebook. It starts the server, and we can access our default application at http://localhost:3000/. You will see something like the below screen.
I am using Visual Studio Code to open this project on Code editor. Our project’s default structure looks like the below image.
Now, open the src >> App.js file and change something. First, let us remove the SVG image. If you save the file, webpack recompiles the code, the page will refresh automatically, and changes are reflected on the browser.
You can create as many components as you want, import them inside the App.js file, and that file will be included in our main index.html file via compiling by webpack.
Next, for the production mode, type the following command.
yarn build
It will generate the production build which is best optimized. So creating a react app saves tons of time in configuring all the different modules.
That is it for the create react app example. We will cover in-depth tutorials in upcoming articles.
