# Introduction

fz-react-cli is a node cli tool to create and build our react project and also JS library. Before installation kindly check your node version is v6.10.0 or above (node -v) and also check git installed your machine (git --version).
Node - Download

### Installation

        > node -v
        > git --version
        > npm install fz-react-cli -g

### How to create react application and how to start the application?

You can create and start the application using the following command. It starts running in the default port 9090. You may change your running port by passing argument --server:port=8080.

        > fz-react-cli app <appname>
        > cd <appname>
        > npm run start

Some useful arguments

- --server:port=9090
  (for changing port)
- --server:context=support || portal
  (for changing context)
- --dev:hot=true
  (for hot reloading while development)
- --server:prod=true
  (for checking like production build )

### React application folder structure look like below.

          -<appname>
              -src
                  -components
                      -<componentnameasfoldername>
                          -__tests__
                              * <componentname>.spec.js
                          -docs
                              * <componentname>__<state1>.docs.js
                              * <componentname>__<state2>.docs.js
                          * <componentname>.js
                          * <componentname>.css

                      * index.js ( component export )
                      * docs.js  ( docs export )
                  -containers
                      -<containercomponent>
                          *<containercomponent>.js
                          *<containercomponent>.css
                  * index.js
              -mockapi
                  * index.js
              -app
                  * index.html
              -docs (optional)
                  * all.html (optional)
              * package.json
              * .gitignore
              * README.md

    Note:
          - folder
          * file
          -<> userfolder
          *<> userfile

Information: You may create some folder under "components" folder. We can call it as group. Under group folder, we create component then it is specific to that group not generic component. It is under "components" then more generic component. Similarly rule for containers also.

### What is Component?

Components are small and reusable building blocks in your application. Example Button is a component. We can use same button throught our application. These components are created under components folder.

### How to create component?

Inside components folder create new folder and rename into component name. Create Component name dot css and js file. Create "docs" folder for documentation. create "__tests__" folder for testing purpose. we will discuss docs and testing later. Simple Contact component below.

    function Contact(props){
      var { name, onClick } = props;
      return (
        <div className="contact--default" onClick={onClick}>
          <span>{name}</span>
        </div>;
      )
    }

Don't worry if you not understanding this example. I will explain later

### What is Container?

Container is also component. But It's main responsibility to fetch data using api and maintaining state and pass the state to it's children. Creating container component is similar like component. It also has react lifecycle method

        class ContactListContainer extends React.Component{
          constructor(props){
            super(props);
            this.state={
              contacts:[]
            }
          }
          render(){
            return <div>
              {
                this.state.contacts.map((contact)=>{
                  return <Contact name={contact.name} onClick={()=>{console.log(contact.id)} />
                })
            }
            </div>
          }
        }
        componentDidMount(){
          fetch('/api/v1/contacts').then(res=>res.json()).then(res)=>{
            this.setState({contacts:res})
          })
        }
      }

Don't worry if you not understanding this example. I will explain later

### What is component documentation?

Once components grow, It is hard to find out available component and it is possible UI state of the component. So You need a documentation for your components. Each component has docs folder and you can define different UI state of your component. This will display your component documentation

### How can i view my components as documentation?

You can run the below command to start your document server. It runs in the default port 9292. You may change your running port using --server:port={port}

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

### What is it means --server:componentPath?

It means, You can mention your components library location in your application folder. Default location under src/components

### Should i maintain component library inside application repository?

No. Not necessary. You may create separate repository for your component library. You can publish your component library and use inside your application

### How to create separate component library?

You can create library using below component

    fz-react-cli library <libraryname>

open package.json file and add below code into scripts

    "scripts":{
        "docs":"fz-react-cli docs",
        ...
      }

### What about folder structure of component library?

It is similar to app folder structure. You can create your component directly under src folder. No need to create under components folder. Remove some unwanted folder like container, app folder,etc. see below for sample

          -<componentLibrary>
              -src
                  -<componentnameasfoldername>
                      -__tests__
                          * <componentname>.spec.js
                      -docs
                          * <componentname>__<state1>.docs.js
                          * <componentname>__<state2>.docs.js
                      * <componentname>.js
                      * <componentname>.css

                  * index.js ( component export )
                  * docs.js  ( docs export )
              -docs (optional)
                  * all.html (optional)
              * package.json
              * .gitignore
              * README.md

    Note:
          - folder
          * file
          -<> userfolder
          *<> userfile

### How to build my component library?

You can build your component library using below command. It builds your component library into different module system common js and es6. Understand different module system (AMD,Commonjs,umd) (link)

    npm run build:component
    npm run build:es

### Can I get single js for my component library?(UMD)

You may build as single js. but I am not prefer becuase component library has images and fonts and css and other resources. Build support bundle css inside js. there is no problem it is plain Css. If it use images fonts then we need to provide proper domain to download images and fonts. My opinion is to install as a dependencies and require you app and use it.

### How to publish my component library?

It is out of the scope of this library. It is based on your registry configuration. If you configure npm registry using below component to use publish. you can get more information from this video tutorial (Link)

    npm publish

### How to create other than component library (like redux) only js not css/images/fonts ?

you can use the same command. Update your package json information.

    fz-react-cli library <libraryname>

### Can i get single js for my library?(UMD file)

Yes. You can get your library as single umd js file. You can use the below command to create your umd js. Once build success, It is created under dist folder. you can also build your library in commonjs and es6 modules

    npm run build:umd

    npm run build:component
    npm run build:es

### How can i change my umd global variable?

In package json file, you can see the variable "umdVar". You can change your globally export variable there.

    fz-react-cli propertyToJson <propertyfolder> <jsonfolder> <defaultpropertyfile> <usedpropertyasfile>
    Example
    fz-react-cli propertyToJson ./support/properties/ ./support/i18n ./support/properties/ApplicationResources_en_US.properties ./support/properties/JSResources.properties

### Some restriction

don't create docs app name

### 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> <repourl> <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
- Server Side Rendering

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

# Basic

Before going to write application we are going to learn some basic. Those things only going to use most of the places.

## Javascript

In javascript, We are going to see following methods

- Object.assign
- Object.keys methods
- Array.map
- Array.filter
- Array.reduce
- Function.apply
- Function.call
- Function.bind

After that ES2015 feature

- arrow function
- class
- string template
- Promise

### Object.assign

      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

        Some of the feature not supported all browser. We are using babel to transpile es2015 code into es5 code. We will see babel in feature

### Functional Programming

book

### Pure Function

#### What is pure function?

A pure function is a function which given the same input, will always return the same output and also not produces any side effects.

        function add(a,b){
          return a+b;
        }

        Not pure function
        function add(){
          var a=document.getElementById("a").value;//access dom object
          var b=document.getElementById("b").value;
          return a+b;
        }
        function add(a,b){
          updateIntoDisk(a+b);
          return a+b;
        }
        function add(obj){
          obj.c=obj.a+obj.b;
          return obj;
        }

#### What is side effect?

modification of some kind of state

#### Advantages of purefunction

Code easy to testable. easy to debug.

# 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

Redux is a state management library. You can get more information from redux docs. Here we going to discuss about basic idea of state management

#### What is State?

State means data and It can be changed based on action/time,etc.
Example switch has two state one is "ON" another one is "OFF". You can "ON" or "OFF" a switch based on action.

        function switch(state="OFF"){
            return state;
        }
        switch ();

I just define pure function. It is going to handle switch state. If you call switch function, you get the switch state. Now it is always return "OFF" state. because we didn't handle any action.
My action is going to press switch button. We slightly modify above function which handle our actions

        function switch(state="OFF",action){
        if(action=="PRESS"){
            if(state=="ON"){
              state="OFF";
            }
            else{
               state="ON";
            }
        }
        return state;
        }

        var previousSwitchState="ON";
        var  currentSwitchState= switch(previousSwitchState, "PRESS");
        console.log(currentSwitchState)

Anybody feels problem in the above action.
Some problem in the above action. Assume switch is already "ON" state I press switch for "ON". But It toggle it's state. So action and some more information needed. So instead of action as string we pass it as object.

{type:"ACTION_TYPE",data:{information about action}}

        var Off = {type:"PRESS",data:"up"}
        var On = {type:"PRESS",data:"down"}

        function switch(state="OFF",action){
          if(action.type=="PRESS"){
              if(action.data =="up"){
                state="OFF";
              }
              else if(action.data =="down"){
                 state="ON";
              }
          }
          return state;
        }
        var state1 =switch(previousState,on);
        var state2 = switch(state1,off);

Switch was connected to bulb. Whenever switch state changes bulb going to glow or not glow.

        bulb(switchState){
          if(switchState=="ON"){
            return "glow"
          }
          else{
          return "not glow"
          }
        }
        var previousState;
        dispatch(action){
          var nextState=switch(previousState,action);
          console.log(bulb(nextState));
          previousState=nextState;
          return action;
        }

        var Off = {type:"PRESS",data:"up"}
        var On = {type:"PRESS",data:"down"}

        dispatch(On);
        dispatch(Off);

state data nothing but your api data. switch and bulb are your html when ever data changes you have to update the UI

Redux router middleware

# Server side rendering

Notice: 1. Not access document/window/global variable inside render method 2. * browser time zone string (ip based) 4. xmlhttprequest - both support node, browser library 5. Initial data portalInfo hard coded (change to api call) 6. * editor js loading handling 7. build deploy and rollback. node server start and stop 8. node build update 9. flow of request server side rendering Header customization 1. request->tomcat filter -> jsp -> http connect to node (if auth cookie) -> (do all api calls with or without cookie)-> generate html using that state and return to jsp -> jsp append html response -> client response 2. request -> node -> call apis with request cookies -> return html -> client response 10. threshold Advantage reduce api call round trip fast rendering (html once parse done render) SEO easy to parse (no need client rendering from seo) server side rendering css modules. server side rendering code splitting https://github.com/kriasoft/isomorphic-style-loader https://github.com/lyft/universal-async-component hash changing ={ } Node cluster Manager git:””,hash:”" node:[{“ip”,”port”},{“ip”,”port”}]; node information - {ip:””, port:””} port free? git clone succes? git hard clone List of Cluster node verification https://stackoverflow.com/questions/16525617/how-to-detect-users-timezone/16526897#16526897 https://github.com/aickin/react-dom-stream https://medium.com/@aickin/whats-new-with-server-side-rendering-in-react-16-9b0d78585d67