Cách tạo các thành phần tùy chỉnh trong React

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 bạn và là khối xây dự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 và lớp JavaScript đơ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 node , 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 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 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 file có thể đọc được.

Yêu cầu

• Bạn cần một môi trường phát triển chạy Node.js ; hướng dẫn này đã được thử nghiệm trên Node.js version 10.20.1 và npm version 6.14.4. Để cài đặt phần mềm này trên macOS hoặc Ubuntu 18.04, hãy làm theo các bước trong Cách cài đặt Node.js và Tạo Môi trường Phát triển Cục bộ trên macOS hoặc phần Cài đặt Sử dụng PPA của Cách Cài đặt Node.js trên Ubuntu 18.04 .

• Bạn cần có thể tạo ứng dụng với Tạo ứng dụng React . Bạn có thể tìm thấy hướng dẫn cài đặt ứng dụng với Tạo ứng dụng React tại Cách cài đặt dự án phản ứng với Tạo ứng dụng phản ứng .

• Bạn sẽ sử dụng cú pháp JSX, bạn có thể tìm hiểu về cú pháp này trong hướng dẫn Cách tạo phần tử bằng JSX của ta .

• Bạn cũng cần có kiến thức cơ bản về JavaScript, bạn có thể tìm thấy kiến thức này trong Cách viết mã trong JavaScript , cùng với kiến thức cơ bản về HTML và CSS. Một nguồn tốt cho HTML và CSS là Mạng nhà phát triển Mozilla .

Bước 1 - Cài đặt Dự án React

Trong bước này, bạn sẽ tạo cơ sở cho dự án của bạn bằ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 bạn 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, tạo một dự án mới. Mở một terminal , sau đó chạy lệnh sau:

npx create-react-app tutorial-03-component 

Khi việc này hoàn tất, hãy thay đổi vào folder dự án:

cd tutorial-03-component 

Mở mã App.js trong editor :

nano src/App.js 

Tiếp theo, lấy mã mẫu được tạo bởi Create React App, 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:

import React from 'react'; import './App.css';  const displayEmojiName = event => alert(event.target.id); const emojis = [   {     emoji: '😀',     name: "test grinning face"   },   {     emoji: '🎉',     name: "party popper"   },   {     emoji: '💃',     name: "woman dancing"   } ];  function App() {   const greeting = "greeting";   const displayAction = false;   return(     <div className="container">       <h1 id={greeting}>Hello, World</h1>       {displayAction && <p>I am writing JSX</p>}       <ul>         {           emojis.map(emoji => (             <li key={emoji.name}>               <button                 onClick={displayEmojiName}               >                 <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>               </button>             </li>           ))         }       </ul>     </div>   ) }  export default App; 

Mã này sử dụng cú pháp JSX để map() lên mảng emojis và liệt kê chúng dưới dạng <li> danh sách 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 , phần này có giải thích chi tiết về JSX.

Lưu và đóng file . Đến đây bạn có thể xóa file 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:

rm src/logo.svg 

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

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ữ:

.container {     display: flex;     flex-direction: column;     align-items: center; }  button {     font-size: 2em;     border: 0;     padding: 0;     background: none;     cursor: 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 các phần tử <h1> và danh sách chính. Nó cũng loại bỏ các kiểu nút và <li> kiểu mặc định để 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 với JSX .

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

Mở một cửa sổ terminal khác trong folder root của dự án của bạn. Bắt đầu dự án bằng lệnh sau:

npm start 

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

Để điều này chạy toàn bộ thời gian bạn làm việc trong dự án của bạn . Mỗi khi 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 bạn với Hello, World và ba biểu tượng cảm xúc mà bạn đã liệt kê trong file App.js của bạn :

Đến đây bạn đã cài đặt mã của bạn , 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

Đến đây bạn có 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 bạn . 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. Key ở đâ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 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à theo 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à Instructions 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, 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 phải sử dụng chúng, nhưng bạn cần biết cách nhận ra chúng. Họ cũng 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ả thành phần lớp và chức năng.

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

touch src/Instructions.js 

Sau đó, mở file trong editor của bạn:

nano src/Instructions.js 

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

import React, { Component } from 'react';  export default class Instructions extends Component {} 

Việc nhập React sẽ chuyển đổi JSX. Component là một lớp cơ sở mà bạn sẽ mở rộng để tạo thành phần của bạn . Để mở rộng điều đó, bạn đã tạo một lớp có tên thành phần của bạn ( Instructions ) và mở rộng Component cơ sở bằng dòng export . Bạn cũng đang xuất lớp này làm 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 trùng với tên của file . Đ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 file , sẽ dễ dàng xác định vị trí thành phần có liên quan hơn.

Lớp Component cơ sở có một số phương thức bạn có thể sử dụng trong lớp tùy chỉnh của bạn . Phương thức quan trọng nhất và là phương thức 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 <p> :

import React, { Component } from 'react';  export class Instructions extends Component {    render() {     return(       <p>Click on an emoji to view the emoji short name.</p>     )   }  } 

Lưu và đóng file . Đến đây, vẫn không có thay đổi nào đối với trình duyệt của bạn. Đó là 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 root . Trong dự án này, <App> là thành phần root 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 <App> .

Mở src/App.js trong editor :

nano src/App.js 

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

import React from 'react';  import Instructions from './Instructions';  import './App.css';  ...  export default App; 

Vì đây là 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 trùng với tên thành phần, tên này phải trùng với tên file — nhưng luật chắc chắn duy nhất là thành phần phải bắt đầu bằng chữ hoa. Đó là cách React biết nó là một thành phần React .

Đến đây 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ã của bạn như thể nó là một phần tử HTML tùy chỉnh:

import React from 'react';  import Instructions from './Instructions.js'  ... function App() {   const greeting = "greeting";   const displayAction = false;   return(     <div className="container">       <h1 id={greeting}>Hello, World</h1>       {displayAction && <p>I am writing JSX</p>}       <Instructions />       <ul>         {           emojis.map(emoji => (             <li key={emoji.name}>               <button                 onClick={displayEmojiName}               >                 <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>               </button>             </li>           ))         }       </ul>     </div>   ) }  export default App; 

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

Lưu các file . 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.

Đến đây bạn đã có một số văn bản, bạn có thể thêm hình ảnh. Download hình ảnh biểu tượng cảm xúc từ wikimedia và lưu nó trong folder src dưới dạng emoji.svg bằng lệnh sau:

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

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

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

nano src/Instructions.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 một liên kết động:

import React, { Component } from 'react'; import emoji from './emoji.svg'  export default class Instructions extends Component {    render() {     return(       <>         <img alt="laughing crying emoji" src={emoji} />         <p>Click on an emoji to view the emoji short name.</p>       </>     )   } } 

Lưu ý bạn cần bao gồm phần mở rộng file .svg khi nhập. Khi bạn 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 cài đặt một dự án React với Tạo ứng dụng React .

Bạn cũng cần bọc các <img> và <p> 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 các file . Khi bạn reload , hình ảnh sẽ rất lớn so với phần còn lại của nội dung:

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

Đầu tiên, trong Instructions.js , hãy thay đổi các thẻ trống thành div và đặt cho nó một className instructions :

import React, { Component } from 'react'; import emoji from './emoji.svg'  export default class Instructions extends Component {    render() {     return(       <div className="instructions">         <img alt="laughing crying emoji" src={emoji} />         <p>Click on an emoji to view the emoji short name.</p>       </div>     )   } } 

Lưu và đóng file . Mở App.css tiếp theo:

nano src/App.css 

Tạo luật cho bộ chọn lớp .instructions :

.container {     display: flex;     flex-direction: column;     align-items: center; }  ...  .instructions {     display: flex;     flex-direction: column;     align-items: center; } 

Khi bạn thêm một display của kiểu flex , bạn làm cho img và p giữa bằng flexbox . Bạn đã thay đổi hướng để mọi thứ thẳng hàng theo chiều dọc với flex-direction: column; . Các mục align-items: center; 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 xếp hàng, bạn cần thay đổi kích thước hình ảnh. Cung cấp cho img bên trong div có width và height là 100px .

.container {     display: flex;     flex-direction: column;     align-items: center; }  ...  .instructions {     display: flex;     flex-direction: column;     align-items: center; }  .instructions img {     width: 100px;     height: 100px; } 

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

Đế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 version thứ hai vào App.js

Mở App.js :

nano src/App.js 

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

import React from 'react';  import Instructions from './Instructions.js'  ...  function App() {   const greeting = "greeting";   const displayAction = false;   return(     <div className="container">       <h1 id={greeting}>Hello, World</h1>       {displayAction && <p>I am writing JSX</p>}       <Instructions />       <Instructions />       <ul>         {           emojis.map(emoji => (             <li key={emoji.name}>               <button                 onClick={displayEmojiName}               >                 <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>               </button>             </li>           ))         }       </ul>     </div>   ) }  export default App; 

Lưu các file . Khi trình duyệt reload , bạn sẽ thấy thành phần này hai lần.

Trong trường hợp này, bạn sẽ không muốn có hai trường hợp Instructions , nhưng bạn có thể thấy rằng thành phần được dùng lại một cách hiệu quả. Khi bạn tạo các node 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 phụ. Trong editor của bạn, hãy xóa <Instructions /> thứ hai và lưu file :

import React from 'react';  import Instructions from './Instructions.js'  ...  function App() {   const greeting = "greeting";   const displayAction = false;   return(     <div className="container">       <h1 id={greeting}>Hello, World</h1>       {displayAction && <p>I am writing JSX</p>}       <Instructions />       <ul>         {           emojis.map(emoji => (             <li key={emoji.name}>               <button                 onClick={displayEmojiName}               >                 <span role="img" aria-label={emoji.name} id={emoji.name}>{emoji.emoji}</span>               </button>             </li>           ))         }       </ul>     </div>   ) }  export default App; 

Đến đâ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 mẹ 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 file được trộn với nhau. Hình ảnh cho <Instructions> nằm trong cùng folder với nội dung cho <App> . Bạn cũng đang trộn mã CSS cho <App> với CSS cho <Instructions> .

Trong bước tiếp theo, bạn sẽ tạo một cấu trúc file cung cấp cho mỗi thành phần sự độc lập bằng cách group chức năng, kiểu và dependencies của chúng lại với nhau, cho bạn khả năng di chuyển chúng khi cần.

Bước 3 - Tạo cấu trúc file có thể đọc

Trong bước này, bạn sẽ tạo cấu trúc file để tổ chức các thành phần của bạn và nội dung của chúng, chẳng hạn như hình ảnh, CSS và các file JavaScript khác. Bạn sẽ group 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 folder riêng cho CSS, hình ảnh và JavaScript. Thay vào đó, bạn sẽ có một folder riêng biệt cho mỗi thành phần chứa CSS, JavaScript và hình ảnh có liên quan. Trong cả hai trường hợp, bạn đang tách rời 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 file group mã có liên quan. Hiện tại, mọi thứ đều nằm trong cùng một folder . Liệt kê các mục trong folder src của bạn:

ls src/ 

Kết quả kết quả sẽ cho thấy mọi thứ đang trở nên khá lộn xộn:

Output
App.css                 Instructions.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 <App> ( App.css , App.js và App.test.js ) nằm cùng với thành phần root của bạn ( index.css và index.js ) và thành phần tùy chỉnh Instructions.js index.css của bạn.

React có chủ đích bất khả tri về cấu trúc file . Nó không đề xuất 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 file khác nhau. Nhưng ta khuyên bạn nên thêm một số thứ tự để tránh quá tải folder root của bạn với các thành phần, file CSS và hình ảnh sẽ khó chuyển . 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ụ: một file 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 gọi là Header.js .

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

Tạo folder Components

Để bắt đầu, hãy tạo một folder có tên là components :

mkdir src/components 

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

mv src/App.* src/components/ 
mv src/Instructions.js src/components/ 
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 file bắt đầu bằng App. .

Sau khi di chuyển mã, bạn sẽ thấy lỗi trong terminal đang chạy npm start .

Output
Failed to compile.  ./src/App.js Error: ENOENT: no such file or directory, open 'your_file_path/tutorial-03-component/src/App.js' 

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

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

nano src/index.js 

Sau đó, thay đổi đường dẫn Nhập App để nhập từ các components/
danh mục.

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import * as serviceWorker from './serviceWorker';  ...  serviceWorker.unregister(); 

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

Đến đây bạn có các thành phần trong một folder 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 folder cho các dịch vụ API, repodata 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 Instructions trộn lẫn trong file App.css . Để tạo 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 folder riêng biệt.

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

Đầu tiên, tạo một folder dành riêng cho thành phần <App> :

mkdir src/components/App 

Sau đó, di chuyển các file liên quan vào folder mới:

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

Khi thực hiện, bạn sẽ gặp lỗi tương tự như phần cuối cùng:

Output
Failed to compile.  ./src/components/App.js Error: ENOENT: no such file or directory, open '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 thứ. Trước tiên, bạn cần cập nhật đường dẫn trong index.js .

Mở index.js :

nano src/index.js 

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

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App/App'; import * as serviceWorker from './serviceWorker';  ...  serviceWorker.unregister(); 

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

Output
Failed to compile.  ./src/components/App/App.js  Module not found: Can't resolve './Instructions.js' in 'your_file_path/tutorial-03-component/src/components/App' 

Vì <Instructions> không ở cùng cấp folder với thành phần <App> , bạn cần thay đổi đường dẫn nhập. Trước đó, hãy tạo một folder cho Instructions . Tạo một folder có tên là Instructions trong folder src/components :

mkdir src/components/Instructions 

Sau đó di chuyển Instructions.js và emoji.svg vào folder đó:

mv src/components/Instructions.js src/components/Instructions 
mv src/components/emoji.svg src/components/Instructions 

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

Cập nhật Đường dẫn import

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

Mở App.js :

nano src/components/App/App.js 

Kể từ khi con đường là tương đối, bạn cần phải di chuyển lên một Danh bạ src/components -Sau đó vào Instructions folder cho Instructions.js , nhưng vì đây là một file JavaScript, bạn không cần phải nhập khẩu chính thức.

import React from 'react';  import Instructions from '../Instructions/Instructions.js';  import './App.css';  ...  export default App; 

Lưu và đóng file . Bây giờ tất cả các lần nhập của bạn đều đang sử dụng đúng đường dẫn, trình duyệt của bạn sẽ cập nhật và hiển thị ứng dụng.

Lưu ý: Bạn cũng có thể gọi file root trong mỗi folder index.js . Ví dụ: thay vì src/components/App/App.js bạn có thể tạo src/components/App/index.js . Lợi thế của việc 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 folder , quá trình nhập sẽ tìm kiếm index.js . Quá trình nhập cho src/components/App/index.js trong src/components/App/index.js 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 file trùng tên, điều này có thể gây khó đọc trong một số editor . Cuối cùng, đó là quyết định của cá nhân và group , nhưng tốt nhất là bạn nên nhất quán.

Tách mã trong file được chia sẻ

Như vậy, mỗi thành phần đều có folder 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à extract CSS cho Instructions vào một file riêng biệt.

Đầu tiên, tạo một file CSS trong src/components/Instructions :

touch src/components/Instructions/Instructions.css 

Tiếp theo, mở file CSS trong editor của bạn:

nano src/components/Instructions/Instructions.css 

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

.instructions {     display: flex;     flex-direction: column;     align-items: center; }  .instructions img {     width: 100px;     height: 100px; } 

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

nano src/components/App/App.css 

Xóa các dòng về .instructions . Tệp cuối cùng sẽ trông như thế này:

.container {     display: flex;     flex-direction: column;     align-items: center; }  button {     font-size: 2em;     border: 0;     padding: 0;     background: none;     cursor: pointer; }  ul {     display: flex;     padding: 0; }  li {     margin: 0 20px;     list-style: none;     padding: 0; } 

Lưu và đóng file . Cuối cùng, nhập CSS vào Instructions.js :

nano src/components/Instructions/Instructions.js 

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

import React, { Component } from 'react'; import './Instructions.css'; import emoji from './emoji.svg'  export default class Instructions extends Component {    render() {     return(       <div className="instructions">         <img alt="laughing crying emoji" src={emoji} />         <p>Click on an emoji to view the emoji short name.</p>       </div>     )   } } 

Lưu và đóng file . 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 file được group trong cùng một folder .

Bây giờ, hãy nhìn lại cấu trúc lần cuối. Đầu tiên, folder src/ :

ls src 

Bạn có thành phần root index.js và CSS liên quan index.css bên cạnh các components/ folder và file tiện ích như serviceWorker.js và setupTests.js :

Output
components              serviceWorker.js index.css               setupTests.js index.js 

Tiếp theo, hãy xem components bên trong:

ls src/components 

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

Output
App             Instructions 

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

ls src/components/App 

Output
App.css         App.js          App.test.js 

ls src/components/Instructions 

Output
Instructions.css        Instructions.js         emoji.svg 

Đến đây, bạn đã tạo ra một cấu trúc vững chắc cho dự án của bạn . Bạn đã di chuyển rất nhiều mã xung quanh, 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 file có thể tận dụng lợi thế của việc tách mã bằng cách chỉ định một folder sẽ được chia thành các gói khác nhau. Các cấu trúc file khác chia theo tuyến và sử dụng một folder chung cho các thành phần được sử dụng trên các tuyến.

Hiện tại, hãy theo đuổ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ẽ gây khó khăn cho việc tái cấu trúc.

Đến đây 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 dạng 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 để ghi nhớ.

Để cấu trúc lại <Instructions> 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à loại bỏ 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ở Instructions.js trong editor .

nano src/components/Instructions/Instructions.js 

Thay đổi khai báo class khai báo function :

import React, { Component } from 'react'; import './Instructions.css'; import emoji from './emoji.svg'  export default function Instructions() {   render() {     return(       <div className="instructions">         <img alt="laughing crying emoji" src={emoji} />         <p>Click on an emoji to view the emoji short name.</p>       </div>     )   } } 

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

import React from 'react'; import './Instructions.css'; import emoji from './emoji.svg'  export default function Instructions() {    render() {     return(       <div className="instructions">         <img alt="laughing crying emoji" src={emoji} />         <p>Click on an emoji to view the emoji short name.</p>       </div>     )   } } 

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

import React from 'react'; import './Instructions.css'; import emoji from './emoji.svg'  export default function Instructions() {   return(     <div className="instructions">         <img alt="laughing crying emoji" src={emoji} />         <p>Click on an emoji to view the emoji short name.</p>     </div>   ) } 

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

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 phải gán hàm cho một biến và sau đó xuất biến:

import React from 'react'; import './Instructions.css'; import emoji from './emoji.svg'  const Instructions = () => (   <div className="instructions">     <img alt="laughing crying emoji" src={emoji} />     <p>Click on an emoji to view the emoji short name.</p>   </div> )  export default Instructions; 

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 là 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 để cài đặt 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 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

Đến đây 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 folder để có thể giữ các đoạn mã tương tự được group 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 bạn 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 module và có thể thay thế cho nhau. Khả năng xem toàn bộ ứng dụng như một chuỗi 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 ta hoặc quay lại trang Cách viết mã trong chuỗi React.js .

---

---

Các tin liên quan