React Router (react-router-dom)

To implement routing in a ReactJS application...

• You need to install react-router-dom
• Use the components BrowserRouter, Route, Switch, Link from react-router-dom module.
• Define the routes and wrap them in BrowserRouter
• Define the links
• and you are ready to go. 

npm i react-router-dom --save

Recently stumbled across this blog which is an interesting read on react-router-dom:
https://blog.pshrmn.com/simple-react-router-v4-tutorial/



Found this tutorial loaded on GitHub which gives a simple beginning and escalates to advanced level.

I liked the first line in the tutorial..."At its heart React Router is a component, and its not going to display anything until you configure a route". Read and practice the tutorial...

https://github.com/reactjs/react-router-tutorial/tree/master/lessons/02-rendering-a-route

Another good example:

https://www.digitalocean.com/community/tutorials/how-to-handle-routing-in-react-apps-with-react-router

Using Node.js require vs. ES6 import/export

Read one of the postings on stackoverflow and it gave me that "a-ha" moment.

http://stackoverflow.com/questions/31354559/using-node-js-require-vs-es6-import-export

I am worried that I may lose this posting in stackoverflow so copying the question and answer from there to here for my future reference:


Question:

In a project I'm collaborating on, we have two choices on which module system we can use:

1. Importing modules using require, and exporting using module.exports and exports.foo
2. Importing modules using ES6 import, and exporting using ES6 export

Are there any performance benefits to using one over the other? Is there anything else that we should know if we were to use ES6 modules over Node ones?

Answer:

Keep in mind that there is no JavaScript engine yet that natively supports ES6 modules. You said yourself that you are using Babel. Babel converts import and export declaration to CommonJS (require/module.exports) by default anyway. So even if you use ES6 module syntax, you will be using CommonJS under the hood if you run the code in Node.

There are technical difference between CommonJS and ES6 modules, e.g. CommonJS allows you to load modules dynamically. ES6 doesn't allow this, but there is an API in development for that.

Since ES6 modules are part of the standard, I would use them.

React Redux

• redux provides an empty store where application state can be manufactured.
• You tell the store what to create as the application state, how to update the application state (thru reducer)
• store = Redux.createStore(reducer)
• Reading from the application state in application is straight forward: 
• store.getState()
• Updating the application state is by triggering the update logic in the store by dispatching the actions.
• store.dispatch({type: 'increase', graceMarks: 5})
• NOTE: When you update a state, you don’t update the state but rather create a new state out of old state.
• You can even subscribe to store to get the status on the updates.
• state.subscribe(state.getState())

• react-redux provides couple of additional facilities, Provider and connect.
• Provider to provide the store to the root component.
• Connect passes state, dispatch actions to child component. 

A sample using just redux:

// importing createStore from redux

import {createStore} from 'redux';

// Creating a reducer

const sampleReducer = function(state, action){

    if (!state){

         state = 0;

    }

    if (action.type === "INC"){

         state =  state + 1;

    }

    return state;

}

// Create a store. Passing in the reducer that i created above

const store = createStore(sampleReducer);

// subscribing to store to see the updates

store.subscribe(() => {

    console.log("state changed ", store.getState());

})

// start dispatching actions to store.

store.dispatch({type:"INC",payload:"something"})

Easy to learn: https://www.kirupa.com/react/introduction_to_redux.htm

There you go… You create a reducer, you create a store and then whenever you dispatch actions, the reducer or multiple reducers will act upon on that store. 

JavaScript function call, apply, bind methods

"Say, you created a function. If you can stitch this function to an object, the function then can access that object that it's been stitched to. call, apply, and bind help you do that"

Explained in terms of a straw:

"Say, you have a straw. You haven't yet dipped it in any drink, so what is the drink that's flowing in the straw? Nothing. 

But if you dip the straw in juice and start drinking, what is the drink that is running through the straw? Whatever juice you dipped your straw in. 

Say, you added some essence to the juice, you gonna suck them too.

So...

Straw.call(juice) ...this is how you attach your function to an object.

Straw.call(juice, essence) ...this is how you attach your function to an object and pass parameters too"

Function is an object in JavaScript and it has some in-built methods like call, apply, bind.

A simple example to explain how a call method works:

var sayHi = function(){
      console.log("Hi " + this.name);
}

sayHi(); //returns crazy results as it gets confused with "this"

var person = {"name":"Ramesh"};

sayHi.call(person); // returns Hi Ramesh because person object becomes "this" inside sayHi function.

sayHi.apply(person); // returns Hi Ramesh because person object becomes "this" inside sayHi function.

var sayHiNewFunction = sayHi.bind(person); // creates a new function binding passed in object to "this".

Read this article http://hangar.runway7.net/javascript/difference-call-apply where the author explained about call and apply in such a simple way!!!

Also read this article http://hangar.runway7.net/javascript/guide from the same author.

You can pass additional parameters (comma separated) to call. The first param is considered as the object and the other parameters as parameters.

You can pass first parameter and additional parameters (in the form of array) to call. The first param is considered as the object and the array of parameters is taken in as additional parameters.

You can pass first parameters and additional parameters to bind. It creates a new function with the first param as the object and the rest of the params as params.

call - for comma separated params
array - for array form of params
bind - a new function

Read more: https://codeplanet.io/javascript-apply-vs-call-vs-bind/

JavaScript Currying

Came across this site that explains JavaScript Currying in simple words. Good reading:)

https://www.sitepoint.com/currying-in-functional-javascript/

What is "export default" in JavaScript?

ES6 is the first time that JavaScript has built-in modules. ES6 modules are stored in files.

The "export" statement is used to export functions, objects or primitives from a given module(or file).

There are two types of export available:

• Named export - useful to export several values from a given file.
• Default export - there can only be a single default export from a given file. 

If a module defines a default export, then you can import the default export by omitting the curly braces.

Read more:

http://exploringjs.com/es6/ch_modules.html

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export

http://stackoverflow.com/questions/21117160/what-is-export-default-in-javascript

ReactJS

What is ReactJS?

Following is the answer that I found when searched the above question on Google:

"React is a JavaScript library for creating user interfaces by Facebook and Instagram. Many people choose to think of React as the V in MVC. We built React to solve one problem: building large applications with data that changes over time."

Links to read more about ReactJS:

https://www.tutorialspoint.com/reactjs/

https://www.codecademy.com

https://egghead.io/courses/getting-started-with-redux

https://css-tricks.com/learning-react-router/

How to access ReactJS libraries?

• Accessing ReactJS library from cdn in the html file is one way. (Refer: https://www.kirupa.com/react/creating_single_page_app_react_using_react_router.htm)

• <!DOCTYPE html>
  <html> 
  <head>
  <title>Creating React Component with React.createClass</title>
  <script src="https://unpkg.com/react@15.3.2/dist/react.js"></script>
  <script src="https://unpkg.com/react-dom@15.3.2/dist/react-dom.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
  </head>
  
  <body>
   <div id="app"></div>
   <script type="text/babel">
   var destination = document.getElementById("app");
  
   var App = React.createClass({
     render: function() {
       return (
         <div>
           <h1>Welcome World!!</h1>
         </div>
       )
     }
   });
  
   ReactDOM.render(
     <div>
       <App/>
     </div>, 
     destination
   ); 
   </script>
  </body>
  
  </html>

• Accessing ReactJS related modules from npm and bundle them and provide them to the html file is another way. (Refer: https://www.tutorialspoint.com/reactjs/reactjs_environment_setup.htm)

How to create ReactJS components?

There are two ways to create the ReactJS components.

• Using the traditional way: React.createClass
• Using the ES6 way: extends React.Component

Read more: https://toddmotto.com/react-create-class-versus-component/

Setting up Sublime-Text for React JSX development:

http://www.nitinh.com/2015/02/setting-sublime-text-react-jsx-development/