🚀 Hướng Dẫn Tạo React App Thủ Công Không Dùng CRA hoặc Vite

Chào các lập trình viên 👋,
Trong bài viết này, tôi sẽ hướng dẫn bạn cách tạo một ứng dụng React thủ công từ đầu mà không cần sử dụng create-react-app hay Vite. Điều này sẽ giúp bạn hiểu rõ hơn về các thành phần cơ bản của các dự án React — những gì diễn ra bên trong.

👉 Mã nguồn đầy đủ có sẵn trên GitHub của tôi: manualreact

Mục Lục

1. Tạo Thư Mục và Khởi Tạo Dự Án
2. Cài Đặt React và ReactDOM
3. Browers Không Hiểu JSX Trực Tiếp ⚠️
   • Webpack (Bundler)
   • Babel (Transpiler)
4. Cấu Trúc Tệp và Cấu Hình
5. Kết Luận
6. Câu Hỏi Thường Gặp
7. Mẹo và Lưu Ý

1. Tạo Thư Mục và Khởi Tạo Dự Án

Đầu tiên, chúng ta sẽ tạo một thư mục cho dự án và khởi tạo nó:

mkdir manualreact
cd manualreact
npm init -y

Cờ -y sẽ chấp nhận tất cả các giá trị mặc định, giúp nhanh chóng tạo ra một tệp package.json.

2. Cài Đặt React và ReactDOM

Tiếp theo, chúng ta cần cài đặt React và ReactDOM:

npm install react react-dom

• react → Thư viện cốt lõi để viết các thành phần, quản lý trạng thái và sử dụng hooks.
• react-dom → Được sử dụng để render các thành phần React vào DOM thực tế (trình duyệt).

Ví dụ:

import React from "react";
import ReactDOM from "react-dom/client";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

3. Nhưng chờ đã… Trình duyệt không hiểu JSX trực tiếp ⚠️

Cho đến thời điểm này, chúng ta đã viết mã React.
Nhưng trình duyệt chỉ hiểu JavaScript, HTML và CSS thuần.
Vì vậy, chúng ta cần các công cụ để đóng gói và biên dịch mã của mình:

🔹 Webpack (Bundler)

• Webpack sẽ lấy tất cả các tệp của bạn (.js, .css, .jpg, v.v.)
• Kết hợp chúng thành một gói tối ưu (bundle.js)
• Trình duyệt có thể tải gói này một cách hiệu quả.

🔹 Babel (Transpiler)

• Chuyển đổi mã hiện đại ES6+ và JSX thành JavaScript cũ hơn mà trình duyệt có thể hiểu.

Ví dụ:

JSX ➝ React.createElement

// ES6/JSX
const element = <h1>Hello React</h1>;

Kết quả từ Babel:

const element = React.createElement("h1", null, "Hello React");

Hàm mũi tên ➝ Hàm ES5

// ES6
const sum = (a, b) => a + b;

Kết quả từ Babel:

var sum = function(a, b) {
  return a + b;
};

4. Cấu Trúc Tệp và Cấu Hình

Tôi đã thiết lập tất cả các tệp cần thiết (index.html, webpack.config.js, babel.config.js, điểm vào, v.v.) trong kho lưu trữ của tôi.
👉 Bạn có thể kiểm tra tại đây: manualreact trên GitHub

✅ Kết Luận

Bằng cách thiết lập React một cách thủ công:

• Bạn sẽ hiểu cách hoạt động của bundlers và transpilers.
• Bạn sẽ có quyền kiểm soát hoàn toàn đối với cấu hình dự án.
• Đây là cách tuyệt vời để tìm hiểu về các thành phần bên trong của create-react-app và Vite.

💡 Mẹo chuyên nghiệp: Khi bạn đã thoải mái với điều này, hãy khám phá các loaders, plugins và tối ưu hóa nâng cao của Webpack.

👉 Hãy kiểm tra dự án hoàn chỉnh trên GitHub, NHƯNG đừng tải xuống, hãy tự viết mã, cài đặt từng phụ thuộc một, tạo từng tệp một.

Câu Hỏi Thường Gặp

1. Tại sao không nên sử dụng CRA hoặc Vite?
CRA và Vite rất tiện lợi, nhưng nếu bạn muốn hiểu rõ hơn về cách hoạt động của React, việc thiết lập thủ công là một cách tuyệt vời.

2. Có cần thiết phải biết Webpack và Babel không?
Có, vì chúng giúp tối ưu hóa và chuyển đổi mã của bạn sang định dạng mà trình duyệt có thể hiểu.

Mẹo và Lưu Ý

• Khi cài đặt phụ thuộc, hãy chắc chắn rằng bạn đang sử dụng phiên bản phù hợp để tránh xung đột.
• Kiểm tra mã thường xuyên để phát hiện lỗi sớm trong quá trình phát triển.

Hy vọng bài viết này hữu ích cho bạn trong việc thiết lập một dự án React từ đầu!