Skip to content

Instantly share code, notes, and snippets.

@btbytes

btbytes/reactstudy.md

Last active August 14, 2024 14:02
Show Gist options
  • Save btbytes/4b31a9b92b2684da7b2b1b17a12a5288 to your computer and use it in GitHub Desktop.
Save btbytes/4b31a9b92b2684da7b2b1b17a12a5288 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. btbytes revised this gist Aug 13, 2024. 1 changed file with 19 additions and 9 deletions.
    28 changes: 19 additions & 9 deletions reactstudy.md
    View file
    Original file line number Diff line number Diff line change
    @@ -1,9 +1,11 @@
    # 20-Hour React Study Plan for those who hate it
    # Unwitting React

    20-Hour React Study Plan for those who hate it

    ## 1. React Fundamentals (3 hours)
    - Components and JSX
    - Props and state
    - Lifecycle methods
    - Lifecycle methods (not required if you use functional components - hook)
    - Hooks (useState, useEffect)

    ## 2. Advanced React Concepts (4 hours)
    @@ -24,21 +26,29 @@
    - Nested routes

    ## 5. Performance Optimization (2 hours)

    - React.memo
    - useMemo and useCallback
    - useMemo and useCallback (not after 19)
    - Code splitting and lazy loading
    - Profiling and debugging

    ## 6. Testing (2 hours)
    - Jest and React Testing Library
    - Unit and integration tests
    - Mocking
    ## 6. Data Loading and Caching Library (2 hours)

    - [TanStack](https://tanstack.com)
    - GraphQL
    - [SWR](https://swr.vercel.app) (`stale-while-revalidate`)

    ## 7. Server-Side Rendering (2 hours)
    - Next.js basics
    - SSR vs. SSG
    - React Router

    ## 8. Advanced Patterns (2 hours)
    - Compound components
    - Render functions
    - State machines with XState


    ## References

    - [Blogged Answers: A (Mostly) Complete Guide to React Rendering Behavior · Mark's Dev Blog](https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/)
    - [Understanding Your UI as a Tree – React](https://react.dev/learn/understanding-your-ui-as-a-tree)
    - [You Might Not Need an Effect – React](https://react.dev/learn/you-might-not-need-an-effect)
  2. btbytes created this gist Aug 12, 2024.
    44 changes: 44 additions & 0 deletions reactstudy.md
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,44 @@
    # 20-Hour React Study Plan for those who hate it

    ## 1. React Fundamentals (3 hours)
    - Components and JSX
    - Props and state
    - Lifecycle methods
    - Hooks (useState, useEffect)

    ## 2. Advanced React Concepts (4 hours)
    - Context API
    - Higher-Order Components (HOCs)
    - Render props
    - Custom hooks
    - Error boundaries

    ## 3. State Management (3 hours)
    - Redux basics
    - Redux Toolkit
    - Recoil or Jotai (alternative state management)

    ## 4. Routing (2 hours)
    - React Router
    - Navigation and route parameters
    - Nested routes

    ## 5. Performance Optimization (2 hours)
    - React.memo
    - useMemo and useCallback
    - Code splitting and lazy loading
    - Profiling and debugging

    ## 6. Testing (2 hours)
    - Jest and React Testing Library
    - Unit and integration tests
    - Mocking

    ## 7. Server-Side Rendering (2 hours)
    - Next.js basics
    - SSR vs. SSG

    ## 8. Advanced Patterns (2 hours)
    - Compound components
    - Render functions
    - State machines with XState