React JS Environment Setup using NPM or Yarn

React JS Environment Setup using NPM or Yarn: Setting up the ReactJS development environment using NPM or Yarn. Here, we will learn how to set up a development environment in ReactJS and the following things.
  • Creating React App.
  • Building Project.

Steps to install React JS using NPM

1. React provided us a CLI command called create-react-app, we need it to install it globally

npm install -g create-react-app

2. After create-react-app installs successfully go ahead and create a new project

create-react-app my-app

Using comment create-react-app my-app, this command will create a new directory and install our react app. This command gives a directory listing



my-app
  • README.md
  • node_modules
  • package.json
  • .gitignore
  • public- favicon.ico,Index.html,manifest.json

src

  • App.css
  • App.js
  • L App.test.js
  • UI index.css
  • index.js
  • Logo.svg
  • registerServiceWorker.js

Folder Structure Explanation

  • Package.json-This file contains info about installed modules
  • src/-This folder contains source code.
  • public/-This folder contains asset files for your app.
  • node_modules- This folder contains all the installed modules package.
  • gitignore- This file contains ignored files and folders for GitHub push and pull.
3.After installation gets completed. Go to the installed directory and run your app
cd my-app

4. You can use Yarn or NPM to run ReactJS app

npm start or yarn start

This command will initialize our app and if our application compiles successfully we will be greeted with React welcome screen:

REACT JS welcome page
5. We have set up an environment set up in our application. Now let’s create our app build. We will need below command to build our app
npm run build or yarn build

6. This will build your app in the build folder. We will need to install serve globally to serve our build app. You can install serve globally by:

npm install -g serve

7. This will install serve globally and we can serve our application by:

serve -s build

8. This will run our build application on the server:

http://localhost:5000

The same app will be run a different server. But the application is ready to deploy!

Now we have learned how to install React JS using NPM or Yarn. Let’s do some exercise on React JS

How to install this project with Yarn?

In case you didn’t know how to install an application with Yarn. Go ahead to https://yarnpkg.com/,.and you can install yarn from here, you have followed the conditions to install React JS using yarn.
yarn add create-react-app

This will install create-react-app and let us initialize our React Application with the above following steps.