Create React App Tutorial
Create React App Tutorial For Beginners
We start this tutorial by installing the React js 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 the 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 mac
npx create-react-app reactstarter
It will take 30-40 seconds to install and then you will see 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 below screen.
Open this project on Code editor, and I am using Visual Studio Code. Our project’s default structure looks like below image.
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 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 react app saves tons of time to configure all of the different modules.
That is it for the create react app tutorial. We will cover in-depth tutorials in upcoming articles.