Code

Create your first React JS application

December 16, 2024
2 mins
By
Dulaj
Share

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 – {% post_link What-Is-ReactJS What is React JS?%}

React Logo

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.

Command to check the versions of node and npm

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.

Command to install create-react-app globally

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

Command to check the 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.

Command to create new react 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.

Command to change the directory

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

Command to install dependencies

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).

Command to run the app

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.

More