ReactJs: Eacy to setup and install (create-react-app)

In My previous reactjs tutorials, you can find the reactjs setups are done manually. We have to install the packages manually and it will may confuse or maybe we missed any dependencies. So in this tutorial we don’t want to install reactjs manually. All the dependencies and servers are already defined and just do npm install create-react-app will do all the setups for you without any issues. Create React apps with no build configuration. Demonstration and setup, steps are there in the below content.

Video Tutorial

As in my previous Reactjs installation setup, I mentioned that we have to install nodejs and npm. For this tutorial also we have to install nodejs and npm. Once you installed node and npm, we have to follow the below steps.

Step 1: Installation

Install it once globally:

npm install create-react-app -g

You’ll need to have Node >= 6 on your machine.

Step 2: Creating an App

create-react-app react-first-time
cd react-first-time

It will create a directory called react-first-time inside the current folder.

Inside that directory, it will generate the initial project structure and install the transitive dependencies:

react-first-time
├── README.md
├── node_modules
├── package.json
├── .gitignore
├── public
│   └── favicon.ico
│   └── index.html
│   └── manifest.json
└── src
    └── App.css
    └── App.js
    └── App.test.js
    └── index.css
    └── index.js
    └── logo.svg
    └── registerServiceWorker.js

No configuration or complicated folder structures, just the files you need to build your app. Once the installation is done, you can run some commands inside the project folder:

Step 3: npm start

Runs the app in development mode.

Open http://localhost:3000 to view it in the browser.

The page will automatically reload if you make changes to the code.

You will see the build errors and lint warnings in the console.

Step 4: npm test

Runs the test watcher in an interactive mode.

By default, runs tests related to files changed since the last commit.

Step 5: npm run build

Builds the app for production to the build folder.

It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.

By default, it also includes a service worker so that your app loads from local cache on future visits.

Your app is ready to be deployed.

CV Member since May 29, 2019

I am a Front-end Developer, graduate of Information Technology, and founder of w3tweaks.com. I have 12+ years commercial experience providing front-end development, producing high quality responsive websites and exceptional user experience.