Why React ?

  • Makes use of a virtual DOM to track changes in elements. When a change is detected, React constructs a patch representing the actual change to the DOM and applies the patch. By not having to re-render the entire DOM for a large table each time an element changes, React shows significant performance gains over other JavaScript frameworks
  • React.js uses a special syntax called JSX, which allows you to mix HTML with Javascript.
  • Virtual Dom also added security it means if anyone try to exploit DOM from client side it will get refresh automatically because changes happen in virtual DOM only. IT works like SVN DIff.
  • Server-Side Rendering means you can render through server side also which also helps it to increase it’s rendering performance.

 

React JS Installation :-

  1. Mkdir FOLDER_NAME
  2. Cd FOLDER_NAME
  3. npm init (keep app name small case)
  4. Npm install –save react react-dom (install react and react dom package lastest one)
  5. npm install webpack -g (webpack is a module bundler.)
  6. npm config set prefix ~/.npm-global
  7. Register devDependencies like this
    • “devDependencies”: {
      “webpack”: “^1.13.1”,
      “babel-core”: “^6.9.1”,
      “babel-preset-es2015”: “^6.9.0”,
      “babel-preset-react”: “^6.5.0”,
      },

 

  1. Npm install webpack-dev-server (It automatically updates the browser page when a bundle is recompiled)
  2. Npm install babel-core –save-dev
  3. Npm install babel-loader –save-dev
  4. Npm install babel-preset-es2015 –save-dev
  5. Npm install babel-preset-react –save-dev
  6. Npm install flux (flux architecture pattern/ framework)
  7. Npm install Keymirror(Create an object with values equal to its key names eg:-constants.)
  8. Npm install events (To Trigger Event in Flux at update)
  9. Npm install reqwest–save (To do ajax calls for Rest API)

 

To Setup Bootstrap in React :

  1. Install these packages(all loaders are used to compile css, less, file files all are mandatory to install)
    1. Npm install less –save-dev
    2. Npm install less-loader –save-dev
    3. Npm install bootstrap –save-dev
    4. Npm install react-bootstrap –save-dev
    5. Npm install css-loader –save-dev
    6. Npm install file-loader –save-dev
  2. Add import ‘bootstrap/less/bootstrap.less’ to main.js and this to App.js or wherever you want to use components import Button from ‘react-bootstrap/lib/Button’.
  3. We are adding individual components in bootstrap which is good for client side rather than downloading all components.
Advertisements