1.2. Cài đặt môi trường phát triển
Để cài đặt môi trường phát triển React.js có nhiều cách. Trong phần bài học này, chúng ta sẽ tìm hiểu 2 cách thông dụng để có thể cài đặt và khởi tạo ứng dụng React
1. Cài đặt React trực tiếp bằng link CDN
Thay vì chúng ta phải tải về và cài đặt các thư viện, môi trường liên quan, chúng ta có thể sử dụng link CDN để nhúng trực tiếp vào thẻ <script/>
Tạo file index.html như mẫu bên dưới:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>React CDN Example</title>
<!-- React -->
<script src="https://unpkg.com/react@17/umd/react.production.min.js" crossorigin></script>
<!-- React DOM -->
<script src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js" crossorigin></script>
<!-- Babel (cho phép sử dụng JSX trong script tag) -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
// Example React code
ReactDOM.render(
<h1>Hello, world!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>Chạy file index.html và xem kết quả.
Lưu ý: Bạn có thể thay đổi phiên bản của React và ReactDOM bằng cách thay đổi số phiên bản trong URL nếu cần. Phiên bản hiện tại sử dụng ở đây là
17, nhưng bạn có thể kiểm tra phiên bản mới nhất trên unpkg.
2. Cài đặt React bằng lệnh
1. Cài đặt node.js và npm
Để phát triển ứng dụng React, yêu cầu cần phải có môi trường Node.js. Để cài đặt node.js, bạn truy cập nodejs.org để tải và cài đặt Node.js. (Cách cài đặt như cài một chương trình thông thường trên máy tính)
Để kiểm tra cài đặt thành công, bạn có thể sử dụng Terminal và chạy lệnh sau:
node -v2. Cài đặt npm và npx
Hiện tại ở các phiên bản mới của Node.js, khi cài đặt thành công node.js sẽ có npm và npx đi kèm.
npm (Node Package Manager): Là một công cụ quản lý các gói (packages) JavaScript. Bạn có thể sử dụng npm để cài đặt, cập nhật, và quản lý các gói thư viện và công cụ cần thiết cho dự án của bạn.
npx (Node Package Runner): Là một công cụ đi kèm với npm, cho phép bạn chạy các gói node đã cài đặt mà không cần thêm chúng vào global scope. Điều này rất hữu ích khi bạn muốn chạy một lệnh từ một gói mà không cần phải cài đặt nó toàn cục.
Để kiểm tra cài đặt thành công, bạn sử dụng Terminal và chạy lệnh sau:
npm -v
npx -vOutput:
6.14.13 # Phiên bản npm
6.14.13 # Phiên bản npx (cùng phiên bản với npm)Ở phần tiếp theo, chúng ta sẽ học cách sử dụng các lệnh liên quan để tạo ra ứng dụng React.
Last updated