All About REACT ---------------

MERN.md

MERN Stack

The MERN stack consists of the following technologies:

• MONGODB: A document-based open source database.

• Express: A web application framework for Node.js

• React: A JavaScript front-end library for building user interfaces.

• Node.js: JavaScript run-time environment that executes JavaScript code outside of a browser ( such as a server)

  and Mongoose: Simple, schema-based solution to model application data.

Database Concepts

Tabular (Relational)	MongoDB
Database	Database
Table	Collection
Row	Document
Index	Index
Join	$lookup
Foreign Key	Reference

MongoDB Documents - BSON Types

    {
       name: "Sushil Singh",
       title: "Developer & Student",
       address : {
                     address1 : "123 Sipaipara",
                     city: "Siliguri",
                     state: "West Bengal",
                     postal_code: "735135"
                  },
        topics: ['MongoDB', 'Python', 'JavaScript', 'Machine Learning'],
        employee_number: 1234,
        location: [34.970895, 432.0967]
     }

react.md

Two Kinds of Applications

1. Single Page Applications:

   • Only ONE HTML Page, content is (re)rendered on Client
   • Typically only ONE ReactDOM.render() call

2. Multiple Page Applications:

   • Multiple HTML Pages, Content is rendered on Server
   • One ReactDOM.render() call per "widget"

Next-Gen JavaScript ( Refresher )

let & const

let & const are differnt ways of creating variable

const (constant values) let you create variable whose value is unchanged once provide. let (variable values) let you create variable whose smiliar to var but with more secure scope.

var myName = "Sushil";
console.log(myName);

const myName = "Sushil";
console.log(myName);

let myName = "Sushil";
console.log(myName);

Arrow Functions

• No more issues with the this keyword

  function myFunc() {
  console.log("Its a normal function syntax in javascript);
  }
  
  const myFunc = () => {
  console.log("its a arrow function syntax in javascript);
  }

• More examples

 // no argument
 const myFunc = () => console.log("Hi");
 
 //only one argument
 const myFunc = name => console.log(name);
 
 // two argumets
 const myFunc = (name, age) => {console.log(name, age); }
 
 // returning without writing return keyword
 const multiply = number => number*2;
 
 console.log(multiply(2));

Exports & Imports (Modules)

 // File name : person.js
 
 const person = {
 name: 'Sushil'
 }
 
 export default person

   // File name : utility.js
   
   export const clean = () => {....}
   
   export const baseData = 10;

   // file name : app.js
   
   // default export : you choose the name
   import person from './person.js'
   import prs from './person.js'
   
   // named export
   import { baseData } from './utility.js'
   import { clean } from './utility.js'
   import { clean as clr } from './utility.js'
   import * as bundled from './utility.js'
   

Classes

• Blueprint of objects
• Properties are like 'variables' attached to classes/ objects'
• Methods are like 'functions attached to classes/ objects'

 // ES6 Syntax
 class Person {
         constructor () {
              this.myProperty = 'value'
         }
         myMethod () {
         console.log(this.myProperty);
         }
   }
   
   
  // ES7 -- updated (use this one)
  class Person {
        myProperty = 'value';
        
        printGender = () => {
        console.log(myProperty);
        }
    }
    

     class Person {
           name : 'Sushil'
           call = () => {....}
         }
         
      const myPerson = new Person()  // creating object myPerson
      myPerson.call()
      console.log(myPerson.name)
      
    // Inheritance
    class Person extends Master
  

Spread & Rest Operator ( ... )

• Spread: used to split up array elements OR object properties

         const oldArray = [1,2,3,4];
         const newArray = [...oldArray, 5, 6 ]; // newArray = [1,2,3,4,5,6]
         
         const newObject = { name: 'Sushil', age: 21 };
         const newObject = {...oldObject, newProp:5 } // newObject = { name: 'Sushil', age: 21, newProp: 5}

• Rest: Used to merge a list of function arguments into an array

       // unlimited amount of arguments
       
          function sortArgs(...args) {
               return args.sort()
            }
            
          const filter = (..args) => {
                return args.filter( el => el === 1);
              }
          console.log(filter(1,2,3));

Destructuring

• Easily extract array elements or object properties and store them in variables

    \\ Array Destructuring
      
      [a,b] = ['Hello', 'Sushil']
      console.log(a)
      console.log(b)

   \\ Object Destructuring
   
   {name} = {name: 'Sushil', age: 21 }
   console.log(name)
   console.log(age)

thebasics.md

Using a Build Workflow

Recommended for SPAs and MPAs

WHY?

• Optimize Code
• Use Next-Gen javaScript Features
• Be More Productive

HOW?

• Use Dependency Management Tool npm or yarn
• Use Bundler Recommended: Webpack
• Use Compiler (Next-Gen JavaScript) Babel + Presets
• Use a Development Server

What Is React?

React is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you compose complex UIs from small and isolated pieces of code called "components".

We use components to tell React what we want to see on the screen. When our data changes, react will efficiently update and re-render our components.

  
  import React, { Component } from 'react';
  import ReactDOM from 'react-dom';
  
  class Shopping extends Component {
      render () {
          return (
              <div className="shopping-list">
                <h1>Shopping List for {this.prop.name} </h1>
                <ul>
                   <li>Tomatoes</li>
                   <li>Mangoes</li>
                   <li>Spinach</li>
                 <ul>
               </div>
             );
           }
         }
         

• A ShoppingList is a React Component Class or React Component Type.

• A component takes in parameters, called props (short for properties), and return a hierarchy of views to display via the render method.

• The render mwthod returns a description of what you want to see on the screen.

• React takes the description and displays the result. In partcular, render returns a React element, which is a lightweight descriptions of what to render.

• Most React developers use a special syntax called "JSX" which makes these structure easier to write.

• The <div /> syntax is transformed at build time to React.createElement('div').

  className: "shopping-list"
  }, React.createElement("h1", null, "Shopping List for ", props.name), React.createElement("ul", null, React.createElement("li", null, "Tomatoes"), React.createElement("li", null, "Mangoes"), React.createElement("li", null, "Spinach"))); 
  

• Each React component is encapsulated and can operate independently; this allows you to build complex UIs from simple components.