How to Install React JS?
Overview
ReactJS is a free, open-source JavaScript library that creates modular user interface elements. The library made its debut in May 2013 and is currently one of the front-end libraries for web development that is most frequently used. More and more organizations and startups are now upgrading to React due to the various advantages it provides
Introduction
ReactJS is a simple JavaScript UI library that has lots of features and is component-based. It is an open-source project created by Facebook. It is used to build user interfaces (UI) on the front end.
One of the most crucial features of React is the ability to generate components that are similar to custom, reusable HTML elements, fast and effective. Utilizing state and props, React also simplifies the handling and storage of data.
React is the view layer of an MVC application (Model View Controller).
Features of React
The features of the ReactJS library are-
- Solid base architecture
- Extensible architecture
- Component-based library
- JSX-based design architecture
- Declarative UI library
Benefits
A few benefits of ReactJS are as follows-
- Easy to learn.
- Quicker method of coding a functionality.
- High quantity of ready-made components readily available.
- Large and active community.
Note:- Many popular applications are made using React library like Facebook, Instagram, Netflix, etc.
CDN Links
React, React-DOM, and Babel standalone are all available as CDN:
Note:- Replace development.js with production.min.js before deploying to a live website! React's development versions offer more informative error messages, but they significantly slow down your website.
An example of using CDN links is as follows.
index.html
The root div element will serve as the app's entrance point. text/babel script type is used as it is mandatory for using babel. The h1 tag we created has been rendered to the DOM when you view the index.html file in the browser.
Output
Ways to Install ReactJS
Following are how you can install react:
1. Using npm command
First, ensure that node.js is installed. If it is not installed, then install node.js first. Install create-react-app tool We will install a create-react-app tool using npm. React applications can be created easily using this tool. create-react-app can be set up either permanently at the system level(global) or momentarily at a folder level (local).
The following command will be used to install it globally.
Creating a new react project Create a folder in which you want to create the project.
Create a new Project now using the command:
NOTE: Do not create the project using uppercase letters Running the React Application Change the directory to the project we have generated and use npm start to execute it locally on our system. Open a browser, then go to http://localhost:3000. We will now see the React Application that has been generated.
We have created a new project using React and executed the project.
The aforementioned is a more straightforward method to install react. However, as a developer, you should know more about what is happening under the hood, and that process will be discussed subsequently.
2. Using create-react-app command
You can install react using the create-react-app command.
3. Installing ReactJS using webpack and babel
To install react in this method, we create a JavaScript build toolchain.
Typically, a JavaScript build toolchain consists of:
- A package manager, like Yarn or npm. It enables you to access a vast ecosystem of third-party packages and simplifies installing or updating them.
- A bundler (webpack in this case) lets you write modular code and bundle it into small packages to optimize load time.
- A compiler, like Babel, lets you write modern JavaScript code that still works in older browsers.
Webpack is a module bundler (manages and loads independent modules). It gathers together dependent modules and compiles them into a single (file) bundle. You can configure this bundle using the webpack.config file or by using the command line while creating apps.
Babel is a JavaScript compiler and transpiler. It is employed to translate one source code into another. By doing this, you may use the new ES6 capabilities and JSX in your code while having babel translate it to standard ES5, which is supported by all browsers.
Steps to create react app:-
Create a root folder to initialize npm in it (optionally, it can also be initialized).
We need a package.json file to create modules, so we initialize npm.
Using the -y option, skip the prompt asking for details such as package name, description, author, etc.
Install react and react-dom Our primary goal is to install ReactJS, including its dom packages, using the npm commands install react and react-dom, respectively. You can add the packages you install to the package.json file using the -save option.
Install webpack We need to install a webpack to create a bundler.
Install Babel Install babel, and its plugins babel-core, babel-loader, babel-preset-env, babel-preset-react, and, HTML-webpack-plugin
Set Compiler, Server, and Loaders The following code should be added to the webpack-config.js file. We have chosen main.js as the webpack entry point. The location where the packaged app will be served is the output route. The development server is also being configured to use the 3000 port. Any port you wish can be used.
webpack.config.js
To load CSS, you have to install CSS and style-loader.
Add the following code:
Add the start and build commands in package.json
index.html In a regular HTML file, add div id = "app" as the root element for the react app and add index_bundle.js script, which is our bundled app file.
App.js and main.js
Sample App.js
To view this component in the browser, we must import and render it in our main app element.
main.js
Every time you want to use something, you must first import it. After creating the component, you must export it and import it into the file where you want to use it if you want to use it in other areas of the project.
Running the Server We have completed the setup, and we can now start the server using the command:
We can view our application on http://localhost:3000/ where 3000 is the port number we had specified in webpack.config.js
Generating the bundle We need to run the following command to generate bundle.
index_bundle.js file is created.
Conclusion
- React is a free and open-source front-end JavaScript library for building user interfaces based on UI components. It is maintained by Meta and a community of individual developers and companies.
- There are three ways to install react:
- Using the npm command.
- Using create-react-app tool.
- Using webpack and babel.
- npm and create-react-app methods are easier to install react, but they do not explain howto react is installed.
- Installing reactJS using webpack and babel describes the process in depth, as in what all things are necessary to create a react application.