FSOn-86

Module-01

Less-01

-   CRA
-   hierarchy
-   React.createElement(type,props,children)
-   ReactDom.createRoot
-   JSX
-   work with collection
-   key
-   use function
-   edit function to <Component/>
-   props
-   hierarchy components
-   fragment
-   conditional rendering

Less-02

-   styled
-   inLine style
-   vanilla css
-   module css
    -   composition class
    -   Classnames || clsx
-   CSS in JS
    -   styled-components
    -   props

Module 2

Less 1

• Class Component

• Events

  • Event delegation
  • inLine clb Function
  • clb function with context
    • public values
    • constructor && prototype
    • SyntheticEvent Object vs Async

• State

  • update state with setState(update)
  • prevState
  • upper state

Less 2

• onChange vs control form
• onSubmit
• class Form
• form reset
• add todo

Module 3

Less 1

• Mounting

• Updating

• Unmounting

• componentDidMount

• componentDidUpdate(prevProps, prevState)

• componentWillUnmount

• close modal by ESC

• set data to localStorage

• shouldComponentUpdate vs PureComponent

Less 2

• http how to use
• architecture
  • search -> app -> content
  • validation search with react-hot-toast
  • componentDidUpdate in content
  • fetch in content
  • loading in content
  • destructuring state
• http errors
• pattern stateMachine

Module 4

Less 1

• useState

• useState nothing save state

• useState one State = one useState

• useState convert class to hooks

• useEffect

• useEffect first render

• useEffect every render

• useEffect clear after render

• useEffect first render

• useEffect update on any change

• edit class to huk

• if return

Less 2

• useMemo

• complexCompute

• useEffect vs useMemo

• useCallback

• Profiler

• useContext

• Provider

Module 5

Less 1

• BrowserRouter
• Routes & Route
• Link to
• Outlet & nested routes
• use index
• useParams

Less 2

• useSearchParams
• BackBtn with useLocation
• location.state
• lazy & suspense

Module 6

Less 1

• how it works

• install redux

• function createStore

• function reducer

• reducer default value

• getState

• dispatch

• switch

• redux connect to react

• install react-redux

• Provider

• useSelector

• useDispatch

• set step

• ...state

• reducer.js

• actions.js

• types.js

• initialState

• combineReducer

Less 2

• redux-devtools

• redux-toolkit

• createAction

• createReducer

  • action.toString()

• configureStore

• combineReducer not use

• selectors

• redux persist

  • combineReducer
  • serializableCheck
  • create persist for one state
  • persist back object
  • whitelist

Module 7

Less 1

• how its work (Async Redux)
• create custom middleware
• create fetchNews
• create getNewsAction
• create newsReducer
• create newsSlice
• createAsyncThunk
• add extraReducers to newsSlice
• payloadCreator(arg, thunkAPI)
• edit ContentInfo with getNewsThunk