=
=

Bài 1. Giới thiệu React

Nội dung bài học

  1. React là gì?
  2. Tại sao phải dùng React?
  3. Nội dung tiên quyết và cài đặt
  4. Tạo ứng dụng React đầu tiên
  5. Cấu trúc một ứng dụng React
  6. Thay đổi nội dung ứng dụng React

I. React là gì?

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:

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ả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.

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:

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.

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ư

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';