Archives for 

Uncategorized

ReactJS Tutorial

UI developers and geeks are struggling to catch the technology stacks nowadays.Big cats including Google and Facebook are   in this race.ReactJS ,a contribution  by Facebook is really a game changer.Good percentage of UI experts are a bit biased towards using ReactJS.We shall begin our discussion with  fundamentals.

Overview of  ReactJS

As we seen earlier,this is one of the pertinent solutions for UI business requirments.Initially developed by Facebook,it started gaining popularity when introduced  to Facebook news feed and Instagram.The initial release of ReactJS was in 2013.

Main Features of ReactJS

Virtual DOM

This is a key feature of ReactJS with which ReactJS creates an in memory data structure cache ,calculates the diffrerences and updates the Document Object Model(DOM)

JSX

ReactJS uses JSX for creating components.JSX is a statically typed object oriented language which is then converting to more efficient JavaScript code to run in browsers.

One way Data Flow

Properties are passed to a component’s renderer as properties in its HTML tag. A component cannot directly modify any properties passed to it.But instead passing callback functions that  modify values.

Sample application with ReactJS

Now it is pretty good if we familiarize ReactJS with a sample application.This application displays a welcome message in the browser window

Steps are below

step 1)If not already installed, Install Node.js and npm
step 2)Install babel transpiler and babel-cli using npm so that we can use es6 and React presets

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

step 3)Create a project directory sampleApp and go to the directory

     mkdir sampleApp
     cd sampleApp

step 4)do npm init with defaults(As mentioned here)

     npm init

step 5)Install webpack bundler

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

step 6)Replace the test entry in scripts of  package.json

           {
      "name": "sampleapp",
      "version": "1.0.0",
      "description": "",
      "main": "index.js",
      "scripts": {
        "start": "webpack-dev-server --hot"
      },
      "author": "",
      "license": "ISC",
      "dependencies": {
        "react": "^15.4.2",
        "react-dom": "^15.4.2",
        "webpack": "^2.2.1"
      }
    }

step 7)Install the react and react dom

   npm install react --save

npm install react-dom –save

step 8)Install the babel presets and tools

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

step 9)Create the following files in the project directory

SampleApp.jsx

import React from 'react';

class SampleApp extends React.Component {
   render() {
      return (
         <div>
            <p>Welcome to the world of ReactJS</p>
         </div>
      );
   }
}

export default SampleApp;

main.js

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

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

webpack.config.js

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

   output: {
      filename: './index.js',
   },

   devServer: {
      inline: true,
      port: 8030
   },

   module: {
      loaders: [
         {
            test: /\.jsx?$/,
            exclude: /node_modules/,
            loader: 'babel-loader',

            query: {
               presets: ['es2015', 'react']
            }
         }
      ]
   }
}

module.exports = config;

The port we are using  8030
index.html

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

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

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

</html>

10)Now run the application

   npm start

Observe the console for the success message.The output in the browser would be the welcome message .