How to Use Create React App with Example
React had a quickly growing developer adoption rate and was ranked as the most loved technology in the 2019 StackOverflow developer survey. Setting up the tools to develop a React application can be an 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. So the solution is the create react app CLI tool allows you to create and run the React applications with no configuration.
Create React App Tutorial For Beginners
We start this tutorial by installing the React using the following command. At a 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, 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
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 so that we can 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.
Now, open the src >> App.js file and change something. Let us remove the SVG image. If you save the file, webpack recompiles the code, and the page will refresh automatically and changes are reflected on the browser. Now, you can create as many components as you want, import inside 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.
It will generate the production build which is best optimized. So create a react app saves tons of time to configure all of the different modules.
That is it for the create react app example. We will cover in-depth tutorials in upcoming articles.