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:
- useReducer
- refer useReducer-diagram.svg https://codesandbox.io/s/dreamy-robinson-n4qfhi?file=/src/App.js
-
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