How to install React js?
There are two ways to install React:
Web Page Installation
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.
Create a file index.html and save the following code.
<!DOCTYPE html> <html> <head> <title>My React App</title> <script src="https://unpkg.com/[email protected]/umd/react.development.js"></script> <script src="https://unpkg.com/[email protected]/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.
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
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.