React + Redux

Shreyesh kolhe
March 06, 2022 
ReactDOM.render(
  <h1>Hello, React!</h1>,
  document.getElementById('root')
);
as you can see, the code calls React's render method, and passes it two arguments, a JSX  element and a container. 

What is JSX?

        jsx is xml/HTML like syntax used by react. it syntax is intended to be used by preprocessor to transform html like text found in JavaScript file into standard JavaScript objects that a JavaScript engine will parse.
       Basically, by using JSX you can write concise HTML/XML like structures ( eg. DOM like tree structures ) in the same files as you write javascript code then Babel will transform these expressions into actual javaScript code. 
       Unlike the past, instead of putting JavaScript into HTML, JSX allows us to put HTML into JavaScript.
        In simple, JSX is simply converting XML-like markup into JavaScript.

Expression in JSX
const fname = "Shreyash";
const details = <p>Hello, {ffname}</p>;

ReactDOM.render(
    details,
    document.getElementById('root')
);
Attributes in JSX 
Specify attributes using quotes
<div id="name"></div>
When using a javascript expression as the attributes value use curly brase 
const newId = "userId";
<div className={newId}></div>
  • React DOM uses camelCase property naming convention instead of HTML attribute names.
For ex. class becomes className in JSX.
  • class becomes className because class is also a keyword in javaScript.
Virtual Dom

        When the JSX expressions are compiled, they are converted into javaScript objects, representing React elements.
    React then uses these elements to build the corresponding HTML DOM and display it in the browser.
let counter = 0;
function show(){
    counter++;
    const ele = <p>{counter}</p>;
    ReactDOM.render(
        ele, document.getElementById('root')
    );
}
What happened if we update the DOM (in react) :
  1. The entire virtual DOM gets updated
  2. The virtual DOM gets compared to what it looked like before you updated it, React figures out which objects have changed.
  3. The changed objects, and the changed objects only, get updated on the real DOM.
  4. Changes on the real DOM cause the screen to change.
Virtual DOM

DOM stands for Document Object Model is a tree like representation of HTML page.
    Virtual DOM allows React apps to be much faster than apps built with other front-end technologies.
  • React uses a virtual DOM  which is a lightweight representation of the DOM. When element gets changed, it is first updated in the virtual DOM. that process is fast, as virtual DOM is represented by simple objects.
Components
  • Page can be split into multiple parts. Each of these "parts"  are a component.
  • component make organizing the page leaps and bounds easier, but even more importantly, components allow us as the developers to separate concerns from one another
Functional Components

In react two type of components you can use: Functional Components and class components.
Functional Component is a simple javascript function.
function Hello(){
	return <h1>hello world</h2>
}
return simple React 
The name of the functional component begins with capital letter. 

Props vs State
Functional components can accept arguments, similar to javascript function. These arguments are called props, and represent an object.
    -we use props to pass to components.
    -Components use state to manage their data.
    -Props are read-only and cannot be modified.
    -State can be modified by its component using the setState() method.
    -The setState() method results in re-rendering the component affected.

Hooks

React was introduced new feature called hooks, to allowing to use state inside of functional components.
First, we need to import useState hook
import React, {useState} from 'react'
useState return a pair, the current state value and a function, that lets you change the state. useState takes one argument, which is initial value of the state.
Ex.
const example =()=>{
    const [name, setName] = useState('shreyash');
    return <h1>Hello, {name}.</h1>
}
Hello Shreyash
Lifecycle Methods
React provides special lifecycle method for class components, which are called when components are mounted, updated or unmounted.

Mounting :- when component is rendered on page.
Unmounting : - when a component is removed from the page.

Note . mounting? mounting means putting elements into the DOM. React has four built-in methods that gets called, in this order, when mounting a component : 
a. constructor()
b. getDerivedStateFromProps()
c. render()
d. componentDidMount()

State Management

Redux is an Open-source javaScript Library for managing application state. 

What is Redux?
in its own words: Redux is predictable state container for JavaScript application. it helps you write applications that you write applications that behave consistently, run it different environments (client, server, and native) and are easy to test.

Why should we use Redux?
React is great, and it's entirely possible to write a complete application using nothing but React. However, as an complex applications, sometimes it's not as straightforword to use plain old React. using state management  library like Redux can decreases some of the issues that crop up in more complex applications.

The benefits of using Redux:
  1. Predicatable state updates make it easier to understand how the data flow works in application.
  2. The use of "pure" reducer functions makes logic easier to test, and enables useful features like "time-travel debugging"
  3. Centralizing the state makes it easier to implement things like logging changes to the data, or persisting data between page refreshes.
Store
In Redux, application state is stored as a simple object, called Store. there should only be a single store in an app.
Ex.
{
  contacts: [{
    fname: 'Shreyash'
  }, {
    sname: 'kolhe'
  }],
  toggle: true
}
you cannot change the state directly. Instead, you need to dispatch an action
  • Action - What happened
  • Reducers - reducers is update the state according to those actions.
  • Store -  is a object that brings them together.
Store has following responsibilities-
  1. Hold application state.
  2. Allows access to state via getState()
  3.  allows state to be updated via dispatch(action)
  4. Registers listeners via subscribe( listener 0
  5. Handles unregistering of listeners via the function returned by subscribe ( listener ). 
Actions & Reducers
{ 
  type: 'INCREMENT', 
  name: 'shreyash' 
}
Define the action with type and name  property.
The store and action together, we need to write function, called reducer. 
const counterApp =(state, action)=>{
  if(action.type === "INCREMENT"){
    return [...state, action.name]
  }else{
    return state
  }
}
Action Creators

In order to use the same action with different payloads, as well as create reusable code, we can create Action creators.
Action creators are simple functions that return actions.
ex.
  function addContact(person){
      return{
        type:'ADD_CONTACT',
        payload: person
      }
    }
Reducer Function
  • Reducers are functions that handle the actions.
  • The function takes the current state and the action as its parameters and return the new State.
  • A reducer can handle multiple actions, so usually it includes a switch statement for each action case.