/a-walk-in-react

a-walk-in-react

Table Of Contents

DAY 01

  • Introduction of React
    • What is ReactJS?
    • Main features of React
    • What does it mean to be declarative?
  • Setup
    • Requirements
    • Create-react-app
    • Vite
    • Recommended extensions for VSCode
  • Create-react-app(CRA) vs Vite

DAY 02

  • Components
    • My first component
    • Reusable components
    • JSX
  • Props
    • What are props
    • Props default value
    • Props as children
  • Class Based Components (legacy)
    • Class based vs Functional components

DAY 03

  • Hooks
    • What is a Hook
    • Hook Rule
  • State
    • useState Hook
    • What does the useState call do?
    • What do we pass to useState as an argument?
    • When to use it?
    • Import useState
    • Initialize useState
    • Read State
    • Update State
    • What Can State Hold
    • Updating Objects and Arrays in State
  • Effects
    • useEffect Hook
    • What are side effects
    • When to use it
    • Dependencies
    • The useEffect Cleanup function

DAY 4

  • Rendering Techniques
    • Conditional rendering
    • Rendering lists
      • Rendering data from arrays
      • Filtering data
      • Key prop
  • Styling React components
    • Inline style
    • CSS stylesheet
    • CSS modules
    • Dynamic styles
  • Events
    • Listening to event handlers

DAY 5

  • Forms in React
  • React Context API
    • createContext
    • useContext Hook
    • Context provider
  • Global State Management

DAY 6

  • Other React built-in hooks
    • useRef
    • useReducer
    • Performance Hooks
      • useMemo
      • useCallback
  • React Custom Hooks
    • What are they
    • How to create them
    • How to use them

DAY 7

  • React Router Library
    • Installing React Router
    • Defining routes
    • Navigate between routes
    • Error pages
    • Dynamic routes
    • Protected routes

DAY 8

  • Debugging React apps
    • React DevTools
  • Testing React apps
    • Different kinds of tests
    • Tools
    • Writing our first test
    • Testing Asynchronous Code
    • Working with mocks
  • Deploying React apps
    • Steps
      1. Test and optimize your code.
        • Lazy loading
      2. Build the Application
      3. Deploy