# 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

- ES2015/ES6
- React
- Redux
- React-Redux
- simple-normalizer
- redux-router-middle
- fz-i18n
- fz-propertytojson
- fz-dnd
- fz-permission
- fz-layout
- css-modules
- webpack

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!