Các thành phần tùy chỉnh là các phần chức năng độc lập mà bạn có thể sử dụng lại trong mã của mình và là nền tảng của tất cả các ứng dụng được xây dựng trên React…

< font style = "vertical-align: inherit;"> Bạn đang xem: cách tạo các thành phần trong react

Tác giả đã chọn Creative Commons để nhận khoản đóng góp như một phần của chương trình Viết cho DO donate .

Giới thiệu

Trong hướng dẫn này, bạn sẽ học cách tạo các thành phần tùy chỉnh trong React . Các thành phần là các phần chức năng độc lập mà bạn có thể sử dụng lại trong ứng dụng của mình và là nền tảng của tất cả các ứng dụng React. Thông thường, chúng có thể là các hàm JavaScript lớp đơn giản, nhưng bạn sử dụng chúng như thể chúng là các phần tử HTML được tùy chỉnh. Các nút, menu và bất kỳ nội dung trang front-end nào khác đều có thể được tạo dưới dạng các thành phần. Các thành phần cũng có thể chứa thông tin trạng thái và đánh dấu hiển thị.

Sau khi học cách tạo các thành phần trong React, bạn sẽ có thể chia các ứng dụng phức tạp thành các phần nhỏ để dễ xây dựng và bảo trì hơn.

Trong hướng dẫn này, bạn sẽ tạo một danh sách các biểu tượng cảm xúc sẽ hiển thị tên của chúng khi nhấp vào. Biểu tượng cảm xúc sẽ được tạo bằng cách sử dụng một thành phần tùy chỉnh và sẽ được gọi từ bên trong một thành phần tùy chỉnh khác. Đến cuối hướng dẫn này, bạn sẽ tạo các thành phần tùy chỉnh bằng cách sử dụng cả các lớp JavaScript và các hàm JavaScript, đồng thời bạn sẽ hiểu cách tách mã hiện có thành các phần có thể sử dụng lại và cách lưu trữ các thành phần trong cấu trúc tệp có thể đọc được.

Điều kiện tiên quyết

Bước 1 – Thiết lập Dự án React

Trong bước này, bạn sẽ tạo cơ sở cho dự án của mình bằng cách sử dụng Tạo ứng dụng React. Bạn cũng sẽ sửa đổi dự án mặc định để tạo dự án cơ sở của mình bằng cách ánh xạ qua danh sách biểu tượng cảm xúc và thêm một lượng nhỏ kiểu dáng.

Đầu tiên, hãy tạo một dự án mới. Mở một thiết bị đầu cuối, sau đó chạy lệnh sau:

  
  1. npx create-react-app tutorial-03-component

Khi việc này hoàn tất, hãy chuyển sang thư mục dự án:

  
  1. cd

    tutorial-03-component

Mở mã App.js trong trình soạn thảo văn bản:

  
  1. nano

    src / App.js

Tiếp theo, lấy mã mẫu được tạo bởi Tạo ứng dụng React, sau đó thay thế nội dung bằng mã React mới hiển thị danh sách các biểu tượng cảm xúc:

tutorial-03-component / src / App.js

  

nhập

React

từ

'phản ứng'

;

nhập

'./ App.css'

;

const

displayEmojiName

=

sự kiện

= & gt;

cảnh báo

(< / p> sự kiện

.

target

.

id

)

;

const

emojis

=

[

{

biểu tượng cảm xúc

:

'😀'

,

name

:

"khuôn mặt cười toe toét"

}

,

{

biểu tượng cảm xúc

:

'🎉'

,

tên

:

"party popper"

}

,

{

biểu tượng cảm xúc

:

'💃'

,

name

:

"phụ nữ khiêu vũ"

}

]

;

function

Ứng dụng

(

)

{

const

lời chào

=

"lời chào"

;

const

displayAction

=

false

;

trả về

(

& lt;

div className

=

"container"

& gt;

& lt;

h1 id

=

{

lời chào

}

& gt;

Xin chào

,

Thế giới

& lt;

/

h1

& gt;

{

displayAction

& amp; & amp;

& lt;

p

& gt;

Tôi

đang viết

JSX

& lt;

/

p

& gt;

}

& lt;

ul

& gt;

{

biểu tượng cảm xúc

.

bản đồ

(

biểu tượng cảm xúc

= & gt;

(

& lt;

li key

=

{

biểu tượng cảm xúc

.

name

}

& gt;

Nút

& lt;

onClick

=

{

displayEmojiName

}

& gt;

& lt;

span role

=

"img"

aria

-

label

=

{

biểu tượng cảm xúc

.

tên

}

id

=

{

biểu tượng cảm xúc

.

name

}

& gt;

{

biểu tượng cảm xúc

.

biểu tượng cảm xúc

}

& lt;

/

span

& gt;

Nút

& lt;

/

& gt;

& lt;

/

li

& gt;

)

)

}

& lt;

/

ul

& gt;

& lt;

/

div

& gt;

)

}

xuất

default

Ứng dụng

;

Mã này sử dụng cú pháp JSX để map () qua mảng emojis và liệt kê chúng dưới dạng & lt; li & gt; liệt kê các mục. Nó cũng đính kèm các sự kiện onClick để hiển thị dữ liệu biểu tượng cảm xúc trong trình duyệt. Để khám phá mã chi tiết hơn, hãy xem Cách tạo phần tử React với JSX , trong đó có giải thích chi tiết về JSX.

Lưu và đóng tệp. Bây giờ, bạn có thể xóa tệp logo.svg , vì nó là một phần của mẫu và bạn không tham chiếu đến nó nữa:

  
  1. rm

    src / logo.svg

Bây giờ, hãy cập nhật kiểu. Mở src / App.css :

  
  1. nano

    src / App.css

Thay thế nội dung bằng CSS sau để căn giữa các phần tử và điều chỉnh phông chữ:

tutorial-03-component / src / App.css

  

. container

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

Nút

{

font-size

:

2em

;

border

:

0

;

padding

:

0

;

background

:

none

;

con trỏ

:

pointer

;

}

ul

{

display

:

flex

;

padding

:

0

;

}

li

{

margin

:

0 20px

;

list-style

:

none

;

padding

:

0

;

}

Điều này sử dụng flex để căn giữa & lt; h1 & gt; chính và các phần tử danh sách. Nó cũng loại bỏ các kiểu nút mặc định và kiểu & lt; li & gt; để các biểu tượng cảm xúc xếp thành một hàng. Bạn có thể tìm thêm thông tin chi tiết tại Cách tạo phần tử React bằng JSX

Lưu và thoát khỏi tệp.

Mở một cửa sổ đầu cuối khác trong thư mục gốc của dự án của bạn. Bắt đầu dự án bằng lệnh sau:

  
  1. npm

    start

Sau khi chạy lệnh, bạn sẽ thấy dự án đang chạy trong trình duyệt web của mình tại http: // localhost: 3000 .

Để điều này chạy trong toàn bộ thời gian bạn đang làm việc trong dự án của mình. Mỗi lần bạn lưu dự án, trình duyệt sẽ tự động làm mới và hiển thị mã cập nhật nhất.

Bạn sẽ thấy trang dự án của mình với Hello, World và ba biểu tượng cảm xúc mà bạn đã liệt kê trong tệp App.js :

Trình duyệt có biểu tượng cảm xúc

Bây giờ bạn đã thiết lập mã của mình, bây giờ bạn có thể bắt đầu kết hợp các thành phần lại với nhau trong React

Bước 2 – Tạo một thành phần độc lập với các lớp React

Bây giờ, khi dự án của bạn đang chạy, bạn có thể bắt đầu tạo thành phần tùy chỉnh của mình. Trong bước này, bạn sẽ tạo một thành phần React độc lập bằng cách mở rộng lớp React Component cơ sở. Bạn sẽ tạo một lớp mới, thêm các phương thức và sử dụng chức năng kết xuất để hiển thị dữ liệu

Các thành phần React là các phần tử độc lập mà bạn có thể sử dụng lại trên toàn bộ trang. Bằng cách tạo các đoạn mã nhỏ, tập trung, bạn có thể di chuyển và sử dụng lại các đoạn mã khi ứng dụng của bạn phát triển. Chìa khóa ở đây là chúng khép kín và tập trung, cho phép bạn tách mã thành các phần hợp lý. Trên thực tế, bạn đã làm việc với các thành phần được phân tách một cách hợp lý: Tệp App.js là một thành phần chức năng, một thành phần mà bạn sẽ thấy thêm ở Bước 3.

Có hai loại thành phần tùy chỉnh: dựa trên lớp và chức năng. Thành phần đầu tiên bạn sẽ tạo là một thành phần dựa trên lớp. Bạn sẽ tạo một thành phần mới có tên là Chỉ dẫn giải thích hướng dẫn cho trình xem biểu tượng cảm xúc.

Lưu ý: Các thành phần dựa trên lớp từng là cách phổ biến nhất để tạo các thành phần React. Nhưng với sự ra đời của React Hooks , nhiều nhà phát triển và thư viện đang chuyển sang sử dụng các thành phần chức năng.

Mặc dù các thành phần chức năng hiện là tiêu chuẩn, nhưng bạn thường sẽ tìm thấy các thành phần lớp trong mã kế thừa. Bạn không cần sử dụng chúng, nhưng bạn cần biết cách nhận ra chúng. Họ cũng cung cấp một giới thiệu rõ ràng về nhiều khái niệm trong tương lai, chẳng hạn như quản lý nhà nước. Trong hướng dẫn này, bạn sẽ học cách tạo cả lớp và thành phần chức năng.

Để bắt đầu, hãy tạo một tệp mới. Theo quy ước, các tệp thành phần được viết hoa:

  
  1. chạm vào

    src / Hướng dẫn.js

Sau đó, mở tệp trong trình soạn thảo văn bản của bạn:

  
  1. nano

    src / Hướng dẫn.js

Đầu tiên, nhập React và lớp Component và xuất Chỉ dẫn với các dòng sau:

hướng dẫn-03-thành phần / src / Hướng dẫn.js

  

import

React

,

{

Thành phần

}

từ

'phản ứng'

;

xuất

default

class

Hướng dẫn

mở rộng

Thành phần

{

}

Nhập React sẽ chuyển đổi JSX. Thành phần là một lớp cơ sở mà bạn sẽ mở rộng để tạo thành phần của mình. Để mở rộng điều đó, bạn đã tạo một lớp có tên thành phần của bạn ( Chỉ dẫn ) và mở rộng Thành phần cơ sở với dòng export . Bạn cũng đang xuất lớp này làm lớp mặc định với các từ khóa export default khi bắt đầu khai báo lớp.

Tên lớp phải được viết hoa và phải khớp với tên của tệp. Điều này rất quan trọng khi sử dụng các công cụ gỡ lỗi, công cụ này sẽ hiển thị tên của thành phần. Nếu tên phù hợp với cấu trúc tệp, việc xác định thành phần có liên quan sẽ dễ dàng hơn.

Lớp cơ sở Thành phần một số phương thức mà bạn có thể sử dụng trong lớp tùy chỉnh của mình. Phương pháp quan trọng nhất và là phương pháp duy nhất bạn sẽ sử dụng trong hướng dẫn này là phương thức render () . Phương thức render () trả về mã JSX mà bạn muốn hiển thị trong trình duyệt.

Để bắt đầu, hãy thêm một chút giải thích về ứng dụng trong thẻ & lt; p & gt; :

hướng dẫn-03-thành phần / src / Hướng dẫn.js

  

import

React

,

{

Thành phần

}

từ

'phản ứng'

;

xuất

class

Hướng dẫn

mở rộng

Thành phần

{

kết xuất

(

)

{

trả về

(

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

)

}

}

Lưu và đóng tệp. Tại thời điểm này, vẫn không có thay đổi nào đối với trình duyệt của bạn. Đó là bởi vì bạn chưa sử dụng thành phần mới. Để sử dụng thành phần, bạn sẽ phải thêm nó vào một thành phần khác kết nối với thành phần gốc. Trong dự án này, & lt; App & gt; là thành phần gốc trong index.js . Để làm cho nó xuất hiện trong ứng dụng của bạn, bạn cần thêm vào thành phần & lt; App & gt; .

Mở src / App.js trong trình soạn thảo văn bản:

  
  1. nano

    src / App.js

Trước tiên, bạn cần nhập thành phần:

tutorial-03-component / src / App.js

  

nhập

React

từ

'phản ứng'

;

import

Hướng dẫn

từ

'./ Hướng dẫn'

;

nhập

'./ App.css'

;

...

xuất

default

Ứng dụng

;

Vì đây là cách nhập mặc định, bạn có thể nhập vào bất kỳ tên nào bạn muốn. Tốt nhất là giữ cho các tên nhất quán để dễ đọc — quá trình nhập phải khớp với tên thành phần, tên này phải khớp với tên tệp — nhưng quy tắc chắc chắn duy nhất là thành phần phải bắt đầu bằng một chữ cái viết hoa. Đó là cách React biết nó là một thành phần React .

Bây giờ bạn đã nhập thành phần, hãy thêm thành phần đó vào phần còn lại của mã như thể nó là một phần tử HTML tùy chỉnh:

tutorial-03-component / src / App.js

  

nhập

React

từ

'phản ứng'

;

nhập

Hướng dẫn

từ

'./ Hướng dẫn.js'

...

function

Ứng dụng

(

)

{

const

lời chào

=

"lời chào"

;

const

displayAction

=

false

;

trả về

(

& lt;

div className

=

"container"

& gt;

& lt;

h1 id

=

{

lời chào

}

& gt;

Xin chào

,

Thế giới

& lt;

/

h1

& gt;

{

displayAction

& amp; & amp;

& lt;

p

& gt;

Tôi

đang viết

JSX

& lt;

/

p

& gt;

}

& lt;

Hướng dẫn

/

& gt;

& lt;

ul

& gt;

{

biểu tượng cảm xúc

.

bản đồ

(

biểu tượng cảm xúc

= & gt;

(

& lt;

li key

=

{

biểu tượng cảm xúc

.

name

}

& gt;

Nút

& lt;

onClick

=

{

displayEmojiName

}

& gt;

& lt;

span role

=

"img"

aria

-

label

=

{

biểu tượng cảm xúc

.

tên

}

id

=

{

biểu tượng cảm xúc

.

name

}

& gt;

{

biểu tượng cảm xúc

.

biểu tượng cảm xúc

}

& lt;

/

span

& gt;

Nút

& lt;

/

& gt;

& lt;

/

li

& gt;

)

)

}

& lt;

/

ul

& gt;

& lt;

/

div

& gt;

)

}

xuất

default

Ứng dụng

;

Trong đoạn mã này, bạn đã bao bọc thành phần bằng các dấu ngoặc nhọn. Vì thành phần này không có bất kỳ thành phần nào nên có thể tự đóng bằng cách kết thúc bằng / & gt; .

Lưu tệp. Khi bạn làm như vậy, trang sẽ làm mới và bạn sẽ thấy thành phần mới.

Trình duyệt có văn bản hướng dẫn

Bây giờ bạn đã có một số văn bản, bạn có thể thêm hình ảnh. Tải xuống hình ảnh biểu tượng cảm xúc từ wikimedia và lưu vào thư mục src dưới dạng emoji.svg bằng lệnh sau:

  
  1. curl

    -o src / emoji.svg https://upload.wikimedia. org / wikipedia / commons / 3/33 / Twemoji_1f602.svg

curl đưa ra yêu cầu đối với URL và cờ -o cho phép bạn lưu tệp dưới dạng src / emoji .svg .

Tiếp theo, mở tệp thành phần của bạn:

  
  1. nano

    src / Hướng dẫn.js

Nhập biểu tượng cảm xúc và thêm nó vào thành phần tùy chỉnh của bạn bằng liên kết động:

hướng dẫn-03-thành phần / src / Hướng dẫn.js

  

import

React

,

{

Thành phần

}

từ

'phản ứng'

;

nhập

emoji

từ

'./ emoji.svg'

xuất

default

class

Hướng dẫn

mở rộng

Thành phần

{

kết xuất

(

)

{

trả về

(

& lt;

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

& gt;

)

}

}

Lưu ý rằng bạn cần bao gồm phần mở rộng tệp .svg khi nhập. Khi nhập, bạn đang nhập một đường dẫn động được tạo bởi webpack khi mã biên dịch. Để biết thêm thông tin, hãy tham khảo Cách thiết lập dự án React với Tạo ứng dụng React .

Bạn cũng cần bọc các thẻ & lt; img & gt; & lt; p & gt; bằng các thẻ trống để đảm bảo rằng bạn đang trả về một phần tử duy nhất.

Lưu tệp. Khi bạn tải lại, hình ảnh sẽ rất lớn so với phần còn lại của nội dung:

Cửa sổ trình duyệt với hình ảnh biểu tượng cảm xúc lớn

Để thu nhỏ hình ảnh, bạn cần thêm một số CSS và className vào thành phần tùy chỉnh của mình.

Đầu tiên, trong Guid.js , thay đổi các thẻ trống thành div và cung cấp cho nó một className trong số hướng dẫn :

hướng dẫn-03-thành phần / src / Hướng dẫn.js

  

import

React

,

{

Thành phần

}

từ

'phản ứng'

;

nhập

emoji

từ

'./ emoji.svg'

xuất

default

class

Hướng dẫn

mở rộng

Thành phần

{

kết xuất

(

)

{

trả về

(

& lt;

div className

=

"hướng dẫn"

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

div

& gt;

)

}

}

Lưu và đóng tệp. Tiếp theo, mở App.css :

  
  1. nano

    src / App.css

Tạo quy tắc cho .instructions công cụ chọn lớp :

tutorial-03-component / src / App.css

  

. container

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

...

. hướng dẫn

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

Khi bạn thêm kiểu display của flex , bạn đặt img p ở giữa với < span> flexbox . Bạn đã thay đổi hướng để mọi thứ thẳng hàng theo chiều dọc với flex-direction: column; . Dòng align-items: center; sẽ căn giữa các phần tử trên màn hình.

Bây giờ các phần tử của bạn đã được sắp xếp, bạn cần thay đổi kích thước hình ảnh. Cung cấp cho img bên trong div a width height của 100px .

tutorial-03-component / src / App.css

  

. container

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

... .instructions

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

. hướng dẫn img

{

width

:

100px

;

height

:

100px

;

}

Lưu và đóng tệp. Trình duyệt sẽ tải lại và bạn sẽ thấy hình ảnh nhỏ hơn nhiều:

Cửa sổ trình duyệt có hình ảnh nhỏ hơn

Tại thời điểm này, bạn đã tạo một thành phần tùy chỉnh độc lập và có thể sử dụng lại. Để xem nó có thể tái sử dụng như thế nào, hãy thêm phiên bản thứ hai vào App.js .

Mở App.js :

  
  1. nano

    src / App.js

Trong App.js , thêm phiên bản thứ hai của thành phần:

tutorial-03-component / src / App.js

 

nhập

React

từ

'react'

;

nhập

Hướng dẫn

từ

'./ Hướng dẫn.js'

...

function

Ứng dụng

(

)

{

const

lời chào

=

"lời chào"

;

const

displayAction

=

false

;

trả về

(

& lt;

div className

=

"container"

& gt;

& lt;

h1 id

=

{

lời chào

}

& gt;

Xin chào

,

Thế giới

& lt;

/

h1

& gt;

{

displayAction

& amp; & amp;

& lt;

p

& gt;

Tôi

đang viết

JSX

& lt;

/

p

& gt;

}

& lt;

Hướng dẫn

/

& gt;

& lt;

Hướng dẫn

/

& gt;

& lt;

ul

& gt;

{

biểu tượng cảm xúc

.

bản đồ

(

biểu tượng cảm xúc

= & gt;

(

& lt;

li key

=

{

biểu tượng cảm xúc

.

name

}

& gt;

Nút

& lt;

onClick

=

{

displayEmojiName

}

& gt;

& lt;

span role

=

"img"

aria

-

label

=

{

biểu tượng cảm xúc

.

tên

}

id

=

{

biểu tượng cảm xúc

.

name

}

& gt;

{

biểu tượng cảm xúc

.

biểu tượng cảm xúc

}

& lt;

/

span

& gt;

Nút

& lt;

/

& gt;

& lt;

/

li

& gt;

)

)

}

& lt;

/

ul

& gt;

& lt;

/

div

& gt;

)

}

xuất

default

Ứng dụng

;

Lưu tệp. Khi trình duyệt tải lại, bạn sẽ thấy thành phần này hai lần.

Trình duyệt có hai phiên bản của thành phần Hướng dẫn

Trong trường hợp này, bạn sẽ không muốn có hai trường hợp Hướng dẫn , nhưng bạn có thể thấy rằng thành phần có thể được tái sử dụng một cách hiệu quả. Khi bạn tạo các nút hoặc bảng tùy chỉnh, bạn có thể sẽ sử dụng chúng nhiều lần trên một trang, làm cho chúng trở nên hoàn hảo cho các thành phần tùy chỉnh.

Hiện tại, bạn có thể xóa thẻ hình ảnh bổ sung. Trong trình soạn thảo văn bản của bạn, hãy xóa & lt; Hướng dẫn / & gt; thứ hai và lưu tệp:

tutorial-03-component / src / App.js

  

nhập

React

từ

'phản ứng'

;

nhập

Hướng dẫn

từ

'./ Hướng dẫn.js'

...

function

Ứng dụng

(

)

{

const

lời chào

=

"lời chào"

;

const

displayAction

=

false

;

trả về

(

& lt;

div className

=

"container"

& gt;

& lt;

h1 id

=

{

lời chào

}

& gt;

Xin chào

,

Thế giới

& lt;

/

h1

& gt;

{

displayAction

& amp; & amp;

& lt;

p

& gt;

Tôi

đang viết

JSX

& lt;

/

p

& gt;

}

& lt;

Hướng dẫn

/

& gt;

& lt;

ul

& gt;

{

biểu tượng cảm xúc

.

bản đồ

(

biểu tượng cảm xúc

= & gt;

(

& lt;

li key

=

{

biểu tượng cảm xúc

.

name

}

& gt;

Nút

& lt;

onClick

=

{

displayEmojiName

}

& gt;

& lt;

span role

=

"img"

aria

-

label

=

{

biểu tượng cảm xúc

.

tên

}

id

=

{

biểu tượng cảm xúc

.

name

}

& gt;

{

biểu tượng cảm xúc

.

biểu tượng cảm xúc

}

& lt;

/

span

& gt;

Nút

& lt;

/

& gt;

& lt;

/

li

& gt;

)

)

}

& lt;

/

ul

& gt;

& lt;

/

div

& gt;

)

}

xuất

default

Ứng dụng

;

Giờ đây, bạn có một thành phần độc lập, có thể tái sử dụng mà bạn có thể thêm vào thành phần chính nhiều lần. Cấu trúc bạn hiện có hoạt động đối với một số thành phần nhỏ, nhưng có một vấn đề nhỏ. Tất cả các tệp được trộn với nhau. Hình ảnh cho & lt; Hướng dẫn & gt; nằm trong cùng thư mục với nội dung cho & lt; App & gt; . Bạn cũng đang trộn mã CSS cho & lt; App & gt; với CSS cho & lt; Hướng dẫn & gt; .

Trong bước tiếp theo, bạn sẽ tạo một cấu trúc tệp mang lại sự độc lập cho từng thành phần bằng cách nhóm chức năng, kiểu và sự phụ thuộc của chúng lại với nhau, giúp bạn có thể di chuyển chúng khi cần.

Bước 3 – Tạo cấu trúc tệp có thể đọc

Trong bước này, bạn sẽ tạo cấu trúc tệp để tổ chức các thành phần của mình và nội dung của chúng, chẳng hạn như hình ảnh, CSS và các tệp JavaScript khác. Bạn sẽ nhóm mã theo thành phần, không phải theo loại nội dung. Nói cách khác, bạn sẽ không có một thư mục riêng cho CSS, hình ảnh và JavaScript. Thay vào đó, bạn sẽ có một thư mục riêng cho từng thành phần sẽ chứa CSS, JavaScript và hình ảnh có liên quan. Trong cả hai trường hợp, bạn đang tách bạch các mối quan tâm .

Vì bạn có một thành phần độc lập, bạn cần cấu trúc tệp nhóm mã có liên quan. Hiện tại, mọi thứ đều nằm trong cùng một thư mục. Liệt kê các mục trong thư mục src của bạn:

  
  1. ls

    src /

Kết quả đầu ra sẽ cho thấy rằng mọi thứ đang trở nên khá lộn xộn:

  

Đầu ra

App.css Chỉ dẫn.js index.js App.js emoji.svg serviceWorker.js App.test.js index.css setupTests.js

Bạn có mã cho thành phần & lt; App & gt; ( App.css , App.js App.test .js ) bên cạnh thành phần gốc của bạn ( index.css index.js ) và thành phần tùy chỉnh của bạn Chỉ dẫn.js .

React cố tình không hiểu về cấu trúc tệp. Nó không khuyến nghị một cấu trúc cụ thể và dự án có thể hoạt động với nhiều loại phân cấp tệp khác nhau. Nhưng chúng tôi khuyên bạn nên thêm một số thứ tự để tránh làm quá tải thư mục gốc của bạn với các thành phần, tệp CSS và hình ảnh sẽ khó điều hướng. Ngoài ra, đặt tên rõ ràng có thể giúp bạn dễ dàng xem những phần nào trong dự án của bạn có liên quan. Ví dụ: tệp hình ảnh có tên Logo.svg có thể không rõ ràng là một phần của thành phần có tên Header.js .

Một trong những cấu trúc đơn giản nhất là tạo thư mục components với một thư mục riêng cho từng thành phần. Điều này sẽ cho phép bạn nhóm các thành phần riêng biệt với mã cấu hình, chẳng hạn như serviceWorker , trong khi nhóm các nội dung với các thành phần.

Tạo thư mục Thành phần

Để bắt đầu, hãy tạo một thư mục có tên là các thành phần :

  
  1. mkdir

    src / components

Tiếp theo, di chuyển các thành phần và mã sau vào thư mục: App.css , App.js , App.test.js , Guideline.js emoji.svg :

  
  1. mv

    src / App. * src / components /
  2. mv

    src / Hướng dẫn.js src / components /
  3. mv

    src / emoji.svg src / components /

Tại đây, bạn đang sử dụng ký tự đại diện ( * ) để chọn tất cả các tệp bắt đầu bằng ứng dụng . .

Sau khi di chuyển mã, bạn sẽ thấy lỗi trong thiết bị đầu cuối đang chạy npm start .

  

Đầu ra

Không biên dịch được. ./src/App.js Lỗi: ENOENT: không có tệp hoặc thư mục như vậy, hãy mở 'your_file_path / tutorial-03-component / src / App.js'

Hãy nhớ rằng, tất cả mã đang nhập bằng các đường dẫn tương đối. Nếu thay đổi đường dẫn cho một số tệp, bạn cần cập nhật mã.

Để làm điều đó, hãy mở index.js .

  
  1. nano

    src / index.js

Sau đó, thay đổi đường dẫn của quá trình nhập Ứng dụng để nhập từ các thành phần /
thư mục.

tutorial-03-component / src / index.js

  

nhập

React

từ

'phản ứng'

;

nhập

ReactDOM

từ

'react-dom'

;

nhập

'./ index.css'

;

nhập

Ứng dụng

từ

'./ components / App'

< p class = "dấu chấm câu mã thông báo">;

nhập

*

as

serviceWorker

từ

'./ serviceWorker'

;

...

serviceWorker

.

hủy đăng ký

(

)

;

Lưu và đóng tệp. Tập lệnh của bạn sẽ phát hiện các thay đổi và lỗi sẽ biến mất.

Bây giờ bạn có các thành phần trong một thư mục riêng biệt. Khi các ứng dụng của bạn trở nên phức tạp hơn, bạn có thể có các thư mục cho các dịch vụ API, kho dữ liệu và các chức năng tiện ích. Tách mã thành phần là bước đầu tiên, nhưng bạn vẫn có mã CSS cho Chỉ dẫn được trộn lẫn trong tệp App.css . Để tạo ra sự phân tách hợp lý này, trước tiên bạn sẽ di chuyển các thành phần vào các thư mục riêng biệt.

Di chuyển các thành phần sang các thư mục riêng lẻ

Đầu tiên, hãy tạo một thư mục dành riêng cho thành phần & lt; App & gt; :

  
  1. mkdir

    src / components / App

Sau đó, di chuyển các tệp liên quan vào thư mục mới:

  
  1. mv

    src / components / App. * src / components / App

Khi nào bạn gặp phải lỗi tương tự như phần cuối cùng:

  

Đầu ra

Không biên dịch được. ./src/components/App.js Lỗi: ENOENT: không có tệp hoặc thư mục như vậy, hãy mở 'your_file_path / tutorial-03-component / src / components / App.js'

Trong trường hợp này, bạn cần cập nhật hai điều. Trước tiên, bạn cần cập nhật đường dẫn trong index.js .

Mở tệp index.js :

  
  1. nano

    src / index.js

Sau đó, cập nhật đường dẫn nhập cho Ứng dụng để trỏ đến thành phần Ứng dụng trong thư mục Ứng dụng .

tutorial-03-component / src / index.js

  

nhập

React

từ

'phản ứng'

;

nhập

ReactDOM

từ

'react-dom'

;

nhập

'./ index.css'

;

nhập

Ứng dụng

từ

'./ components / App / App'

;

nhập

*

as

serviceWorker

từ

'./ serviceWorker'

;

...

serviceWorker

.

hủy đăng ký

(

)

;

Lưu và đóng tệp. Ứng dụng vẫn sẽ không chạy. Bạn sẽ thấy một lỗi như sau:

  

Đầu ra

Không biên dịch được. ./src/components/App/App.js Không tìm thấy mô-đun: Không thể giải quyết './Instructions.js' trong 'your_file_path / tutorial-03-component / src / components / App'

& lt; Hướng dẫn & gt; không ở cùng cấp thư mục với thành phần & lt; App & gt; , bạn cần thay đổi đường dẫn nhập. Trước đó, hãy tạo một thư mục cho Hướng dẫn . Tạo một thư mục có tên là Chỉ dẫn trong thư mục src / components :

  
  1. mkdir

    src / components / Hướng dẫn

Sau đó, di chuyển Guide.js emoji.svg vào thư mục đó:

  
  1. mv

    src / components / Guid.js src / components / Hướng dẫn
  2. mv

    src / components / emoji.svg src / components / Hướng dẫn

Bây giờ, thư mục thành phần Hướng dẫn đã được tạo, bạn có thể hoàn tất việc cập nhật đường dẫn tệp để kết nối thành phần với ứng dụng của bạn.

Giờ đây, các thành phần nằm trong các thư mục riêng lẻ, bạn có thể điều chỉnh đường dẫn nhập trong App.js .

Mở App.js :

  
  1. nano

    src / components / App / App.js

Vì đường dẫn là tương đối, bạn sẽ cần di chuyển lên một thư mục— src / components —và sau đó vào Hướng dẫnThư mục cho Guid.js , nhưng vì đây là tệp JavaScript nên bạn không cần nhập lần cuối.

tutorial-03-component / src / components / App / App.js

  

nhập

React

từ

'phản ứng'

;

import

Hướng dẫn

từ

'../ Hướng dẫn / Hướng dẫn.js'

;

nhập

'./ App.css'

;

...

xuất

default

Ứng dụng

;

Lưu và đóng tệp. Giờ đây, tất cả các mục nhập của bạn đều đang sử dụng đường dẫn chính xác, trình duyệt của bạn sẽ cập nhật và hiển thị ứng dụng.

Cửa sổ trình duyệt có hình ảnh nhỏ hơn

Lưu ý: Bạn cũng có thể gọi tệp gốc trong mỗi thư mục index.js . Ví dụ: thay vì src / components / App / App.js , bạn có thể tạo src / components / App / index.js . Ưu điểm của điều này là nhập khẩu của bạn nhỏ hơn một chút. Nếu đường dẫn trỏ đến một thư mục, quá trình nhập sẽ tìm kiếm tệp index.js . Quá trình nhập cho src / components / App / index.js trong tệp src / index.js sẽ là import ./components/App . Nhược điểm của phương pháp này là bạn có nhiều tệp trùng tên, điều này có thể gây khó khăn cho việc đọc trong một số trình soạn thảo văn bản. Cuối cùng, đó là quyết định của cá nhân và nhóm, nhưng tốt nhất bạn nên nhất quán.

Mã Tách trong Tệp Chia sẻ

Giờ đây, mỗi thành phần đều có thư mục riêng, nhưng không phải mọi thứ đều hoàn toàn độc lập. Bước cuối cùng là giải nén CSS cho Chỉ dẫn vào một tệp riêng biệt.

Đầu tiên, tạo một tệp CSS trong src / components / Hướng dẫn :

  
  1. touch

    src / components / Guid / Guide.css

Tiếp theo, mở tệp CSS trong trình soạn thảo văn bản của bạn:

  
  1. nano

    src / thành phần / Hướng dẫn / Hướng dẫn.css

Thêm CSS hướng dẫn mà bạn đã tạo trong phần trước:

hướng dẫn-03-component / src / components / Hướng dẫn / Hướng dẫn.css

  

. hướng dẫn

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

. hướng dẫn img

{

width

:

100px

;

height

:

100px

;

}

Lưu và đóng tệp. Tiếp theo, xóa CSS hướng dẫn khỏi src / components / App / App.css .

  
  1. nano

    src / components / App / App.css

Xóa các dòng về .instructions . Tệp cuối cùng sẽ giống như sau:

tutorial-03-component / src / components / App / App.css

  

. container

{

display

:

flex

;

flex-direction

:

cột

;

align-items

:

center

;

}

Nút

{

font-size

:

2em

;

border

:

0

;

padding

:

0

;

background

:

none

;

con trỏ

:

con trỏ

;

}

ul

{

display

:

flex

;

padding

:

0

;

}

li

{

margin

:

0 20px

;

list-style

:

none

;

padding

:

0

;

}

Lưu và đóng tệp. Cuối cùng, nhập CSS trong Guid.js :

  
  1. nano

    src / thành phần / Hướng dẫn / Hướng dẫn.js

Nhập CSS bằng đường dẫn tương đối:

hướng dẫn-03-component / src / components / Hướng dẫn / Hướng dẫn.js

  

import

React

,

{

Thành phần

}

từ

'phản ứng'

;

nhập

'./ Hướng dẫn.css'

;

nhập

emoji

từ

'./ emoji.svg'

xuất

default

class

Hướng dẫn

mở rộng

Thành phần

{

kết xuất

(

)

{

trả về

(

& lt;

div className

=

"hướng dẫn"

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

div

& gt;

)

}

}

Lưu và đóng tệp. Cửa sổ trình duyệt của bạn sẽ trông giống như trước đây, ngoại trừ bây giờ tất cả các nội dung tệp được nhóm trong cùng một thư mục.

Cửa sổ trình duyệt có hình ảnh nhỏ hơn

Bây giờ, hãy xem xét cấu trúc lần cuối. Đầu tiên, thư mục src / :

  
  1. ls

    src

Bạn có thành phần gốc index.js và CSS liên quan index.css bên cạnh thư mục components / và các tệp tiện ích chẳng hạn như serviceWorker.js setupTests.js :

  

Đầu ra

thành phần serviceWorker.js index.css setupTests.js index.js

Tiếp theo, hãy xem bên trong các thành phần :

  
  1. ls

    src / components

Bạn sẽ thấy một thư mục cho từng thành phần:

  

Đầu ra

Hướng dẫn ứng dụng

Nếu bạn nhìn vào bên trong từng thành phần, bạn sẽ thấy mã thành phần, CSS, thử nghiệm và tệp hình ảnh nếu chúng tồn tại.

  
  1. ls

    src / components / App
  

Đầu ra

App.css App.js App.test.js
  
  1. ls

    src / components / Hướng dẫn
  

Đầu ra

Hướng dẫn.css Hướng dẫn.js emoji.svg

Tại thời điểm này, bạn đã tạo ra một cấu trúc vững chắc cho dự án của mình. Bạn đã di chuyển rất nhiều mã, nhưng bây giờ bạn đã có cấu trúc, nó sẽ mở rộng quy mô dễ dàng hơn.

Đây không phải là cách duy nhất để soạn cấu trúc của bạn. Một số cấu trúc tệp có thể tận dụng lợi thế của tách mã bằng cách chỉ định một thư mục sẽ được chia thành các gói khác nhau. Các cấu trúc tệp khác chia theo tuyến và sử dụng thư mục chung cho các thành phần được sử dụng trên các tuyến.

Hiện tại, hãy gắn bó với cách tiếp cận ít phức tạp hơn. Khi nhu cầu về một cấu trúc khác xuất hiện, việc chuyển từ đơn giản sang phức tạp luôn dễ dàng hơn. Bắt đầu với một cấu trúc phức tạp trước khi bạn cần nó sẽ khiến việc tái cấu trúc trở nên khó khăn.

Bây giờ bạn đã tạo và tổ chức một thành phần dựa trên lớp, trong bước tiếp theo, bạn sẽ tạo một thành phần chức năng.

Bước 4 – Xây dựng một thành phần chức năng

Trong bước này, bạn sẽ tạo một thành phần chức năng. Các thành phần chức năng là thành phần phổ biến nhất trong mã React hiện đại. Các thành phần này có xu hướng ngắn hơn và không giống như các thành phần dựa trên lớp, chúng có thể sử dụng React hooks , một hình thức quản lý trạng thái và sự kiện mới.

Một thành phần chức năng là một hàm JavaScript trả về một số JSX. Nó không cần mở rộng bất cứ điều gì và không có phương pháp đặc biệt nào để ghi nhớ.

Để cấu trúc lại & lt; Hướng dẫn & gt; như một thành phần chức năng, bạn cần thay đổi lớp thành một hàm và xóa phương thức kết xuất để bạn chỉ còn lại câu lệnh return.

Để làm điều đó, trước tiên hãy mở Guid.js trong trình soạn thảo văn bản.

  
  1. nano

    src / thành phần / Hướng dẫn / Hướng dẫn.js

Thay đổi khai báo class thành khai báo function :

hướng dẫn-03-component / src / components / Hướng dẫn / Hướng dẫn.js

  

import

React

,

{

Thành phần

}

từ

'phản ứng'

;

nhập

'./ Hướng dẫn.css'

;

nhập

emoji

từ

'./ emoji.svg'

xuất

default

chức năng

Hướng dẫn

(

)

{

kết xuất

(

)

{

trả về

(

& lt;

div className

=

"hướng dẫn"

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

div

& gt;

)

}

}

Tiếp theo, xóa nhập {Component} :

hướng dẫn-03-component / src / components / Hướng dẫn / Hướng dẫn.js

  

nhập

React

từ

'phản ứng'

;

nhập

'./ Hướng dẫn.css'

;

nhập

emoji

từ

'./ emoji.svg'

xuất

default

chức năng

Hướng dẫn

(

)

{

kết xuất

(

)

{

trả về

(

& lt;

div className

=

"hướng dẫn"

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

div

& gt;

)

}

}

Cuối cùng, xóa phương thức render () . Tại thời điểm đó, bạn chỉ trả về JSX.

hướng dẫn-03-component / src / components / Hướng dẫn / Hướng dẫn.js

  

nhập

React

từ

'phản ứng'

;

nhập

'./ Hướng dẫn.css'

;

nhập

emoji

từ

'./ emoji.svg'

xuất

default

chức năng

Hướng dẫn

(

)

{

trả về

(

& lt;

div className

=

"hướng dẫn"

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

div

& gt;

)

}

Lưu tệp. Trình duyệt sẽ làm mới và bạn sẽ thấy trang của mình như trước đây.

Trình duyệt có biểu tượng cảm xúc

Bạn cũng có thể viết lại hàm dưới dạng hàm mũi tên bằng cách sử dụng trả về ngầm định. Sự khác biệt chính là bạn mất cơ quan chức năng. Trước tiên, bạn cũng cần gán hàm cho một biến và sau đó xuất biến:

hướng dẫn-03-component / src / components / Hướng dẫn / Hướng dẫn.js

  

nhập

React

từ

'phản ứng'

;

nhập

'./ Hướng dẫn.css'

;

nhập

emoji

từ

'./ emoji.svg'

const

Hướng dẫn

=

(

)

= & gt;

(< / p>

& lt;

div className

=

"hướng dẫn"

& gt;

& lt;

img alt

=

"biểu tượng cảm xúc dở khóc dở cười"

src

=

{

biểu tượng cảm xúc

}

/

& gt;

& lt;

p

& gt;

Nhấp vào biểu tượng cảm xúc để xem tên viết tắt của biểu tượng cảm xúc

.

& lt;

/

p

& gt;

& lt;

/

div

& gt;

)

xuất

default

Hướng dẫn

;

Các thành phần chức năng đơn giản và các thành phần dựa trên lớp rất giống nhau. Khi bạn có một thành phần đơn giản không lưu trữ trạng thái, tốt nhất bạn nên sử dụng một thành phần chức năng. Sự khác biệt thực sự giữa cả hai là cách bạn lưu trữ trạng thái của một thành phần và sử dụng các thuộc tính. Các thành phần dựa trên lớp sử dụng các phương thức và thuộc tính để thiết lập trạng thái và có xu hướng dài hơn một chút. Các thành phần chức năng sử dụng các hook để lưu trữ trạng thái hoặc quản lý các thay đổi và có xu hướng ngắn hơn một chút.

Kết luận

Bây giờ bạn có một ứng dụng nhỏ với các phần độc lập. Bạn đã tạo hai loại thành phần chính: chức năng và lớp. Bạn đã tách các phần của các thành phần thành các thư mục để có thể giữ các đoạn mã tương tự được nhóm lại với nhau. Bạn cũng đã nhập và sử dụng lại các thành phần.

Với sự hiểu biết về các thành phần, bạn có thể bắt đầu xem các ứng dụng của mình như những phần mà bạn có thể tách rời và ghép lại với nhau. Các dự án trở thành mô-đun và có thể thay thế cho nhau. Khả năng xem toàn bộ ứng dụng như một loạt các thành phần là một bước quan trọng trong tư duy trong React. Nếu bạn muốn xem thêm các hướng dẫn về React, hãy xem trang Chủ đề React của chúng tôi hoặc quay lại trang How To Code in React.js series .


Xem thêm những thông tin liên quan đến chủ đề cách tạo các thành phần trong react

3. Lập Trình ReactJS : Khởi Tạo Project ReactJS Đầu Tiên Bằng Create-React-App

alt

  • Tác giả: nghiepuit
  • Ngày đăng: 2017-09-21
  • Đánh giá: 4 ⭐ ( 9083 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: _ Video chia sẻ học lập trình ReactJS & Redux. Khóa học dành cho người bắt đầu học lập trình react hoặc muốn chuyên sâu hơn về lập trình react, redux
    _ Mong nhận được sự đóng góp ý kiến để team chúng tôi cải thiện video và chất lượng kiến thức tốt hơn.
    _ Subscribe ( đăng ký kênh ) để nhận được nhiều video hơn nữa.
    _ Liên hệ :
    Facebook : https://www.facebook.com/nghiepuit
    Mail : nghiepuit@gmail.com
    Kênh Youtube : https://www.youtube.com/nghiepuit

ReactJS: Cách tạo các phần tử React với JSX

  • Tác giả: v1study.com
  • Đánh giá: 3 ⭐ ( 4979 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong bài hướng dẫn này, bạn sẽ học cách mô tả các phần tử bằng JSX. JSX là một sự trừu tượng cho phép bạn viết cú pháp giống HTML trong mã JavaScript của

Các thành phần trong React Native cơ bản nhất

  • Tác giả: freetuts.net
  • Đánh giá: 4 ⭐ ( 8200 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Các thành phần trong React Native. React Native được phát triển dựa trên React – một thư viện mã nguồn mở để xây dựng giao diện với JavaScript

ReactJS – Các thành phần

  • Tác giả: knews.vip
  • Đánh giá: 4 ⭐ ( 6889 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong chương này, chúng ta sẽ tìm hiểu cách kết hợp các thành phần để làm cho ứng dụng dễ bảo trì hơn. Cách tiếp cận này cho phép cập nhật và thay đổi các thành phần của bạn mà không ảnh hưởng đến phần còn lại của trang. Ví dụ không trạng thái Thành phần đầu tiên của chúng…

Tự động thêm các thành phần con trong React

  • Tác giả: qastack.vn
  • Đánh giá: 4 ⭐ ( 7253 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Bạn cần chuyển các thành phần của mình khi còn nhỏ, như sau: var App =…

Các thành phần React – Chức năng so với Lớp

  • Tác giả: vn.wsxdn.com
  • Đánh giá: 5 ⭐ ( 8122 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

ReactJS – Những kiến thức cơ bản bạn cần phải biết

  • Tác giả: topdev.vn
  • Đánh giá: 3 ⭐ ( 9348 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: ReactJS là một thư viện JavaScript mã nguồn mở được thiết kế bởi Facebook để tạo ra những ứng dụng web hấp dẫn, nhanh và hiệu quả với…

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Hàm SQL Server YEAR () theo ví dụ thực tế - máy chủ sql nhận được năm kể từ ngày giờ

By ads_php