Xây dựng app to-do-list đơn giản bằng React

React là gì?

React là một thư viện Javascript nguồn mở .Để xây dựng giao diện người dùng do các nhà phát triển Facebook phát triển và duy trì.

Tại sao React phổ biến

React đã giới thiệu một số tính năng tuyệt vời khiến nó được chấp nhận trên toàn cầu. Một số trong số chúng được đề cập dưới đây:

• Tính mô-đun và khả năng tái sử dụng: Ứng dụng React có thể được xây dựng độc lập trong các mô-đun và cùng một đoạn code có thể được sử dụng lại để phát triển thêm, nâng cao tính dễ dàng và thiết kế hướng đối tượng.

• Virtual DOM: Virtual DOM (Document Object Model) là tính năng chính chứa một thuật toán điều chỉnh bộ nhớ giúp React tạo ra representation của một trang web trong bộ nhớ ảo.
• Cùng với đó, bất cứ khi nào thay đổi được thực hiện đối với các state hoặc props, React sẽ kiểm tra những thay đổi đó và chỉ hiển thị các phần tử đã thay đổi, thay vì hiển thị toàn bộ tài liệu.

• JSX (JavaScript XML): Nó là một phần mở rộng cú pháp (kết hợp giữa HTML và JavaScript) mô tả giao diện người dùng ứng dụng web hoặc ứng dụng di động.

• Khả năng tương thích: React độc lập với phần còn lại của ứng dụng. Ví dụ: nếu bạn muốn sử dụng React và tích hợp cơ sở dữ liệu phụ trợ với MongoDB hoặc bất kỳ framework nào khác, bạn có thể dễ dàng làm như vậy.

Bắt đầu với React

Quá trình cài đặt

Làm theo hướng dẫn về Thiết lập môi trường ReactJS được cung cấp tại đây

Sau khi cài đặt xong, hãy làm theo các bước sau

Bước 1: Cài đặt package create-react-app

sudo npm install -g create-react-app(for linux)
npm install -g create-react-app(for windows)

Bước 2: Tạo app react cho chính bạn

sudo create-react-app tên-app-của-bạn(for linux)
create-react-app tên-app-của-bạn(for windows)

Điều này tạo ra ứng dụng react, với tất cả các function cần thiết mà bạn cần. Đã được tích hợp sẵn trong ứng dụng với tên-app-của-bạn

Khi quá trình xử lý hoàn tất, bạn sẽ có thể thấy như sau

Bước 3: Đi đến thư mục tên-app-của-bạn

cd tên-app-của-bạn

Bước 4: Start bằng npm và kiểm tra xem app có hoạt động không

npm start

Bạn thấy kết quả sau trong terminal

Là trang localhost hiển thị như sau

Xin chúc mừng, bạn đã bắt đầu và tạo app react đầu tiên của mình.

Bây giờ, hãy chuyển sang xây dựng App To-Do

App To-Do React

Sau khi bạn đã khởi động app, hãy tiếp tục và mở app trong trình soạn thảo văn bản của bạn. Điều đầu tiên bạn nên xem là cấu trúc tệp. Create-React-App tên-app-của-bạn đã cài đặt một số tệp cho bạn và tổ chức một số tệp trong số chúng thành các thư mục như hình dưới đây.

Các thư mục bạn cần làm việc là thư mục src và thư mục public.

Thay thế nội dung của các tệp hiện có trên hệ thống của bạn bằng các tệp được phân tách từ kho GitHub của Project To-Do tại đây

Component

1. Package.json: Đây là tệp thực thi chính chứa tất cả thông tin ứng dụng của bạn, các dependency, các tập lệnh đã cài đặt, v.v. Không app nào có thể được thực thi nếu không có tệp này.

2. Public -> index.html: Điều này chỉ đơn giản là để xác định giao diện app của bạn với tham chiếu đến cả kiểu (style.css) và xử lý (index.js). Ngoài index.html, chỉ cần tệp manifest .json trong thư mục chung.

Lưu ý div với id là “root”. Dưới div này, tất cả nội dung của ứng dụng react của bạn sẽ được xuất ra. Bạn không cần phải thay đổi điều đó mà chỉ cần biết vị trí dữ liệu sẽ được đặt trong tệp.

3. Src -> index.js: Ở đây, chúng ta đang import React và ReactDOM. Chúng ta cũng đang render mọi thứ về phần tử ‘root’. Bạn cũng không cần phải chạm hoặc thay đổi tệp này, nhưng chỉ cần biết rằng đây là cách cấu trúc của tệp.

4. Src -> styling files( style.css, index.css): Các tệp này để tùy chỉnh style để làm cho giao diện người dùng trông đẹp. Hãy tùy chỉnh nó theo sở thích của bạn.

Như đã đề cập, React có một khả năng tuyệt vời để mô-đun hóa code trong các component riêng biệt. Mặc dù bạn có thể tạo tất cả các component của mình trong một tệp App.js duy nhất nhưng để tránh App.js dài và để viết clean code, bạn nên tạo một thư mục component và giữ các tệp js riêng biệt cho từng component bạn cần.

5. Src -> App.js: Đây là tệp xử lý chính. Chúng ta import tất cả các class cần thiết và các mô-đun thấp hơn tại đây.

Giải thích

• Class App extends Components:  syntax này cũng sẽ được sử dụng trong mỗi component khác của chúng ta . Về cơ bản, điều này nói lên rằng bất kỳ attribute(thuộc tính) nào có trong React.Component, sẽ được mở rộng (về khả năng truy cập và sử dụng) thông qua App Class
• Constructor():  Phương thức đầu tiên chúng ta gọi sau khi mở rộng component là phương thức khởi tạo. constructor cho một component React được gọi trước khi nó được mout. Khi triển khai constructor cho lớp con React.Component, bạn nên gọi super (props) trước bất kỳ câu lệnh nào khác. Nếu không, this.props sẽ không được xác định trong constructor, điều này có thể dẫn đến lỗi.
• handleChange():Như tên đã nói (Hãy nhớ: đặt tên là 90% của chương trình), đây là một phương pháp được sử dụng để xác định cách App sẽ thực hiện bất kỳ thay đổi state nào (đã chọn / bỏ chọn các tác vụ trong trường hợp này).

Render là gì

• render(): hiểu render như là hàm main () của chương trình bình thường của bạn. Tệp này là thi hành và chịu trách nhiệm chính về việc thực thi app. Hàm này PHẢI trả về một thực thể duy nhất (div, nav, v.v.)

Trong lần return này, bạn sẽ thấy những gì trông giống như HTML. Đây được gọi là JSX, React chuyển đổi thành Javascript khi được render. Đây giống như framework HTML của chúng ta, nơi chúng ta yêu cầu các component khác nhau render. Tất cả những gì chúng ta cần làm ở đây là đặt các component khác nhau vào thẻ self-closing(tự đóng) và chúng ta đã hoàn tất.

• Export default: Nó cho phép tệp được import ở bất kỳ nơi nào khác (trong trường hợp này là index.js)

6. Src -> TodoItem.js . Tệp này được chuẩn bị dưới dạng mô-đun thấp hơn của App.js. Để xác định component của một mục cụ thể trong to-do-list

7. Src -> todosData.js: Tệp này lại được tôi tạo dưới dạng tệp data. Và nếu phải thêm / xóa một công việc cụ thể khỏi công việc cần làm của mình, cần hard code nó trong file dữ liệu (kể từ bây giờ).

Khi bạn đã hoàn tất việc chỉnh sửa và hiểu các tệp, hãy làm theo Bước 3 và Bước 4 của hướng dẫn cài đặt ở trên và bạn sẽ có thể thấy ứng dụng của mình đang chạy ở localhost.

Kết luận

Qua bài viết, bạn đã xây dựng thành công app to-do-list bằng React. Qua đó hiểu rõ cơ chế hoạt động, tận dụng ưu điểm để xây dựng app hoàn thiện.

Tham khảo thêm bài viết về React tại đây: Cách lưu trữ app React với Github miễn phí