Hiện nay, React đã trở thành một trong những thư viện phổ biến và mạnh mẽ nhất. Nhưng với những người mới bắt đầu, việc hiểu hết các khái niệm cơ bản trong React có thể trở nên khó khăn. Bài viết này, VietnamWorks inTECH sẽ giải thích tất tần tật mọi thứ cơ bản về React, giúp bạn nắm bắt được cốt lõi của thư viện này một cách nhanh chóng và dễ hiểu.

1. Components

Các thành phần (Components) là những khối nhỏ, có thể tái sử dụng của code, chúng trả về một element React để hiển thị trên trang web. Nó là một nhóm code tạo nên một phần riêng biệt của trang web như button, thanh điều hướng, thẻ (card), v.v. Giống như một hàm JavaScript nhưng thay vì trả về giá trị thông thường, nó trả về một element đã được render. Các thành phần có thể nhận các tham số được gọi là "Props". Tên thành phần được viết hoa chữ cái đầu.

Ví dụ về Thành Phần Theo Hàm (Functional Component):

 

function Heading(props) {
  return <h1>Join us, {props.name}!</h1>;
}

 

Lưu ý:

  • Thành phần theo hàm được khuyên dùng hơn thành phần dựa trên Class.

  • Thành phần theo hàm thường được gọi là thành phần có trạng thái (stateful) khi giao diện được cập nhật động do giá trị của state chứ không phải giá trị của Prop.

  • Thành phần theo hàm được gọi là thành phần không trạng thái (stateless) khi nó sử dụng giá trị của Prop để thay đổi giao diện động chứ không phải giá trị của state.

2. JSX

JSX là cú pháp JavaScript XML, cho phép chúng ta viết HTML trong React. Nó mang đến các thẻ và thuộc tính giống như XML để tạo các element React. JSX giúp việc tạo các thành phần React dễ dàng hơn bằng cách cho phép bạn viết code giống HTML trong các file .jsx. Thay vì sử dụng JavaScript phức tạp, JSX giúp code dễ đọc và “sạch” hơn. React DOM sử dụng camelCase để đặt tên thuộc tính, ví dụ như htmlFor, onClick.

 

<h1 className="head">This is H1!</h1>

 

TSX là phần mở rộng của file cho các file TypeScript chứa cú pháp JSX. Với TSX, bạn có thể viết code type-checked cùng với cú pháp JSX hiện có. TypeScript không phải là một ngôn ngữ riêng biệt, nó chỉ là một siêu tập hợp của JavaScript, bổ sung thêm tính năng đánh máy tĩnh (static typing) tùy chọn.

Nói một cách đơn giản hơn, với các file TSX, bạn có thể viết các thành phần React bằng cách sử dụng TypeScript và JSX cùng nhau.

 

interface AgeProps {
  age: number;
}

const GreetAge = (props: AgeProps) => {
  return (
    <div>
      Hello, you are {props.age} old.
    </div>
  );
};

 

Lưu ý:

  • File JSX sử dụng phần mở rộng .jsx.

  • File TSX sử dụng phần mở rộng .tsx.

  • Hệ thống kiểu của TypeScript giúp phát hiện các lỗi tiềm ẩn ngay trong giai đoạn phát triển ban đầu.

3. Các Đoạn (Fragments)

Fragments trong React cho phép bạn trả về nhiều element từ một thành phần. Nó nhóm các element lại với nhau mà không tạo thêm các node DOM thừa. Fragments giúp loại bỏ các div thừa khỏi DOM, từ đó render giao diện nhanh hơn.

Ví dụ về Fragments:

 

const App = () => {
  return  (
    <>
      <h1>Eat</h1>
      <button>Learn more</button>
      <p>Code is Fun</p>
      <button>Repeat</button>
    </>
  );
}

 

Lưu ý:

  • Fragments giúp code sạch hơn và dễ đọc hơn.

  • Fragments tiết kiệm bộ nhớ.

  • Fragments không thể có style CSS.

4. Props

"Props" là một từ khóa đặc biệt trong React, viết tắt của "properties" (thuộc tính). Nó được dùng để truyền dữ liệu giữa các thành phần. Việc truyền dữ liệu này là một chiều, từ thành phần cha sang thành phần con.

 

function Head(props) {
  return <p>{props.children}</p>;
}

 

Lưu ý: Props chỉ đọc (read-only), điều này đảm bảo các thành phần con không thay đổi giá trị nhận được từ thành phần cha.

5. State (Trạng thái)

Các thành phần cần theo dõi một số giá trị nhất định khi người dùng tương tác. Ví dụ, nút chuyển đổi chế độ sáng/tối sẽ thay đổi giá trị của nó (từ sáng sang tối và ngược lại) khi người dùng nhấp vào nút. Các thành phần cần nhớ giá trị hiện tại của theme. Trong React, kiểu bộ nhớ riêng cho từng thành phần này được gọi là state (trạng thái).

State được định nghĩa bằng cách sử dụng hook useState(), chi tiết về hook này sẽ được đề cập sau.

Ví dụ:

 

const [index, setIndex] = useState(0)

 

6. Lifecycle Methods

Phương thức vòng đời (Lifecycle Methods) là các hàm đặc biệt mà bạn có thể sử dụng trong các lớp React để thực hiện các hành động ở các giai đoạn khác nhau trong vòng đời của một thành phần. Các giai đoạn này bao gồm:

  • Mounting (Gắn kết): Khi một thành phần được tạo lần đầu tiên và được đưa vào DOM.

  • Updating (Cập nhật): Khi props hoặc state của một thành phần thay đổi, khiến thành phần phải render lại.

  • Unmounting (Gỡ bỏ): Khi một thành phần bị loại bỏ khỏi DOM.

7. Purity (Tính tinh khiết)

Purity trong lập trình hàm (functional programming) là khi một đầu vào cụ thể luôn trả về một đầu ra giống nhau. Nếu đầu vào là yếu tố duy nhất quyết định đầu ra, thì hàm đó được coi là "pure".

Trong React, một thành phần được coi là "pure" khi nó luôn trả về cùng một đầu ra cho cùng một đầu vào (tức là props).

8. Strict Mode (Chế độ nghiêm ngặt)

Strict Mode là một tính năng phát triển trong React cho phép bật các tính năng an toàn bổ sung để cải thiện chất lượng code. Nó hiển thị các cảnh báo liên quan đến các lỗi và bug tiềm ẩn trong code. Các cảnh báo này được ghi vào console của trình duyệt. Ví dụ:

 

mport { StrictMode } from 'react';

function App() {
  return (
    <>
     <StrictMode>
        <Header />
        <Sidebar />
        <Content />
        <Footer />
     </StrictMode>
    </>
  )
}

 

9. Hooks

Hooks trong React cho phép sử dụng state và các tính năng khác của React mà không cần viết các thành phần lớp. Hooks là các hàm cung cấp quyền truy cập vào quản lý state, các tác dụng phụ (side effects) và các tính năng khác của React.

Một số hook thường được sử dụng: useState, useMemo, useRef… 

Ví dụ: 

 

import React, { useState } from "react"; // Importing useState hook;

function FavoriteColor() {
  const [color, setColor] = useState("red"); // Initializing the state and setter function;

  return (
    <>
      <h1>My favorite color is {color}!</h1>
      <button
        type="button"
        onClick={() => setColor("blue")} // Updating the state;
        >Blue</button>
      <button
        type="button"
        onClick={() => setColor("red")} // Updating the state;
      >Red</button>
      <button
        type="button"
        onClick={() => setColor("yellow")} // Updating the state;
      >Yellow</button>
      </>
  );
}

 

Lưu ý:

  • Hooks chỉ có thể được gọi bên trong các thành phần hàm React.

  • Hooks chỉ có thể được gọi ở cấp cao nhất của thành phần.

  • Hooks không thể được gọi trong điều kiện.

10. Context API (Giao diện ngữ cảnh)

Context API được sử dụng để chia sẻ dữ liệu như state (trạng thái) và các hàm giữa các thành phần trong cây thành phần (component tree) mà không cần truyền props thủ công xuống từng cấp. Nó giúp tránh "prop drilling" bằng cách đơn giản hóa việc quản lý state và chia sẻ dữ liệu giữa các thành phần. Với Context API, dữ liệu được chia sẻ trực tiếp với thành phần con sẽ sử dụng nó.

Cách sử dụng Context API:

  • Tạo một context bằng phương thức createContext(). Phương thức này trả về một object context với hai thành phần: Provider và Consumer.

  • Sử dụng Provider để bao bọc cây thành phần nơi bạn muốn context có sẵn. Nó chấp nhận một prop value bắt buộc chứa dữ liệu bạn muốn chia sẻ với các thành phần khác.

  • Sử dụng hook useContext để truy cập vào dữ liệu.

Ví dụ về Context API:

Tạo context:

 

import { useState, createContext} from "react";

const UserContext = createContext();

function ParentCounter() {
  const [count, setCount] = useState(10);

  return (
    <UserContext.Provider value={count}>
      <h1>{`Current Count: ${count}!`}</h1>
      <Button />
    </UserContext.Provider>
  );
}

 

Truy cập dữ liệu trong thành phần con:

 

import { useContext } from "react";

function GrandChildConsumer() {
  const count = useContext(UserContext);

  return (
    <>
      <h1>This is GrandChildConsumer</h1>
      <h2>{`Current Count: ${count}`}</h2>
    </>
  );
}

 

Lưu ý: Hook useContext thường được sử dụng thay cho Consumer vì nó đơn giản và dễ đọc hơn.

11. Danh sách và Keys (Khóa)

Key (Khóa) là một thuộc tính đặc biệt cho các mục trong danh sách React. Nó hoạt động như một định danh duy nhất cho mỗi mục khi chúng được cập nhật, xóa hoặc thêm.

Không nên sử dụng index của mục làm Key bởi vì nếu các mục được sắp xếp lại, nó sẽ ảnh hưởng đến hành vi mong đợi.

Giả sử bạn có 10 mục được thêm vào giỏ hàng và mỗi mục có một index duy nhất làm Key. Bây giờ, bạn quyết định xóa mục đầu tiên và thứ năm khỏi giỏ hàng. Khi các mục bị xóa, index sẽ thay đổi; mục thứ hai sẽ trở thành mục đầu tiên và mục thứ sáu sẽ trở thành mục thứ năm. Điều này sẽ dẫn đến các vấn đề về hiệu suất và hiển thị không mong muốn.

Lời khuyên:

  • Nên sử dụng string là Key để xác định duy nhất một mục trong danh sách.

  • Các thư viện của bên thứ ba như UUID cung cấp chức năng tạo các key duy nhất.

Ví dụ về danh sách và Keys:

 

const fruits = ["apple", "banana", "orange"];

function FruitList() {
  return (
    <ul>
      {fruits.map((fruit, index) => (
        <li key={index}> {fruit} </li>
      ))}
    </ul>
  );
}

 

12. Form: Controlled & Uncontrolled Components

Các form trong React cho phép thu thập và quản lý đầu vào của người dùng tốt hơn so với form HTML truyền thống. Các form này được xây dựng bằng các thành phần và lưu trữ các đầu vào của người dùng vào state. Có hai loại thành phần:

  • Controlled Components: Trong các thành phần controlled, state của form được quản lý bởi chính thành phần đó. Đây là phương pháp được khuyến khích để quản lý dữ liệu form trong React. Khi người dùng tương tác với form (ví dụ: nhập liệu vào ô nhập), state của thành phần sẽ được cập nhật để phản ánh những thay đổi. Ví dụ:

 

function ControlledInput() {
  const [name, setName] = useState('');

  const handleChange = (e) => {
    setName(e.target.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" value={name} onChange={handleChange} />
      <p>Your name is: {name}</p>
    </div>
  );
}

 

  • Uncontrolled Components: Các thành phần uncontrolled dựa vào DOM để quản lý dữ liệu form. Thành phần không trực tiếp quản lý state của form, nhưng có thể truy cập giá trị bằng các phương thức DOM như ref. Ví dụ:

 

function UncontrolledInput() {
  const nameRef = useRef(null);

  const handleClick = () => {
    console.log(nameRef.current.value);
  }

  return (
    <div>
      <label htmlFor="name">Name: </label>
      <input type="text" id="name" ref={nameRef} />
      <button onClick={handleClick}>Get Name</button>
    </div>
  );
}

 

Lưu ý:

  • Controlled components cung cấp khả năng xác thực form vì input của người dùng được phản ánh ngay lập tức do sử dụng state.

  • Uncontrolled components không thể xác thực form vì input của người dùng chỉ có thể được truy cập sau khi biểu mẫu được gửi.

13. React Router

React Router là một thư viện tiêu chuẩn để điều hướng trong React. Nó cho phép điều hướng giữa các thành phần khác nhau trong ứng dụng React, thay đổi URL trình duyệt và đồng bộ hóa giao diện người dùng (UI) với URL. React Router rất quan trọng cho việc tạo các ứng dụng một trang (SPA) với các tính năng điều hướng.

Đầu tiên, bạn cần cài đặt React Router từ terminal của mình.

 

# Nếu bạn sử dụng npm
npm install react-router-dom

# Nếu bạn sử dụng yarn
yarn add react-router-dom

 

Ví dụ về React Router

 

import { BrowserRouter, Routes, Route } from "react-router-dom";
import Home from "./pages/Home";
import About from "./pages/About";
import Contact from "./pages/Contact";
import NoPage from "./pages/NoPage";

export default function App() {
  return (
    <BrowserRouter>
      <Routes>
          <Route path="/" element={<Home />} />
          <Route path="about" element={<About />} />
          <Route path="contact" element={<Contact />} />
          <Route path="*" element={<NoPage />} />
      </Routes>
    </BrowserRouter>
  );
}

 

Giải thích:

- Bao bọc nội dung bằng <BrowserRouter>: Điều này cho phép React Router quản lý các đường dẫn và điều hướng.

- Định nghĩa <Routes>: Đây là nơi chứa các <Route> cho các đường dẫn khác nhau.

- Sử dụng <Route>:

  • path: Xác định đường dẫn của trang.

  • element: Xác định thành phần cần được hiển thị khi đường dẫn tương ứng được truy cập.

Lời kết

VietnamWorks inTECH hy vọng qua bài viết này, bạn đã có cái nhìn tổng quan về các khái niệm cơ bản trong React và sẵn sàng áp dụng chúng vào các dự án của mình. Nếu thấy bài viết hữu ích, đừng quên chia sẻ cho bạn bè cùng biết nhé.

VietnamWorks inTECH

TẠO TÀI KHOẢN MỚI: XEM FULL “1 TÁCH CODEFEE” - NHẬN SLOT TƯ VẤN CV TỪ CHUYÊN GIA - CƠ HỘI RINH VỀ VOUCHER 200K