Bài 1. Giới thiệu React
Nội dung bài học
I. React là gì?
- React là một thư viện JavaScript - một trong những thư viện phổ biến nhất, với hơn 100.000 sao trên GitHub.
- React không phải là một framwork (không giống như Angular, có nhiều tùy chọn hơn).
- React là một dự án mã nguồn mở do Facebook tạo ra.
- React được sử dụng để xây dựng giao diện người dùng (UI) phía người dùng (front end).
- React là lớp View của ứng dụng MVC (Model View Controller).
II. Tại sao phải dùng React?
Có nhiều lý do để sử dụng React nhưng các lý do chính:
- React mềm dẻo: Bạn có thể sử dụng React trên nhiều nền tảng (platform) khác nhau để xây dựng giao diện người dùng chất lượng.
- React có trải nghiệm tuyệt vời dành cho nhà phát triển: Nhóm của bạn sẽ yêu thích React khi họ bắt đầu viết mã với nó. Sự phát triển nhanh (rapid development) và API nhỏ của React được kết hợp tạo ra trải nghiệm tuyệt vời dành cho nhà phát triển.
- React có hỗ trợ / tài nguyên của Facebook: React được sử dụng nhiều trong ứng dụng Facebook, các website và Instagram. Đó là lý do tại sao Facebook cam kết sâu sắc với nó. Họ sử dụng hơn 50 nghìn thành phần React trong môi trường sản xuất của họ. Bốn cộng tác viên React hàng đầu trên GitHub là nhân viên Facebook toàn thời gian.
- React cũng có sự hỗ trợ của cộng đồng rộng lớn: Kể từ năm 2015, mức độ phổ biến của React đã tăng lên đều đặn. Nó có một cộng đồng lớn đang hoạt động và Kho lưu trữ GitHub (Github Repository) của nó có hơn 164k Sao. Đây là một trong 5 Kho lưu trữ hàng đầu trên GitHub.
- React có hiệu suất tuyệt vời: Mô hình lập trình đơn giản của React cho phép nó tự động thay đổi trạng thái khi dữ liệu được cập nhật. Điều này xảy ra trong bộ nhớ, vì vậy nó rất nhanh. Kích thước thư viện của React cũng rất nhỏ. Nó nhỏ hơn 6kb (nhỏ hơn 3kb khi được giải nén). Điều này nhỏ hơn đáng kể so với các đối thủ cạnh tranh của nó.
- React dễ kiểm thử (Testing): Thiết kế của React rất thân thiện với người dùng để kiểm thử.
III. Nội dung tiên quyết và cài đặt
Để bắt đầu với React chúng ta cần trang bị kiến thức cơ bản:
Để tạo các ứng dụng React chúng ta cần môi trường làm việc (IDE). Bài này sẽ trình bày cách sử dụng hai môi trường là Visual Studio Code và CodeSandbox.
Tải và cài Node.js và npm (Node.js package manager) tại nodejs.org, nếu đang dùng hệ điều hành Windows, chọn Windows Installer tại mục LTS.
Tải và cài Visual Studio Code tại code.visualstudio.com
Sau khi cài đặt thành công, mở Visual Studio Code và vào mục Terminal > New Terminal.
Truy cập CodeSandbox và đăng nhập bằng tài Gmail hay Github.
Tại mục Recent chọn New sandbox, sau đó chọn React từ cửa sổ Start from a template.
IV. Tạo ứng dụng React đầu tiên
Thư mục mặc định của Terminal thông thường là C:\Users\Admin>
Có thể di chuyển đến thư mục khác dùng lệnh cd. Ví dụ chúng ta sẽ di chuyển đến thư mục ReactProject trong ổ đĩa D, lệnh như sau:
- C:\Users\Admin> cd d: -> di chuyển đến ổ D
- D:\> cd ReactProject -> di chuyển đến thư mục ReactProject
Kế tiếp là cài đặt môi trường React, bài viết này dùng create-react-app, bằng cách dùng gói npm:
D:\ReactProject> npm install -g create-react-app
Sau đó tiến hành tạo ứng dụng đầu tiên, ví dụ tên myfirstreact
D:\ReactProject> npx create-react-app myfirstreact
Nếu thành công:
Sau khi tạo ứng dụng thành công sẽ xuất hiện thư mục tên myfirstreact trong D:\ReactProject. Chúng ta di chuyển đến thư mục này
D:\ReactProject> cd myfirstreact
Cuối cùng là thực thi ứng dụng dùng lệnh start của gói npm:
D:\ReactProject\myfirstreact> npm start
Quan sát Terminal xuất hiện:
Và chờ cho đến khi:
Cửa sổ trình duyệt sẽ mở ứng dụng React với url http://localhost:3000/
Đóng trình duyệt.
Sau khi chọn Start from a template chúng ta sẽ đến môi trường phát triển React trên CodeSandbox:
Chúng ta có thể thay đổi nội dung từ h1, h2 trong App.js để xem sự thay đổi. Nhấn nút Open SandBox để đến tài khoản cá nhân trên CodeSandbox và bắt đầu tạo ứng dụng React.
V. Cấu trúc một ứng dụng React
Bây giờ chúng ta sẽ lướt qua cấu trúc một ứng dụng React sẽ bao gồm những thành phần cơ bản nào bằng cách vào File > Open Folder... và chọn myfirstreact trong ổ D. Cấu trúc thư mục myfirstreact:
Thư mục node_modules chứa các thư việc dùng trong ứng dụng React và chúng ta không can thiệp vào
Thư mục kế tiếp là thư mục public chứa các thành phần như các icon, tập tin HTML, hình ảnh, tập tin json,...
Tập tin index.html là tập tin mặc định khi chúng ta tạo một ứng dụng React và React sẽ kết xuất nội dung đến trình duyệt thông qua tập tin này. Nếu muốn, chúng ta có thể tạo các tập tin HTML tùy ý và gọi khi thực thi React.
Tham khảo thêm về thư mục public tại using-the-public-folder
Thư mục src chứa các thành phần quan trọng của một ứng dụng React bao gồm App.css, App.js và App.test.js, index.js, index.css,...
Các thành phần này quyết định giao diện của ứng dụng React như khi chúng ta thực thi ở trên
Mở App.js, nội dung sẽ trông như
Cấu trúc dự án React tổ chức trong CodeSandbox khá tương đồng với cách tổ chức trên Visual Studio Code.
VI. Thay đổi nội dung ứng dụng React
Trong App.js, thay nội dung
<div className="App">
...
</div>
Bằng nội dung:
<div className="App">
<h1>Xin chào các bạn đến với React!</h1>
</div>
Lưu và thực thi lại ứng dụng
Mặc dù chúng ta vừa thay đổi nội dung trong App.js nhưng cái quyết định giao diện trang web mà chúng ta cần quan tâm là các tập tin index.html (thư mục public) và index.js (thư mục src). App.js định nghĩa thành phần App mà trong React gọi là component và App được gọi trong tập tin index.js trước khi được kết xuất đến trình duyệt web thông qua tập tin index.html. Chi tiết về component và cách sử dụng sẽ được tìm hiểu trong các bài sau.
Bây giờ chúng ta sẽ thực hiện thay đổi từ các tập tin index.html và index.js bằng cách mở hai tập tin trên và thay đổi nội dung như sau:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Ứng dụng React đầu tiên!</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
index.js
import React from 'react';
import ReactDOM from 'react-dom';
const myfirstelement =<h1>Xin chào đến với React!</h1>;
ReactDOM.render(myfirstelement, document.getElementById('root'));
Thực thi lại ứng dụng
Ý nghĩa các dòng mã sẽ được tìm hiểu trong các bài kế tiếp. Tuy nhiên, khi làm việc với React chúng ta cần sử dụng các hàm từ hai thư viện quan trọng là React và ReactDOM nên chúng ta cần thêm hai mô-đun sau đến tập tin js:
import React from 'react';
import ReactDOM from 'react-dom';
Chú ý: Hàm ReactDOM không còn được hỗ trợ trong phiên bản React 18 trở lên. Để chạy mã trên, bạn cần cập nhật phiên bản React đến phiên bản thấp hơn (ví dụ 17.x.x). Trong CodeSandbox, tìm đến mục Dependencies và tìm đến react và react-dom để chọn lại phiên bản.