Mastering ReactJS - Bài 01: Khởi tạo dự án

Để có thể hình dung cụ thể về ReactJS, cách tốt nhất là chúng ta hãy khởi tạo một dự án và chạy thử xem thế nào. Trong bài này Dũng sẽ cùng các bạn đi khởi tạo một dự án ReactJS và chạy thử nhé.

Cài đặt môi trường

Để có thể khởi tạo được một dự án ReactJS trước hết chúng ta sẽ cần cài đặt các công cụ npm. Thật may là việc cài đặt cũng tương đối đơn giản thông qua việc cài đặt NodeJS, bạn có thể tham khảo cách cài đặt tại đây.
Tiếp theo bạn cũng có thể cài đặt công cụ yarn bằng câu lệnh npm i -g yarn.
Tiếp theo bạn có thể cài đặt vite bằng câu lệnh npm i -g vite.

NodeJS là gì?

Trong mỗi một bối cảnh chúng ta lại có thể định nghĩa NodeJS theo một cách khác nhau:

1. Khi bạn lập trình thì là NodeJS đóng vai trò là một framework cung cấp sẵn các một số thư viện lập trình.
2. Khi bạn chạy chương trình bằng lệnh node .jsnó lại đóng vai trò như một máy ảo thông dịch các mã javascript.
3. Khi bạn mở một cổng trong mã nguồn, ví dụ lập trình một http server chẳng hạn thì bạn có thể gọi nó là một phần mềm máy chủ mà bạn vẫn hay gọi tắt là server.

npm là gì?

Là một công cụ giúp bạn quản lý dự án thông qua việc tải các thư viện hoặc build dự án. Ngoài ra nó cũng có thể như một http server, mở một cổng để giúp bạn chạy dự án trong quá trình phát triển.

yarn là gì?

Là một công cụ tương tự như npm nhưng có đóng gói thêm 1 số tính năng khác.

vite là gì?

Không rõ các bạn gọi nó là gì nhưng với mình thì nó giống như một plugin hoặc một hàm cung cấp các tính năng bổ sung cho npm, yarn, ví dụ như tính năng tạo dự án mà chúng ta sắp dùng dưới đây.
Ngoài ra vite cũng cung cấp các công cụ phát triển hay là một server.

Khởi tạo dự án

Khi đã có các công cụ cần thiết rồi thì việc khởi tạo dự án là vô cùng đơn giản. Bạn có thể chạy lệnh sau:

yarn create vite <tên dự án>

Ví dụ dự án của tôi là hello-world, tôi có thể chạy lệnh:

yarn create vite hello-world 

Lúc này vite sẽ hỏi bạn chọn framework, chúng ta sẽ chọn React, tiếp theo vite sẽ hỏi bạn chọn ngôn ngữ, chúng ta có thể chọn Javascript.
Kết quả chúng ta sẽ nhận được một dự án có tên hello-world.
Bạn có thể cd vào thư mục hello-world và gõ lệnh yarn để cài đặt các thư viện phụ thuộc. Khi quá trình cài đặt xong bạn sẽ thấy thư mục hello-world có cấu trúc như sau:

README.md
node_modules
public
vite.config.js
index.html
package.json
src
yarn.lock

Chạy dự án

Sau khi đã khởi tạo dự án thành công, chúng ta có thể chạy dự án thông qua câu lệnh:

yarn dev

Một server được khởi chạy và chúng ta sẽ nhận được log như sau:

  VITE v5.3.1  ready in 476 ms

  ➜  Local:   http://localhost:5173/
  ➜  Network: use --host to expose
  ➜  press h + enter to show help

Bạn hãy truy cập vào địa chỉ http://localhost:5173/ một giao diện như thế này sẽ hiện lên:

Chúc mừng bạn đã khởi tạo và chạy dự án thành công.

Tổng kết

Trong bài này chúng ta đã cùng nhau:

1. Cài đặt môi trường.
2. Khởi tạo dự án.
3. Chạy dự án và nhận được kết quả.

Cám ơn bạn đã quan tâm đến bài viết này. Để nhận được thêm các kiến thức bổ ích bạn có thể:

1. Đọc các bài viết của TechMaster trên facebook: https://www.facebook.com/techmastervn
2. Xem các video của TechMaster qua Youtube: https://www.youtube.com/@TechMasterVietnam nếu bạn thấy video/bài viết hay bạn có thể theo dõi kênh của TechMaster để nhận được thông báo về các video mới nhất nhé.
3. Chat với techmaster qua Discord: https://discord.gg/yQjRTFXb7a