Forem: Arjun Porwal

React CheatSheet

Arjun Porwal — Tue, 30 May 2023 21:29:11 +0000

This Sheet contains all the React v17 Concepts all the way from basics to advanced with Router and Redux + Toolkit.

You can find my collection of all sheets at my GitHub

Basics

React Uses a Component Based Structure to Group and render HTML accordingly

Why Components ?

DRY - Dont Repeat yourself = Reusability
Separation of concerns = Not doing too many things at one place/function

Basic Folder Structure :

src/ - source folder contains all the basic files
- index.js = the beginning of the page rendering , first file to execute
- index.css = can be imported as normal css file in index for global styling
- app.js = renders basic page content in JSX, is imported in index and rendered in place of root in html
- components/ = contains all the javascript files of the components you want to add and will be imported in app.js [capitalized naming]. must have only one root element returned.
public/ - contains the final content to be rendered on the page , not needed to edit

JSX - JavaScript XML :

HTML coed that is used in React , is converted/transformed into js code to render html structure.
single curly braces in JSX can contain javascript code {}
elements must be wrapped in 1 parent element before returning
JSX behind the scenes uses React.createElement and other functions to render HTML

Initializing new React Project

You can initialize a project manually too , by simply installing react from npm packages
Using create-react-app - this initializes a basic project, with all the required packages already inbuilt and setup , for hot reloading, testing etc.
- Can use npx create-react-app <app-name> to initialize the first basic project
Nowadays , we can also use vite.js which is a better alternative to create-react-app

Basics React Component

// MyComponent.js
import React from 'react'; // importing React from react is optional in sub files in latest React , because it is done in app js and inherited but doing it is good practise and to be on the safer side.
import './MyComponent.css';  // we can directly import a css file in component

function MyComponent(props) {
  return (
    <div className="my-component"> // instead of `class` in html `className` is used.
      <h1>{props.title}</h1>       // All Props are passed as an Object
      <p>{props.description}</p>

      <div className="content">   
          {props.children}  // The Extra data/JSX passed can be accessed using props.children
      </div>
    </div>
  );
}

export default MyComponent;


// App.js
import React from 'react';
import MyComponent from './MyComponent';

function App() {
  return (
    <div>
      <MyComponent 
      title="My Title" 
      description="This is my description." > // Props/Attributes can be used to share data between components

      <p>This is some additional content.</p>  // We Can also simply pass extra data into components too
      </MyComponent>
      />  
    </div>
  );
}

export default App;

Can breakdown complex groups of JSX into sub components (Composition) , Good practise to keep components smaller

States & Events

State is used to store and manage data that can change over time, and it allows components to keep track of their own state and update their UI accordingly
Its mutable , locally declared i.e cannot be accessed by other components without passing
we also need state because updating normal values dosent rerender the page , therefore state is used to update the jsx and rerender the data.
every state in every component is handled separately and not connected and effects only its component.

Creating States - useState

useState is a hook [hooks are prefixed with "use" and always used in functional components] , this one allows to create a variable, change and update variables which also update the DOM.
the value of useState value stays even if the component is rerendered

// Counter.js

import React, { useState } from 'react'; // useState is imported directly from react library.

const Counter = () => {
  // Declaring a state variable, initial value is used whenever the component is rendered for the first time.
  const [count, setCount] = useState(0);

  // useState returns 2 values that can be destructured.
  // first is the variable itself and second is a function that allows to update the variable.

  // Event handler for incrementing the count
  const handleIncrement = () => {
    setCount(count + 1); // Update the "count" state with a new value

    // set Action schedules the update , it takes a small time to update the specified value. 
    // therefore you cant instantly use the value right after setting it as the updation might be delayed.
    // in case of multiple set methods right after another they are batched together and executed together
  };

  // Event handler for decrementing the count
  const handleDecrement = () => {
    setCount(count - 1); // Update the "count" state with a new value
  };

  return (
    <div>
      <h1>Counter</h1>
      <p>Count: {count}</p>
      <button onClick={handleIncrement}>Increment</button>
      <button onClick={handleDecrement}>Decrement</button>
    </div>
  );
};

export default Counter;

Handling Events & Forms

import React, { useState } from "react";

const FormExample = () => {
  const [formData, setFormData] = useState({
    firstName: "",
    email: "",
  });

  // name of handler functions 
  const handleChange = (e) => { 
  // this function gets the data whenever it is called through the element
    const { name, value } = e.target;
    setFormData({
      ...formData,
      [name]: value,
    });
  };

  const handleSubmit = (e) => {
    e.preventDefault(); // we prevent the normal functionality of refreshing when form submits and add our logic.=
    alert(
      `Submitted Form Data:\nFirst Name: ${formData.firstName}\nEmail: ${formData.email}`
    );
    // Reset form fields after submitted
    setFormData({
      firstName: "",
      email: "",
    });
  };

  return (
    <form onSubmit={handleSubmit}> // All the form events have "on" prefixed to them in react
      <h1>Form Example</h1>
      <label htmlFor="firstName">First Name:</label> // for is changed to htmlFor in React
      <input
        type="text"
        id="firstName"
        name="firstName"
        value={formData.firstName}
        onChange={handleChange} // we pass the function to be called on change
      />
      <br />
      <br />
      <label htmlFor="email">Email:</label>
      <input
        type="email"
        id="email"
        name="email"
        value={formData.email}
        onChange={handleChange}
      />
      <br />
      <button type="submit" onClick={handleSubmit}> // onClick is used for Events on Buttons
        Submit
      </button>
    </form>
  );
};

export default FormExample;

useRef - DOM manipulations

useRef is mainly used to do DOM interactions directly from javascript

import React, { useRef } from "react";

const MyForm = () => {
  const inputRef = useRef(); // Ref for input field
  const countRef = useRef(0); // Ref for mutable count value

  const handleButtonClick = () => {
    // Accessing DOM properties . here we are using it to just get values
    console.log("Input value:", inputRef.current.value);

    // Triggering DOM methods , triggering dom methods according to need
    inputRef.current.focus();
    inputRef.current.select();

    // Storing mutable value , normally useRef should not be used to update values as it does not rerender the component.
    // There it can be useful at place where only one value is needed to be change and rerender is not needed.
    countRef.current++;
    console.log("Current count:", countRef.current);
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleButtonClick}>Get Input Value, Focus Input, Increment Count</button>
    </div>
  );
};

export default MyForm;

Difference in useRef and useState
- useState can be used to store and update the form data as the user types or selects options. When both store and update is needed.
- useRef can be used to get references to input fields, so that you can directly access their values or trigger their methods. When the data is not needed to be stored and don't want to rerender the component.

Saving Multiple Data - Object State

  // We have 2 options , use 3 states to save different values or have just one state with object containing all 3 values


  // Single states for name, age, and email = Multi State
  const [name, setName] = useState('');
  const [age, setAge] = useState(0);
  const [email, setEmail] = useState('');

  // Object state for user = One State
  const [user, setUser] = useState({
    name: '',
    age: 0,
    email: ''
  });

  // Event handler for updating name
  const handleNameChange = (event) => {
    setName(event.target.value);
  };
  // That's the simple way

  // Event handler for updating user object
  const handleUserChange = (event) => {
   // updating the object replaces it as a whole so we have to use the old object using spread operator
    setUser({
      ...user,
      [event.target.name]: event.target.value
    });
   // The issue here is we are using the old state, in case it is being updated at the same time we might get the wrong value for oldState because of scheduling
   setUser((prevState) => {
      ...prevState,
      [event.target.name]: event.target.value
    });
    // We solve the above issue , by using the function variation of setState which itself provides the UPDATED old value and will never be wrong. Especially helpful when running Asynchronously
  };

we can also update array data in the same way too using spread and passing old value - setItems(prevItems => [...prevItems, newItem]);

Passing Data - Child & Parent

import React, { useState } from 'react';

// Child Component
const ChildComponent = ({ childData, onChildDataChange }) => { // A child component can recieve data in props
  const handleInputChange = (event) => {
    const newChildData = event.target.value;
    onChildDataChange(newChildData); // data is saved in parent onChange
    // a child component can also recieve functions from parent component, this can be used to send data to parents
    // this concept is LIFTING STATE UP
  };

  return (
    <div>
      <h2>Child Component</h2>
      <input type="text" value={childData} onChange={handleInputChange} />
      <p>Child Data: {childData}</p>
    </div>
  );
};

// Parent Component
const ParentComponent = () => {
  const [parentData, setParentData] = useState('Hello from parent!');

  const handleChildDataChange = (newChildData) => {
    setParentData(newChildData);
  };

  return (
    <div>
      <h1>Parent Component</h1>
      <p>Parent Data: {parentData}</p>
      <ChildComponent childData={parentData} onChildDataChange={handleChildDataChange} />
      // Here parent is sending the data and a function to update data , to the child
      // Passing data to child , this concept is PASSING STATE DATA
    </div>
  );
};

export default ParentComponent;

Extras

Types of React Components

Stateless/Presentational/Dumb/Pure Components
- Pure components are components that always produce the same output for the same input props and do not have any side effects. Primarily used for rendering UI elements and do not contain any logic or state management.
Stateful/Container/Smart/Impure Components
- Impure components, on the other hand, are components that may produce different output for the same input props or have side effects. Impure components are typically used for managing state, handling complex logic, making API calls, or interacting with the DOM.
Higher Order Components (HOCs)
- functions that take a component as input and return a new component with additional props or behavior. HOCs are used for reusing component logic, such as handling authentication, handling data fetching, or providing common functionality to multiple components.
Controlled Component
- whenever a component is connected to a state, so that we can manage data, then its a controlled component. A controlled component allows Two Way Binding , where we both use and update its data programmatically.

Redering Lists and Conditional Content

// MyComponent.js - rendering lists
import React from 'react';
import DataItem from './DataItem'; // Import the child component

const MyComponent = ({ data }) => {
// here data provides us with an array of object of data that we want to render

  const renderDataItems = () => {
    // as jsx can automatically render element of arrays as html elements, we can directly return from map.
    return data.map(item => (
      // specifying a unique key for every component is very important as it helps react to identify items individually, and not update all the items when asked to. This prevents performance issues and unwanted bugs.
      <DataItem key={item.id} item={item} /> 
      // Render the DataItem child component with props , doing this helps to breakdown the logic and make it easily changeable and reusable.
      // We should never use index as the key as it becomes inconsitent when data is changed.
    ));
  };

  return (
    <div>
      <h1>My Data Items:</h1>
      {renderDataItems()} {/* we use a function to return the list of items we want to render */}
      {/* Call the renderDataItems function to render the data items and not directly map here for a clean code */}
    </div>
  );
};

export default MyComponent;

// DataItem.js - Rendering Content Conditionally
import React from 'react';

const DataItem = ({ item }) => {
  return (
    <div>
      <p>ID: {item.id}</p>
      <p>Name: {item.name}</p>
      {item.age && <p>Age: {item.age}</p>}
      {/* && operator allows to Conditionally render age only if it exists, else its false and doesnt render */}
      {item.gender ? <p>Gender: {item.gender}</p> : null}
      {/* We can also use Ternary operator, but in most cases && does the work*/}
    </div>
  );
};

export default DataItem;

More About Forms

Form Validation , It Can be Done in 3 ways
1. On Every Keystroke/Value Changes - issue is this warns even before typing is completed
2. When Input Loses Focus - issue only happens if the user misclicks and loses focus he gets error
3. When form is submitted - allows user to enter all data, but the error feedback is too late
We can use the specific way to validate the form, according to our needs. Example, every key stroke for longest form or on submit for medium forms. Can be as per requirements

import React, { useState } from 'react';

const FormValidationComponent = () => {
  const [formData, setFormData] = useState({
    email: '',
    password: '',
  });

  const [errors, setErrors] = useState({
    email: '',
    password: '',
  });

  const handleInputChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const handleInputBlur = (e) => {
    const { name, value } = e.target;
    validateInput(name, value);
  };

  const validateInput = (name, value) => {
    let error = '';

    switch (name) {
      case 'email':
        if (!value) {
          error = 'Email is required';
        } else if (!isValidEmail(value)) {
          error = 'Invalid email format';
        }
        break;
      case 'password':
        if (!value) {
          error = 'Password is required';
        } else if (value.length < 6) {
          error = 'Password must be at least 6 characters';
        }
        break;
      default:
        break;
    }

    setErrors({ ...errors, [name]: error });
  };

  const handleSubmit = (e) => {
    e.preventDefault();
    // Perform form submission and additional validation if needed
  };

  const isValidEmail = (email) => {
    // Validate email format, you can use a library or regex for more complex validation
    return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
  };

  return (
    <div>
      <h1>Form Validation Example</h1>
      <form onSubmit={handleSubmit}>
        <div>
          <label>Email:</label>
          <input
            type="email"
            name="email"
            value={formData.email}
            onChange={handleInputChange}
            onBlur={handleInputBlur}
          />
          {errors.email && <p>{errors.email}</p>}
        </div>
        <div>
          <label>Password:</label>
          <input
            type="password"
            name="password"
            value={formData.password}
            onChange={handleInputChange}
            onBlur={handleInputBlur}
          />
          {errors.password && <p>{errors.password}</p>}
        </div>
        <button type="submit">Submit</button>
      </form>
    </div>
  );
};

Only Frontend validation is not enough , we should always have BackEnd validation, as javascript validation can be bypassed using inspector.
we can use custom hooks to make/validate multiple inputs in a form , because using a component the state will be handled indivually but making it a hook will allow us to bind the state to the one main form component.
we can use packages for form handling too like , Formik or ReactHookForm

Styling In React

inline styling and adding classes dynamically with conditionals in JSX
one catch about importing css files directly is that one file imported in any component , those classes can be used in any other component too = two ways to avoid this is
we can add styles to JSX using ... style={{}} the dashes are removed and names become Camel Case.
- styled components
- uses tagged template literal
- and elements as method to style the element
- they return a styled component of the specified element which you can use in your code
- we can send props to styled components and render css dynamically in it itself
- media queries can also be used in styled components
- css modules
- it takes the css from your css classes , and make them unique by giving it a new classname

Debugging

Using Debugger = Goto Sources , file and add debugger stops whereever you want to test [this will pause the code and we can resume it after we want]
React DevTools = To get information about the components being used and rendered , with hooks and other info

Fragments, Portals and Refs

Fragments

Used For Grouping JSX , a limitation of JSX

We cant return more than 1 root element in JSX.
We can fix this , by wrapping everything in

div or other element , creates a div soup = unused divs inside divs just for solving this
wrapping returned components into an array , because react can render arrays of adjacent element [catch is you need a key for array of elements]
Create a Wrapper component which simply returns the props.children .. and use this around adjascent code
Wrapper comes by default as ... <React.Fragment> or simply <></> which does not render any component/code and wraps our code at the same time .. these are React Fragments.

Portals

Portals help to get a cleaner DOM - by reordering elements
Modals , Overlays , Sidedrawers are rendered inside components which is not good practise to nest them because they are overlay
We can use portals to keep the component in react at any place we want ... but render it somewhere else in html
Usage -

Add elements in index.html with some Id where you want to transfer your component to, you can also render out of root.
we will use react-dom which helps to render a dom for react , which we will import ReactDOM from
for the component that you want to render to the ID you created in index.html use ReactDOM.createPortal(<component with props/> , document.getElementById('yourCustomElementId))
the props are passed down to the component so use it accordingly , i.e the component in portal passes the props to the original component
this is the same way root is rendered in App.js ... but this time we are not rendering but portaling it

Refs

Refs or references allow us to get access to other DOM elements for accessing Data
Refs can be used to store a DOM component in it itself , we can use it by
creating a variable with useRef ... const inputRef = useRef()
and then on the html element pass a key of ref = {inputRef}
now we can use this inputRef to get the state , value all the properties of the element we have added it to anytime in the code .. it always gives an object with the current key holding the element.
an example of using ref can be to read an input directly when the submit button is pressed using , inputRef.current.value instead of keylogging onChange to the state and also reset the value in the same way
NOTE : prefer to not use ref to manipulate the DOM , use it to read data and elements of DOM.
when using Refs to access value of inputs its UNCONTROLLED ... and not controlled. because we are no more setting the value/state of input in this case

Side Effects/Hooks , Reducers & Context API

Side Effects = tasks that happen out of normal components rendering , Ex. Http requests , handling data

useEffect

useEffect Executes a function whenever the specified dependencies changes
useEffect(() => {...}, [dependencies]);
normally open code in an component is executed everytime something is updated, with useeffect we can control when specific code is executed.
without even specifiying any array , the useeffect will run on every state update of the component
with an empty dependencies array in useeffect , it will run only on the start when the component is rendered and because no dependencies is given it dosent run again until the component is rendered again.
for the useeffect to run on demand we can simply add the specific dependencies to watch and run the code when anything specified changes.
debouncing - making sure that something is not updated again and again but only once when needed. & throttling.
cleanup function = a function that runs before the useeffect runs after the first time ... it also runs when the component is unmounted from the DOM. is usefull to clear things/data or timers not used anymore.
we can make a cleanup funtion by returning a function in the useEffect.

useReducer

useReducer is useful for complex state , multiple states also when one state is dependent on other state [alternative to useState]
usage const [state, dispatchFn] = useReducer(reducerFn, initialState, initFn);
state = the normal value that we are using
dispatchFn = a function to update the state but we pass an Action for the reducerFn to evaluate
- action can be anything string or number but conventionally its an object specifying the task type and payload/value = {type: 'SAVE_VALUE', val: VALUE}
reducerFn = the function which is triggerred automatically when dispatchFn is ran , it recieves latest state and runs the Action and should return updated state.
- gets Last State from react and action as arguments
- we can create checks for the different actions we are using inside this reducer and take action accordingly
initialState = is a value we want to set by default
initialFn = is a function whose returned value we want to set in state [ex. http request]
useEffect & useReducers
- we can use object destructuring to get specific values from reducers and watch them in useeffect without the need to watch the whole reducer in the useEffect.
useState vs UseReducer
- useState = base data mgmt , for independent pieces of data and short data
- useReducer = if more power needed , especially in arrays and objects updation to take care that we are using the latest state and also when multiple states are related to each other also for different actions.

Context API

Context a behind the scene disconnected singular state storage for all components , that allows sharing data between components at any level

Create a new folder named store in src

Create 2 files

name-context.js

  import React from "react";

  // this dosent have to be object, but using object gives access to manage multiple data
  const nameContext = React.createContext({
     arr: [],
     amount: 0,
     addItem: (item) => {},
     removeItem: (id) => {},
     clearAll: () => {},
  });

  // this creates a component for the context that we will provide to our components and let them use it
  // this is just a prototype that lets vscode and react know that these will be value being used in the context
  export default nameContext;

nameReducer.js

   import { useReducer } from "react";
   import NameContext from "./name-context";

   const defaultNameState = {
      arr: [],
      amount: 0,
   };

   const cartReducer = (state, action) => {
      if (action.type === "ADD") {
         //your logic 
         // can update the state directly here and action will contain the props sent with the dispatch
         const newArr = state.arr.concat(action.item);
         const updatedAmount = state.amount + 1;
         return {
            arr: newArr,
            amount: updatedAmount,
         };
      }

       // can add checks for other actions here

      return defaultCartState;
      // if the action is not specified default value will be returned.
   };

   const CartProvider = (props) => {
      const [nameState, dispatchNameAction] = useReducer(
         nameReducer,
         defaultNametate
      );

       // we could also use useState if its not complex data
       // we can also skip creating a state here and directly access context , but that brings the limitation to create local states

      const addItemToNameHandler = (item) => {
         dispatchNameAction({ type: "ADD", item: item });
      };

      const removeItemFromNameHandler = (id) => {
         dispatchNameAction({ type: "REMOVE", id: id });
      };

      const clearNameHandler = () => {
         dispatchNameAction({ type: "CLEAR" });
      };

      const cartContext = {
         arr: cartState.arr,
         amount: cartState.amount,
         addItem: addItemToNameHandler,
         removeItem: removeItemFromNameHandler,
         clearCart: clearNameHandler,
      };

      return (
         //this provider gives the access to all the children for the context
         <NameContext.Provider value={nameContext}>
            //the value prop gives access to all the children with the current updated value
            {props.children}
         </NameContext.Provider>
      );
   };

   export default NameProvider;

Now wrap all the components with this middleware provider , in app.js

   <NameProvider>
   //other components that need to use this store
   // if we didnt create this middleware provider of ours , we would have had to add the NameContext.Provider directly where we want and manage a state at that place itself
   // creating a custom provider helps to totally isolate all the functionality at one place.
   </NameProvider>

to use this context in the component , we will use a hook useContext

   import useContext from 'react';
   import NameContext from '../store/name-context';
   const compo = (props) => {
       const nameCtx = useContext(NameContext);
       // now this component will be automatically reevaluated whenever CartContext changes
       // another to access context is Context.Consumer which needs a different and lengthy setup    

       // to access context data 
       const data = nameCtx.arr;

       // we can update the state simply using the functions we created to dispatch data
       nameCtx.addItem(item);

   }

limitation of context = not optimized for high frequency changes / very fast updates button clicks n all

Rules for hooks

only call hooks in top level and not in nested functions / if statement
Optional - try to add everything being used in useEffect to be added in dependencies.
hooks like useEffect also dont allow to add any async/promise returning data in it , we can by pass it by creating a sub function with async or simply using .then promises in it.
Can be used only in functions/components [except custom hooks]

Forward Refs

Forward ref is a hook that allows you to pass functionalities from children to parent using refs, to access special functionalities or values.
because functional components cant access ref props
useImparativeHandle hook = allows to call something in component programmitally
usage = useImperativeHandle(ref, () => {return {something: fnName}});
in above the ref is the argument ref that we got as prop in the component, and return the object value pair of the function / ref usage that we want to use.
now to use the ref in the props because react doesnt allow it we use in component props = const component = React.forwardRef((props,ref) => {...})
now using the ref you passed in the component , you can use it in parent using refPassed.fnName
we can also simply access the ref of the inbuilt component by assigning it to the props ref , without having to use imperative handler.

  import { forwardRef, useImperativeHandle } from 'react';

  const ChildComponent = forwardRef((props, ref) => {
    const [state, setState] = useState(initialValue);

    useImperativeHandle(ref, () => ({
      reset: () => setState(initialValue),
      increment: () => setState(state + 1),
    }));

    return <div>{state}</div>;
  });

  const ParentComponent = () => {
    const childRef = useRef(null);

    return (
      <div>
        <ChildComponent ref={childRef} />
        <button onClick={() => childRef.current.reset()}>Reset</button>
        <button onClick={() => childRef.current.increment()}>Increment</button>
      </div>
    );
  };

How React Works , useCallback & useMemo

All the components created by us go through ReactDOM and are shown in RealDOM
React uses virtualDOM , it determines what the current component tree looks like and what it should look like. ReactDOM recieves the differences and then updates the RealDOM accordingly
Whenever State/Props/Context of a component changes , the component is reexectued

ReEvaluation Issue

This is a Components Issue, components logic running every time anything changes
Re-evaluating Components !== Rendering the DOM
React executes component function and then updates only those parts of the DOM that need to changed based on the differences.
comparing the last snapshot with the current snapshot , and updating only specific elements.
On every re-evaluation all the child component functions are also re evaluated.
Note - its re-evaluating not re-rendering
To stop functional components from being re-evaluated on every run , and only update when the prop changes we can wrap the exported functional component with React.memo
Ex - export default React.memo(FuncCompo);
This will make the component to only update when the recieved props are changed , and not on every parent reevaluation
Why is it not used ? because we are trading the performance cost of not re-evaluating the component with the cost to compare its current props with the old ones.
We can use this for huge component trees with huge logic that dosent need to be re-evaluated again and again.
there is a catch, with the props re-execution is that it works only with primitive props, and not other props like functions, arrays.
because when the parent is re-executed everything is recreated, comparing same primitive gives true , but no two functions or arrays are same.
so if these are props the component is still reevaluated even if they are not changed.

useCallback

used To prevent child components from re-evaluating even if functions change
it allows us to basically save a function at one place in memory and not recreate it with every execution.
it points every recreated function to the same location so that it dosent get changed
to use it we can simply wrap a function with useCallback
Example

  const functionName = useCallback(() => {
//state updates or other code.
  }, []);

UseCallback also takes an array as a dependacy like useEffect , where we add those states which will change the functionality of the function. leaving it empty means that no matter the change the function will always remain the same.
when there are case , the function has to be re-created because its dependent on values coming from outside the function , we have to add it as a dependancy in useCallback. or else it will keep using the original stored closure value and will never update it because of useCallback.

States and components changes

useState dosent change the value on every re-rendering, because useState is a react based hook which explicitly saves all the info strictly on first render and its not removed / recreated unless the component is removed and added to the dom again. same goes for useReducer.
State updates and Schedules - Everytime a setState function is called to change the value of the state , the value is not changed instantly , instead it schedules the state update. this will effect the code a lot especially when there are multiple state changes and react prioritizes some state change before than the others
The state change order is always kept, and executed in order.
that is why a functional form of the state change is recommended to be used so that we always get the latest value
Ex - setState(oldState => !oldState)
if we dont do this we get the state values only from the last time component was rerendered.
we can also useanother way than the functional way , which is by using useEffect with the dependencies states that we are using , to ensure that we get the latest value on every state change
in case we have a 2 consecutive state updates with no delays in between [callbacks/promises] , example having them in same function , they are batched together and counted as a single state update causing only one rerender.

useMemo

this allows to stop reexcution of specific parts of component while re-evaluation
when we use React.memo , we control the props of the full component. But when there is one props that needs to be changed at the same time there is performance heavy functionality that is not changed but is still executed because of one prop change.
we can prevent this using useMemo it helps to Memoize any kind of data , that means to store any kind of data and not make it be re-excuted, the same as useCallback does for functions.
it is used in the same way as useCallback , first argument is an anonymous function returning the performance heavy task , and second is the dependencies array which will allow to make the task run when the dependencies are changed and give the updated value.
usage =

   const result = useMemo(() => {
       return array.sort((a,b) => a-b);
   }, [array]);

and leaving it empty means the result is never changed and dosent have to be excuted again and again. adding array as dependency here means whenever the array is changed it will be rerendered and it does change on every execution as its not primitive
so to even prevent this array from being recreated on every execution we can simply create the value of array too using useMemo
example = const arr = useMemo(() => [2,5,6,10,9], []);
now the array will never be considered changed , empty dependency will ensure that it dosent need to be changed at all and will remain the same.
Note - use this only for very high performance intensive tasks if needed , because using this is taking up some of your performance itself too.

Class-based Components

Normally we use functional component to define components which return the JSX
The other way is to make class based component which will have a render() function that returns the JSX.
Example -

  class Product extends Component {
      render() {
      return <h2>Product</h2>
      }
  }

Functional approach is nowaydays used as default everywhere , class-based were required in past (React < 16.8) for states management components and nowaydays they are only used in case for Error boundaries
React 16.8 brought hooks which gave class-based functionalities to functional

Basic Usage

A class based component show be extended from Component , to render and access this.props
and a render() function has to be there , returning the JSX
Class based can work together with Functional Components

States and Events in Classes

Functions are written in the class and not in render method
in class based the state has to be named as state and can only be an object nothing else.
example

  constructor() {
      super()
      this.state = {
          name : "",
          bool : true,
          obj : {...}
      }
  }

the state has to be initialized in constructor always and super needs to be called as it is extended from Component
for setting the state we use this.setState();
this.setState({name: "Aj"}) in case of class based the object is not overwrited but merged so other data stays even if we change only one thing,
we can get the old value of state the same way as useState -
this.setState((oldState) => {name : oldState.name + "12"})
we can define helper functions that render specific JSX in render method
in class based , we have to use state also using this.state.name
while passing functions in javascript we have to call them using "this" and also bind the class "this" to it if we are using it in function.
<button onClick={this.toggle.bind(this)}>

Class-based Lifecycles

Class based dont use hooks but lifecycle methods
componentDidMount() = Called once component is mounted [evaluated and redered ] = useEffect(..., [])
- this runs only once when the component is rendered for the first time.
componentDidUpdate() = called once component was updated / state changed = useEffect(...,[someValue]);
- in the didUpdate function props we can get prevProps and prevState to compare specific state values and update accordingly

    componentDidUpdate(prevProps, prevState){
        if(prevState.value !=== currentValue){
        //other code only executed if this value changed.
        }
    }
    ```



- componentWillUnmount() = Right before component is unmounted = cleanup in useEffect 

### Context in Class based

- Class-based can use Context in almost the same way as functions, only change is how we use it , without useContext() and we can connect only one Context to a single classBased component.

### Error Boundaries - Best use case for class-based

- generally whenever we throw an Error at any place , the app crashes with error , or we use try catch

- For this we can create a new class based component , example named ErrorBoundary and give it a lifecycle method `componentDidCatch()` and this does not have any hook for now.

- `componentDidCatch(){}`  this method is executed whenever any child throws an error.

- Example -



```javascript
  class ErrorBoundary extends Component {
      constructor() {
          super();
          this.state = {hasError: false}
      }
      componentDidCatch(error){
          this.setState({hasError: true})
      }
      render() {
      if(this.state.hasError){
          return <p>Something Went Wrong</p>
      }
          return this.props.children;
      }
  }

and now we can wrap our components in this component and whenever an error is thrown , this will catch and handle them.

How to connect to Backend DB , using Https Requests

FrontEnd/React doesnt directly connect to a Database because of security conditionals and performance that is why a backend app(node,php) is used as mediator between react and db.
Sending requests can be done in 2 ways
- Axios package
- Fetch Api = already available by browser
Sending GET request
- fetch('url'); is by default a get request. and then we get a response with a delay that is why we can use promises.
- we can use

    fetch('url').then(response => {
        return response.json(); //this is also delayed and sends a response
    }).then(data => {
        console.log(data.results);   
    });
    ```



- Async/Await 

  - It is a replacement of .then and .catch block , a javascript feature that we can simply use with react.

- We can simply handle loading states and errors to show loading data  or error while requests are being made.

- Handling Errors 

  - 2xx codes = accepts

  - 4xx / 5xx responsed might have to be handled

  - We can catch errors using `.catch`  for .then or try catch for async await

  - **Fetch** dosent give an error for error status codes whereas axios can catch it.

  - To check for errors in fetch , we have to check response.ok or response.status and throw error manually

- Sending POST request

  - fetch takes a second argument with object where we can send post request and the data to be sent



  ```javascript
    fetch('url', {
        method: 'POST',
        body: JSON.stringify(data), //this sends data as json 
        headers:  {
        'Content-type' : 'application/json' //tells that data is json
        }
    })
    ```



## Custom React Hooks

- Custom hooks are simply functions containing stateful logic , that can use other hooks and react state.

- We can use custom hooks when we have shared functionality between multiple components that are using hooks too 

- Usage

  - We should create a separate file for the customhook in a folder named 'hooks' in src, and a must rule is for the function to start with 'use' this tells react that it is going to use other hooks.



  ```javascript
    const useCustom = () => {
        //code with states and hooks that you want to use at multiple places
    }
    ```



  - Now we can simply use our hook based code in our custom hook and use that at the place that we want by simple calling it like a function.

  - When we call a custom hook in a component the state and hooks of it are tied to that specific component, and not common between all components.

  - as the custom hook is tied to the function it is used in , it will re-evaluate on every change of the custom hook too. that is why we can use useCallback & useMemo to save it from re-rendering if needed.

  - we can return any state/number/variable from a custom component the the component that we want to use it in.

  - we can simply pass arguments/parameters to the custom hook for different use cases.

  - dont forget to update the inside hooks of custom hook , with dependencies of props

## Redux - State Management , App wide

- Local State - data in single component = useState and useReducer

- Cross-Component State - affects multiple components = uses props to transfer state [useState, useReducer]

- App-Wide State - state that effects entire app = prop chains , context , redux

- Why Redux in place of Context ?

  - context has some disadvantages that redux can fulfill [therefore we can use both also too]

  - context can become very complex because of multiple providers

  - context is not that performant , not good for high frequency changes

- How does Redux Work

  - Redux always has all the data at one central store [state]

  - Components make a subscription to get the data directly from store

  - To update the store data , we have Reducer Functions which mutate /change the data

  - Components dispatch/trigger actions with descriptions which forward info to reducer and update the store.

### Basic Redux without React

Redux is based on observer pattern , which is the reason why it is able to do state updates as its able to observe all the changes in the state.

1. install - `npm install redux`

2. Create a reducer , with initial state and actions to perform



   ```javascript
     const nameReducer = (state = {counter : 0}, action)=> {
         if(action.type === "..."){
              return {
                 counter: state.counter + 1,
             }
         }
         //and so on state updates
     }
     ```



   - automatically called by redux, always recieves old/existing state and  an action. 

   - it should always return a new state object 

   - it should be a pure function , without any calls / hooks

3. Create a store pointing at the reducer



   ```javascript
     import {createStore} from 'redux'
     const store = createStore(nameReducer);
     ```



4. Create a subcriber which gets triggered on every action and can get state



   ```javascript
     const nameSubscriber = () => {
       const latestState = store.getState();
     }
     ```



   - it is a function does not get any parameter , but can get the state in this because it gets triggered everytime a state update occurs.

5. subscribe your subscriber to the store



   ```javascript
     store.subscribe(nameSubscriber);
     ```



   - this function redux calls everytime state update occurs

6. now simply dispatch your actions to the store to perform actions on state



   ```javascript
     store.dispatch({type: 'increment'});
     ```



   - this calls reducer to run again and that calls the subscriber.

### Using Redux With React

- `npm install redux react-redux` to install redux in the project

- Create a folder "store" in your src for redux

- Create a file to create your store. ex-index.js



  ```javascript
  import {createStore} from 'redux'

  // Create a reducer , with initial state and actions to perform
  const nameReducer = (state = {counter : 0}, action)=> {
       if(action.type === "..."){
           return {
               counter: state.counter + 1,
           }
       }
       //and so on state updates

      return state;
   }

  //automatically called by redux, always recieves old/existing state and an action.
  // it should always return a new state object
  // it should be a pure function , without any calls / hooks

  const store = createStore(nameReducer);

  //this helps us access the specific state.
  export default store;

Next we need to wrap out app with a provider that will give all the components of the app access of the store

  //in app.js
  //other imports ...
  import {Provider} from 'react-redux'
  import store from "./store/index";

   ReactDOM.render(
        <Provider store={store}>
            <App />
        </Provider>,
        document.getElementById('root')
   )

Next in the component that we want to use the store in , we need to import a hook useSelector

  import {useSelector} from 'react-redux';

    const compo = () => {

        const counter = useSelector(state => state.counter);
        //like this we can get specific state data we want too
        //useSelector manages creation of subscription for state updates automatically
        // it creates a subscription when component is mounted and updates the data on its own
        // it also unsubscribes when the component is removed from DOM 

        //... other code
        // can simply use the counter data normally we will get updated on its own

    }

To update this state in react redux, we use useDispatch hook which will help us to send actions to the store reducer

    const dispatch = useDispatch(); 
    //this returns a dipatch function with which we can call the redux store
    const increment = () => {
        dispatch({type: 'increment'});
    }

Redux with Class-Based Components

with useDispatch and useSelector react-redux also gives another function named connect to connect class based components with redux
connect needs 2 arguments =
- first is a function mapStateToProps which gets the redux state as an argument and the keys are passed to the component as props
- second is another function mapDispatchToProps gets dispatch as an argument and in this we can send function as props to the component and call the dispatch actions
Usage

  import {connect} from 'react-redux';
  class Counter extends Component {
      //we can use the data sent in props props
      incrementHandler() {
          this.props.increment(); //accessing the dispatch function
      } 

      value = this.props.counter; //accessing the value

      //other code...
  }

  const mapStateToProps = state => {
      return {
          counter: state.counter 
          // accessing the redux state , keys are passed as props
      }
  }
  // function names can be anything , but this is conventional
  const mapDispatchToProps = dispatch => {
      // this function will recieve the dispatch
      return {
          increment: () => dispatch({type: 'increment'}),
          decrement: () => dispatch({type: 'decrement'})
      }
  }

  export default connect(mapStateToProps, mapDispatchToProps)(Counter);

Attaching payloads to Actions

we can simply get data in the reducer in the actions , by passing data while dispatching in component

  // in the reducer simply access the value using action
  const nameReducer = (state = {counter : 0}, action)=> {
     if(action.type === "ADD"){
         return {
             counter: state.counter + action.amount,
         }
     }
  }

  // now add the data while dispatching from the component
  dispatch({type: 'ADD', amount: 5});
  // this amount will be accessible in the reducer

Working with multiple state properties

to have multiple states in the reducer and work with them specifically

  // in the file with your reducer 

  // creating an overall initial state
  const initialState = {
      counter: 0,
      showCounter: true
  }

  const counterReducer = (state = initialState, action) => {

      if(action.type === 'ADD') {
          // never update the existing state directly because it is a reference , it can work but it can cause unforeseen issues
          return {
              counter: state.counter + 1,
              showCounter: state.showCounter
              // we are having to specify the full state because react dosent merge it instead it just updates the overall state with what we return    
              // always return a brand new object with all the properties
          }
      }

      if(action.type === 'toggle'){
          return {
              showCounter: !state.showCounter,
              counter: state.counter
          }
      }

      return state;

  }

  const store = createStore(counterReducer);
  export default store

Now we can simple access these values using useSelector in the component we want.

Redux Challenges

having to remember all the action names
a huge state object at one place for bigger projects
having to return the whole state again everytime a change happens
all of these issues can be solved using manual minor fixes , but there is better way that is to use Redux Toolkit

Redux Toolkit

It is made by the same team of redux , to make things easier to use and not a must use
installation - npm install @reduxjks/toolkit , you can now remove redux from you packages , as this already has it.

How to create Slice in Toolkit

In the file where we created the reducer, example store/index.js
we have createReducer and createSlice [more powerful] in @reduxjs/toolkit
createSlice = we prepare a slice of global state , of data that is not connected and in pieces

    import {createSlice, configureStore} from '@reduxjs/toolkit';

    // 1. Create slice for the state you want
    // createSlice wants an object as argument
    const counterSlice = createSlice({
        name: 'counter', //any custom name that you wish,
        initialState : {counter: 0, showCounter: true}, // this gives it an initial value to start with
        reducers: { // this takes all the reducers we need to perform state updates
            increment(state){ // we dont need if checks here , cause we can directly access these 
               state.counter++; // toolkit uses immer which automtically mutates and does the update , so we can directly work with the state without having to copy it
            },
            increase(state,action){
               state.counter += action.payload; // toolkit automatically attaches any data in a property names payload which cannot be changed
            }
        }

    })

    const initialAuthState = {
        isAuthenticated: false,
    }

    const authSlice = createSlice({
        name: 'authentication',
        initialState : initialAuthState, 
        reducers: {
            login(state) {
                state.isAuthenticated = true;
            },
            logout(state) {
                state.isAuthenticated = false;
            }  
        }
    })

    // 2. To let the store know about the slice and reducer to use
    const store = createStore(counterSlice.reducer);
    // this is good if we have just one slice but when we are working with multiple slices

    // 2. We can use configureStore in toolkit, alternative to combineReducers of redux to send multiple reducers in state.
    const store = configureStore({
        // reducer : counterSlice.reducer   // this is in case of one main reducer
        reducer : { 
            counter : counterSlice.reducer,
            auth: authSlice.reducer
        }
        // this can be used for multiple slices, these slices will be merged together and used in store automatically
    });

    export default store;

Dispatching Actions in Slice of Toolkit

createSlice automatically assigns the reducer functions to the slice as actions through which we can access the methods

  counterSlice.actions.increment();
  // toolkit creates action objects when we call these reducers , 
  // which are unique by default, that is why these are also called action creators
  // these returned objects will already have uniques properties automatically being handled behind the scenes.
  // that is why we dont have to worry about creating unique actions and adding if else

to access these actions we will have to export them too and import where we want to use them
in the file where you created your reducer ... example store/index.js

  export const counterActions = counterSlice.actions;
  export const authAction = authSlice.actions;

now in ther component you want to use these , we dispatch the unique object returned by these actions

  import {counterActions} from '.../store/index';
  import {useSelector , useDispatch} from 'react-redux'

  const Counter = () => {
      // const counter = useSelector(state => state.counter);
      // if single slice is in store, we can also simply access our redux state in the same old way
      const counter = useSelector(state => state.counter.counter);
      // we have to specify the key of that slice when multiple are set
      const authenticated = useSelector(state => state.auth.isAuthenticated);

      const dispatch = useDispatch();

      const incrementHandle = () => {
          dispatch(counterActions.increment());
      }

      const increaseHandle = () => {
          dispatch(counterActions.increase(10)); 
          // example dipatches {type: UNIQUE_IDENTIFIER, payload: 10}
          // this value is automatically stored in payload and can be access only as payload
          // we can also send any data , array object anything in place of 10 and access as payload
      }    
  }

Splitting Up Toolkit Codes

We can separate slices into different files in the store
export the slice ... export default authSlice .... we cann also just export the reducer
and then import it for the store in index
import authReducer from './auth'
also shiting specific actions into their specific files.

Advanced Toolkit

Handling Async Tasks and Side Effects with Redux

Reducers have a rule , tht they must be pure , synchronous and no side-effects
this is why it is not allowed to add async functions in our redux reducers
now we have 2 options to handle side-effects and async tasks
- Write in useEffect etc of components and dispatch only the results
- Make our own action creators instead of using the default ones of toolkit

Adding async calls to the component directly

Adding async calls in components directly with the transformations of data is not recomended as
- as we have add all the exact same logic of the reducers in the component before sending it to backend
- we wont be able to mutate state as in reducers , because toolkit is not being used in the components
Fat Reducers vs Fat Components vs Fat Actions

Synchronous and pure code = Prefer reducers , avoid action creators and components
Async Code and side effects = Prefer Action creators and components , avoid reducers doing the work

. Another good way is creating async call using the useEffect in a component

. we get data using UseSelector of the cart

. watch changes in the cart and add the async call using useEffect

. therefore everytime the cart changes useEffect will perform the async call

. we will have to also check if it is the first call or not as , useEffect will be called the first time App.js is rendered too / when cart is created.

Adding Async calls using Action Creator Thunk

Right now action creators are being used automatically by toolkit when we are using the reducers given by the toolkit
To create action creators manually - we use Thunk
What is Thunk
- A function that delays an action until later
- An action creator function , which does not return the action data directly but another function which will return the action

Using Thunk

Go to the end of the creation of slices to create an async thunk middleware

const cartSlice = createSlice({...})

export const sendCartData = (cartData) => {
    // return {type: '', payload: 0} // this was done by toolkit automatically
    return async (dispatch) => { // now we can use async await here because we are not in reducer yet and we are performing actions before sending the data to the reducer
        dispatch(cartActions.setStatus({status: "Fetching Data..."}));

        const response = await fetch('url', {...});

        if (response.ok)
            dispatch(cartActions.setStatus({status: "Fetching Complete});
        else 
            dispatch(cartActions.setStatus({status: "Error Occured"});    
    }
}

now in a cart watching useEffect in App.js

useEffect(() => {
 if(isInitial){
    isInitial = false;
    retun;
 }
 dispatch(sendCartData(cart)); //this sends the updated cart info
 // Redux toolkit allows us to send a function as an action which returns another function
 // Toolkit itself handles the function action and give it the access to dispatch in it too , for performing actions there
 // redux will go and call the function we made in slice itself
}, [cart,dispatch]);
//vs code will suggest to add dispatch here , adding it is no issue as it stays as the same function everytime and wont trigger the useEffect

as thunk actions will increase , we can create a separate file cart-actions.js that will store all these thunk functions.

Redux DevTools

We can simply install a ReduxDevTools as an extension in browser
If we used redux without reduxToolkit we had to make a setup for DevTools to work , but with toolkit no setup is needed it works out of the box
With this we can see all the actions dispatched .. and all the data updates of redux. also controlit manually in browser

Router

Changes the conventional routing , of rendering/fetching multiple html pages. But rendering the html content using react by conditionally checking the route of the page.
The third party package that helps us do this is react-router
To install npm install react-router-dom

Basic Usage

Wrap your app with the BrowserRouter Component, to activate react router features in index.js

   import {BrowserRouter} from 'react-router-dom'

   //...


   root.render(

   <BrowserRouter>
       <App />
     </BrowserRouter>
   );

Import Route in your app.js and set the routes for components accordingly

import {Route} from 'react-router-dom';


//import Home component
//import other components
// as above components will be loaded as pages , we can store them
// in a different folder named pages or screens.

function App() {
    return (
        <div>
            <Route path="/">  //yourDomain.com/
                <Home/>
            </Route>
            <Route path="/other"> //yourDomain.com/other
                <Other/>
            </Route>
        </div>
    )
}

export default App;

Working With Links and NavLinks

We cannot simply set the Links to redirect to the route , because that refreshes the page and resets all the info.
for this react-router has Link component to be used for routing links , prevent browser default , persist the changes and prevent refreshes
Usage of basic Link -

  import {Link} from 'react-router-dom';


  const Header = () => {

      return (
          <header>
              //nav ul li ...
                  <Link to='/home'>Home</Link>
                  <Link to='/products'>Products</Link>
          </header>
      )

  }

Link dosent give any classes to the element, react-router also gives a NavLink component which allows us to add a class to the active link

import {NavLink} from 'react-router-dom';

// ... imports , component data ... in the component


<NavLink activeClassName={classes.active} to='/home'>
Home
</NavLink>

Dynamic routes and params

In case of rendering a list of items and redirect to details page of each item , we can create page for each product with dynamic routes and pass parameters to it.

  <Route path='/item-details/:itemId'> 
      <ItemDetails/>
  </Route>
  // this means we can load , domain/item-details/anything
  // whatever we write in anything , /item1 , /p2123w 
  // will redirect us to the item details page

We can retrive the custom details passed in the route using useParams hook . in the detail page that we loaded =

  import {useParams} from 'react-router-dom'

  const ItemDetail = () => {
      const params = useParams();

      console.log(params.itemId); 
      //we can access multiple custom params using this key that we provided in the route
      // example /:itemId/:itemPrice
  }

When multiple routes match the current path all will be loaded. example - /products will list products and /products/id will render specific product. but both will be rendered at the same time cause both match /products
React router matches from top to bottom and from start of the path not the enitre path.
For this we have Switch and Exact

  import { Route, Switch } from 'react-router-dom';
   // Switch makes it that only one of the matched routes are rendedered and not all
  // but because of router functionality , the first one in order will be rendered which is not always right
  // for that we can use exact which will only let the route render if its exactly the same.
  <Switch>
      <Route path='/welcome'>
         <Welcome />
      </Route>
      <Route path='/products' exact>
          <Products />
      </Route>
      <Route path='/products/:productId'>
           <ProductDetail />
      </Route>
  </Switch>

We can also use dynamic javascript in the Routes

Nested Routes & Redirects

React Router allows us to make routes anywhere in any component
We can define Route inside of components , and render specific data only in it when the component is loaded

 <section>
    <h1>The Welcome Page</h1>
    <Route path="/welcome/new-user">
      <p>Welcome, new user!</p>
    </Route>
</section>

 // this will allow us to load the paragraph when , the new user route is added to welcome page.

We can also Redirects to redirect a user to a page that we want to

  import {Redirect} from 'react-router-dom';
  // exact is needed or else route will always match and loop it.
  <Route path='/' exact> 
   <Redirect to='/home'>
  </Route>

Extras

We can create a custom layout component for the basic layout to be used with all routes content .. and wrap our conditional route data in it.

  <Layout> //containing navbar and props.children to render these inside components
      <Switch>
          <Route path="/home"><Home/></Route>
          <Route path="/other"><Other/></Route>
      </Switch>
  </Layout>

We can also simply use Route anywhere just as an if else to render dynamic content according to the current route.
NOT FOUND PAGE , to create a not found url catch

  // add a route at the end of all your routes already created that
  // will catch all the remainging url and render not found page

  // this will work because react matches routes from top to bottom
  <Switch>
      <Route path="/home"><Home/></Route>
      // after all the routes at end add
      <Route path="*">
          <NotFoundPage />
      </Route> 
  </Switch>

useHistory is a hook provided by react-router which allows us to programatically navigate through pages using javascript, and not by just Link/NavLink

  import { useHistory } from 'react-router-dom';

  const Component = () => {
      const history = useHistory();

      history.push('/other'); // sends to next page and allows the user to go back as it is pushed in history
      history.replace('/other'); // sends to the next page and dosent allow the user to go back to previous page
  }

Prompt components is used to give user an alert when he is leaving a page/accidentally pressed back button while filling a form.

  import { Prompt } from 'react-router-dom';

  <Prompt
      when={isFillingForm} //if this this true then the user will be prompted if he tries to leave the page
      message={(location) =>
        'Are you sure you want to leave? All your entered data will be lost!'
      }
  />

useRouteMatch gives the inner react-router based info about current route & useLocation gives the browser level current route info

  const match = useRouteMatch();
  const location = useLocation();

// match will have the url , but also our made param :itemId and parameter
// location will have the url and route only

// using match for current page url in nested routes
// allows us to manage routes only on the first level and all others will be automatically updated

React router also offers a custom way to write the url , not just by using string but by

history.push(`${location.pathname}?sort=${(Ascending ? 'asc' : 'desc')}`);

//can be written as

history.push({
   pathname: location.pathname,
   search: `?sort=${(Ascending ? 'asc' : 'desc')}`
});

Query Parameters

when we just need to pass data and not make that part of the route but have it in url to be shareable.
useHistory can be used to add query parameters to the current page
useLocation can be used to get the current pathname with the query parameters.

  import {useLocation, useHistory} from 'react-router-dom';

  // in the component
  const history = usehistory();
  const location = useLocation();

  history.push('/page?sort=asc'); 
  // this will still rerender the current component even if we are in it

  const queryParams = new URLSearhParams(location.search);
  // this is built in constructor class of browser, which will return our query params as object

  const sortAsc = queryParams.get('sort') === 'asc';
  // now we can simply use the current param value

Version 6 Changes

Video reference = React Router 6 - What Changed & Upgrading Guide
Switch is replaced with Routes
Route is now self closed and the component is now passed with element prop
- <Route path='/home' element={<Home />} />
Internal logic for selecting the routes has been changed and exact is no longer needed, Router V6 loads the url automatically if its exactly whats written.
Now router also selects the best path automatically
- name/* will not be loaded even if its declared before a name/:id cause we have manually specified that we are expecting text after it
- name/edit will be loaded even if name/:id is declared before it. As now router will look at what the very exact match is best for it.
NavLink activeClassName prop is removed , now we have to manually find out if the link is active, we can do this by

    // className can take a function in Navlinks now which will give the nav data to it.

    <NavLink className={(navData) => navData.isActive ? classes.active: ''} to='/home'>
      Home
    </NavLink>
    ```



- **Redirect** is replaced with Navigate



  ```jsx
    <Route path='/' element={<Navigate to='/home'/>} />
    // this will push the next page into history

    <Route path='/' element={<Navigate replace to='/home'/>} />
    // this will work exactly like the old redirect and replace the history
    ```



- Now nested **Route** also need to be wrapped in **Routes** 

- Because of new logic of choosing routes , to access nested routes

  1. we have to write `/home/*` in the main route to catch all the nested routes inside.

  2. in the inner component containg the nested route , we no more have to write `/home/nest` instead normally `nest` in the path and react will understand it because now it is relative.

  3. This also effects the **Links** inside components , their path is also relative now.

- Another option to make nested routes , is by adding Route children in the main app.js



  ```jsx
    // in app.js

    <Route path='/home/*' element={<Home/>}>
        <Route path='other' element={<Other />} />
    </Route>


    // to define where the nested content has to be rendered , in home.js
    // A new component OUTLET is available and will be simply replaced with the nested content

    <section>
        <Outlet/>
        <h1>Hi</h1>
    </section>
    ```



- **useHistory** is no longer there in v6 and is replaced with **useNavigate**



  ```js
    const navigate = useNavigate();
    navigate('/home'); // will push into history
    navigate('/home', {replace: true}); // will redirect/replace in history

    // forward and backward navigation is also possible by
    navigate(-1) // backward
    navigate(1) // forward
    ```



- **Prompt** component also no more exists in v6

- For even more latest and better changes of v6.4 = [React Router 6.4 - Getting Started](https://www.youtube.com/watch?v=L2kzUg6IzxM)

## Deployment

- Before deployment steps 

  1. Test Code

  2. Optimize Code - and add Lazy Loading

  3. Build App for production

  4. Upload Production Code to Server

  5. Configure Server

### Adding Lazy Loading

- Most of the bundles are download on first render of the website.

- Lazy loading is divinding the code into chunks and only downloading them when speicific route/functionality needs it.

- To use it



```js
  import React from 'react';

  const NewPost = React.lazy(() => import('./pages/NewPost'));
  // this will make the app to not import this component right when the app is loaded
  // instead the component will only be downloaded when it is being rendered

  <Route path='/new-post'>
    <NewPost />  // the component is downloaded only when this URL is hit.
  </Route>

This rises and issue that , when the page is loaded it is going to take time to download the component. So react needs a fallback UI to show at the mean time.
For this we have Suspense Component
We Wrap all of our code where we will use lazy loading and define what has to be shown in the mean time

  import {Suspense} from 'react';

  <section>
      <Suspense fallback={<p>Loading...</p>}>  // can define any jsx in here
      // other elements/components inside
      </Suspense>
  </section>

Building and Uploading for production

create-react-app already has script , npm run build in package.json which will minify/optimize all our codes into one build folder which we can deploy at any server we wish.
We can also directly deploy our react project on netlify, using github repository and set it up to run build command itself and use the build command for production , this allows us to get CI/CD too.
We can use any other static hosting provider too by only deploying our build folder.

Server Side Routing and Client Side Routing

In case of react , we make Single Page Applications. All the routing and urls are handled by the js provided by our main URL. therefore we use only one URL
In case of multi-page-apps , different pages are rendered by hitting different URLs therefore that dosent need any setup.

Some Places to deploy your React Code at

Netlify - free
Vercel - free
Firebase
Heroku
AWS

Tests in React

Manual Testing - Writing code and testing it right there , this method is error-prone because we cant test all scenarios and combinations manually
Automated Testing - We write code that will run and test all the building blocks of our project one by one multiple times automatically
- Unit Tests - Test the most basic components / functions in isolation [most used/important]
- Integration Tests - Test combination and working of modules with each other
- End to End Tests - Test complete scenarios of user flows , can be done manually and is mostly completed by integration and unit tests itself

Tools

For running the tests , example Jest
For Simulating things on the screen , react testing library
both are available in create-react-app out of the box

Writing Tests

Arrange - Set up the test data , conditions and environment
Act - Run the logic to be tested (a function)
Assert - Compare execution results with expected values

Example

Create a sample component

  //Greeting.js
  import React from 'react';

  function Greeting({ name }) {
    return (
      <div>
        <h1>Hello, {name}!</h1>
      </div>
    );
  }

  export default Greeting;

Now write a test for the component

  //Greeting.test.js
  import React from 'react';
  import { render,screen } from '@testing-library/react';
  import Greeting from './Greeting';

  test('renders a greeting message with the provided name', () => { 
  //test funtion is offered by jest , and here we write the test name
    const { getByText } = render(<Greeting name="John" />); 
  // we render the component on screen
    const greetingMessage = screen.getByText(/Hello, John!/i);
  // now we select the component
   expect(greetingMessage).toBeInTheDocument(); 
  //expect helps us asser the resulta and check if the check has passed
  });

Now we can run the tests using npm test

Testing Suites

We can group multiple tests into one test suite to organize tests together

  describe('Button component', () => {
    test('displays the button label', () => {
      const { getByText } = render(<Button label="Click me" />);
      const buttonElement = getByText(/Click me/i);
      expect(buttonElement).toBeInTheDocument();
    });
  });();
  });

Here we can put multiple Tests into the describe function , to group them together into one suite

User Events testing

we can simulate userEvents and run tests accordingly by

  import React from 'react';
  import { render, screen } from '@testing-library/react';
  import userEvent from '@testing-library/user-event';
  import LoginForm from './LoginForm';

  describe('LoginForm component', () => {
    test('disables the submit button until both fields are filled in', () => {
      render(<LoginForm />);
      const usernameInput = screen.getByLabelText(/username/i);
      const passwordInput = screen.getByLabelText(/password/i);
      const submitButton = screen.getByRole('button', { name: /submit/i });

      // Verify that the submit button is disabled initially
      expect(submitButton).toBeDisabled();

      // Simulate user input in the username field
      userEvent.type(usernameInput, 'johndoe');

      // Verify that the submit button is still disabled
      expect(submitButton).toBeDisabled();

      // Simulate user input in the password field
      userEvent.type(passwordInput, 'password123');

      // Verify that the submit button is now enabled
      expect(submitButton).not.toBeDisabled();
    });
  });

Integration test

The render function used to render a component, automatically runs the subcomponents used in a component and performs the required checks

Asynchronous Testing

For Asynchronous , Promises , we can use "screen.find" in place of "screen.get/query" as this returns a promise. and runs the tests multiple times for a certain time period which can also be specified.
To successfully use the find function we will also have to convet the test function into an async function and await for the "screen.find" to complete the testing.

Mock Requests

As we should not send requests to the actuall server while testing as that will send invalid data into the live server , we have 2 options

To not send the request at all and just check our local code if the component is not crashing
To send a request to a fake database for testing purpose

. To skip sending a request , we can replace out fetch with a Mock Function

Example -

  import React from 'react';
  import { render, screen } from '@testing-library/react';
  import UserList from './UserList';

  describe('UserList component', () => {
    test('fetches and displays a list of users', async () => {
      const mockUsers = [
        { id: 1, name: 'John Doe' },
        { id: 2, name: 'Jane Smith' },
      ];
      //this  replaces the fetch in the window , with a mock function
      // proviced by jest, and then create our own response to work with
      global.fetch = jest.fn(() =>
        Promise.resolve({
          json: () => Promise.resolve(mockUsers),
        })
      );

      render(<UserList />);

      expect(screen.getByText(/user list/i)).toBeInTheDocument();

      const userListItems = await screen.findAllByRole('listitem');
      expect(userListItems).toHaveLength(2);

      // Verify that fetch was called with the correct URL
      expect(fetch).toHaveBeenCalledWith(
        'https://jsonplaceholder.typicode.com/users'
      );

    });

  });

THE END

Webpack Cheatsheet

Arjun Porwal — Sun, 15 May 2022 13:17:21 +0000

Webpack Cheatsheet

Installation
Loaders [to import stuff]
Plugins [to perform actions]
Development and Production Builds
Multi Page Applications
Extras [adding bootstrap,font awesome]
ES Lint

Webpack Cheatsheet

Link to an Awesome Webpack Boilerplate : Athlon Webpack boilerplate

Collection of all my sheets are at Github

Installation

npm install webpack webpack-cli --save-dev

//webpack.config.js
const path = require("path");

module.exports = {
   entry: "./src/index.js",
   output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "./dist"),
   },
   mode: "none",
};

using Webpack , we can now export and import data and files between each other.

Loaders

Libraries that help to import stuff using webpack

Adding Images

npm install file-loader --save-dev

//webpack.config.js
module.exports = {
   entry: "./src/index.js",
   output: {
      filename: "bundle.js",
      path: path.resolve(__dirname, "./dist"),
      publicPath: "", /* to specify image location for html , website URL in production */
   },
   mode: "none",
   module: {
      rules: [
         {
            test: /\.(png|jpg)$/,
            use: ["file-loader"],
         },
      ],
   },
};

//index.js
import Kiwi from "./kiwi.jpg";

Adding CSS in JS

npm install style-loader css-loader --save-dev

//webpack.config.js
{
    test: /\.css$/,
    use: ["style-loader", "css-loader"],
},

//component.js
import "./hello-world-button.css";

Adding SCSS

npm install sass-loader sass --save-dev

//webpack.config.js
{
    test: /\.scss$/,
    use: ["style-loader", "css-loader", "sass-loader"], //first style-loader at last sass-loader
},

//component.js
import "./hello-world-button.scss";

Adding Babel

npm install @babel/core babel-loader @babel/preset-env babel-plugin-transform-class-properties --save-dev

//webpack.config.js
{
    test: /\.js$/,
    exclude: /node_modules/,
    use: {
        loader: "babel-loader",
        options: {
            presets: ["@babel/env"],
            plugins: ["transform-class-properties"],
        },
    },
},

Plugins

Plugins Perform Specific Actions on the Imported Stuff

Minify JS

npm install terser-webpack-plugin --save-dev

//webpack.config.js
const TerserPlugin = require("terser-webpack-plugin");

/* Inside Module.exports */
plugins: [new TerserPlugin()],

Extracting CSS into a Specific File

npm install mini-css-extract-plugin --save-dev

//webpack.config.js
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

module.exports = {
    rules = [
        {
            test: /\.css$/,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
        },
        {
            test: /\.scss$/,
            use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
        },
    ]
}

plugins: [
    new MiniCssExtractPlugin({
        filename: "style.css",
    }),
],

Generate New File Name Every Execution (only on content change)

//simple add [contenthash] to the filename you want to have new name
filename: "bundle.[contenthash].js",

Deleting Old Files and Rendering new on Every Build

npm install clean-webpack-plugin --save-dev

//webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

// Running This PLugin without option , will automatically clean dist folder

plugins: [
    new CleanWebpackPlugin({
        cleanOnceBeforeBuildPatterns: [
            "**/*",  //this runs by default in dist folder
            path.join(process.cwd(), "build/**/*"), //adding other folders
        ],
    }),
],

Generating HTML using Webpack

npm install html-webpack-plugin --save-dev

//webpack.config.js

const HtmlWebpackPlugin = require("html-webpack-plugin");

plugins: [
    new HtmlWebpackPlugin(), //generates default html file
]

//publicPath can be empty as html is generated in the same place as other files by default. (the path specified)

- Specifying Manual HTML options

new HtmlWebpackPlugin({  //extra options for the html file
    title: "Hello World",
    filename: "subfolder/custom_filename.html",
    meta: {
        description: "Some Description",
    },
}),

- Using HTML template Engine (HandleBars)

npm install handlebars-loader --save-dev
npm install handlebars --save

// Add a Test in module rules for hbs files to use handlebars loader
{
    test: /\.hbs$/,
    use: ["handlebars-loader"],
}

//Also add the new plugin to access hbs
new HtmlWebpackPlugin({
    title: "Hello World",
    template: "src/index.hbs",
    description: "Some Description",
}),

Development and Production Builds

Changing Mode

//webpack.config.js
module.exports = {
    mode : "production", //for production (here no source or anything is done)
    mode : "development", //source maps are rendered and development is faster
    mode : "none" //to not use any mode
}

Creating Different Config for Different Modes

Save Your Webpack configuration in different files , changing the mode specifically in both
then create the npm scripts for specific files

//package.json

"scripts": {
    "build": "webpack --config webpack.production.config.js",
    "dev": "webpack --config webpack.dev.config.js"
  },

Using Webpack-dev-server in Development mode

npm install webpack-dev-server --save-dev

//webpack.dev.config.js

module.exports = {
    devServer: {
         contentBase : path.resolve(__dirname, "./dist"),
         index: 'index.html',
         port: 9000
   }
}

//package.json

scripts = {
    "dev": "webpack-dev-server --config webpack.dev.config.js --hot"
}

Multi Page Applications

Rendering Multiple Pages

//webpack.production.config.js

module.exports = {
    entry: {
        'hello-world': './src/hello-world.js', //file 1
        'kiwi': './src/kiwi.js', // file 2
    },
    output: {
        filename: "[name].[contenthash].js", //will generate different names
        path: path.resolve(__dirname, "./dist"),
        publicPath: "",
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: "[name].[contenthash].css", //same for css files
        }),
        new HtmlWebpackPlugin({
         filename: 'hello-world.html', //different Html Files
         chunks: ['hello-world'], //is used from entry point
         title: "Hello World",
         description: "Hello World",
         template: "src/page-template.hbs",
      }),
      new HtmlWebpackPlugin({
         filename: 'kiwi.html',
         chunks: ['kiwi'], //specify only the ones u need
         title: "Kiwi",
         description: "Kiwi",
         template: "src/page-template.hbs",
      }),
    ]
}

Creating Common File for Dependencies

//webpack.production.config.js

module.exports = {
    optimization: {
        splitChunks: {
            chunks: "all", //this will integrate all the extra packages into one extra js file 
            minSize : 10000, //this specifies the minimum size of the bundle to split
             automaticNameDelimiter: '_' //this specifies the separation between file names , by default ~
        }
    },  
    plugins : [
        new HtmlWebpackPlugin({
            chunks: ['hello-world'],
        }),
        new HtmlWebpackPlugin({
            chunks: ['kiwi'],
        }),
    ] // integrating the extra modules js file into the HTML 

}

Extras

Adding Custom Fonts

//webpack.config.js
{
    test: /\.{woff2|woff}$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[ext]',
                outputPath: 'fonts/',
            }
        }
    ],
}

//add font face in scss 
//import scss in js

Adding Bootstrap

npm install bootstrap jquery popper.js --save

Use Bootstrap , without editing it

import "bootstrap";
import "bootstrap/dist/css/bootstrap.min.css";

Use Precompiled Bootstrap

npm install postcss-loader precss autoprefixer --save-dev

//webpack.config.js

test: /\.scss$/,
    use: [
        MiniCssExtractPlugin.loader,
        "css-loader",
        {
            loader: "postcss-loader",
            options: {
                plugins: function () {
                    return [require("precss"), require("autoprefixer")];
                },
            },
        },
        "sass-loader",
    ],

//index.scss
@import "~bootstrap/scss/bootstrap";

Adding Font Awesome

Installing Core packages to only include needed icons in final bundle

npm install --save-dev @fortawesome/fontawesome-svg-core @fortawesome/free-solid-svg-icons @fortawesome/free-regular-svg-icons @fortawesome/free-brands-svg-icons

//index.js

import { library, dom } from "@fortawesome/fontawesome-svg-core";
//library is used to import the specific icon , dom replaces i tag in DOM
import { faSpinner } from "@fortawesome/free-solid-svg-icons";
// import only the icons needed 


library.add(faSpinner); //puts the icon in the library
dom.watch(); //watches for changes in the html, and replaces every font awesome <i> tag

<!-- index.html -->

<i class="fas fa-spinner fa-spin"></i> 
<!-- simply consume the icon needed -->

ES Lint

This file specifies basic rules to check for errors in js , especially used for linting and providing universal using standard.

npm install eslint babel-eslint --save-dev

create .eslintrc.json (can be generated too , check out docs)

{
    "extends": "eslint:recommended", //recommended settings
    "parser": "babel-eslint", // babel for classes
    "parserOptions": { //for es6 import and others
        "ecmaVersion": 6,
        "sourceType": "module"
    }, 
    "env": {
        "node": true, //tells we are using node , for "require"
        "browser": true //tells running in browser , for "document"
    },
    "rules": { //specific rules that we want to add
        "no-console": 0
    }
}

manually run eslint using eslint .
or Install specific Linter plugins in your Editor to get the errors while coding itself.

Command Line Cheat Sheet with Text Editors (Vim , Nano)

Arjun Porwal — Tue, 18 Aug 2020 12:38:19 +0000

Command Line Cheat Sheet

Navigating and Finding Files
- Listing Files & directory
- Changing directory
- Finding Files
Shortcuts
Creating Files & Directories
- Copying and Moving/Renaming Files
- Removing Files
- Reading and Writing files
MAN (Manual Pager) & Help
Extras
- Piping
- File Permissions
Command Line Tools
- LESS Viewer
- Nano Editor
- Vim editor

Command Line Cheat Sheet

This Sheet Contains all the basic command prompt commands, from moving and editing files to shortcuts for using the command line, This File also has Command Line editors' commands.

Markdown is available on my Github

Navigating and Finding Files

pwd = Tells the current working directory

Listing Files & directory

ls = list all files in the current directory
ls -a & ls -la = list files with extra info
ls ./documents = lists all the files of the relative path [./ is not necessary]

Changing directory

cd folder/sub_folder = can be used to go change current directory
cd .. OR cd ../.. = used to go up directories
cd = moves to home directory
D:= to change drive working on [for DOS/Windows]
pushd PATH= changes to specified path and saves the current path
popd = brings back to the saved path of pushd

Finding Files

locate FILE_NAME = finds all the directories where the file is

Shortcuts

ctrl+r : search all commands
ctrl+a : cursor to beginning
ctrl+e : cursor to end
ctrl+l OR clear : clear screen
ctrl+c : to stop a command that keeps running
killall firefox : kills a process
ctrl+d OR exit : exit the prompt

Creating Files & Directories

touch file_1.txt file_2.txt = creates empty files
echo "hello textfile" > file_2.txt = adds text and creates file
echo "hello again" >> file_2.txt = adds text to already created file
mkdir folder_name folder_name_2 = can create folder with these
mkdir -p folder/sub_folder = used to create directories

Copying and Moving/Renaming Files

cp from_dir/file to_dir/file = copies files , works with files in the current directory if no dir specified
mv old_file_name new_file_name = move command , when used in the same directory , deletes the old file and makes a new file with the new_file_name (Renaming)
mv from_dir/file to_dir/file = here move command copies the from file and deletes it , pastes it in to dir

Removing Files

rm file_name = the file will be deleted
rm * = remove all files in directory
rm file* = removes all the files in the directory starting with 'file'
rm -r = this removes the directory (-r mean recursively ,i.e remove all files all subdirectory and the directory itself)
rmdir DIR = removes directories that don't have anything in them

Reading and Writing files

cat file_name = reads the file and prints it in terminal
cat > file_name = creates a new file and saves the input text (ctrl+d to exit)
cat >> file_name = takes input of text to store and add it to file
cat file1 file2 = prints contents of both files
more file1 = shows the huge text of file in steps , can exit anytime pressing q

MAN (Manual Pager) & Help

man brings all information about specific command on terminal
Example : man bash , man git
whatis COMMAND = lets us know what the command does (executables)
help COMMAND = information of shell comands (ex. cd)

Extras

which command_name = checks if the command is there and where it is
history = lists all the commands typed in
watch free -h = watch , keeps on running a command every 2 seconds and free lists the space available in pc

Piping

history | less = opens history in less mode
ls -al / > lsout.txt = redirecting output of ls into a file

File Permissions

output of ls -l shows file permissions and users with file info
Groups - USER , GROUP , EVERYONE
Permissions - r = read (4 bit) , w = write(2 bit) , x = execute(1 bit) , all = 8 bit
adding the values will produce appropriate number for rights given
chmod 700 file1 - makes the file read write exec only for user
chmod 744 file1 - makes the file rwx for user , and read for others
chmod 644 file1 - user can rw and others only read
chmod 755 file1 - user can rwx and others can rx
chmod 755 dir - mostly used for directories , rwx[USER] | rx[Group] | rx[Every]

Command Line Tools

LESS Viewer

less file1 = opens the specific file

Commands	Action
`Down arrow`, `Enter`, `e`, or `j`	Move forward one line.
`Up arrow`,`y` or `k`	Move backward one line.
`Space bar` or `f`	Move Forward one page.
`b`	Move Backward one page.
`/pattern`	Search forward for matching patterns.
`?pattern`	Search backward for matching patterns.
`n`	Repeat previous search.
`N`	Repeat previous search in reverse direction.
`g`	Go to the first line in the file.
`Ng`	Go to the N-th line in the file.
`G`	Go to the last line in the file.
`p`	Go to the beginning of the file.
`Np`	Go to N percent into file.
`v`	Open Your Preferred CMD editor.
`h`	Display help.
`q`	Exit `less`.

Nano Editor

nano = create new file & open editor
nano file1.php = open a specific file using nano
Ctrl is represented as ^
Alt is represented as M

Commands	Actions
Ctrl + O , `^O`	Save A File
Alt + B , `M-B`	Create a Backup
^X	Exit file , with prompt
M-U	Undo an action
^G	Get Help

Commands	Navigate Actions
^F	Move one character forward
^B	Move one character backward
^Space	Move one word forward
M-Space	Move one work backward
^P	Move to previous line
^N	Move to next line
^V	Move to next page
^Y	Move to previous page
^A	Move to Beginning of line
^E	Move to End of line

Commands	Search Actions
^W	To open Search prompt
^T	To Search Line Number
M-W	Go to Next result
^R	Replace Searched Text

Commands	Text Actions
M-6	Cut Text / Line
^K	Copy Text / Line
^U	Paste Copied Data

Vim editor

Changing mode from one to another
From command mode to insert mode type a/A/i/I/o/O ( see details below)
From insert mode to command mode type Esc (escape key)

Text Entry Commands (Used to start text entry)

a =Append text following current cursor position
A = Append text to the end of current line
i = Insert text before the current cursor position
I = Insert text at the beginning of the cursor line
o = Open up a new line following the current line and add text there
O = Open up a new line in front of the current line and add text there

Cursor Movement Commands

h = Moves the cursor one character to the left
l = Moves the cursor one character to the right
k = Moves the cursor up one line
j = Moves the cursor down one line
nG or :n = Cursor goes to the specified (n) line (ex. 10G goes to line 10)
^F (CTRl F) = Forward screenful
^B = Backward screenful
^f = One page forward
^b = One page backward
^U = Up half screenful
^D = Down half screenful
$ = Move cursor to the end of current line
0 (zero) = Move cursor to the beginning of current line
w = Forward one word
b = Backward one word

Exit Commands

:wq = Write file to disk and quit the editor
:q! = Quit (no warning)
:q = Quit (a warning is printed if a modified file has not been saved)
ZZ = Save workspace and quit the editor (same as :wq)

Text Deletion Commands

x = Delete character
dw = Delete word from cursor on
db = Delete word backward
dd = Delete line
d$ = Delete to end of line
d^ (d caret, not CTRL d) = Delete to beginning of line

Yank (has most of the options of delete) -- VI's copy command

yy = yank current line
y$ = yank to end of current line from cursor
yw = yank from cursor to end of current word

Paste (used after delete or yank to recover lines.)

p = paste below cursor
P = paste above cursor

Undo & Restore

u = Undo last change
U = Restore line
J = Join next line down to the end of the current line

File Manipulation Commands

:w = Write workspace to original file
:W = file Write workspace to named file
:e = file Start editing a new file
:r = file Read contents of a file to the workspace

Pages

To create a page break, while in the insert mode, press the CTRL key

And l. ^L will appear in your text and will cause the printer to start

A new page.

JavaScript : Behind The Scenes + Extra Concepts

Arjun Porwal — Tue, 16 Jun 2020 13:00:19 +0000

JavaScript : Behind the Scenes + Extra Concepts

JavaScript Versions
Mini Reference
JavaScript Code Execution
- How Code is executed
- Execution Context & Stack
- Execution Context in Detail
  - Variable Object, Scope Chain & 'this' Variable
Asynchronous JS Working
Extra Concepts
- Refactoring, Debugging Code
- Planning Projects
- Event Delegation

JavaScript : Behind the Scenes + Extra Concepts

This Sheet Explains some of the Behind the scenes working of JavaScript , how our code is executed and how Asynchronous JS works, it also contains some additional Concepts that can help to code your projects easily.

To get this Sheet in Markdown : Github Repo

To Study JavaScript From Beginning : JavaScript Roadmap

JavaScript Versions

2009 (ES5) : major update, browsers started integrating JS (Fully supported in all browsers)
ES6/ES2015 : biggest update to language , after this annual release cycle started
now on ES2016 / ES2017 / ES2018 / ES2019 ...

Mini Reference

Function Declaration:

function add() {/* code here */}

Function Expression:

var add = function () { /* code here */ }

JavaScript Code Execution

How Code is executed
- Our code -> JS engine (V8) -> Parser ->
- Abstract syntax Tree -> Machine Code -> Code Runs
Execution Context & Stack
- Global Execution Context
- Code that is not inside any block (like function)
- it is Associated with the global object , in browser its the window object
- var lastName === window.lastName
- Each time a function is called new Execution Context Object is added
- Execution stack has global context as base , then adds the function context to the stack and removes them from stack when function is returned
Execution Context in Detail
- Execution Context Object consists of
- Variable Object
- Scope Chain
- "This" Variable Pointer

Creation Phase
1. Creation of Variable Object
  - Argument object is created , containing all arguments that were passed to a function
  - Code is scanned for Function declaration , for each function a property is created in Variable object , pointing to the function
  - Code is scanned for Variable declarations, for each variable a property is created in the Variable Object and set to undefined.
  - These upper two phases are HOISTING
    - As Creation phase is done before Execution phase , we can call a Function Declaration even before they are declared in code. As it is a pointer in the creation phase.
    - Remember this does not happen for Function Expression as it is referenced as a variable (treated as a variable) , so a function expression is saved in Variable Object set to Undefined (the same happens for Variables)
2. Creation Of Scope Chain
  - Decides Where can a certain data be accessed
  - Each new function creates a scope (variables in its block remain accessible to its stack only)
  - Lexical Scoping , a function that is lexically declared within another function gets access to the scope of outer function (Parent Scope)
  - Searching for the variable in Parent scopes creates a Scope Chain
  - Execution Context is the order in which functions are called
  - whereas Scope chain is the order in which function are lexically written
  - That is the reason why variables of Functions can be accessed even after they have been returned (removed from Execution Context, but still pointing in Scope Chain) [Closures]
3. Determine the value of 'this' variable in creation Phase
  - In regular function , 'this' keyword points to global object (window)
  - in method (functions inside object) call, variable points to the object it is calling
  - this keyword is not assigned a value until the function in which it is defined is actually called (that is why function borrowing works between objects , as 'this' points to the object it is in)
  - Only methods point to the object , 'this' variable of a Function Declaration written inside a method will point to the window
Execution Phase
- The Execution context after creation is now executed from top to bottom
- The code of the functions that generated the context is now executed line by line

Asynchronous JS Working

The Event Loop: Behind the scenes

examples of Asynchronous Functions: setTimeout(), DOM events , XMLHttpRequest are Web APIs
They create their own execution object and then are added to the Web APIs stack, running in the background away from the main execution stack
and therefore the execution of main JavaScript Execution stack continues
Once the Function is in Web APIs stack is complete , it comes in the Message Queue and runs when the main execution stack is empty
The Event loop keeps checking the Message Queue and pushes the pending Function to the main execution stack as soon as it gets empty
This is how Asynchronous JS works behind the scenes.

Extra Concepts

Refactoring Code
1. Use DRY principle ( using functions , objects)
2. Organize content in different files (according to the type of work)
Perform Debugging: debugger stops can help in JS

function myfunc() {
   // ... code
   debugger;
   // ... code
}

Debugging in VSCode and Chrome Developer Tools can also be used
always use console.log to check your working at any point of time in program.
Planning a Project
- Always structure your code in modules (categorize it and divide it in files),
- using IIFE can help , as only the returned data can be accessed outside
- using classes and objects will also help to modulate the code
- use functions to keep your code DRY
- Always make a rough diagram to have a reference of what you are doing
How To Write JavaScript Code
- STEP 1 : List the basic and main functionalities of your project ,
- STEP 2 : See the working of the Functionalities Step by Step and code the basic functionalities in execution order.
- STEP 3 : Now look for the extra functionalities and perform STEP 2 again.
- STEP 4 : Finally Work on your UX
- STEP 5 : and now your code will be complete.
Event Delegation
- Simply means due to event bubbling, we can target a child element and give it an event listener using the parent element
- Its use Cases
- When we have multiple children to add event to , we can add event listener to parent and then target the child elements we are interested in
- When we want an event handler attached to an element that is not yet in the DOM when our page is loaded.

From here, you can start digging deeper into these concepts because this is just an overview and summary of inner working & concepts of JavaScript

To Study JavaScript From Beginning : JavaScript Roadmap

Ultimate Road Map to Study JavaScript : Basics to Advanced

Arjun Porwal — Tue, 09 Jun 2020 05:11:22 +0000

JavaScript Reference Sheet

References
Basics
Functions
Arrays
Objects & Properties
Document Object Model (DOM)
ES6+
Asynchronous JavaScript

JavaScript Reference Sheet

Road Map to study JavaScript. Starting All the way from Basics to Advanced with references of useful links !

Link to Markdown in Github

A reference to Advanced JavaScript Concepts : JavaScript Behind the Scenes

References

Cheat Sheet : Link
All JavaScript Details : Javascript.info
JavaScript Documentation : MDN Docs
Books : Eloquent JS | You Don't Know JS

Basics

Console logging
Variable & Datatypes (using var)
- Number - Floating Point numbers & Integers
- Strings - For text
- Boolean - true/false logical data type
- Undefined - Data type of variable with no value
- Null - Doesn't Exist
- JavaScript is dynamic : data types are automatically assigned
- Camel Case & Naming Conventions
Comments
Mutation (Changing Data in variable) & Coercion (Data type conversion)
Math Operators & Logic Operators
- + , - , * , / , %
- < , > and <= , >= ...
- Compare letters according to Unicode ('a' < 'b')
- typeof & (== & ===)
- Operator Precedence & Multiple Assignments
- Operators Shorthand
Conditionals : If else, nested If, if else if
Ternary operator
Switch Statement
Boolean Logic : && , || , !
Truthy and Falsy values
- Falsy values : undefined , null , 0 , '', NaN
- Truthy values : all others give true on coercion
Loops & Iteration
For Loop
- While Loop
- Continue & Break
Error Handling
- Throw
- try , catch
Strict Mode ("use strict")
- It catches some common coding bloopers, throwing exceptions.
- It prevents, or throws errors, when relatively "unsafe" actions are taken (such as gaining access to the global object).
- It disables features that are confusing or poorly thought out.

Functions

Basic Functions ( declaration , returning data )
- Function Statement (direct declaration) and
- Function Statement returns Undefined on execution (if , while , function declaration)
- Function Expression (using variable)
- Function Expression always returns a value (typeof, variable function, 2+3)
Default Parameters
Callback Functions - Functions as Arguments & Return Functions from Functions
IIFE - Immediately Invoked Function Expression
- contain an anonymous function in braces and then call it at the same time
- only the content returned is accessible , abstraction & encapsulation.
Closures
- An inner function always has access to the variables and parameters of its outer function, even after the outer function has returned.
- It works because the Scope Chain is a pointer , so even when the function has returned in the execution stack , the scope chain still has access to the variables of the outer function.
Argument Object
Inbuilt String methods (indexOf , startsWith, substring)
Inbuilt Number Methods (MATH object)
Other Useful Inbuilt Functions :
- Date function
- Split & Join function
- Set timeout
- ParseInt

Arrays

Basic Arrays (declaration)
New Array () Syntax
Array Properties : length , index
Array Methods : pop , push , shift , unshift
Iterating Arrays : for...of , for...in , for each, map
Searching Arrays : indexOf , find , findIndex
Filtering arrays : filter , reduce
Sorting Arrays : sort
Altering Arrays : split and join functions
Useful Array Functions : splice , slice , concat , reverse , every , some

Objects & Properties

Basic Objects (declaration , accessing , mutating)
- new Object () Syntax
- Functions in objects (Are methods)
Prototypes & Prototype chains
- Prototypes are methods of objects that can be inherited
- Every inherited object can access its parents prototype
- Therefore , we write those methods in prototype that we want other objects to inherit
- The prototypes of constructor is the prototype of all its instances too
- We can check the prototype ,using object.property or object.__proto__
- hasOwnProperty lets us know if the property is inherited or not
- instanceOf can be used to check what is instance of what
Constructors - used as a blueprint to create multiple objects
Constructor Functions - used to initialize data of object for every instance
- Creating Constructor using Function
- convention is to keep first letter capital of constructor
- object variables are assigned values using this statement
- new object is created using , new constructorName() and assigning it to a variable
- We can create a prototype using , object.prototype
- We can inherit other constructors by using call method with parameters of parent constructor
- Constructors can also be created using Object.create , where we specify the prototype first and then specify the data
- Object.create(parent.prototype) can inherit the prototype of parent to child prototype
Primitives & Object
- Primitives hold the data directly (number , strings)
- Objects point the data to other object (objects, arrays)
- In JavaScript almost Everything is an Object
- Primitives : Numbers , Strings , Booleans, Undefined and Null are not.
- Primitives can be converted to objects using autoboxing when methods like string.length are executed
- Everything else is object, Arrays, Functions, Objects...
Two objects are only equal if they take the same space and position in memory , they wont be equal no matter the keys and properties.
Bind, Call & Apply
- Call can be used to give a different this pointer and call the function immediately
- Apply , same as call , but the arguments can be passed only as array
- Bind , sets this and other arguments to the function , then gives the functions so that it can be called with those arguments later

Document Object Model (DOM)

DOM
- structured representation of HTML
- DOM connects webpages to scripts like JS
- for each HTML box there is an object in DOM that we can access and interact with
DOM Methods - querySelecor, getElementById
Event Listeners - storage , UI listener (mouse)
Data Storage CRUD - local Storage
window.location - assign , hash
window - inner width , inner height, console, document, addeventlistner(to work on multiple tabs)

ES6+

let and const
- are only blocked scoped (any block if, while) , whereas normal var is function scoped only
- cant be used before declaration , whereas var gives a value of undefined
- IIFE can be created in es6, just in a block {} without variables
Template Strings
Arrow Functions (lexical this keyword functionality)
Destructuring : { name , length } = object , [name , length] = array
Spread Operator : spread array , objects
Rest Parameters
Maps : same like object , but keys can be numbers, functions anything
- we can loop through them
- functions : get,set, size , has, delete, clear, entries
Class : syntactical sugar for es5 constructor and inheritance
- Class Constructor
- Class methods
- Subclasses , Super & Extends
- Getters and Setters

Asynchronous JavaScript

Asynchronous Functions can run in background
HTTP requests & response (Old Way)
- XMLhttprequest , readystatechange
- readyState, open, send
Promises
- Object that keeps track about whether a certain event has happened or not
- Determines what happens after the event
- Implements the concept of a future value that were expecting
- 4 states = Pending -> Settled/Resolved -> Fulfilled, Rejected
- Checking : resolve, reject,
- Performing Actions using .then & .catch
- Promise chaining
Async/Await alternative way to consume promises
- we can use the response promise given by await to check and catch errors.
Fetch Api - gives promises that can be consumed using Async/await or promises
Axios - alternative to fetch , directly returns data in JSON
API - Application Programming Interface (Remote Server has a part that works as API)
JSON - JavaScript Object Notation (json function is available inbuilt in js)
AJAX - Asynchronous Javascript and XML
CrossOrigins

This is Just the Beginning of your Journey in JavaScript , there's always soo much more to explore !

A reference to Advanced JavaScript Concepts : JavaScript Behind the Scenes

Sass Reference Sheet with NPM setup in boilerplate project

Arjun Porwal — Sun, 03 May 2020 03:31:43 +0000

Sass

Today I am sharing this reference sheet that contains all the references to usage of Sass, also BEM & 7-1 architecture.

This also contains a boilerplate setup to get started on any Sass project with all the setup for it done already ! (Refer to the end of this sheet)

Markdown is available at my Github

Sass
BEM
7-1 Folder Architecture
NPM Setup Boilerplate

Variables for reusable values : Usage
$pink: #ff1493;
Nesting to nest Selectors inside of one another for less code : Usage

  //scss
  .parent{
    .child{}
  }

  // becomes in css
  .parent .child{}

Operators for mathematical operations in CSS : Usage
font-size: (16px / 24px) // Uses parentheses, does division
Partials and Imports (@rules) to write code in different files and merge them : Usage
@import "sample";
Mixins to write reusable piece of code : Usage

  @mixin overlay() {
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
  }

  .modal-background{
    @include overlay();
    background: black;
    opacity: 0.9;
  }

Mixins & Placeholders : comparison
Functions are similar to mixins but produce a value : Usage

  @function remy($pxsize) {
      @return ($pxsize/16)+rem;
  }

  h1 { font-size: remy(32);}

Extends to inherit same declaration in different selectors : Usage

  // scss
  .small-uppercase{
    color: lightslategrey;
    font-size: 10px;
  }

  .modal-background{
    @extend .small-uppercase;
  }

  // generated css
  .small-uppercase,
  .modal-background{
    color: lightslategrey;
    font-size: 10px;
  }

Control Directives to write complex code using conditionals and loops (, @content, @if) : Usage

  @mixin test($condition) {
      $color: if($condition, blue, red);
      color:$color
  }

BEM

BEM — Block Element Modifier is a methodology that helps you to create reusable components and code sharing in front-end development
Example :

  <form class="form form--theme-xmas">
    <input
      class="form__submit form__submit--disabled"
      type="submit" />
  </form>

  .form { } //block
  .form--theme-xmas { } //block--modifier
  .form__submit { } //block__element
  .form__submit--disabled { } //block__element--modifier

BEM by Example : Reference
ABEM - A better approach to use BEM , Explanation

  /* classic + atomic prefix */
  .o-subscribe-form__field-item {}

  /* camelCase + atomic prefix */
  .o-subscribeForm__fieldItem {}

7-1 Folder Architecture

Folder Structure in Practice : Reference
The 7–1 pattern is a common Sass architecture, and is recommended by the Sass Guidelines Project. Here’s the basic structure:

  sass/
  |
  |– abstracts/             # HELPER FILES
  |   |– _variables.scss    # Sass Variables
  |   |– _mixins.scss       # Sass Mixins
  |
  |– vendors/               # THIRD-PARTY FILES
  |   |– _bootstrap.scss    # Bootstrap
  |
  |– base/                  # BOILERPLATE FILES
  |   |– _reset.scss        # Reset/normalize
  |   |– _typography.scss   # Typography rules
  |
  |– layout/                # STRUCTURE FILES
  |   |– _navigation.scss   # Navigation
  |   |– _grid.scss         # Grid system
  |   |– _header.scss       # Header
  |   |– _footer.scss       # Footer
  |   |– _sidebar.scss      # Sidebar
  |   |– _forms.scss        # Forms
  |
  |– components/            # SPECIFIC COMPONENTS FILES
  |   |– _buttons.scss      # Buttons
  |   |– _carousel.scss     # Carousel
  |   |– _cover.scss        # Cover
  |   |– _dropdown.scss     # Dropdown
  |
  |– pages/                 # PAGE SPECIFIC FILES
  |   |– _home.scss         # Home specific styles
  |   |– _contact.scss      # Contact specific styles
  |
  |– themes/                # MULTIPLE THEME FILES
  |   |– _theme.scss        # Default theme
  |   |– _admin.scss        # Admin theme
  |
   – main.scss              # Main Sass input file

NPM Setup Boilerplate

I have made a complete NPM setup for sass development , that you can use as a boilerplate for your project, by just simply cloning it.
It contains :
- Font-Awesome and Animate CSS is built in !
- 7-1 Folder Architecture
- Global Reset
- Gitignore Included
- Media Query Manager
- JavaScript Babel Compilation
- Development scripts : compile, serve and watch
- Production scripts : compile, prefix and compress.
You can Find this Boilerplate in my Github Repo

Hope This Helps , Thank You !😊

HTML, CSS & Responsiveness Reference Sheet

Arjun Porwal — Tue, 28 Apr 2020 04:23:11 +0000

HTML , CSS & Responsiveness Reference Sheet

Here is my collection of all references of HTML & CSS that can be used as a reference while studying them as a path , explanation to use responsiveness is also available here.

You can get the markdown at my Github

HTML , CSS & Responsiveness Reference Sheet

HTML
- Basic HTML
- Useful Elements
CSS
- Basic CSS
- Positioning
- Animations
- Images & Transformation
- Styling Forms
- Useful Properties
Responsiveness
- Screen Width Usage
- Order to apply Media queries
- Handling Images
- Feature Queries
Other Useful Concepts

HTML

CHEATSHEET

Basic HTML

All Tags - Reference
Class & ID - Usage
Adding CSS & other files - Link Tag
Adding JS - Script

Useful Elements

CSS

CHEATSHEET
All Properties Reference

Basic CSS

Box Model - Explained
Selectors - All Pseudo Selectors & Common 30 Cheatsheet
Positioning - Relative, Absolute & Other
States - Link | Visited | Hover | Active | Focus
After & Before Elements - Reference | Applications
Pseudo Class Selectors - :not | :nth-child | others
Special Functions - calc() | others
Variables - Reference

Positioning

Floats - All About Floats
Display - block, inline, inline-block, tables
Flexbox - Explanation , Cheatsheet
Grids - Explanation , Cheatsheet

Animations

Creating Animations - Reference
Using Animations -Transition
Cubic Bezier: Create Your Own or Premade

Images & Transformation

Background Images & Gradients - Reference
Transformation - Transform
Clipping & Masking - Reference, Clipping Tool

Styling Forms

Styling Inputs - Reference
Selectors - :input-placholder | :input-placeholder-shown | :valid | :invalid | :focus
Other Inputs - Radio Button, Checkbox, Toggle Styling
Dropdown - Reference

Useful Properties

Target - to target an element having ID
Background-clip - to clip background with text or content
Perspective - change the perspective of 3d animations
Backface visibility - for the elements behind
Overflow - for overflowing content
Background-blend-mode, Mix-blend-mode - blend background with some color , or blend text with background
Box Decoration Break - to fix the decoration for multiline text
Shape Outside - to align paragraph according to the shape of image with it
Image Filter - to add filters to images
Object fit - to fit images and videos in containers
Hyphens - for multiline content
backdrop-filter - gives filter to the background

Responsiveness

Media Queries
Meta Tag - <meta name='viewport' content="width=device-width, initial-scale=1.0">

Screen Width Usage

Desktop First : use max-width; (higher to lower)
Mobile First : use min-width (lower to higher)

Order to apply Media queries

base + typography
general layout
grid
page layout
components

Handling Images

Density Switching - high-res (2px for 1px) & low-res(1px for 1px)
- <img srcset="img1x.png 1x, img2x.png 2x" alt="Image">
Art directions - different images for different screen

  <picture>
      <!-- when lower than 600px -->
    <source srcset="imgsmall1x.png 1x, imgsmall2x.png 2x" media="(max-width: 37.5em)"> 
      <!-- using density switching with art directions -->
      <img srcset="img1x.png 1x, img2x.png 2x" alt="img">
  </picture>

Resolution Switching - large & small screen

  <!-- in srcset , the images are specified with their original width-->
  <img srcset="img1.png 300w, img1-large.png 1000w" 
       sizes="(max-width: 900px) 20vw, (max-width: 600px) 30vw, 300px">
  <!-- in sizes , the screen size is speicified with the image width to be used, last one being the default size -->

Handling Images in CSS - media queries combined with screen res & width

  // for resolution greater than 1px and 600px width or webkit is for safari browser
  @media (min-resolution: 192pi) and (min-width:600px) ,
      (-webkit-min-device-pixel-ratio: 2) and (min-width:600px){
      // image you want to set
      }

Feature Queries

Browser

  @supports (-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px)){
    -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      //use only if the browser supports these properties
  }

Touch Capability - This will apply for small screen OR non hover screen. @media only screen and (max-width: 56.25em), only screen and (hover:none){}

Other Useful Concepts

Optimizing Images - By cropping or using Optimizilla
Search Engine Optimization - By using Meta tags
Class Naming Convention - BEM
Global Reset

  * {
      margin: 0;
      padding: 0;
      box-sizing: inherit; //from body element
  } 
  html{
      font-size: 62.5%; //defines 1rem everywhere as 10px
  }
  body{
      box-sizing: border-box;
      /*
      Define project wide font family and size in body selector
      */
  }

Git & Github Cheatsheet

Arjun Porwal — Mon, 06 Apr 2020 18:11:58 +0000

Hello Everyone !

Today I am sharing my collection of all everyday use git commands , with usage explanations. This Sheet also contains, the methods to use online git platform like Github.

The markdown is also available on my Github for instant reference.

Basic Commands

Git Config :
- git config -- global user.name NAME = set user name globally
- git config --global user.email EMAIL = set user email globally
- git config user.name || git config user.email = check saved info

Creating repo

git init = creates a git repository in the directory currently in

Staging

git status = to check status , if staged or unstaged
git add FILE_NAME = to add a file to staging area
git rm --cached FILE_NAME = to remove a file from staging area
git add . = to add all files in project to staging area

Commiting

git commit -m "Specific Changes Made" = commits the staging area giving them a specific id
git log = shows all the commits with details
git log --oneline = shows all the commits in one line each
SPECIAL log : this will log the info in a nice format (Try it once 😉)
```
git log --graph --pretty=format:'%Cred%h%Creset -%C(yellow)%d%Creset %s %Cgreen(%cr) %C(bold blue)<%an>%Creset' --abbrev-commit     
```
- this can be used as an alias
Git Stash
- git stash = clears the changes to the initial state (last commit) & creates a unique id for the current state
- git stash apply = brings back the current state
- using git stash multiple times creates a list of stashes of all states with multiple ids
- git stash list = shows all the stash (States) with their ID
- git stash apply ID = ID will be the number , which state you want to go back to
- git stash push -m "Your message" = used to give description to stash
- git stash drop ID = used to remove a stash saved
- git stash pop ID = applies the specific stash and removes it from history
- git stash clear = removes all the stash history

Gitignore

a .gitignore file can be created , in which you can specify all the folders/files that should not be staged and commited
For example : node_modules/ .css.map etc.
It's Good to create a gitignore at the start of Project
a good gitignore generator for reference :
- Gitignore.io

Reverting & Reset

use git log --oneline to see the commit_ID to change to
Checkout commit :
- git checkout commit_ID = to just check the commit id entered , see it in read only ... changes will not be saved
- git checkout master = to come back to original commit (As checkout removes us from master branch)
Revert commit :
- git revert commit_ID = to remove the changes of the provided commit (will add a new revert commit and remove the changes of the specific commit)
Reset Commit :
- git reset commit_ID = will remove all the commits after the provided id , but the files in local directory will not be touched (therefore you can still commit to original state after doing changes as needed) ... might take you to vim editor (type ":wq" then "Enter" to exit)
- git reset commit_ID --hard = will remove all the commits after the provided id and even delete all the files and lines from local directory too

Branches

Used to test a new feature or code , by creating a branch .. then merging it to master only if needed
can be used for multiple developers working on same project .. create different branch for each developer adding their own feature then merging at the end
git branch branch_name = to create a new branch
git branch -a = to list all the branches
git checkout branch_name = to shift to the other branch
git branch -d branch_name = to delete the branch only when it has been merged
git branch -D branch_name = to delete the branch (even if not merged to master)
git checkout -b branch_name = to create and shift to a new branch at once

Merging branches

after completing changes in a branch and commiting them
come back to master and run
git merge branch_name = this will merge the branch to master (all commits show in master) = automatic
git merge --squash branch_name = this will merge the branch to master (only the commit after merge is shown in master) = manual

Conflicts

If Branch's Base (First Commit) is Master's Head (Last Commit) = No Conflict
If Master had commits after creating Branch = Conflicts Might Come
to solve this , edit the files manually , Solve The Conflicts then ..
run git add . and then git commit -m "Message" and the changes will be made

Git Rebase & Git Merge

Using Git Merge Shows that the Branches Were Added to master , i.e the tree is not inline for all commits
whereas Git Rebase keeps changing the base, and makes the commit inline , feels like the branch was never there
RUN git rebase master on your branch
1. Takes the base of master , matches it with every commit of your branch
2. If The Master is already your base , no need of step 3, 4, 5
3. solve the conflicts , then git add .
4. run git rebase --continue
5. Repeat 2, 3 steps for every commit - conflict
6. Now The Master's Head is Branch's Base
7. Move to Master
8. run git rebase branch_name
9. Now All the commits of Branch are added above your Master commits
NOTE! : It is specified in the git docs that rebase should not be used in public repos (collaboration) as it can cause major errors and conflicts, it can be used in private repos.

Github

Creating new & Cloning Repo
- create a new repo on Github and copy the URL
- now push your code to it with
- git push git_url master = pushing code of master branch (to push all branches replace master with --all)
- creating an alias to not always type URL
- git remote add origin git_url = origin can be name of anything else, but origin is the word most commonly used
- git push origin master = to push code to using alias
- git push -u origin master = pushes and starts tracking the branch (u don't need to specify it again , ex. if pulling)
- git clone git_url = will copy the repo to current directory and also add the origin alias by default
- git remote -v = to check all the aliases made
- adding id and password in push\pull :
  - replacing the origin in git push origin master
  - git push https://username:password@repo_url.git master
  - if password contains @ replace it with %40
  - NOTE : this can store your password in plain text
  - to avoid this you can remove the password and enter it later
  - git push https://username@repo_url.git master

Collaborating
- Most of the collaboration features are already available on Github, Example
- git pull git_url = to pull changes from remote to local repo
- create a branch and make your changes
- git push origin branch_name = to push the specific branch to remote
- create a Compare & Pull Request when you want are ready for the branch to be merged (with a message)
- the reviewer of the repo will accept the changes and merge it (and specify a merge commit message)
- pull the project every time before editing to see the changes
- git branch -r = helps us to see the remote branches & the connections

Forking (Contributing)
- to contribute to an open source project
- click on fork , which will copy the repo to your account
- make changes by pulling the repo, then push it ( this will happen on your account )
- then go to the owner account's repo and create a pull request there
- the owner can compare the changes and accept your changes
- which will end up merging your changes to their project

Hope You find it useful, Thank you for visiting 😊

Installing ZSH on Windows

Arjun Porwal — Sat, 21 Mar 2020 11:30:00 +0000

Welcome Everyone

All of us have seen customizable and feature-full terminals in linux and mac,
if you want to have a cool looking & powerful terminal in windows too, Follow me!

Today I will be sharing how to install Z Shell with oh-my-zsh and also customizing it with an Awesome Theme and Plugins to bring a pimp to your terminal

This is how the Final Setup will look like : 😎

This post is divided into 4 Parts

Setting Up Windows for ZSH installation (Cygwin & Cmder)
Installing Oh-my-zsh
Customizing Terminal and ZSH with Color Schemes & Themes
Some Extras to Refer to, Or some errors that might come.

You can refer to My Github Repo, to get the files and skip this process , to get the same terminal as mine & to get some useful resources instantly too.

So Let's Begin 😋

1. Setting Up Windows

For Windows we have to install

a. Cygwin = Brings Unix environment in windows

b. Cmder = One of the most Feature Full and customizable command prompt

a. Cygwin Setup

Download Cygwin
When Running The Installer, Follow the Instructions.
1. Make Sure to Let the installer install at C:\cygwin64
2. For Download site Select Any URL , Click Add
3. Stop at packages screen, search wget expand All under Web select latest version of it under bin of wget no need to select Source. Then Continue.
Finish Installing and launch the Terminal.
We are going to use Cygwin to Install Some Packages that will help to use Linux System on Windows. We will install apt-cyg which will work like apt-get and also install many other packages too like vim
- Run The following to download apt-cyg with wget. Note you can prompt to install gdb, vim or dos2unix if you want to use them or just remove them, you can install even more packages of your choice if you wish !

     > wget rawgit.com/transcode-open/apt-cyg/master/apt-cyg

     > install apt-cyg /bin

     > apt-cyg install zsh git gdb dos2unix openssh vim [or your favorite text editor]

If you want your home folder to be your user's folder, you need to edit cygwin64/etc/nsswitch.conf. You can do this in the text editor you just downloaded, or type explorer /etc to open the root directory to edit the file.
- Add this line to the bottom: db_home: windows

That's it for Cygwin , you can close the Terminal. Now let's move to the terminal we are using in this guide.

b. CMDER setup

This Might Feel a lot, but just stick with me and I will guide you through every step 😊.

In case you dont want to go through these , you can go to My Github Repo and just paste the specific files

Download and install one font from the package of Powerline Font to use in the terminal for the custom Icons. For This Guide I will be using MesloGS NF patched for powerlevel10k theme, you can find it in my github.
Download Cmder (the full Version !) it's a portable package so to install it just extract it into a folder where it can stay permanently. (Don't Paste in Program Files)
Run cmder.exe
Right Click the Tab Bar and open Settings, We will be tweaking some of it. You can read and make changes as you wish 👍

i. Under General>Fonts. = Select Main Console Font MesloGS NF and remove check from Alternative Font

ii. Under General>Size & Pos. = Check Snap To desktop edges

iii. Under General>Appearance. =
- You can remove Check from Show Button In tab bar and Show Search Field
- Select Hide Scroll Bar
iv. Under General>Tab bar select auto show.

v. Under General>Confirm You can switch off confirmation of creating new tab if you don't need it (I Never wanted it).

vi. Under General>Taskbar
- check Don't show ConEmu Window on taskbar &
- Auto Minimize to TSA (to not interrupt in alt+tab)
vii. IMPORTANT : Under Startup>Tasks
- Click on + then Rename it from Group xx to cygwin:ZSH.
  - Check Default Task For New Console
  - Under Task you can give Location of any Icon You Wish to have (.ico file), I have given one nice icon in my github
```
-icon "C:\cygwin64\Cygwin.ico"
```
  - Now In the Last Command Box paste this command
```
C:\cygwin64\bin\mintty.exe /usr/bin/zsh --login -i -new_console:d:%USERPROFILE%
```
  - Last step is Click on General and choose startup task from the dropdown {cygwin:ZSH}
  - Do the same for Admin Privileges , rename it as {cygwin:ZSH as Admin} and replace command with
```
*C:\cygwin64\bin\mintty.exe /usr/bin/zsh --login -i -new_console:d:%USERPROFILE%
```
viii. Under Features>Colors choose Monokai Scheme

ix. For the setup of shortcuts, Click on Keys & Macro then change the shortcuts. Here is my setup :Win + Esc : Minimize/Restore Win + Down : Create New Console Win + T : Create new console (With Dialog) Win + N : Split: Duplicate active ‘shell’ split to bottom Win + Right : Switch Next Console Win + Left : Switch Previous Console Win + Q : Close active Console Win + E : Close all Consoles Win + Alt + P : Show Settings Win + Alt + Space : Show ConEmu Menu
- To make These Work go to Keys & Macro>Keyboard and check Support Special Keys
x. Under Keys & Macro>Paste make sure Multi Lines is Checked Everywhere.

Finally. After Completing the Settings Click On Save Settings.
You now Have setup to use Cygwin in Cmder, Close the terminal and open a new one
Tada! you will see some differences, There You Go Running Cygwin In Cmder Successfully.
If a Prompt Comes type 0 to exit, we can edit the specified files later manually.

2. Setting Up Oh-my-zsh

Now let's add a manager to handle plugins, updating and themes. It's Awesome that you have reached soo far, we are very close to completion. Great Work 🤘

Install oh-my-zsh the manual way, Run the lines one by one

> git clone git://github.com/robbyrussell/oh-my-zsh.git ~/.oh-my-zsh
> cp ~/.oh-my-zsh/templates/zshrc.zsh-template ~/.zshrc

Now Close the Terminal with shortcut (Win+q) or normal way, then open a new one
If it prompts , type 0 to exit

There You Go Running ZSH on WINDOWS !

Now we are going to install an awesom theme and edit all features of zsh and cygwin you can continue if you wish to make it look like mine.

You can also visit My Github Repo to instantly paste the files and you will be good to go !

3. Customizing Cygwin & Oh-my-zsh

Changing Color Scheme and other Mintty settings
1. Right click your terminal
2. Hit options
3. Change font-size and Apply the settings , this creates .minttyrc file
4. Browse to Root folder of the user , open .minttyrc file and paste my settings, to change the color scheme to mine

    BoldAsFont=no
    RightClickAction=paste
    Font=MesloLGS NF
    FontHeight=12
    Term=xterm-256color
    BoldAsColour=yes
    ConfirmExit=no
    Scrollbar=none
    Transparency=medium
    OpaqueWhenFocused=yes
    SelectionShowSize=1

    BackgroundColour=14,14,14
    ForegroundColour=228,228,228
    CursorColour=228,228,228
    Black=40,40,40
    BoldBlack=107,107,107
    Red=255,43,28
    BoldRed=243,91,80
    Green=2,192,97
    BoldGreen=0,253,127
    Yellow=251,188,46
    BoldYellow=253,197,86
    Blue=0,126,180
    BoldBlue=0,179,255
    Magenta=255,0,194
    BoldMagenta=239,133,214
    Cyan=87,208,249
    BoldCyan=141,219,245
    White=207,207,207
    BoldWhite=255,255,255

Changing Zsh Themes and prompts
- To install the Powerlevel10k theme that I am using you can run
```
git clone --depth=1 https://github.com/romkatv/powerlevel10k.git $ZSH_CUSTOM/themes/powerlevel10k
```
- Set ZSH_THEME="powerlevel10k/powerlevel10k" in ~/.zshrc.
- Close and Open a new terminal window
- Finally Go through the setup in the prompt as you wish
- I have edited the p10k.zsh file, manually to make it look even more clear, the file is available in My Github Repo 😉

Adding Plugins
- To install plugins just go to your root user folder, open .zshrc and you will find a variable plugins. Simply add the plugins you want to install with spaces plugins=(git z zsh-autosuggestions)
- Z = saves the locations you visit the most, so that you can access it in one shot
- git = brings many aliases in the command line
- npm Trash-cli = it is an npm package, very useful to replace rm command
- Auto suggestions = automatically suggests the code to type and autocomplete, has to be installed manually not internally available
  1. run git clone https://github.com/zsh-users/zsh-autosuggestions ${ZSH_CUSTOM:-~/.oh-my-zsh/custom}/plugins/zsh-autosuggestions
  2. add zsh-autosuggestions in plugins variable

SETUP COMPLETE 🎉

There you go your Terminal has now become very powerful and awesome, it was great to share this with you all. Have Fun ! Keep Coding and Keep Exploring ! 🤘

Extras

You can checkout about all the features of oh-my-zsh on the internet , go explore
Errors :
- on some commands oh-my-zsh runs less command with -R (repaint). You can disable this behavior by adding the following line at the end of your ~/.zshrc

    unset LESS;

This is set to -R in ~/.oh-my-zsh/lib/misc.zsh
incase there is Insecure completion-dependent directories error : run this

    chmod -R 755 ~/.oh-my-zsh

Forem: Arjun Porwal

React CheatSheet

Basics

Why Components ?

Basic Folder Structure :

JSX - JavaScript XML :

Initializing new React Project

Basics React Component

States & Events

Creating States - useState

Handling Events & Forms

useRef - DOM manipulations

Saving Multiple Data - Object State

Passing Data - Child & Parent

Extras

Types of React Components

Redering Lists and Conditional Content

More About Forms

Styling In React

Debugging

Fragments, Portals and Refs

Fragments

Portals

Refs

Side Effects/Hooks , Reducers & Context API

useEffect

useReducer

Context API

Rules for hooks

Forward Refs

How React Works , useCallback & useMemo

ReEvaluation Issue

useCallback

States and components changes

useMemo

Class-based Components

Basic Usage

States and Events in Classes

Class-based Lifecycles

How to connect to Backend DB , using Https Requests

Redux with Class-Based Components

Attaching payloads to Actions

Working with multiple state properties

Redux Challenges

Redux Toolkit

How to create Slice in Toolkit

Dispatching Actions in Slice of Toolkit

Splitting Up Toolkit Codes

Advanced Toolkit

Handling Async Tasks and Side Effects with Redux

Adding async calls to the component directly

Adding Async calls using Action Creator Thunk

Redux DevTools

Router

Basic Usage

Working With Links and NavLinks

Dynamic routes and params

Nested Routes & Redirects

Extras

Query Parameters

Version 6 Changes

Building and Uploading for production

Server Side Routing and Client Side Routing

Some Places to deploy your React Code at

Tests in React

Tools

Writing Tests

Example

Testing Suites

User Events testing

Integration test

Asynchronous Testing

Mock Requests

THE END

Webpack Cheatsheet

Table Of Contents

Webpack Cheatsheet

Installation

Loaders

Adding Images