React notes

Intro to React

• JSX - JavaScript XML
• JSX - JS (Webpack + babel)

Why className?

• class is a reserved keyword in JS
• for, class ➡️ reserved keyword ➡️ htmlFor, className

Purpose of index.js

Bootstraps (start) the react

<noscript></noscript>

Msg is displayed when - JS is disabled in the browser

Template syntax ➡️ {}

1. Supports expression
2. Assignable statement is an expression
3. Only needed in return

Why alt?

• Image placeholder
• Visually impaired people - Screen reader
• SEO - Ranking

React.StrictMode - Error checking

Displays Error in console

function to be considered as a component

• function should start with a capital letter
• It should have at least one JSX element

props ➡️ arguments

props - properties of the components

React fragment <></> or div

• Avoiding extra elements in the DOM
• Styling is easier for parent

Handy shortcuts

• ctrl + ` show / hide terminal
• ctrl + , settings | format on save on
• ctrl + c stop react server in terminal
• win + . emojis
• crtl + click - for easy navigation

Hooks

• React listen to changes made by hooks
• Hooks - function
• It starts with use
• useState

  • const [state, setState] = useState(InitialValue)
  • state - state of mind | state of the art technology | current
  • In App state ➡️ current data
  • setState updates the value of state
  • setState react listens and updates state & view
  • import { useState } from "react";
  • Flow: User clicks ➡️ onClick trigger ➡️ setLike ➡️ React updates view

Toggle element

• Conditional rendering
• Conditional styling

Virtual DOM

• Copy of the Real Dom
• Large {key: value}
• Updating it does not cost performance
• To access VDOM you could use hooks (eg. setState)
• Once the update is done on the virtual DOM, then the Real dom is updated
• Comparison - Reconciliation - VDOM & Real Dom
• Key helps is quickly compare the changes
• Don't use document.* in React - Loses performance

Color game

• Typing eventlistner - onChange
• Flow: User Types ➡️ onChange trigger ➡️ setColor ➡️ React updates view
• Add Color ➡️ setColorList ➡️ Copy existing colorList & add new color to it

imports & exports

• Types

  • named imports & exports - preferred

    • Multiple exports
  • default imports & exports

    • Only export per file
• Always put export at end of the file - good practice
• crtl + click - for easy navigation

Material installation

• npm install @mui/material @emotion/react @emotion/styled
• npm install @mui/icons-material

React router

npm i react-router-dom

Tic Tac Toe

• Alternate | X -> O -> X | - ✅
• Board tracking - ✅
• Winning condition - ✅

  • When player play check in winning condition appears on the board - ✅
  • Announce winner - ✅
  • Stop the game - ✅

Routing

• Link changes URL without refresh
• Route matches path (URL) -> Component

Lifting the state up

• Lifting the state from child to parent
• Moving the declared state from child to parent
• Usage Sharing data between sibling components

sx

• Converts inline style -> internal style
• Customize material components
• Available only for material components

Unmounting phase

• Conditional rendering
• Routing

Data re-fetch

• Route change cause recreation of component
• Hence component is mounted, thus useEffect is called
• Advantage: Keeps data latest

renderProps

• Rendering props as JSX
• Advantage: JSX has access to parentFn variables

Race Condition

• GET movies gets called, before DELETE completes
• Will get OLD data
• .then or await - breaks race condition

Post method - fetch

1. Method - POST
2. Data (newMovie) - body & JSON
3. Header - JSON

JSON vs JS object

• JSON format - string datatype
• JS object - object datatype
• JS object Advantage

  • dot & box syntax
  • function
• JSON format - cannot have a function
• Why JSON?

  • Universal format - JS - python - GO