Create your first React JS application


In the previous article I have discussed about what is React JS? How does it work and basic features of React JS etc.
You can find it here – What is React JS?

What is React JS

What is React JS

Discussion about what is React JS. Read is also if you have not so far.

www.fcodelabs.com

Let’s know how to create a new React JS application. It is quite simple and easy.

  1. You need to install NPM in your computer. You can download it and install from the Official Website.

Once you have installed NPM make sure it by running following commands in your command line / terminal.

1
2
3
node --version

npm --version

Make sure your node version >= 8.10 and npm version >= 5.6.

  1. Install create-react-app package in your computer.

Once you have installed npm successfully, you have to install create-react-app package globally using npm. You can install by running following command in your terminal.

1
npm install -g create-react-app

Make sure the installation by running the following command in your terminal.

1
npm create-react-app --version

  1. Create your react application

Let’s assume we are making a application named as hello-app. You can create it by running following in your terminal.

1
npx create-react-app hello-app

This will create a directory hello-app and all the necessary files inside it.
( You don’t need to worry about npx. It will automatically installed with the node package).

  1. Install packages and run your application

Once you have created the application using 3 step, you need to go to the project directory using following command.

1
cd hello-app

Now you need to install all the dependencies using following command.

1
npm install

This will take some time, depends on your network connection speed. After you are done with that you can run your application by following command (Make sure you are in the project directory).

1
npm start

This will start a virtual local server with a port (normaly 3000). Now you can check your react application in browser using the link:

http://localhost:3000 or http://127.0.0.1:3000

For the developing part I recommend you to use WebStorm IDE. You can also use VSCODE also.