Hướng dẫn cài đặt ReactJS: Cẩm nang cho người mới bắt đầu

Xin chào các bạnfuture nhà phát triển React! Tôi rất vui mừng được làm hướng dẫn viên của các bạn trong hành trình thú vị vào thế giới của ReactJS. Là một người đã dạy khoa học máy tính trong nhiều năm, tôi có thể đảm bảo với các bạn rằng việc học React giống như việc học骑自行车 – ban đầu có thể看起来 khó khăn, nhưng một khi bạn đã làm quen, bạn sẽ dễ dàng đi xe không cần suy nghĩ!

ReactJS - Installation

ReactJS là gì?

Trước khi chúng ta bắt đầu cài đặt, hãy nhanh chóng hiểu qua ReactJS là gì. React là thư viện JavaScript phổ biến để xây dựng giao diện người dùng, đặc biệt là cho các ứng dụng trang đơn. Nó tập trung vào việc tạo ra các thành phần UI có thể tái sử dụng và quản lý trạng thái của riêng chúng, giúp dễ dàng hơn trong việc xây dựng các giao diện phức tạp.

Bây giờ, hãy bắt đầu và thiết lập React!

Toolchain: Bộ công cụ React của bạn

Khi làm việc với React, chúng ta sử dụng một bộ công cụ gọi là "toolchain." Hãy tưởng tượng nó như một chiếc dao瑞士军刀 của bạn – nó có tất cả những gì bạn cần để bắt đầu xây dựng các ứng dụng web tuyệt vời.

Các công cụ quan trọng trong toolchain của chúng ta

Công cụ	Mục đích
Node.js	Môi trường chạy JavaScript
npm (Node Package Manager)	Quản lý gói cho JavaScript
Babel	Biên dịch viên JavaScript
Webpack	Trình gói module
ESLint	Trình kiểm tra mã
Jest	Khung công tác kiểm thử

Đừng lo lắng nếu các thuật ngữ này听起来 như ngôn ngữ ngoài hành tinh bây giờ. Chúng ta sẽ khám phá từng cái một khi chúng ta tiếp tục!

Máy chủ tĩnh: Sân chơi địa phương của bạn

Trước khi chúng ta nhảy vào các thiết lập phức tạp, hãy bắt đầu với một điều gì đó đơn giản – một máy chủ tĩnh. Điều này sẽ cho phép chúng ta chạy ứng dụng React của mình locally trên máy tính.

Thiết lập một máy chủ tĩnh đơn giản

Đầu tiên, đảm bảo bạn đã cài đặt Node.js. Bạn có thể tải xuống từ nodejs.org.
Mở terminal hoặc command prompt và chạy:

npm install -g serve

Lệnh này cài đặt gói 'serve' trên toàn hệ thống của bạn.

Bây giờ, tạo một thư mục mới cho dự án của bạn:

mkdir my-react-app
cd my-react-app

Tạo một tệp HTML đơn giản tên là index.html:

<!DOCTYPE html>
<html>
<head>
<title>Ứng dụng React đầu tiên của tôi</title>
</head>
<body>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, React!</h1>,
document.getElementById('root')
);
</script>
</body>
</html>

Bây giờ, chạy lệnh serve:

serve

Voilà! Bạn nên thấy một thông báo cho biết ứng dụng của bạn đang được chạy ở đâu. Thường thì nó là http://localhost:5000. Mở URL này trong trình duyệt của bạn, và bạn sẽ thấy ứng dụng React đầu tiên của mình!

Biên dịch viên Babel: Dịch giả tương lai

Nhớ Babel từ toolchain của chúng ta không? Đã đến lúc gặp gỡ người dịch giả kỳ diệu này! Babel là một biên dịch viên JavaScript cho phép bạn sử dụng các tính năng JavaScript mới nhất ngay cả khi các trình duyệt không hỗ trợ chúng.

Tại sao chúng ta cần Babel?

Hãy tưởng tượng bạn đang viết một lá thư cho một người bạn nói một ngôn ngữ khác. Babel giống như một người dịch giả có thể ngay lập tức chuyển đổi lá thư của bạn thành ngôn ngữ của người bạn. Trong thế giới React, Babel dịch modern JavaScript và JSX (mở rộng cú pháp của React) thành phiên bản JavaScript mà tất cả các trình duyệt đều có thể hiểu.

Sử dụng Babel trong dự án của chúng ta

Chúng ta đã thực sự bao gồm Babel trong tệp HTML đơn giản của mình ở trên. Hãy phân tích phần đó:

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
<script type="text/babel">
// Mã React của bạn ở đây
</script>

Dòng đầu tiên bao gồm thư viện Babel standalone. Dòng thứ hai cho biết Babel biên dịch mã bên trong thẻ script.

Bộ công cụ Create React App: Giải pháp tất cả trong một

Bây giờ chúng ta đã thử nghiệm với React, hãy nhảy vào với bộ công cụ Create React App. Đây là một môi trường học tập và phát triển phong phú cho việc học và xây dựng các ứng dụng trang đơn React mới.

Thiết lập Create React App

Mở terminal và chạy:

npx create-react-app my-app

Khi hoàn tất, di chuyển vào ứng dụng mới của bạn:

cd my-app

Khởi động máy chủ phát triển:

npm start

Ứng dụng React mới của bạn nên tự động mở trong trình duyệt của bạn, thường là http://localhost:3000.

Điều gì bên trong?

Create React App thiết lập một môi trường phát triển hoàn chỉnh. Hãy xem xét những gì chúng ta nhận được:

Tính năng	Mô tả
React	Thư viện cốt lõi của React
webpack	Gói mã và tài sản của bạn
Babel	Biên dịch modern JavaScript
ESLint	Kiểm tra mã của bạn cho lỗi
Jest	Cho phép bạn viết các bài kiểm tra
Hot Reloading	Xem thay đổi của bạn ngay lập tức trong trình duyệt

Thành phần đầu tiên của bạn

Hãy tạo một thành phần React đơn giản. Mở src/App.js và thay thế nội dung của nó bằng:

import React from 'react';

function App() {
return (
<div>
<h1>Chào mừng đến với ứng dụng React của tôi</h1>
<p>Đây là thành phần đầu tiên của tôi!</p>
</div>
);
}

export default App;

Lưu tệp và kiểm tra trình duyệt của bạn. Bạn nên thấy thành phần mới của mình được hiển thị!

Kết luận

Chúc mừng! Bạn đã chính thức bước những bước đầu tiên vào thế giới thú vị của phát triển React. Chúng ta đã bao gồm rất nhiều nội dung – từ việc thiết lập một máy chủ tĩnh đơn giản đến việc sử dụng bộ công cụ mạnh mẽ Create React App.

Nhớ rằng, học React là một hành trình. Đừng lo lắng nếu mọi thứ không ngay lập tức clicked. Hãy tiếp tục thực hành, tiếp tục xây dựng, và quan trọng nhất, hãy vui vẻ!

Trong bài học tiếp theo, chúng ta sẽ đi sâu hơn vào các thành phần React và bắt đầu xây dựng các ứng dụng phức tạp hơn. Đến那时, chúc các bạn viết mã vui vẻ!

Credits: Image by storyset