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

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

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

After that ES2015 feature

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