Introduction

FZ-REACT-CLI is a cli tool to create and build react project and js library

Installation

npm install fz-react-cli -g

Create App

fz-react-cli app <appname>

start app

npm run start

default running port 9090

start docs

npm run docs --server:componentPath=./src/components/

default running port 9292

If src folder name changed to appfolder then

npm run docs --server:componentPath=./<appfolder>/components/

Create Library

fz-react-cli library <libraryname>

Advanced

Node Cluster Monitor

fz-react-cli cluster:monitor

cluster config object

    {
      "cluster":[
      {
        "ip": "localhost",
        "port": "4040"
      },
      {
        "ip": "localhost",
        "port": "4050"
      }
    ]
    }

  

Node

fz-react-cli node <host> <port> <branch> 

Learn

Learn all topic in deep. I will explain basic in the following section

Javascript

Object methods

      var target = Object.assign(target,source1,source2,...);
    

The Object.assign() method is used to copy the values of all properties from source objects to a target object. It will return the target object.

Array methods

Map

Map function used to map value to correponding array element

        var a1=[1,2,3];
        var a2=a1.map(function(val){
          return val*2;
        })
        a1=[1,2,3] a2=[2,4,6]
    

Filter

Filter function used to filter values from give array

        var a1=[1,2,3];
        var a2=a1.filter(function(val){
          val%2;
        })
        a1=[1,2,3] a2=[1,3]
    

Reduce

Reduce function used to reduce one dimention array to single value.

        var a1=[1,2,3];
        var a2=a1.reduce(function(result,next){
          return result+next;
        },0)
        a1=[1,2,3] a2=6
    

Try these examples Link

ES2015/ES6

Arrow Function

      function test(a,b){
        return a+b
      }

      var test = (a,b) => {
        return a+b
      }

      only return directly return no need curly braces
      var test = (a,b) => a+b

      Single argument no need function of parentheses
      var test = a => a+10;

      function test(){
        return {
          a:1
        }
      }

      object return using arrow function

      var test = () => ({a:1})
  

Class

      class Test{

      }

      class Test{
        constructor(){
          super();
        }
      }
      class Test{
        constructor(){

        }
        get(){
          //instance method
        }
      }
      Test.method=function(){
        //static method
      }
      Test.obj={}
      //Static member

  

Template string

    var str1="Hello"
    var str2="World"
    var newString=str1+", "+str2;

    var newString =`${str1}, ${str2}`
  

Promise

    Callback hell...
    function test(cb){
      code...
      may throw error
      cb();

    }
    function test1(cb){
      code...
      may throw error
      test()
    }

    horizontal Flattern callback hell using promise

    var promise =new Promise((resolve,reject)=>{
      task...
      taskSuccess call resolve()
      taskFailure call reject

    })
    promise.then(()=>{
      return "pass next then"
    },(e)=>{
      //error handling
    }).then((prePass)=>{
      return
    }).catch((e)=>{
      error handling...
    })

    Vertical flattern/Normal flow using async function
    async function feature comes in ES7
  

React

JSX

  1. How to create element
            
        
  2. JSX Condition
            
        
  3. JSX Loop
            
        
  4. How to create functional Component
            
        
  5. How to create Stateless es6 Component
            
        
  6. How to create Stateful es6 Component
            
        
  7. Component Lifecycle
            
        
  8. Note Important
            
        
More

Redux

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 4 Submenu 1

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Section 4 Submenu 2

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!

Try to scroll this section and look at the navigation bar while scrolling! Try to scroll this section and look at the navigation bar while scrolling!