Quartz 🪬

ReactJS

2 min read

React là một thư viện JavaScript dùng để tạo ra các giao diện có thể tái sử dụng.

  • React được tạo bởi Facebook.
  • React sử dụng DOM ảo (Virtual DOM) thay cho DOM gốc. Vì thế, không cần phải tương tác với DOM khi xây dựng một ứng dụng React.
  • React được sử dụng để xây dựng các ứng dụng single page (chỉ có một trang HTML duy nhất).

Setup

Để cài đặt thư viện React, có các cách tiếp cận sau:

  • Sử dụng Create React App: đơn giản, có thể tùy biến nhưng khá hạn chế.
  • Sử dụng Vite: đơn giản, tương tự Creat React App nhưng nhanh hơn (khuyến khích).
  • Sử dụng CDN: liên kết file index.html với package react và package react-dom. Cách làm này đơn giản nhưng không thể tùy biến.
  • Sử dụng Webpack và Babel: phức tạp, có thể tùy biến và không bị hạn chế. Xem thêm Create a React Application Manually.

Describing the UI

  1. JSX Element
    1. Attributes of a JSX Element
    2. Passing Data to a JSX Element
  2. React Component
    1. Functional Component
    2. Class Component
      1. React Component Life-cycle
      2. React Life-cycle Methods
    3. Higher Order Component
    4. Fragment
  3. Props
    1. Context in React
    2. Render Prop
  4. Conditional Rendering
  5. Keeping Components Pure

Adding Interactivity

  1. React Event Handlers
  2. State
  3. useState
    1. Immutability
    2. State as a Snapshot
    3. Functional Update

Managing State

  1. Choosing the State Structure
  2. Sharing State Between Components
  3. Scaling Up with Reducer and Context

Escape Hatches

  1. Referencing Values with Refs
  2. Manipulating the DOM with Refs
  3. Effect in React
  4. useEffect
    1. Wrapping the DOM Update in Effect
    2. Each Effect Represents a Separate Synchronization Process
    3. Problems with Dependency Array of useEffect
  5. You Might Not Need an Effect

Hook

  1. React Hook
  2. Custom Hook

Advanced Topics

  1. React Under the Hood

Best Practices and Common Mistakes

Ecosystem

Resources