images
27/04/2021 07:45 am

ReactJS Components

Nguồn: suu tam

Trong hướng dẫn này, bạn sẽ học về định nghĩa cũng như cách tạo các ReactJS Components

1. Component là gì?

Một Component là thành phần cốt lõi trong quá trình xây dựng một ứng dụng React. Một ứng dụng React có thể xem như là một Component Tree – bao gồm một Component gốc và nhiều Component con lồng nhau.

Component giống như các hàm JavaScript, chúng lấy các input (được gọi là Props) và cần return một đoạn mã JSX để render thành giao diện trên màn hình. Chúng ta cũng có thể sử dụng nhiều đoạn JSX trong một Component. Các biến và điều kiện phải nằm bên trong phương thức Render.

Khi tạo một thành phần React, tên của thành phần phải bắt đầu bằng chữ hoa.

2. Các loại Components

React có 2 loại components

- Class Components

- Functional Components


Class Components


Bây giờ chúng ta cùng tạo ra một Component theo Class.


Để tổ chức đúng cấu trúc của ứng dụng, chúng ta sẽ tạo một thư mục có tên là Components bên trong thư mục src.


Và tất cả Components sẽ được đặt bên trong thư mục này.


Bây giờ hãy nhấp chuột phải vào thư mục Component và tạo một tệp mới, đặt tên là Demo.js.


Bên trong Demo.js này, chúng ta sẽ tạo một Class Component. Đối với điều này, chúng ta cần làm theo các bước sau:


i) Đầu tiên, bạn cần phải import React Package từ React Library


ii) Bây giờ, Tạo một Class và đặt tên bất kỳ cho nó, Class này sẽ kế thừa giao thức Component. Và bây giờ hãy tạo một phương thức render () trong lớp này.

Bất cứ thứ gì bạn muốn hiển thị trên Component của mình, bạn cần phải viết chúng bên trong phương thức render () này.


iii) Bước cuối cùng là export Demo Component.

Demo.js

Vì vậy, đây là cách bạn có thể tạo một Component đơn giản bằng cú pháp Class. Bây giờ chúng ta cũng cần hiển thị Demo Component này trên trình duyệt của mình. Đối với điều đó, chúng tôi phải import / call Demo Component này trên App.js, vì App.js là thành phần duy nhất sẽ được hiển thị khi chúng tôi chạy ứng dụng của mình.


Vì vậy, hãy mở tệp App.js và viết một câu lệnh dưới đây:



Lưu ý rằng không nhất thiết phải có tên “Demo” trong câu lệnh import này, bạn có thể cung cấp bất kỳ tên nào. Và gọi một <Demo> </Demo> component bên trong phương thức Return.


App.js


Và bạn có thể thấy “Hello World” trên trình duyệt của mình.



Ngoài ra còn có một cách khác để export Demo Component này. Chúng ta cũng có thể viết export dưới dạng một câu lệnh nội tuyến. Trong Demo.js, hãy xóa toàn bộ dòng "export default app;" và viết “export default " trước từ khóa "class".



Và điều này sẽ hoạt động giống như trước đây.


Demo.js


Vậy tại sao cần có "default" . 



Nhớ lại một chút, chúng ta có thể cung cấp bất kỳ tên nào để import Component này trong App.js. Từ khóa “default” này chịu trách nhiệm cho điều đó. Nếu chúng ta sử dụng default này với khai báo class của mình thì chúng ta có thể import Component này với bất kỳ tên nào trong App.js.



Ví dụ: import tên này với bất kỳ tên nào khác ngoại trừ 'Demo', như thế này,




Và bên trung phương thức return(),



App.js



Bây giờ hãy lưu cái này và chạy ứng dụng và bạn có thể thấy ‘Hello World’ giống như trước. Bây giờ nếu bạn xóa từ khóa ‘default’ này và chạy lại ứng dụng này thì bạn có thể thấy nó đang báo lỗi cho chúng ta.



Vì vậy, để import một Component không có từ khóa default này, chúng ta cần sử dụng dấu ngoặc nhọn {} trong câu lệnh import. Bên trong dấu ngoặc nhọn này, chúng ta phải viết những gì chúng ta import từ Demo.js.



Và bạn có thể thấy “Hello World” như trước.


Functional Component


Bây giờ chúng ta hãy tạo một Component khác sẽ là Functional Component.


Tạo một tệp mới dưới dạng Demo1.js bên trong thư mục component. Bây giờ bên trong Demo1.js này, trước tiên chúng ta cần import React Package



Bây giờ, hãy tạo một phương thức Demo1 bằng cách sử dụng từ khóa function như bên dưới và trả lại một số đoạn HTML để hiển thị trên trình duyệt.



Và bây giờ hãy import Demo1 Component




(Lưu ý: hoạt động của từ khóa ‘default’ giống nhau đối với cả hai loại Component)


Bây giờ trên App.js, chúng ta cần import Demo1 component mới được tạo này.



Bây giờ chạy ứng dụng. Bạn có thể thấy "Hello from function component".



Bây giờ, hãy xem cách chúng ta có thể tạo Functional component bằng 2 cách khác nhau.


Vì vậy, tổng cộng, chúng ta đang có 3 cách để tạo một Functional component và chúng ta vừa thực hiện nó theo một cách. Bây giờ, cách thứ hai là sử dụng cú pháp ES6 (ECMAScript 6) để tạo một functional component.


Đối với cách này, chúng ta phải sử dụng hàm mũi tên như sau:



Demo1.js


Bây giờ hãy lưu và kiểm tra trình duyệt, bạn có thể thấy nó đang hoạt động giống như trước.


Chúng ta hãy xem cách thứ ba để tạo một functional component. Ở đây chúng ta cũng sẽ sử dụng ES6 nhưng sẽ sửa đổi chức năng mũi tên.



Demo1.js


Bạn có thể kiểm tra trình duyệt của mình ngay bây giờ và nó đang hiển thị văn bản giống như trước.


Vậy là chúng ta đã hoàn thành xong cách tạo các loại component.


Lựa chọn loại Component

Trái ngược với Class Component, Functional Component trước đây vốn không thể làm những thứ phức tạp như làm việc quản lí với state. Bởi vậy nên Class Component thường được sử dụng khi component có thay đổi dữ liệu trong khi hoạt động, trong khi Functional Component nhận chúng thông qua props, hầu như không thay đổi.

Credit to Lê Huy Hoàng.

Mời các bạn đọc thêm bài Giới thiệu về ReactJS.


- Tech Zone -


Thư giãn chút nào!!!

Bài viết liên quan