Looking for how to Install React JS? You are at right place, we will discuss manual and automatic installation of React js in this article.
React JS is a famous JavaScript flexible front end library which is introduced by Facebook. It is totally component oriented and helps to build the modular UI.
How to install the React JS :
There are 2 types of the installation process.
- Automatic installation
- Manual Installation
1. Automatic Installation of React.JS:
The automatic process should be used when we want to create a new application of React.
Instructions:
- npm install -g create-react-app
- create-react-app my-app
- cd my-app
- npm start
(After that your application will run on the browser)
2. Manual Installation of ReactJS:
The manual installation process should be used when we want to use react in our existing application.
Requirements:
- Webpack – It is a bundler, with the help of this we can write modular code and it creates a bundle of all the modules, it increases the performance of our application.
- Babel – It is a compiler, it helps to run modern JavaScript (Like ES6) code in the older browser also.
After installing webpack and Babel we have to install “react” and “react-dom” module. - npm install react react-dom –save After these installations, we can make components and render them also.
Folder structure:
This folder structure will help you to know all the required files used in our application. As you see node_modules folder is here, it contains all the modules which are required in our application like react, react-dom, webpack, Babel etc…
Most required files:
⦁ index.html: This file will look like this.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>React App</title> </head> <body> <div id="my-app"></div> </body> <script src="/bundle.js"></script> </html> |
⦁ .babelrc file: This file includes Babel configuration.
|
1 2 3 |
{ "presets": ["react", "es2015", "env"] } |
⦁ Webpack.config file: this is webpack configuration file.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
module.exports = { entry: [ './src/index.js' ], output: { path: __dirname, publicPath: '/', filename: 'bundle.js' }, module: { loaders: [{ exclude: /node_modules/, loader: 'babel', query: { presets: ['react', 'es2015', 'env'] } }] }, resolve: { alias: { 'react/lib/ReactDom': 'react-dom/lib/ReactDom' }, extensions: ['', '.js', '.jsx'] }, devServer: { historyApiFallback: true, contentBase: './' } }; |
⦁ src/index.js file: This is the main file because we have made this file as the entry of this application.
|
1 2 3 |
import React from 'react'; import ReactDOM from 'react-dom'; ReactDOM.render('This is demo app.', document.getElementById('my-app ') ); |
So, your application is ready, for run this application use “npm start”.
With the help of this blog, you can install react in your application. I have introduced 2 methods of installation. So, you can create new react application or you can add react application in your existing application.
Habilelabs provides Best in Development of web application and Mobile apps Development services with best quality assurance, contact us if you have something to build in your mind.
Ask your quires about installation problem in the comment section.
Hope you found it helpful, so don;t forget to share with friends.
