Follow Me:

Monday, 3 July 2017

ReactJS Simple Installation Setup Steps

React is front end library developed by Facebook. It's used for handling view layer for web and mobile apps. ReactJS allows us to create reusable UI components. 


React implements one way data flow which makes it easy to reason about your app. Flux is a pattern that helps keeping your data unidirectional.

React is all about components. You need to think of everything as a component. This will help you to maintain the code when working on larger scale projects.

JSX − JSX is JavaScript syntax extension. It isn't necessary to use JSX in React development, but it is recommended.



 Steps 1 :

 First install Nodejs and NPM. For Install  Nodejs Setup Environment

Steps 2 :

To install Global packages for this install babel

sudo npm install -g babel
npm install -g babel-cli

 Steps 3:

Create Folder

Create the reactjs execution folder by using command prompt by using below command.

 mkdir reactApp
 npm init
 
Steps 4:

Install Dependencies Modules like install webpack bundler.

npm install webpack --save
npm install webpack-dev-server --save

Install react and react-dom dependencies

npm install react --save
npm install react-dom --save

Install the babel plugin module

npm install babel-core
npm install babel-loader
npm install babel-preset-react
npm install babel-preset-es2015

Steps 5:

Create the reactjs files

index.html
App.jsx
main.js
webpack.config.js

Index.html

<!DOCTYPE html>
<html lang = "en">

   <head>
      <meta charset = "UTF-8">
      <title>React App</title>
   </head>

   <body>
      <div id = "app"></div>
      <script src = "index.js"></script>
   </body>

</html>

App.jsx

import React from 'react';

class App extends React.Component {
   render() {
      return (
         <div>
            Hello World!!! Welcome to Codingslover...!
         </div>
      );
   }
}

export default App;

main.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App.jsx';

ReactDOM.render(<App />, document.getElementById('app'));

webpack.config.js

var path = require('path');
var webpack = require('webpack');

var config = {
   entry: './main.js',

   output: {
     // path:'./',
     path: path.resolve(__dirname, 'build'),
      filename: 'index.js'
   },
   
   devServer: {
      inline: true,
      port: 8080
   },
   
   module: {
      /*  // loaders: [
         {
          //  test: /\.jsx?$/,
          //  exclude: /node_modules/,
          // loader: 'babel-loader',
               
           // query: {
            //   presets: ['react']
           // }
        // }
      //]  */
   
     rules: [
      {
        test: /\.jsx?$/,
        exclude: [/node_modules/, /\.test\.jsx?/],
        use: [{
          loader: 'babel-loader',
          options: {
            presets: ['react', ['es2015', {'modules': false}]]
          }
        }]
      }]
   }
   ,
    resolve: {
       extensions: [ '.js', '.jsx']
    }
}

module.exports = config;

Steps 6:

Run the reactjs in command  prompt

Npm start




Advantage :
  • React uses virtual DOM which is JavaScript object. This will improve apps performance since JavaScript virtual DOM is faster than the regular DOM.
  • React can be used on client and server side.
  • Component and Data patterns improve readability which helps to maintain larger apps.
  • React can be used with other frameworks.
Categories: , ,

0 comments:

Post a Comment