React Learning 101

React Learning 101

If you are a newbie in javascript and want to learn to react JS, react-native then you should have a good understanding of some basic concept of functional programming.
I am a full-stack developer, previously I worked on NodeJS, And AngularJS but when I moved to ReactJS and React Native, then I realize that it uses all core feather of functional programming.
So before moving to react or React-Native, you should know the following terms, which are involved directly or indirectly.

  • Higher-Order function
  • JavaScript Array in Depth (Map)
  • Reduce data from JavaScript Array
  • Closure
  • Curring
  • Recursion
  • Callback
  • Promise
  • JavaScript ES6 and ES7 Syntax

Higher-Order function: This is one of the best feathers which well-suited javascript, for higher-order function, a higher order function is a function that can be assigned to any variable then later it can be executed from that variable, and a higher order function can take function as argument and it can also return a function as a result.
For example, Filter is a high order function that takes a function as an argument.

Map: It is also a high order function like filter, but unlike filter object in a usable form, map is used to iterate through all item which is present in array, and also return an item to a new array
For example:

let animals=['cat','dog','rat','elephant'];
let newArray=animals.map((animal)=>animal)

Reduce: It is also a high order function, it is also received and iterate item like filter and map as the second argument and first as result value.
For Example

//Reduce with simple array
let numbersArray = [12,45,67,12,44,43];
let numberSum    = numbersArray.reduce(total, num)=> {
                          return total + num;
                    })
                    
//Reduce with array of objects
let arrayOfObject=[
                    {egg:"ranvir",price:400},
                    {cake:"raju",price:340},
                    {suer:"raj",price:456}
                    ]
 let numberSum    = arrayOfObject.reduce(total, items)=> {
                          return total + items.price;
                    },0)

Closure: All function in javascript is a class because here we can access all outer variable inside a function. the closure is a combination of function and lexical scope.
Example:

  var inc = function () {
  var counter = 0;
  return function () {
          counter += 1; 
          return counter
      }
  }

var add=inc();

add();
add();
add();
// output is  3

Curring: Curring is a sequence of function which given final output at the end. Curring is achieved by bind function to next function. It takes the argument one by one and at the end return final result;
Example

let food=function(dish1){
            return function(dish2){
                        return `I love to eat ${dish1} and ${dish2}`
            }
   }

let breakfast=food('cake');

breakfast('egg');    // I love to eat cake and egg
breakfast('sweet'); // I love to eat cake and sweet

Recursion: Recursion is nothing but just a function call itself. This method helps to achieve looping feather without using a loop, and helps to reduce code size.
Example:


let countdown=function(n){
                console.log("count:",n);
                if(!n)return;
              countdown(n-1)
          }
          
countdown(10);
//=====Output=======
// count:10
// count:9
...
...
// count:0

Callback: It is a way to create an abstraction of any method, a callback is nothing but here we pass a function as an argument to a function, and that function is invoked inside the function.
Example:


let auth=function(cb){
         let response=function(){
             // api call and cookie checking 
          }
          if(response){
               return cb(response);
           }else{
               return cb(null);
           }
           
 auth(function callback(data){
 
 })

Promises: Promise is same as callback but having the ability to work in asynchronous, it is more powerful than the callback. A promise can be in three state

  • Pending: initial state, neither fulfilled nor rejected
  • Fulfilled: when action complete successfully
  • Rejected: when action failed

Example:

let promise = new Promise(function(resolve, reject) {
  resolve("ok");
  reject(new Error("error")); // ignored
  setTimeout(() => resolve("…")); // ignored
});

promise.then(
  function(result) { /* success */ },
  function(error) { /* error error */ }
);