React.js

What?

by Kent C. Dodds

Some Basic Concepts

Create React App (CRA)
JSX (JavaScript Syntax Extension)
React Components - CamelCase, reusable UI
- Functional Components - stateless (const CompName = () => { return (<> </>)})
- Class based components - stateful, state render
React Props vs React State & setState - built-in React object, async, 异步
- What is the difference between props and state?
Conditional Rendering - logical, ternary, switch, IIFE
Component Life Cycles - 4 stages (lifecycle methods)
React Keys & React Map List
Composition vs Inheritance
- Composition (What they do)
  - 像 tag 组合
  - More flexible (predict future usage)
  - Reusable
  - Use of Closure
  - Don’t need to duplicate logic
- Inheritance (What they are)
  - 像分类归类

Some Advanced Topics

React Hooks - use CamelCase
- React Hooks - use CamelCase
- React Custom Hooks - reusable
React Context - global, pass props
- React Context - global, pass props
React Refs (useRef() - no re-render, store previous value, persist ref.current)
- What are refs in React? When should they be used? - createRef, access DOM, access element, return refs
Render Props
Higher-Order Component 高阶组件 - HOC, argument component, return component
Portals
Error Boundaries
React Fiber Architecture

What React Ecosystem (Tools) ?

React Routers
- Tanstack Router (React Location)
- React Router v6
- Reach Router
SSR (Server Side Rendering) 服务端渲染 - html on request
- Next.js - vercel, ssr
- Remix
- After.js
- Rogue
SSG (Static Site Generation) 静态生成 - seo
- Next.js - vercel, ssr
- Gatsby
React API calls
- ReST API (ReSTful APIs microservices)
  - fetch() (network requests) - async
  - SuperAgent
  - Axios
  - superagent
- GraphQL
  - Apollo - GraphQL
  - Relay Modern
  - urql
- use-http
- Other data Fetching (Official Comparison 🔗 (opens in a new tab))
  - React Query (TanStack Query) - async state manager, data fetch, cache, refetch, mutation
  - swr / Vercel - data fetch
  - Apollo Client 🔗 (opens in a new tab)
  - RTK-Query - data fetch 🔗 (opens in a new tab)
React Testing
- Rendering component trees
  - Unit Testing
    - Jest - unit, test runner
    - Vitest - test runner
    - Mocha - test runner, test framework
    - Chai - assertion library
    - React Testing Library (RTL) - testing library
    - Enzyme - testing library
    - Sinon - testing plugin
    - AVA
    - Tape
  - Integration Testing
    - Karma - test runner
  - Component Tools
    - Storybook
    - Ladle - uber
- Running a complete app
  - E2E (End-to-end) 端到端测试 Testing/Acceptance/functional testing
    - Playwright - e2e
    - Selenium , Webdriver
    - Cypress - e2e, test runner, framework
    - Puppeteer - library
    - Cucumber - Gherkin, BDD
    - Nightwatch.js
React State Management
1. Component State
  - useState() - sync
  - useReducer() - multiple useStates, complex state
  - React Custom Hooks - reusable
2. Application State (Client State)
  1. Local State
    - Component State/Context API
  2. Global State (multiple components)
    - Context / State (use State & useState FIRST)
      - Why didn't useState work? 🔗 (opens in a new tab)
        
        I need a global ⇒ Jotai - atom, immutable state, auto render, mid-large app
        
        specify which atom gets re-render
        
        I want to mutate ⇒ Valtio - mutable state, auto render, proxy, small app
        
        I need a store/machine (actions, events etc) ⇒ Zustand - immutable state, manual render, flux, large app, context, outside React
      - Data-centric - external store (react components are used to represent those data)
        
        Zustand - immutable state, manual render, flux, large app, context, outside React
        
        Where state resides
        
        module (outside react)🔗 (opens in a new tab)
        
        How to control re-render
        
        selector (ref equality check)🔗 (opens in a new tab)
        
        Zustand uses flux pattern and is suitable for mostly large scale apps. It is an alternative for Redux. 🔗 (opens in a new tab)
        
        A big advantage of zustand is the ability to synchronously update state from outside of components. 🔗 (opens in a new tab)
        
        I prefer Zustand. Tiny, straightforward, scalable. 🔗 (opens in a new tab)
        
        I use Zustand and Jotai. I would also use both in the same application since they are based on different state management models. I don't use Valtio because I try to avoid proxy-based reactivity in React. 🔗 (opens in a new tab)
        
        top-down 🔗 (opens in a new tab)
        
        top-down you would model your state as a larger object with some smaller nested objects, then the selector would be responsible for subscribing only to the smaller nested pieces that the component needs. 🔗 (opens in a new tab)
        
        better for modeling the app domain, 🔗 (opens in a new tab)
        
        zustand for centralised javascript stores. if you have a state schema, or your state is json, this will make sense. works well in teams. 🔗 (opens in a new tab)
        
        Valtio's premise is to have global mutable objects. When used in components, the component is automatically re-rendered when the value changes. It works great, but it may cause some hard-to-track bugs when used without discipline in large projects. Zustand is very strict, and this is great for large projects, particularly enterprise ones. 🔗 (opens in a new tab)
        
        Valtio - mutable state, auto render, proxy, small app
        
        (react-tracked + Zustand - immutable state, manual render, flux, large app, context, outside React)
        
        How to control re-render
        
        Usage tracking (with proxies)
        
        Where state resides
        
        Module (outside react)
        
        Valtio uses proxy pattern, is mutable, and mostly suitable for small scale apps. It is an alternative for Mobx. 🔗 (opens in a new tab)
        
        Valtio mostly optimizes for state writing by allowing you to directly mutate the global state. To me it's similar to Zustand, except that state updates are made simpler. 🔗 (opens in a new tab)
        
        Valtio good for a global state that's detached from React component tree. 🔗 (opens in a new tab)
        
        it's best in large data-centric applications 🔗 (opens in a new tab)
        
        valtio is fantastic for smaller projects that have no problem with mutation and updating state from multiple place. works best in everything you do personally. 🔗 (opens in a new tab)
      - Component-centric (React Centric) - internal store (Design components first)
        
        Jotai - atom, immutable state, auto render, mid-large app
        
        How to control re-render
        
        Dependency tracking without proxies
        
        Where state resides
        
        Component (inside react)
        
        middle-large scale apps. It is an alternative for Recoil or useContext/useState.🔗 (opens in a new tab)
        
        for smaller application / personal projects
        
        bottom-up 🔗 (opens in a new tab)
        
        it's trivial to subscribe to only the state you use, but it's more work to combine that state into a cohesive whole. The selectors are often used to combine smaller atoms into an object with the state that's meant to go together. 🔗 (opens in a new tab)
        
        better for performance-driven apps that have many moving parts that require a large amount of read-write operations to small pieces of state. 🔗 (opens in a new tab)
        
        I think the atomic pattern can accomplish everything zustand can, but more, and with less boilerplate. 🔗 (opens in a new tab)
        
        jotai for atomic, dispersed state bits, similar to useState but render optimised and with a few extras (state derivatives). works well in teams. 🔗 (opens in a new tab)
3. Server State (Server Cache)
  - React Query (TanStack Query) - async state manager, data fetch, cache, refetch, mutation
  - Redux - RTK-Query, flux
    - top-down [🔗](https://www.reddit.com/r/reactjs/comments/wec4oo/zustand_vs_jotai_vs_valtio_which_state_management/#:~:text=what%20I've%20experienced%2C-,top-down,-(Zustand%2C%20Redux%2C%20Mobx) (opens in a new tab)
  - swr / Vercel - data fetch
4. URL State
  1. Tanstack Router (React Location)
- Other state managers
  - MobX - proxy
    - top-down [🔗](https://www.reddit.com/r/reactjs/comments/wec4oo/zustand_vs_jotai_vs_valtio_which_state_management/#:~:text=what%20I've%20experienced%2C-,top-down,-(Zustand%2C%20Redux%2C%20Mobx) (opens in a new tab)
  - Recoil - state, meta, atom
    - Bottom-up [🔗](https://www.reddit.com/r/reactjs/comments/wec4oo/zustand_vs_jotai_vs_valtio_which_state_management/#:~:text=the%20state%20structure.-,bottom-up,-(Jotai%2C%20Recoil%2C%20hookState) (opens in a new tab)
    - dependency tracking without proxies
    - state resides in component (inside react)
  - Async actions (Side Effects)
  - Redux Thunk
  - Redux Better Promise
  - Redux Saga
  - Redux Observable
  - Helpers
  - Rematch
  - Reselect
  - Data persistence
  - Redux Persist
  - Redux Phoenix
  - Redux Form
  - react-tracked
  - XState
React Form Component
- React Hook Form
- Formik - form
- Final Form
- Downshift - autocomplete
- Validation
  - Yup or Zod - run-time , hookform/resolvers
- Input: React IMask (opens in a new tab), React-number-format (opens in a new tab), React Credit Cards (opens in a new tab)
- React Calendar Component
  - React-calendar (opens in a new tab)
React Styling
- Styled
  - Chakra UI
  - MUI (Material UI)
  - Ant Design (AntD)
- Unstyled (Headless UI)
  - Radix UI - primitives
  - Headless UI #Tailwind
  - React Aria
  - Table
    - TanStack Table
- CSS Frameworks
  - React-Bootstrap
  - Bootstrap (Bootstrap5)
  - Tailwind CSS
  - Bulma - don’t come with js framework components by default
React Mobile
- React Native
- Cordova/PhoneGap

What are the Rules?

Never Mutate The State with = sign - react rule

Why?

Why React?

How?

How to optimize?

Optimize Re-renders
- How can you optimize performance for a function component that always renders the same way?
1. Lazy Loading: Lazy loading is a technique that allows you to load certain components or modules only when they are needed. This can help to reduce the amount of initial code that needs to be loaded and can also help to reduce the overall size of your JavaScript bundle.
2. Use Memoization: Memoization is a technique that allows you to cache the results of expensive function calls. This can help to reduce the amount of time that your application spends recalculating values and can improve overall performance.
Optimize System
- Restructure code
- SRP (Single-responsibility principle) 单一职责原则 - modules

Use Production Builds: When deploying your React application, make sure to use a production build. This will reduce the size of the JavaScript bundle and enable optimizations such as minification, which can significantly improve performance.
Code Splitting - modular, modularizing
Use Virtual DOM: React uses a virtual DOM to manage updates to the UI. By using a virtual DOM, React can update the UI more efficiently and can help to improve performance.
Use React Profiler: React Profiler is a built-in tool that can help you to identify performance bottlenecks in your application. By using React Profiler, you can identify which components are causing performance issues and take steps to optimize them.
Use Performance Budgets: Setting performance budgets can help to ensure that your application remains fast and responsive. By setting budgets for things like load time and rendering performance, you can ensure that your application remains performant even as it grows in complexity.
Use Server-Side Rendering: Server-side rendering can help to improve the initial load time of your application and improve overall performance. By rendering your application on the server and sending the HTML to the client, you can reduce the amount of JavaScript that needs to be loaded and improve the time-to-first-byte.

Prisma WSLg (Windows Subsystem for Linux GUI)