Giới thiệu mở đầu:
Trong bài viết này sẽ giải thích về cách cài đặt thư viện React và các công cụ liên quan trên máy tính của bạn. Trước khi chuyển sang cài đặt, hãy xác minh tiên quyết trước. React cung cấp các công cụ CLI để giúp nhà phát triển tạo ra, phát triển và triển khai ứng dụng web dựa trên React nhanh chóng. Các công cụ CLI React phụ thuộc vào Node.js và phải được cài đặt trên hệ thống của bạn.
Hy vọng rằng bạn đã cài đặt Node.js trên máy tính của mình. Chúng ta có thể kiểm tra bằng cách sử dụng lệnh dưới đây:
node --version
Với lệnh này, bạn có thể xem phiên bản của Node.js bạn đã cài đặt. Nó được hiển thị như sau đây đối với tôi:
v14.2.1
Nếu Node.js chưa được cài đặt, bạn có thể tải xuống và cài đặt bằng cách truy cập vào https://nodejs.org/en/download
Công cụ phát triển (Toolchain):
Để phát triển các tính năng nhẹ như xác nhận biểu mẫu, hộp thoại mô hình, vv, thư viện React có thể được bao gồm trực tiếp vào ứng dụng web thông qua mạng phân phối nội dung (CDN). Điều này tương tự như sử dụng thư viện jQuery trong một ứng dụng web. Đối với ứng dụng trung bình đến lớn, nên viết ứng dụng dưới dạng nhiều tệp và sau đó sử dụng trình liên kết như webpack, parcel, rollup, vv, để biên dịch và liên kết ứng dụng trước khi triển khai mã.
Công cụ phát triển React giúp tạo, xây dựng, chạy và triển khai ứng dụng React. Công cụ phát triển React cung cấp một mẫu dự án khởi động với tất cả các mã cần thiết để khởi động ứng dụng.
Một số công cụ phát triển phổ biến để phát triển ứng dụng React là:
- Create React App - Công cụ phát triển hướng đến SPA
- Next.js - Công cụ phát triển hướng đến phía máy chủ
- Gatsby - Công cụ phát triển hướng đến nội dung tĩnh
Các công cụ cần thiết để phát triển ứng dụng React là −
- Dịch vụ serve, một máy chủ tĩnh để phục vụ ứng dụng của chúng ta trong quá trình phát triển
- Trình biên dịch Babel
- Create React App CLI
Hãy tìm hiểu cách cài đặt các công cụ cơ bản trên và cách sử dụng chúng trong bài viết này.
Dịch vụ máy chủ tĩnh serve:
The serve là một máy chủ web nhẹ. Nó phục vụ các trang web tĩnh và ứng dụng trang đơn. Nó tải nhanh và tiêu thụ bộ nhớ tối thiểu. Nó có thể được sử dụng để phục vụ một ứng dụng React. Hãy cài đặt công cụ này bằng trình quản lý gói npm trên hệ thống của chúng ta.
npm install serve -g
Chúng ta sẽ tạo ra một trang web tĩnh đơn giản và phục vụ ứng dụng bằng dịch vụ serve. Hãy mở cửa sổ dòng lệnh và đi đến thư mục làm việc của mình.
cd /go/to/your/workspace
Tạo một thư mục mới có tên "static_site" và thay đổi thư mục hiện tại sang thư mục mới được tạo.
mkdir static_site
cd static_site
Tiếp theo, tạo một trang web đơn giản bên trong thư mục bằng cách sử dụng trình chỉnh sửa HTML yêu thích của bạn.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Static website</title>
</head>
<body>
<div><h1>Hello!</h1></div>
</body>
</html>Tiếp theo, chạy lệnh serve.
serve .
Nếu muốn phục vụ một tệp duy nhất, index.html thay vì toàn bộ thư mục, bạn có thể sử dụng lệnh sau.
serve ./index.html
Sau đó, mở trình duyệt và nhập địa chỉ http://localhost:5000 vào thanh địa chỉ và nhấn Enter. Ứng dụng serve sẽ phục vụ trang web của chúng ta sẽ hiện thị "Hello!".
Lệnh serve sẽ phục vụ ứng dụng bằng cách sử dụng cổng mặc định là 5000. Nếu cổng không khả dụng, lệnh serve sẽ chọn một cổng ngẫu nhiên và chỉ định nó.
Babel Compiler (Trình biên dịch Babel):
Babel là một trình biên dịch JavaScript, biên dịch nhiều biến thể (es2015, es6, vv.,) của JavaScript thành mã JavaScript chuẩn được hỗ trợ bởi tất cả các trình duyệt. React sử dụng JSX, một phần mở rộng của JavaScript để thiết kế mã giao diện người dùng. Babel được sử dụng để biên dịch mã JSX thành mã JavaScript. Để cài đặt Babel và React companion của nó, chạy lệnh sau:
npm install babel-cli@6 babel-preset-react-app@3 -g
Babel giúp chúng ta viết ứng dụng của mình bằng cú pháp JavaScript tiên tiến của thế hệ tiếp theo.
Create React App Toolchain(Tạo ứng dụng React Toolchain):
Create React App là một công cụ CLI hiện đại để tạo ứng dụng React trang đơn. Đây là công cụ tiêu chuẩn được hỗ trợ bởi cộng đồng React. Nó cũng xử lý trình biên dịch babel. Hãy cài đặt Create React App trên hệ thống cục bộ của chúng ta. Để cài đặt Create React App, chúng ta chạy lệnh sau:
npm install -g create-react-app
Lệnh này sẽ cài đặt Create React App trên hệ thống của chúng ta. Với Create React App, chúng ta có thể tạo các ứng dụng React trang đơn một cách dễ dàng và hiệu quả.
- Updating the Toolchain:
React Create App toolchain sử dụng gói react-scripts để xây dựng và chạy ứng dụng. Một khi chúng ta bắt đầu làm việc trên ứng dụng, chúng ta có thể cập nhật react-script lên phiên bản mới nhất bất cứ lúc nào bằng npm package manager.
npm install react-scripts@latest
- Lợi ích của việc sử dụng React toolchain là gì?
React toolchain mang lại nhiều lợi ích cho chúng ta. Một số lợi ích của việc sử dụng React toolchain là:
- Cung cấp cấu trúc chuẩn và định nghĩa trước cho ứng dụng.
- Có sẵn mẫu dự án cho các loại ứng dụng khác nhau.
- Bao gồm máy chủ web phát triển để dễ dàng phát triển và xem trước ứng dụng.
- Dễ dàng sử dụng các thành phần React bên thứ ba.
- Có thiết lập mặc định để thử nghiệm ứng dụng.
Điều này giúp cho việc phát triển ứng dụng React trở nên đơn giản và nhanh chóng hơn.
