AppDividend
Latest Code Tutorials

Create React App Tutorial

420

Create React App Tutorial is today’s leading topic. The create react app tutorial is only for beginners so if you are a beginner then and then you can take this tutorial. Otherwise, you can skip this tutorial. React is a declarative, efficient, and flexible JavaScript library for building user interfaces.  It had a quickly growing developer adoption rate and was ranked as the most loved technology in the 2017 StackOverflow developer survey. Setting up the tools to develop a React application can be intimidating and time-consuming task. 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 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

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 a version 9.8.0 and npm has 5.6.0 version. Create React App is the best way to start building the 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. Now, open your terminal and install the following.

npx create-react-app reactstarter

create react app example

It will take 30-40 seconds to install and then you will see terminal like below.

Related Posts
1 of 11

create-react-app example tutorial from scratch

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.

React Tutorial 2018

Open this project on Code editor, and I am using Visual Studio Code. Our project’s default structure looks like below image.

create react app folder structure

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.

yarn build

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.

Leave A Reply

Your email address will not be published.