Hướng Dẫn Nhanh về Các Khái Niệm của React

React là thư viện JavaScript phổ biến nhất hiện nay để tạo ra các giao diện người dùng hiện đại, động và tương tác. Dù bạn là người mới bắt đầu hay đã có kinh nghiệm với lập trình web, việc hiểu biết về các khái niệm của React là rất quan trọng để xây dựng các ứng dụng có khả năng mở rộng và bền vững.

Nội Dung

1. Giới thiệu về React
2. Các thành phần: Khối xây dựng của React
   • Thành phần chức năng
   • Thành phần lớp (Lỗi thời)
3. JSX (JavaScript XML)
4. Props: Truyền dữ liệu
5. State: Quản lý dữ liệu động
6. Xử lý sự kiện
7. Kết xuất điều kiện
8. Danh sách và Khóa
9. Phương thức vòng đời và useEffect
10. Hooks
11. Context API
12. React Router
13. Quản lý trạng thái ngoài React
14. Virtual DOM
15. Tối ưu hiệu suất
16. Server-Side Rendering (SSR)
17. React Native
18. Ví dụ dự án thực tế
19. Thực hành tốt nhất
20. Câu hỏi thường gặp

Giới thiệu về React

React là một thư viện JavaScript mã nguồn mở được Facebook phát triển và duy trì. Nó giúp tạo ra các giao diện người dùng nhanh chóng và hiệu quả thông qua việc sử dụng thành phần. Bài viết này sẽ cung cấp cho bạn cái nhìn tổng quan về các khái niệm chính trong React, từ cơ bản đến nâng cao.

Các thành phần: Khối xây dựng của React

Trong React, thành phần là cơ sở của mọi thứ bạn xây dựng. Chúng là các phần giao diện người dùng có thể tái sử dụng, bao gồm logic và cấu trúc.

Thành phần chức năng

function Welcome() {
  return <h1>Hello, Nile Bits!</h1>;
}

Thành phần lớp (Lỗi thời)

class Welcome extends React.Component {
  render() {
    return <h1>Hello, Nile Bits!</h1>;
  }
}

Thực hành tốt nhất: Luôn ưu tiên sử dụng các thành phần chức năng với hooks cho các ứng dụng React hiện đại.

JSX (JavaScript XML)

JSX là một phần mở rộng cú pháp cho phép bạn viết mã giống như HTML bên trong JavaScript.

const element = <h1>Welcome to Nile Bits</h1>;

Không có JSX:

const element = React.createElement('h1', null, 'Welcome to Nile Bits');

Bạn cũng có thể nhúng các biểu thức JavaScript:

const user = "Amr";
const element = <h1>Hello, {user}!</h1>;

Props: Truyền dữ liệu

Props (viết tắt của properties) cho phép bạn truyền dữ liệu từ cha xuống con.

function Greeting({ name }) {
  return <h1>Hello, {name}</h1>;
}

Props chỉ có thể đọc.

Chúng cho phép tái sử dụng.

Chúng có thể chứa bất kỳ giá trị JavaScript nào.

State: Quản lý dữ liệu động

State được sử dụng khi các thành phần cần quản lý dữ liệu thay đổi theo thời gian.

import { useState } from "react";

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <button onClick={() => setCount(count + 1)}>
      Clicked {count} times
    </button>
  );
}

Xử lý sự kiện

Xử lý sự kiện trong React tương tự như JavaScript nhưng sử dụng camelCase.

function Button() {
  const handleClick = () => alert("Clicked!");
  return <button onClick={handleClick}>Click Me</button>;
}

Kết xuất điều kiện

React cho phép bạn hiển thị các thành phần có điều kiện.

function UserStatus({ isLoggedIn }) {
  return isLoggedIn ? <h1>Welcome Back</h1> : <h1>Please Log In</h1>;
}

Danh sách và Khóa

Khóa giúp React theo dõi các thay đổi trong danh sách.

const items = ["React", "Vue", "Angular"];

function ItemList() {
  return (
    <ul>
      {items.map(item => <li key={item}>{item}</li>)}
    </ul>
  );
}

Phương thức vòng đời và useEffect

Phương thức vòng đời trong các thành phần lớp:

• componentDidMount
• componentDidUpdate
• componentWillUnmount

Với hooks:

import { useEffect } from "react";

function Example() {
  useEffect(() => {
    console.log("Mounted");
    return () => console.log("Unmounted");
  }, []);

  return <h1>Hello</h1>;
}

Hooks

Hooks cho phép bạn sử dụng trạng thái và các tính năng vòng đời trong các thành phần chức năng.

Các Hooks phổ biến

• useState
• useEffect
• useContext
• useReducer
• useRef

Ví dụ:

function Timer() {
  const [seconds, setSeconds] = useState(0);

  useEffect(() => {
    const interval = setInterval(() => setSeconds((s) => s + 1), 1000);
    return () => clearInterval(interval);
  }, []);

  return <h1>{seconds} seconds</h1>;
}

Context API

Tránh prop drilling bằng cách sử dụng Context.

const ThemeContext = React.createContext("light");

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Toolbar />
    </ThemeContext.Provider>
  );
}

function Toolbar() {
  return <ThemeButton />;
}

function ThemeButton() {
  const theme = React.useContext(ThemeContext);
  return <button>{theme} mode</button>;
}

React Router

Để điều hướng, sử dụng React Router.

import { BrowserRouter, Routes, Route } from "react-router-dom";

function App() {
  return (
    <BrowserRouter>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/about" element={<About />} />
      </Routes>
    </BrowserRouter>
  );
}

Quản lý trạng thái ngoài React

Đối với các ứng dụng lớn, hãy xem xét sử dụng Redux, MobX hoặc Zustand.

function counterReducer(state = 0, action) {
  switch (action.type) {
    case "INCREMENT":
      return state + 1;
    default:
      return state;
  }
}

Virtual DOM

React sử dụng một virtual DOM để cập nhật hiệu quả chỉ những phần của giao diện người dùng đã thay đổi.

Tối ưu hiệu suất

Kỹ thuật:

• React.memo
• useMemo
• useCallback

const MemoizedComponent = React.memo(({ value }) => {
  return <div>{value}</div>;
});

Server-Side Rendering (SSR)

Sử dụng Next.js để cải thiện SEO và hiệu suất.

export async function getServerSideProps() {
  return { props: { data: "Hello from server" } };
}

React Native

React cũng có thể được sử dụng để xây dựng các ứng dụng di động.

import { Text, View } from 'react-native';

export default function App() {
  return (
    <View>
      <Text>Hello from React Native</Text>
    </View>
  );
}

Ví dụ dự án thực tế

Ví dụ 1: Ứng dụng To-Do

function TodoApp() {
  const [todos, setTodos] = useState([]);
  const [task, setTask] = useState("");

  const addTodo = () => {
    setTodos([...todos, task]);
    setTask("");
  };

  return (
    <div>
      <input value={task} onChange={(e) => setTask(e.target.value)} />
      <button onClick={addTodo}>Add</button>
      <ul>
        {todos.map((todo, index) => <li key={index}>{todo}</li>)}
      </ul>
    </div>
  );
}

Ví dụ 2: Lấy Dữ liệu API

function Users() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => res.json())
      .then((data) => setUsers(data));
  }, []);

  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

Thực hành tốt nhất

• Giữ cho các thành phần nhỏ.
• Sử dụng hooks một cách hợp lý.
• Tránh prop drilling bằng Context.
• Sử dụng công cụ quản lý trạng thái cho các ứng dụng phức tạp.
• Tối ưu hóa bằng memoization.

Câu hỏi thường gặp

React là gì?

React là một thư viện JavaScript dùng để xây dựng giao diện người dùng.

JSX là gì?

JSX là một cú pháp mở rộng cho phép viết HTML tương tự trong JavaScript.

Làm thế nào để quản lý trạng thái trong React?

Bạn có thể sử dụng hooks như useState hoặc sử dụng các thư viện quản lý trạng thái như Redux.

Có thể sử dụng React để phát triển ứng dụng di động không?

Có, bạn có thể sử dụng React Native để phát triển ứng dụng di động.