Hướng dẫn nhập môn React: Xây dựng giao diện người dùng đầu tiên của bạn từ con số không

React là một thư viện JavaScript để xây dựng giao diện người dùng. Nó được phát triển và duy trì bởi Facebook, và đã trở thành một trong những công cụ phổ biến nhất trong phát triển front-end. Hướng dẫn này sẽ đưa bạn từ con số không, từng bước tìm hiểu các khái niệm cơ bản của React và xây dựng một giao diện người dùng đơn giản.

Tại sao chọn React?

React có những ưu điểm sau:

• Tính module hóa (Component-based): React chia giao diện người dùng thành các component độc lập, có thể tái sử dụng. Điều này giúp mã dễ bảo trì và dễ hiểu hơn.
• Tính khai báo (Declarative): React sử dụng phong cách lập trình khai báo, có nghĩa là bạn chỉ cần mô tả nội dung bạn muốn hiển thị, React sẽ tự động xử lý việc cập nhật và render.
• Hiệu quả: React sử dụng Virtual DOM và thuật toán diff thông minh, có thể cập nhật giao diện người dùng một cách hiệu quả, giảm thiểu việc render không cần thiết.
• Hỗ trợ cộng đồng lớn: React có một cộng đồng lớn và hệ sinh thái phong phú, bạn có thể tìm thấy rất nhiều hướng dẫn, thư viện và công cụ để giúp bạn phát triển.
• Khả năng đa nền tảng: React Native cho phép bạn sử dụng React để phát triển ứng dụng di động native (iOS và Android).

Chuẩn bị

Trước khi bắt đầu, bạn cần đảm bảo rằng máy tính của bạn đã cài đặt các công cụ sau:

• Node.js: Node.js là một môi trường runtime JavaScript, được sử dụng để chạy các công cụ phát triển React. Bạn có thể tải xuống và cài đặt từ https://nodejs.org/.
• npm hoặc yarn: npm (Node Package Manager) và yarn là các trình quản lý gói JavaScript, được sử dụng để cài đặt và quản lý các dependency của React. Thông thường npm sẽ được cài đặt cùng với Node.js. yarn có thể được cài đặt từ https://yarnpkg.com/.

Tạo ứng dụng React đầu tiên của bạn

Chúng ta sẽ sử dụng create-react-app để nhanh chóng tạo một dự án React.

1. Sử dụng npm để tạo:

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

2. Sử dụng yarn để tạo:

   yarn create react-app my-first-react-app
   cd my-first-react-app
   yarn start
   

Sau khi thực hiện các lệnh trên, create-react-app sẽ tự động tạo một thư mục có tên my-first-react-app, và khởi tạo một dự án React trong thư mục đó. Lệnh npm start hoặc yarn start sẽ khởi động server phát triển, bạn có thể truy cập http://localhost:3000 trong trình duyệt để xem ứng dụng React của bạn.

Cấu trúc thư mục

Cấu trúc thư mục của dự án được tạo bởi create-react-app như sau:

my-first-react-app/
├── node_modules/         # Các thư viện mà dự án phụ thuộc vào
├── public/               # Tài nguyên tĩnh (ví dụ: file HTML)
│   ├── index.html        # File HTML đầu vào của ứng dụng
│   └── ...
├── src/                  # Mã nguồn React
│   ├── App.css           # CSS style của component App
│   ├── App.js            # Component App
│   ├── App.test.js       # File test của component App
│   ├── index.css         # CSS style toàn cục
│   ├── index.js          # File JavaScript đầu vào của ứng dụng
│   ├── logo.svg          # React logo
│   └── ...
├── .gitignore            # File Git ignore
├── package.json          # Metadata và các dependency của dự án
├── README.md             # Tài liệu hướng dẫn của dự án
└── yarn.lock             # File khóa phiên bản dependency (nếu sử dụng yarn)

Hiểu React Component

Ứng dụng React được cấu thành từ các component. Component là các khối code độc lập, có thể tái sử dụng, dùng để render một phần cụ thể của giao diện người dùng.

Trong file src/App.js, bạn có thể thấy một component App mặc định:

import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    
      
        
        
          Edit `src/App.js` and save to reload.
        

        [
          Learn React
        ](https://reactjs.org)
      
    
  );
}

export default App;

Giải thích code:

• import React from 'react'; Import thư viện React.
• function App() { ... } Định nghĩa một function component tên là App.
• return ( ... ) Trả về một biểu thức JSX, mô tả nội dung mà component nên render.
• export default App; Export component App, để có thể sử dụng trong các file khác.

JSX (JavaScript XML)

JSX là một phần mở rộng cú pháp của JavaScript, cho phép bạn viết code giống HTML trong code JavaScript. Trong ví dụ trên, ... là một biểu thức JSX. Code JSX sẽ được Babel chuyển đổi thành code JavaScript tiêu chuẩn, để trình duyệt có thể hiểu được.

Sửa đổi App Component

Chúng ta hãy sửa đổi component App, tạo một bộ đếm đơn giản.

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
    
      

# Bộ đếm

      Số đếm hiện tại: {count}

      +
      -
    
  );
}

export default App;

Giải thích sửa đổi:

• import React, { useState } from 'react'; Nhập Hook useState. useState là một React Hook, được sử dụng để thêm trạng thái vào các component hàm.
• const [count, setCount] = useState(0); Sử dụng Hook useState để tạo một biến trạng thái có tên là count và khởi tạo nó thành 0. setCount là một hàm để cập nhật trạng thái count.
• const increment = () => { setCount(count + 1); }; Định nghĩa một hàm có tên là increment, được sử dụng để tăng trạng thái count lên 1.
• const decrement = () => { setCount(count - 1); }; Định nghĩa một hàm có tên là decrement, được sử dụng để giảm trạng thái count đi 1.
• Số đếm hiện tại: {count} Hiển thị giá trị của trạng thái count trên trang. {count} là một biểu thức JSX, được sử dụng để chèn các biến JavaScript vào mã JSX.
• + và - Tạo hai nút, lần lượt liên kết các hàm increment và decrement. onClick là một trình xử lý sự kiện, được sử dụng để thực thi hàm được chỉ định khi nút được nhấp.

Sau khi lưu tệp src/App.js, trình duyệt sẽ tự động làm mới và bạn sẽ thấy một bộ đếm đơn giản. Nhấp vào nút "+" sẽ tăng số đếm, nhấp vào nút "-" sẽ giảm số đếm.

Sử dụng kiểu CSS

Bạn có thể sử dụng CSS để làm đẹp ứng dụng React của mình. create-react-app hỗ trợ CSS Modules và các tệp CSS thông thường.

Sử dụng CSS Modules:

CSS Modules cho phép bạn tạo các kiểu CSS độc lập cho từng component, tránh xung đột kiểu. Để sử dụng CSS Modules trong một component, bạn cần tạo một tệp có đuôi .module.css.

Ví dụ: tạo một tệp có tên là App.module.css và thêm các kiểu CSS sau vào đó:

.App {
  text-align: center;
}

.App h1 {
  color: blue;
}

.App button {
  padding: 10px 20px;
  font-size: 16px;
  background-color: lightgreen;
  border: none;
  cursor: pointer;
}

Sau đó, nhập CSS Modules vào tệp src/App.js:

import React, { useState } from 'react';
import styles from './App.module.css'; // Nhập CSS Modules

function App() {
  const [count, setCount] = useState(0);
 const increment = () => {
    setCount(count + 1);
  };

  const decrement = () => {
    setCount(count - 1);
  };

  return (
     {/* Sử dụng đối tượng styles để tham chiếu các lớp CSS */}
      

# Bộ đếm

      Số đếm hiện tại: {count}

      +
      -
    
  );
}

export default App;

Sử dụng tệp CSS thông thường:

Bạn cũng có thể sử dụng tệp CSS thông thường để định nghĩa các kiểu toàn cục. Trong tệp src/index.css, bạn có thể định nghĩa các kiểu toàn cục.

Ví dụ, thêm các kiểu CSS sau:

body {
  font-family: sans-serif;
}

Kiểu này sẽ được áp dụng cho phần tử body của toàn bộ ứng dụng.

Bước tiếp theo

Chúc mừng bạn, bạn đã hoàn thành ứng dụng React đầu tiên của mình! Tiếp theo, bạn có thể tìm hiểu thêm về React, ví dụ:

• Giao tiếp giữa các thành phần: Tìm hiểu cách để các thành phần khác nhau giao tiếp với nhau.
• Xử lý biểu mẫu: Tìm hiểu cách tạo và xử lý biểu mẫu.
• Định tuyến: Tìm hiểu cách sử dụng React Router để tạo ứng dụng nhiều trang.
• Redux hoặc Context API: Tìm hiểu cách quản lý trạng thái của ứng dụng.
• Hooks: Tìm hiểu sâu hơn về React Hooks, ví dụ như useEffect, useContext, v.v.

Hãy nhớ rằng, React là một công nghệ đòi hỏi phải luyện tập và học hỏi liên tục. Chúc bạn học tập vui vẻ!