/reactjs-batch1

6th October 7 to 8

  • create-react-app
  • Nodejs
  • Npm
  • Jsx
  • XML example
  • Boilerplate code explained

7th October 6 to 7

  • React revison of last lecture
  • Jsx expressions
  • Jsx object concept
  • Nested components
  • Components props
  • New component live example

11 oct 7 to 8

  • React app revison with nested components
  • Passing data between components
  • ES6 concepts of arrow function, destructiong, spread operator, ternary operators
  • New task assigned

13 oct 7 to 8

  • React events
  • React listing with .map
  • React conditional statements
  • React useState hook
  • Task assigned

14 oct 6 to 7

  • External data file for react js
  • Virtual dom live example
  • useState as strings
  • useState as object
  • Multi useStates

15 oct 7 to 8

  • React useState in depth example
  • Mult useState updation with object mapping
  • React router concept
  • React routing example
  • React nested routing
  • React public and restricted routing example

21 oct 7 to 8

  • React lifting state up concept
  • React passing data from child component to parent component
  • React passing Object and Array data to parent Component
  • React Component Key

3 nov 7 to 8

  • React useState revison
  • React useEffect hook with examples and fetch api

4 nov 7 to 8

  • Nested components revison
  • useContext hook with examples
  • Task assigned

9 nov 7 to 8

  • React Memo
  • useMemo react hook
  • Live examples and usage application

11 nov 7 to 8

  • useMemo revison with example
  • difference between useMemo and useCallback
  • useCallback live example and its use
  • Custom Hooks in React
  • useFetch custom hook example with using useEffect, useState and JS fetch api.

14 nov 7 to 8

  • Check 14-11-22.zip
  • Revison of all hooks
  • useState
  • useEffect
  • useCallback
  • App re-render and functional component life cycle
  • Async and await with fetch api
  • Server response status
  • Try and catch, throw error with fetch api
  • Blog display from json api

16 nov 7 to 8

  • Check 14-11-22.zip
  • useRef
  • Need of useRef
  • useRef vs useState
  • useRef live examples
  • Install packages using command and as dependency in package.json
  • Bootstrap and react-bootstrap packages with examples

21 nov 7 to 8

  • useReducer live example
  • React Bootstrap package installation
  • React Fontawesome package installation

23 nov 5 to 6

  • React axios package with live examples
  • Get
  • Post
  • Put
  • Error handling
  • Delete
  • Async and await

28 nov 5 to 6

  • React fragments
  • React CSS module
  • React dynamic routing with axios
  • useParams
  • useNavigate

30 nov 5 to 6

  • Redux concept
  • Redux vs useContext
  • Similarity of redux with useReducer
  • Redux example
  • Redux with useState as dynamic variable input

2 dec 5 to 6

  • React portals with modal example
  • React side menu with portals live example

5 dec

  • deploy and lazy loading
  • ecommerce-app.zip for practice

useRef example

https://codesandbox.io/s/distracted-sun-md98fj?file=/src/App.js

useRef vs useState

https://codesandbox.io/s/sad-williamson-bfky1x?file=/src/App.js

https://codesandbox.io/s/compassionate-rui-7nvkmc?file=/src/App.js

Topics:

  • Axios

    -- axios-with-react.js.zip

  • dynamic routing

    -- dynamic-routing-with-axios.zip

    //The useParams hook returns an object of key/value pairs of the dynamic params from the current URL that were matched by the //The useNavigate hook returns a function that lets you navigate programmatically

  • Fragments and - CSS Modules

    fragment-and-modules.zip

  • Portals

    portals.zip

    portals-with-menu.zip

  • Redux

    redux.zip

    redux-diagram.png

    redux-architecture.svg

  • Deploy and lazy loading

    dynamic-routing-with-axios-lazy-loading.zip

Practice Task: Ecommerce App

  • ecommerce-app.zip