Blog

Hướng Dẫn React Cho Người Mới Bắt Đầu

Audrey Lopez

Audrey Lopez

13 tháng 6 2025

Hướng Dẫn React Cho Người Mới Bắt Đầu

Chào mừng bạn, nhà phát triển React đầy tham vọng! Bạn đã đưa ra một lựa chọn tuyệt vời. React là một thư viện JavaScript mạnh mẽ và phổ biến để xây dựng giao diện người dùng, và học nó là cách chắc chắn để nâng cao kỹ năng phát triển web của bạn. Hướng dẫn toàn diện, từng bước này sẽ đưa bạn từ con số không thành anh hùng, trang bị cho bạn kiến thức thực tế cần thiết để bắt đầu xây dựng ứng dụng React của riêng mình vào năm 2025. Chúng ta sẽ tập trung vào thực hành, không chỉ đọc, vì vậy hãy sẵn sàng viết code!

💡
Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo ra Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một để Nhóm Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
button

Hãy Thiết lập Môi trường Phát triển React của Bạn

Trước khi chúng ta có thể bắt đầu xây dựng các giao diện người dùng tuyệt vời, chúng ta cần thiết lập một nơi làm việc. Hãy coi đây như việc chuẩn bị xưởng làm việc của bạn trước khi bắt đầu một dự án mới.

Cài đặt Những thứ Cần thiết: Node.js và npm

Các ứng dụng React được xây dựng và quản lý bằng Node.js và trình quản lý gói của nó, npm (Node Package Manager).

Để bắt đầu, hãy truy cập trang web chính thức của Node.js và tải xuống phiên bản Hỗ trợ Dài hạn (LTS) mới nhất. Trình cài đặt rất đơn giản; chỉ cần làm theo hướng dẫn trên màn hình. Sau khi cài đặt, bạn sẽ có cả Node.js và npm sẵn sàng sử dụng. Bạn có thể xác minh cài đặt bằng cách mở terminal hoặc dấu nhắc lệnh và gõ:Bash

node -v
npm -v

Các lệnh này sẽ in ra phiên bản Node.js và npm mà bạn đã cài đặt.

Dự án React Đầu tiên của Bạn với Vite

Trước đây, create-react-app là công cụ được sử dụng phổ biến để bắt đầu một dự án React mới. Tuy nhiên, bối cảnh phát triển web hiện đại thay đổi nhanh chóng, và vào năm 2025, Vite là lựa chọn được khuyến nghị vì tốc độ và hiệu quả đáng kinh ngạc của nó.

Để tạo một dự án React mới với Vite, hãy mở terminal của bạn và chạy lệnh sau:Bash

npm create vite@latest my-first-react-app -- --template react

Hãy phân tích lệnh này:

Sau khi lệnh hoàn thành, bạn sẽ có một thư mục mới với tên dự án của mình. Điều hướng vào thư mục này:Bash

cd my-first-react-app

Tiếp theo, bạn cần cài đặt các dependencies (phụ thuộc) của dự án. Đây là các gói khác mà ứng dụng React của bạn cần để hoạt động đúng. Chạy lệnh này:Bash

npm install

Cuối cùng, để xem ứng dụng React hoàn toàn mới của bạn hoạt động, hãy khởi động máy chủ phát triển:Bash

npm run dev

Terminal của bạn sẽ hiển thị một URL cục bộ, thường là http://localhost:5173. Mở URL này trong trình duyệt web của bạn, và bạn sẽ thấy ứng dụng React mặc định được tạo bởi Vite. Xin chúc mừng, bạn vừa thiết lập dự án React đầu tiên của mình!

Trái tim của React: Components và JSX

Bây giờ bạn đã có một ứng dụng React đang chạy, hãy đi sâu vào các khái niệm cốt lõi làm cho React trở nên mạnh mẽ: components (thành phần) và JSX.

Components là gì?

Về cốt lõi, một ứng dụng React là một tập hợp các phần giao diện người dùng có thể tái sử dụng, độc lập được gọi là components. Hãy nghĩ về một trang web được xây dựng bằng các viên gạch LEGO. Mỗi viên gạch là một component, và bạn có thể kết hợp chúng để tạo ra các cấu trúc phức tạp hơn.

Trong dự án my-first-react-app của bạn, mở thư mục src và bạn sẽ tìm thấy một tệp có tên App.jsx. Đây là component ứng dụng chính của bạn. Hãy đơn giản hóa nội dung của nó để hiểu những điều cơ bản:JavaScript

// src/App.jsx

function App() {
  return (
    <div>
      <h1>Hello, React World!</h1>
      <p>This is my very first React component.</p>
    </div>
  );
}

export default App;

Trong đoạn mã này:

Hiểu về JSX: JavaScript XML

JSX là một phần mở rộng cú pháp cho JavaScript cho phép bạn viết mã giống HTML bên trong1 các tệp JavaScript của mình. Nó không thực sự là HTML, nhưng nó làm cho việc viết mã giao diện người dùng trở nên trực quan và dễ đọc hơn nhiều.

Đằng sau hậu trường, một công cụ gọi là transpiler (trong trường hợp của chúng ta, được cung cấp bởi Vite) chuyển đổi JSX này thành JavaScript thông thường mà các trình duyệt có thể hiểu được.

Hãy sửa đổi App.jsx của chúng ta để thấy sức mạnh của JSX. Chúng ta có thể nhúng các biểu thức JavaScript trực tiếp vào trong JSX bằng cách sử dụng dấu ngoặc nhọn {}.JavaScript

// src/App.jsx

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
    </div>
  );
}

export default App;

Lưu tệp, và trình duyệt của bạn sẽ tự động cập nhật để hiển thị nội dung mới. Đây là một tính năng của Vite gọi là Hot Module Replacement (HMR), và nó mang lại trải nghiệm phát triển tuyệt vời.

Tạo Component Tùy chỉnh Đầu tiên của Bạn

Hãy tạo component của riêng chúng ta. Trong thư mục src, tạo một tệp mới có tên Greeting.jsx.JavaScript

// src/Greeting.jsx

function Greeting() {
  return (
    <h2>This is a greeting from my custom component!</h2>
  );
}

export default Greeting;

Bây giờ, hãy sử dụng component Greeting mới này bên trong component App.jsx của chúng ta.JavaScript

// src/App.jsx
import Greeting from './Greeting'; // Import component Greeting

function App() {
  const name = "Beginner Developer";
  const year = new Date().getFullYear();

  return (
    <div>
      <h1>Hello, {name}!</h1>
      <p>Welcome to your React journey in {year}.</p>
      <Greeting /> {/* Sử dụng component Greeting */}
    </div>
  );
}

export default App;

Bằng cách import và sau đó sử dụng <Greeting /> giống như một thẻ HTML thông thường, chúng ta đã kết hợp giao diện người dùng của mình từ nhiều component. Đây là khối xây dựng cơ bản của các ứng dụng React.

Truyền Dữ liệu với Props

Component Greeting của chúng ta hơi tĩnh. Điều gì xảy ra nếu chúng ta muốn chào hỏi những người khác nhau? Đây là lúc props (viết tắt của properties - thuộc tính) xuất hiện. Props là cách bạn truyền dữ liệu từ một component cha xuống một component con.

Làm cho Components trở nên Động với Props

Hãy sửa đổi Greeting.jsx của chúng ta để chấp nhận một prop name.JavaScript

// src/Greeting.jsx

function Greeting(props) {
  return (
    <h2>Hello, {props.name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

Bây giờ, trong App.jsx, chúng ta có thể truyền một prop name cho các component Greeting của chúng ta.

JavaScript

// src/App.jsx
import Greeting from './Greeting';

function App() {
  return (
    <div>
      <Greeting name="Alice" />
      <Greeting name="Bob" />
      <Greeting name="Charlie" />
    </div>
  );
}

export default App;

Bây giờ bạn sẽ thấy ba lời chào khác nhau, mỗi lời chào có một tên duy nhất. Props cho phép chúng ta tái sử dụng các component với dữ liệu khác nhau, làm cho giao diện người dùng của chúng ta cực kỳ linh hoạt.

Một phương pháp JavaScript phổ biến và hiện đại là destructure (phân rã) đối tượng props trực tiếp trong danh sách tham số của hàm. Hãy refactor (tái cấu trúc) Greeting.jsx:JavaScript

// src/Greeting.jsx

function Greeting({ name }) {
  return (
    <h2>Hello, {name}! This is a greeting from my custom component.</h2>
  );
}

export default Greeting;

Điều này đạt được kết quả tương tự nhưng với mã sạch hơn và súc tích hơn.

Quản lý Bộ nhớ Component với State

Trong khi props rất tốt để truyền dữ liệu xuống cây component, điều gì xảy ra khi một component cần ghi nhớ và quản lý dữ liệu của riêng nó? Đây là lúc state xuất hiện. State là dữ liệu được quản lý bên trong một component. Khi state của một component thay đổi, React sẽ tự động re-render (render lại) component đó để phản ánh state mới.

Giới thiệu Hook useState

Để quản lý state trong các functional component, chúng ta sử dụng một hàm đặc biệt từ React gọi là Hook. Hook cơ bản nhất là useState.

Hãy xây dựng một component bộ đếm đơn giản để hiểu cách useState hoạt động. Tạo một tệp mới trong thư mục src của bạn có tên Counter.jsx.JavaScript

// src/Counter.jsx
import { useState } from 'react';

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

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

export default Counter;

Hãy phân tích đoạn mã này:

  1. count: Giá trị hiện tại của state.
  2. setCount: Một hàm mà chúng ta có thể sử dụng để cập nhật state count.

Bây giờ, hãy thêm component Counter này vào App.jsx của chúng ta:JavaScript

// src/App.jsx
import Counter from './Counter';

function App() {
  return (
    <div>
      <h1>My Awesome React App</h1>
      <Counter />
    </div>
  );
}

export default App;

Bây giờ bạn sẽ thấy một bộ đếm trong trình duyệt của mình. Mỗi lần bạn nhấp vào nút, số sẽ tăng lên. React đang re-render component Counter mỗi khi state của nó thay đổi.

Phản hồi Hành động của Người dùng: Xử lý Sự kiện

Tính tương tác là trái tim của các ứng dụng web hiện đại. React cung cấp một cách đơn giản và nhất quán để xử lý các sự kiện như nhấp chuột, gửi biểu mẫu và nhập liệu từ bàn phím.

Chúng ta đã thấy một trình xử lý sự kiện cơ bản trong component Counter của chúng ta với onClick. Hãy khám phá sâu hơn bằng cách xây dựng một biểu mẫu đơn giản lấy dữ liệu nhập từ người dùng.

Tạo một tệp component mới có tên NameForm.jsx.JavaScript

// src/NameForm.jsx
import { useState } from 'react';

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

  const handleSubmit = (event) => {
    event.preventDefault(); // Ngăn chặn hành vi gửi biểu mẫu mặc định của trình duyệt
    alert(`Hello, ${name}!`);
  };

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Name:
        <input
          type="text"
          value={name}
          onChange={(event) => setName(event.target.value)}
        />
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

export default NameForm;

Hãy phân tích component biểu mẫu này:

Thêm NameForm này vào App.jsx của bạn để xem nó hoạt động.

Hiển thị Thông tin: Conditional Rendering và Lists

Các ứng dụng thực tế thường cần hiển thị hoặc ẩn nội dung dựa trên các điều kiện nhất định, và chúng thường xuyên cần hiển thị danh sách dữ liệu.

Hiển thị và Ẩn với Conditional Rendering

Hãy tạo một component hiển thị một thông báo khác nhau tùy thuộc vào việc người dùng đã đăng nhập hay chưa. Tạo một tệp có tên LoginMessage.jsx.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  if (isLoggedIn) {
    return <h2>Welcome back!</h2>;
  }
  return <h2>Please log in.</h2>;
}

export default LoginMessage;

Chúng ta cũng có thể sử dụng toán tử ba ngôi (ternary operator) để conditional rendering súc tích hơn.JavaScript

// src/LoginMessage.jsx

function LoginMessage({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? <h2>Welcome back!</h2> : <h2>Please log in.</h2>}
    </div>
  );
}

export default LoginMessage;

Sau đó, bạn có thể sử dụng component này trong App.jsx và truyền prop isLoggedIn để xem các thông báo khác nhau.

Hiển thị Danh sách Dữ liệu

Để render một danh sách các mục, bạn thường sử dụng phương thức mảng map(). Hãy tạo một component để hiển thị danh sách các loại trái cây. Tạo một tệp có tên FruitList.jsx.JavaScript

// src/FruitList.jsx

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul>
        {fruits.map((fruit, index) => (
          <li key={index}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Ở đây, chúng ta đang map qua mảng fruits và với mỗi loại trái cây, chúng ta trả về một phần tử <li>.

Bạn sẽ nhận thấy prop key={index}. Khi bạn render một danh sách các mục, React cần một key duy nhất cho mỗi mục để cập nhật danh sách một cách hiệu quả khi nó thay đổi. Sử dụng chỉ mục mảng làm key có thể chấp nhận được đối với các danh sách đơn giản, tĩnh. Tuy nhiên, đối với các danh sách động mà các mục có thể được thêm, xóa hoặc sắp xếp lại, tốt nhất là sử dụng một ID duy nhất từ dữ liệu của bạn nếu có.

Thêm Phong cách cho Ứng dụng của Bạn

Một ứng dụng tuyệt vời cần phải trông đẹp mắt. Có nhiều cách để tạo kiểu cho các component React của bạn.

CSS Stylesheets

Cách đơn giản nhất là sử dụng các tệp CSS thông thường. Trong thư mục src, bạn sẽ tìm thấy tệp App.css. Bạn có thể thêm các kiểu của mình vào đó.

Ví dụ, để tạo kiểu cho component FruitList của chúng ta, bạn có thể thêm đoạn mã này vào App.css:CSS

/* src/App.css */

.fruit-list {
  list-style-type: none;
  padding: 0;
}

.fruit-item {
  background-color: #f0f0f0;
  margin: 5px 0;
  padding: 10px;
  border-radius: 5px;
}

Sau đó, trong FruitList.jsx của bạn, bạn có thể sử dụng các lớp CSS này.JavaScript

// src/FruitList.jsx
import './App.css'; // Đảm bảo import tệp CSS

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits:</h3>
      <ul className="fruit-list">
        {fruits.map((fruit, index) => (
          <li key={index} className="fruit-item">{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Lưu ý rằng chúng ta sử dụng className thay vì class trong JSX, vì class là một từ khóa dành riêng trong JavaScript.

CSS Modules

Đối với các ứng dụng lớn hơn, CSS Modules cung cấp một cách để phạm vi hóa các kiểu cho một component cụ thể, ngăn ngừa xung đột kiểu. Tệp CSS Module được đặt tên với phần mở rộng .module.css.

Hãy tạo FruitList.module.css:CSS

/* src/FruitList.module.css */

.list {
  list-style-type: square;
}

.item {
  color: blue;
}

Bây giờ, trong FruitList.jsx, bạn import các kiểu dưới dạng một đối tượng:JavaScript

// src/FruitList.jsx
import styles from './FruitList.module.css';

function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date'];

  return (
    <div>
      <h3>My Favorite Fruits (Styled with CSS Modules):</h3>
      <ul className={styles.list}>
        {fruits.map((fruit, index) => (
          <li key={index} className={styles.item}>{fruit}</li>
        ))}
      </ul>
    </div>
  );
}

export default FruitList;

Vite sẽ tự động tạo các tên lớp duy nhất, đảm bảo rằng các kiểu trong FruitList.module.css chỉ áp dụng cho component FruitList.

Điều hướng trong Ứng dụng của Bạn với React Router

Hầu hết các ứng dụng web có nhiều trang. Để xử lý việc điều hướng giữa các "trang" này trong một ứng dụng trang đơn (SPA) như ứng dụng được xây dựng bằng React, chúng ta sử dụng một thư viện gọi là React Router.

Thiết lập React Router

Đầu tiên, bạn cần cài đặt React Router:Bash

npm install react-router-dom

Tạo các Trang của Bạn

Hãy tạo hai component trang đơn giản: HomePage.jsx và AboutPage.jsx.JavaScript

// src/HomePage.jsx

function HomePage() {
  return (
    <div>
      <h1>Home Page</h1>
      <p>Welcome to the home page of our amazing app!</p>
    </div>
  );
}

export default HomePage;

JavaScript

// src/AboutPage.jsx

function AboutPage() {
  return (
    <div>
      <h1>About Page</h1>
      <p>This is all about our incredible application.</p>
    </div>
  );
}

export default AboutPage;

Cấu hình Router

Bây giờ, chúng ta sẽ cấu hình các route của mình trong App.jsx.JavaScript

// src/App.jsx
import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
import HomePage from './HomePage';
import AboutPage from './AboutPage';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">Home</Link>
            </li>
            <li>
              <Link to="/about">About</Link>
            </li>
          </ul>
        </nav>

        <hr />

        <Routes>
          <Route path="/" element={<HomePage />} />
          <Route path="/about" element={<AboutPage />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;

Hãy phân tích các component mới từ React Router:

Bây giờ, khi bạn nhấp vào các liên kết "Home" và "About", nội dung sẽ thay đổi mà không cần tải lại trang hoàn toàn. Bạn đã triển khai thành công client-side routing!

Đi xa hơn: Hook useEffect

Hook useState dùng để quản lý state ảnh hưởng trực tiếp đến những gì được render. Nhưng còn các side effect (tác dụng phụ) thì sao, như lấy dữ liệu từ API, thiết lập các subscription, hoặc thay đổi DOM theo cách thủ công? Đối với điều này, chúng ta sử dụng Hook useEffect.

Hook useEffect chạy sau mỗi lần render theo mặc định. Hãy xem nó hoạt động như thế nào bằng cách tạo một component lấy dữ liệu từ một API giả.

Tạo một tệp mới DataFetcher.jsx.JavaScript

// src/DataFetcher.jsx
import { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // Hàm này sẽ được gọi sau khi component render
    const fetchData = async () => {
      try {
        const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
        const jsonData = await response.json();
        setData(jsonData);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []); // Mảng dependency rỗng rất quan trọng!

  if (loading) {
    return <p>Loading...</p>;
  }

  return (
    <div>
      <h3>Fetched Data:</h3>
      <h4>{data.title}</h4>
      <p>{data.body}</p>
    </div>
  );
}

export default DataFetcher;

Chìa khóa để hiểu useEffect ở đây là đối số thứ hai: dependency array (mảng phụ thuộc).

Thêm DataFetcher vào App.jsx của bạn để xem nó lấy và hiển thị dữ liệu khi component được tải.

Kết luận và Các bước Tiếp theo

Bạn đã đi được một chặng đường dài! Bạn đã học cách:

Đây là một thành tựu to lớn, và bây giờ bạn đã có một nền tảng vững chắc để xây dựng. Thế giới của React rất rộng lớn và thú vị. Dưới đây là một số chủ đề bạn có thể muốn khám phá tiếp theo:

Điều quan trọng nhất bạn có thể làm bây giờ là tiếp tục xây dựng. Thực hành là chìa khóa. Hãy thử tạo lại một trang web hoặc ứng dụng đơn giản mà bạn sử dụng hàng ngày. Thử thách bản thân với các tính năng mới. Bạn càng viết code nhiều, bạn sẽ càng tự tin và thành thạo hơn.

Chào mừng bạn đến với cộng đồng React. Chúc bạn code vui vẻ!

💡
Bạn muốn một công cụ Kiểm thử API tuyệt vời có thể tạo ra Tài liệu API đẹp mắt?

Bạn muốn một nền tảng tích hợp, Tất cả trong Một để Nhóm Phát triển của bạn làm việc cùng nhau với năng suất tối đa?

Apidog đáp ứng mọi yêu cầu của bạn và thay thế Postman với mức giá phải chăng hơn nhiều!
button

Thực hành thiết kế API trong Apidog

Khám phá cách dễ dàng hơn để xây dựng và sử dụng API

Đăng ký miễn phíTải xuống