How to install React js?
There are two ways to install React:
Web Page Installation
This first method isn’t what most of the people use to set up React but it is the easiest way and aims for the beginners. If you ever have used any other JavaScript library such as jQuery, this is the least scary way to get used to it.
You are going to need three CDNs in the head section of the web page:
- React, React DOM, and Babel.
- React.js is a single file containing all the code.
- React-dom.js is the library used to actually render the UI in the browser.
Babel is the ES6 transpiler and transpile your JavaScript ES6 code into ES5.
Create a file index.html and save the following code.
<!DOCTYPE html>
<html>
<head>
<title>My React App</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel" >
// React code
</script>
</body>
</html>
</script></body></html>
We have linked the react and react-dom for the development mode from the CDN. To execute the code via Babel, use type="text/babel" in the script tag.
These are the minimum requirements for executing the React in the web browser. You can also use the external file for the React code using src="external_react.js" in the <script> tag.
Installation via Node.js
The second method to install the React on your computer is via Node.js. If you haven’t installed Node.js on your PC, Go to https://nodejs.org/en/ and download the latest recommended version for your operating system.
After you download the installer, double click on it to execute it. Once you are done, go to your command promote and enter the node –v command.
This shows that node.js have been added successfully on your machine.
Now enter npm –v, and npx –v commands.
npm can install packages locally or globally. It is available for use after the installation of node.js.
Facebook has created create-react-app, an environment needed to create a live development server. It uses WebPack to compile React, JSX, and ES6 automatically. once you install create-react-app, you don’t need any transpiler to execute JSX code.
To set up create-react-app, run:
npx create-react-app reactcourse
To run React you need an equal or higher version of 5.2 of Node.js
Once you are done with this, create a new folder where you want to put your project files. Let’s say, this is D:\ReactCourse
Go to command prompt and enter the following commands
cd d:\reactcourse
d:\
npm start
The last command will start the live server on your computer. Now open your favorite web browser and enter localhost:3000
This concludes our installation process for the React. You can use any of the installation methods to get started with React. In the next lesson, we will start writing the code in the React. If you have any question regarding the installation, leave it in the comment section below.
| React JavaScript Requirements | Tutorial Home | React First Program |
Comments