ReactJS - Cơ bản

Trần Đức Lĩnh

I) Phần Tổng Quát

Khái niệm ReactJS:

  • Được Facebook xây dựng
  • Là một thư viện JavaScript
  • Xây dựng một giao diện web.application
  • Bản chất của ReactJS là Components
  • Là một SPA (Single Page Application)

Cú pháp Extensions ReactJS Snippets.
  • imr : Import React
  • imrc : Import React / Component
  • imrs : Import React / useState
  • imrse : Import React / useState useEffect
  • impt : Import PropTypes
  • impc : Import React / PureComponent
  • cc : Class Component
  • ccc : Class Component With Constructor
  • cpc : Class Pure Component
  • sfc : Stateless Function Component
  • cdm : componentDidMount
  • uef : useEffect Hook
  • cwm : componentWillMount
  • cwrp : componentWillReceiveProps
  • gds : getDerivedStateFromProps
  • scu : shouldComponentUpdate
  • cwu : componentWillUpdate
  • cdu : componentDidUpdate
  • cwu : componentWillUpdate
  • cdc : componentDidCatch
  • gsbu : getSnapshotBeforeUpdate
  • ss : setState
  • ssf : Functional setState
  • usf : Declare a new state variable using State Hook
  • ren : render
  • rprop : Render Prop
  • hoc : Higher Order Component

I.1) Những thứ cần nắm vững.

  • JavaScript cơ bản.
  • ES6.
  • let & const.
  • Arrow function.
  • Import & export modules.

    • export:
      * Phải sử dụng đúng tên của file đã import hoặc sử dụng (as) để đổi tên.
      * Sử dụng * as <...> để sử dụng đúng tên đã export.
    • default export:
      * Sau khi import có thể tự đặt tên.
  • Class.
  • Spread & Rest.
  • Desctructuring.
  • Primitive types & Reference types.
  • Array Functions.

I.2) Quy trình làm việc.

  • Sử dụng Dependency Management

    • npm.
    • yarn.
  • Sử dụng Bundler

    • Webpack.
  • Sử dụng Compiler

    • Bable.
  • Sử dụng Development Server

    • Cần có một server phù hợp để khởi chạy dự án ReactJS.

I.3) Cấu trúc file trong ReactJS.

image-title-here

  • /assets:

    • Chứa các file bao gồm fonts, icons, .svg, .jpg
    • Có thể thêm folder (fonts, icons, images...) nếu khó quản lý chúng
  • /components:

    • Chứa tất cả các components không có kết nối đến Redux
    • /<NameComponent>:
      * index.js <<< <name
      component>.js <<< <name_component>.scss
  • /hook:

    • Nơi chứa các Customs Hook
  • /containers:

    • Chứa các file liên kết đến Redux
    • Chỉ tạo một file duy nhất cho mỗi components
  • /reducers:

    • Redux ducks, mô hình gọp thành một file và chia theo module
    • Chứa các file ví dụ như action, constant,...
  • /service:

    • Nơi chứa functions để gọi RESTful API, kết nối tới backend

II) Cơ bản.


Setup.

(Setup).

Trang chủ ReactJS có hướng dẫn cài đặt cho thư viện này.

npx create-react-app my-app
cd my-app
npm start

Cần xử lý đường dẫn tĩnh.

%PUBLIC_URL%/ được xuất hiện trong thư mục public/index.html

Có nhiệm vụ thay thế các URL của thư mục public trong quá trình xây dựng ứng dụng.

Thông thường các file tĩnh sẽ được gán vào trước đường dẫn "</my-folder/file.txt>". Nhiệm vụ chính là xác định chính xác những đường dẫn đó từ bên phía máy khách khi truy cập bằng IP hoặc domain-name không xác định trước.

Những đường dẫn từ CDN không cần phải gán giá trị này vào.

Ví dụ:

<link rel="manifest" href="%PUBLIC_URL%/css.style.css" />

Chạy câu lệnh như trong hướng dẫn từ ReactJS.

npm run build

II.1) Khái niệm.

  • Tìm hiểu JSX

    • Là một loại cú pháp mở rộng giành cho ReactJS.
  • Components

    • Chúng hoạt động giống như các hàm trả về các thành phần HTML.
    • Các Component là các thành phần độc lập và có thể tái sử dụng lại.
    • Các Component thực hiện công việc giống như các functions trong JS nhưng chúng độc lập, nhiệm vụ trả về HTML thông qua hàm render.
  • Cách tạo Components

    • Cần import 'react'.
    • Có thể tạo component thông qua: Class Components hoặc Functional Components.
  • Props

    • Viết tắt của Properties, là một đối tượng, có lưu trữ các giá trị của ác attribute của một thẻ.
  • State

    • Lưu trữ dữ liệu cho các Component trong ReactJS, dùng để cập nhật component khi người dùng thực hiện một số hành động như click, nhập văn bản, nhấn phím...

II.2) Xử lý sự kiện.

  • onClick(): Lắng nghe sự kiện nhấn chuột.
  • onChange(): Lắng nghe sự kiện nhập dữ liệu.
  • (nhiều hơn thế nữa...)

II.3) Chi tiết.

  • Class Components

    • setState:

      • Tóm tắt

        • Always make use setState and never modify the state directly.
        • Code has to be executed after the state has been update? Place that code in the call back function which is the sacond argument to the setState method.
        • When you have to update state based on the previous state value, pass in a function as an argument instead of the regular object.
      • Cú pháp:

        this.state = { count: 0 }
        handleClick = () => {
            this.setState({
                count: this.state.count + 1
            })
        }
    • Binding Event Handlers

      • Khi không thể gọi được Fucontion (Hoặc trả Undefined).
      • Sử dụng hàm .bind() để gọi functions.
      • Hoặc sử dụng Arrow Functions.
  • Functional Components (Phần Hooks)

II.4) Rendering.

  • Conditional Rendering

    • Sử dụng điều kiện để render nội dung.
    • Cú pháp:

      <conditional> ? true : false
  • List Rendering

    • Sử dụng vòng lặp để render các nội dung có trong mảng hoặc object.
    • Sử dụng hàm .map() để tạo render ra danh sách.
    • Cú pháp:

      const <name> = <list>.map(<value> => (
          <tag> {<value.key>} </tag>
      ))
  • List and Key

    • Trong React, List Rendering biến đổi mảng thành danh sách giống hệt nhau, từ đó dễ nảy sinh lỗi và khó quản lý.
    • Keys giúp ReactJS xác định mục nào đã thay đổi (được thêm hoặc xoá).
    • Các Key này nên được cấp cho các phần tử bên trong mảng thường là các giá trị ít bị thay đổi (ID)
  • Index as Key Anti-pattern

    • Điều kiện để đặt Key

      • Thông thường nhất là khi không có ID, có thể dử dụng index có sẵn để đặt ID thứ nhất tăng 1 đơn vị so với ID tiếp theo sau đó.
      • Với điều kiện danh sách phải ở dưới dạng tĩnh và không thay đổi.
      • Khi render List sẽ không bao giờ lọc (sắp xếp, xoá, tìm kiếm...).
    • (Nếu có 1 trong 3 trường hợp trên, nên lựa chọn một thư viện để tạo ID cho dự án).

II.5) Xử lý biểu mẫu.

  • Khái niệm

    • Thông thường thẻ <input> sẽ gửi biểu mẫu dưới dạng văn bản, xử lý và cập nhật biểu mẫu được nhập liệu vào.
  • Lấy giá trị

    • Trong ReactJS, cần hàm onChange() để lấy giá trị và đưa vào 1 hàm xử lý (event.target.value) và lưu vào trong state.
    • value={this.<nameFunction>} được đưa vào bên trong thẻ <input>, để cập nhật lại giá trị có trên state.

II.6) Component Lifecycle.

  • Khái niệm

    • Khi vận hành một Component, vòng đời của chúng cũng được hiểu bằng việc sinh ra, phát triển và mất đi.
    • Tổng quát: image-title-here
  • Phương thức

    • Có 4 giai đoạn của một Component

      • Initialization
      • Mounting
      • Updating
      • Unmounting
  • Giai đoạn 1 (Initialization) Giai đoạn này thông thường sẽ khởi tạo props và state.
  • Giai đoạn 2 (Mounting) Sau khi thực hiện xong quá trình khởi tạo, Giai đoạn này sẽ thực hiện nhiệm vụ chuyển Virtual DOM (DOM ảo) trong ReactJs thành DOM và hiển thị lên trên trình duyệt, Component sẽ render lần đầu tiên.
  • Giai đoạn 3 (Updating) Trong giai đoạn này, dữ liệu của các phần (props & state) sẽ được cập nhật để đáp ứng với các sự kiện của người dùng. Điều này sẽ dẫn đến việc phải re-render lại component.
  • Giai đoạn 4 (Unmounting) Bước cuối cùng của một Component, sau khi tất cả các tác vụ hoàn thành và tiến hành unmount DOM, kết thúc một vòng đời của Component.

II.7) React Fragments.

  • Khái niệm Thông thường mỗi Component ở phần return() luôn luôn có một thẻ div bao bọc, nếu xoá thẻ này đi ReactJs sẽ báo lỗi ngay lập tức. Một vài trường hợp các thẻ <div> vô tình làm đảo lộn quy ước trong CSS, thẻ <table> sẽ không chấp nhận bên trong phần tử có chứa bất cứ thẻ<div> nào.
  • Cú pháp

    • Cách 1 Khi viết đầy đủ dưới dạng <React.Fragment>, có thể thêm key và triển khai các lists một các đầy đủ
    • Cách 2 Phú pháp <> ngắn gọn, nhưng không thể thêm key vào bên trong.

II.8) Pure Component.

  • Khái niệm

    • Pure Component giúp hạn chế số lần render không cần thiết xảy ra. Tuy nhiên có một số vấn đề xảy ra.
    • Pure Component chỉ kiểm tra (shallow equlity) về props và state trước khi đưa ra quyết định có render lại hay không. Từ đó dẫn đến con của chúng có render lại hay không.
    • Từ đó Component sẽ re-render mặc định cho tới khi nào shouldComponentUpdate được gọi.
    • Chỉ giành cho Functional Components thay vì Class Components.
  • Side Note: Shallow equality

    • Khái niệm

      • Kiểm tra các giá trị của ID object giống nhau (bao gồm địa chỉ ô nhớ, nơi JS lưu thông tin cho các đối tượng cụ thể).
      • Nhưng không phải nội dung của chúng đều giống nhau.
    • Ví dụ

      • Giống nhau

        const value = 'ReactJs';

      const a1 = value; const b2 = value;

      console.log( a1 === b2 ); // true

      * Khác nhau
      ```js
      const value = 'ReactJs';
      
      const a_1 = [value];
      const b_2 = [value];
      
      consoloe.log( a_1 === b_2 ) // false
    • Sử dụng kỹ thuật "deep quality check"

      • Khái niệm

        • Có thể kiểm tra bên trong mỗi chỉ mục và xem liệu tất cả các giá trị có giống nhau hay không
        • Duyệt mảng như thế này sẽ bị chậm đi nhanh chóng
    • Ví dụ

      const value = 'ReactJs';
      
      const a_1 = [value];
      const b_2 = [value];
      
      let equal = true;
      
      a_1.forEach((item, index) => {
      equal = equal && a_1[index] === b_2[index];
      });
      
      console.log(equal); // true
  • Khi làm việc với Pure Component

    • Các child Component cũng cần render lại.
    • Khi parent của chúng không re-render dẫn đến chúng cũng không được cập nhật lại.
    • Nên sử dụng Pure Component cho các parent Component khi biết rõ child nào phải re-render khi parent không re-render.

II.9) React Memo.

  • Khái niệm

    • Khi function Component render cùng một kết quả được cung cấp cùng một props. Tốt nhất nên gói nó trong React.memo để giúp tăng hiệu suất trong một số trường hợp ghi nhớ kết quả.
    • React sẽ bỏ qua việc render Component và sử dụng lại kết quả được render cuối cùng.
    • Chỉ sử dụng trong Functional Components.
  • React.memo là một phương pháp được sử dụng như là một tiện ích cho việc tối ưu hoá hiệu suất ứng dụng.
  • Đừng nên dùng React.memo để ngăn chặn việc render Component vì có thể dẫn đến lỗi bất cứ lúc nào.

II.10) Refs.

  • Khái niệm

    • Refs cung cấp cách truy cập đến các DOM nodes hoặc React elements được tạo ra trong method render.
    • Hạn chế sử dụng Refs trong một số trường hợp không thể sử dụng props, state. Bởi vì khi can thiệp trực tiếp vào DOM thông qua Refs mà không render, khi DOM bị thay đổi sẽ ảnh hưởng ít nhiều đến quá trình render.
    • Trường hợp thông thường: Props là cách các parent Components tương tác với các child Component. Để update child Component cần phải re-render nó với các props mới.
    • Trường hợp cần Refs thay thế: Một số trường hợp cần bắt buộc phải updated các child Component bên ngoài data flow của React.
  • Cú pháp:

    • Sử dụng React.createRef() để tạo Refs.
  • Trường hợp sử dụng thực tế

    • Control focus, get text DOM element, ... Dùng trong các trường hợp data không cần đưa vào stae của Component.
  • Cách sử dụng Refs

    • Dùng string.
    • Dùng callback ref.
    • Dùng API createRef.
    • Dùng hook useRef.

II.11) Forwarding Refs.

  • Khái niệm

    • Tự động chuyển một Refs từ parent Component tới child Component.
    • Cho phép parent Component tham chiếu tới các element của child Component để đọc và chỉnh sửa nó.
  • Cú pháp

    • Sử dụng React.forwardRef((props, ref) => { } ) để bọc Component.
    • Sử dụng React.forwardRef() trong class Component thông qua HOC (higher order component).

II.12) Portal.

  • Khái niệm

    • Cho phép render một phần HTML độc lập với component tree.
    • Có thể tạo ra một thẻ div cùng cấp với id='root' đã có trước đó.
  • Cú pháp

    • Khai báo ReactDOM từ 'react-dom'

      return ReactDOM.createPortal (
      <div id='name_id'>
      </div>,
      document.querySelector('body'),)
  • Nhược điểm

    • Việt kiểm soát những event phứt tạp hơn.
    • Nên dùng Portal khi thực sự cần thiết.

II.13) Higher-Order Components (HOC).

  • Khái niệm

    • Là một function nhận vào một coponent và trả về một component.
    • Là một phương pháp phát triển component.
  • Nhược điểm

    • Ảnh hưởng đến hiệu năng.
    • Không minh bạch trong việc extend.
    • Vô tình dẫm đạp qua lại nếu một component được bọc trong nhiều HOC cùng một lúc.
    • Khó debug khi đang sử dụng Arro function.

II.14) Context.

  • Khái niệm

    • Cung cấp phương pháp truyền data xuyên suốt component tree mà không cần phải truyền props một cách thủ công qua từng cấp bậc.

II.15) HTTP and React.

  • GET
  • POST

II.16) API ReactJS.

  • Tổ chức API
  • Gắn API Module

(Chỉnh sửa nếu có...)