Introduction
In this article, I am going to talk about the React installation process for a beginner who doesn't know what the prerequisites are to install React, and what the different ways to install React are.
You may take an overview of React from my first React article where I have described the fundamental overview of React Programming.
Prerequisites
First, you need to install Node if your machine doesn't have Node installed from earlier. According to the React organization, the version of node must be >= v6
Note
For this article, I am using Visual Studio Code which is one of the best editors for JavaScript programming, but it's optional. You may use any one editor according to your choice like:
Atom, Sublime Text, WebStorm etc.
Step 1 - Install Node
As I mentioned above the version of Node should be >= v6. First, download the appropriate version from
https://nodejs.org. Here, I am going to install the latest version of Node from NodeJs portal.
My machine has a Windows Operating System so I am going to download Node for Windows.
After completion of the download, right click on the installer file node-v8.9.3-x64 and select Install option from the context menu and follow up the further steps suggested by the wizard.
If you want to know more about Node installation,
click here
Note
If you are not using Windows OS, you may download the appropriate node from the following link.
Check Node Version
If you have already installed, you may check the version of Node by execution the following command at your command prompt terminal.
- C:\Windows\system32>node --version :: # or node -v to check the version of node
- v8.9.3
-
- C:\Windows\system32>
If installed version is < 6 then you need to update your node
Now, I am going to create a new root directory "ReactProgramming" in drive D where I will create a sample application to explain about the installation process. You may create or select a directory according to your choice.
- D:\>mkdir ReactSampleApp
- D:\>cd ReactSampleApp
- D:\ReactProgramming>
Step 2
React Installation Command.
- D:\ReactProgramming>npm install -g create-react-app :: or D:\ReactSampleApp>npm i -g create-react-app
Above command is used to install react globally.
- -g stands for global
- create-react-app is a react package which includes the global command to create react app.
Now, execute the following command to create a react application.
create-react-app <app name>
- D:\ReactSampleApp>D:\ReactSampleApp>create-react-app SampleApp
![ErrorAtAppName]()
- D:\ReactSampleApp>D:\ReactSampleApp>create-react-app sample-app
Once you execute this command it will take few minutes to load the dependent packages for React. You will see the following screen after successful execution of the above command.
Now an application with the name "sample-app" has been created successfully with all default packages. If we see inside the sample-app directory, it contains the following files and directory.
D:\ReactSampleApp\sample-app
- node_modules <directory> - It contains react packages like react-dom, react-body etc.
- public <directory> - It contains a index.html, favicon icon and manifest.json files.
- src <directory> - It contains application's static files like css, js , logo and App.js files
- package.json
- package-lock-json
- README.md
- .gitignore
Step 3
Now execute the command npm <space> start to run application.
- D:\ReactSampleApp\sample-app>npm start
It takes few seconds to start the development server. Once the server is started you may see the follwing message on the command prompt.
Compiled Successfully
You can now view sample-app in the broser.
http://localhost:3000/
Now this sample aplication is running.
Using React With Existing Web Application
We can add React packages with existing web applications by executing the following commands on comand prompt.
- D:/MyWebsite>npm install --save react react-dom
Or
We can use CDN for React as well to enable React in our existing web applications.
- <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
- <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
You may read more about react CND from
here.