ReactJS: Cách Tạo Component Tùy Chỉnh Trong React | V1Study

Giới thiệu

Trong bài hướng dẫn này, bạn sẽ học cách tạo component tùy chỉnh trong React. Component 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à 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. Tất cả 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 component. Component 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 component 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 bài 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 component tùy chỉnh và sẽ được gọi từ bên trong một component tùy chỉnh khác. Đến cuối bài hướng dẫn này, bạn sẽ tạo các component 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.

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 Create React App. 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 các biểu tượng cảm xúc và thêm một lượng nhỏ CSS.

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

npx create-react-app tutorial-03-component

Khi quá trình này kết thúc, hãy chuyển vào thư mục dự án:

cd tutorial-03-component

Mở App.js ra, sau đó 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 như sau:

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ã trên sử dụng cú pháp JSX để map() lên mảng emojis và liệt kê chúng dưới dạng các mục danh sách <li>. Nó cũng đính kèm 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 file App.js lại. Bây giờ 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 CSS. Mở file src/App.css ra, 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; }

Code CSS trên sử dụng flex để căn giữa các phần tử <h1> và danh sách.

Lưu file App.css lại. Mở một terminal 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:

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 mình tại http://localhost:3000.

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 file App.js.

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 component độc lập với các lớp React

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

Component là phần tử độc lập mà bạn có thể sử dụng lại trên toàn bộ trang (website). 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ý: File App.js là một component chức năng, một component mà bạn sẽ thấy nhiều hơn trong Bước 3.

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

Lưu ý: Component dựa trên lớp từng là cách phổ biến nhất để tạo các component 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 component hàm.

Mặc dù component hàm hiện là tiêu chuẩn, bạn thường sẽ tìm thấy component 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. Ở đây 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ý state. Trong bài hướng dẫn này, bạn sẽ học cách tạo cả component lớp là component hàm.

Để bắt đầu, hãy tạo một file mới trong thư mục src/ là src/Instructions.js. Theo quy ước, các file component được viết hoa. Sau đó, mở file trong trình soạn thảo văn bản của bạn:

Đầu tiên, ta import lớp Component và export Instructions bằng cách đưa vào file Instruction.js các dòng lệnh sau:

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

Component là một lớp cơ sở mà bạn sẽ thừa để tạo component của mình. Để thừa kế, bạn đã tạo một lớp có tên Instructions và thừa kế (extends) lớp cơ sở Component. Bạn cũng đang export lớp này làm lớp mặc định với các từ khóa export default ở đầ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 component. Nếu tên phù hợp với cấu trúc tệp, sẽ dễ dàng xác định vị trí thành phần có liên quan hơn.

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

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

Lưu lại file Instruction.js. 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 component mới. Để sử dụng component, bạn sẽ phải thêm nó vào một component khác kết nối với component gốc. Trong dự án này, <App> là component 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 phải thêm vào component <App>.

Mở file src/App.js ra, sau đó import component Instructions:

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

Vì đây là cách import 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 import 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à component 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 component React.

Bây giờ bạn đã import component, hãy thêm component đó 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 như đánh dấu sau:

import Instructions from './Instructions.js' 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>} <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ên nó có thể tự đóng bằng cách kết thúc bằng />.

Lưu lại và quay lại trang web và bạn sẽ thấy component mới.

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 emoji.svg từ wikimedia và lưu nó vào thư mục src 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 tệp dưới dạng src/emoji.svg.

Tiếp theo, mở tệp component Instructions.js ra, import biểu tượng emojo vào:

import { 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 ý rằng bạn cần bao gồm phần mở rộng tệp khi import .svg. Khi bạn import, bạn đã import 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 một dự án React với Create React App.

Bạn cũng cần bao ngoài các thẻ <img> và <p> bằng thẻ trống <> để đảm bảo rằng bạn đang trả về một phần tử duy nhất.

Lưu lại và quay lại trình duyệt bạn sẽ thấy 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 sẽ cần thêm một số CSS và một className vào component tùy chỉnh của mình.

Thứ nhất, trong Instructions.js bạn thay đổi các thẻ trống bằng một div và cung cấp cho nó một className là instructions:

import { 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 lại sau đó mở file App.css rồi tạo quy tắc cho class .instructions như phần đánh dấu dưới đây:

.container { display: flex; flex-direction: column; align-items: center; } .instructions{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; }

Khi bạn thêm một display là flex, bạn sẽ làm cho thẻ <img> và thẻ <p> nằm ở giữa với flexbox. Bạn đã thay đổi hướng để mọi thứ thẳng hàng theo chiều dọc với việc sử dung 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 xếp thành hàng, bạn cần thay đổi kích thước hình ảnh. Cung cấp cho img bên trong div một giá trị width và height tương ứng là 100px.

.container { display: flex; flex-direction: column; align-items: center; } .instructions { 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; } .instructions img{width:100px;height:100px;}

Lưu và quay trở lại trang web bạn sẽ thấy kết quả:

Như vậy đến đây bạn đã tạo được một component tùy chỉnh độc lập và có thể tái sử dụng. Để 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 sau đó thêm một phiên bản thứ hai của component vừa tạo được như sau:

import Instructions from './Instructions.js' 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>} <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 lại và quay lại trình duyệt bạn sẽ thấy kết quả như sau:

Như vậy bạn có thể thấy rằng component 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.

Bạn xóa bớt đi một <Instructions /> và lưu tệp lại.

Bây giờ bạn đã có một component độc lập, có thể tái sử dụng và bạn có thể tái sử dụng nó nhiều lần. Tuy nhiên có một vấn đề nhỏ đó là, tất cả các file được trộn với nhau. Hình ảnh cho <Instructions> lại đang nằm trong cùng thư mục với <App>. Bạn cũng đang trộn mã CSS của <App> với CSS của <Instructions>.

Trong bước tiếp theo, bạn sẽ tạo cấu trúc file cung cấp cho mỗi component sự độc lập bằng cách nhóm chức năng, style và các phụ thuộc của chúng lại với nhau, giúp 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 được

Trong bước này, bạn sẽ tạo cấu trúc file để tổ chức các component 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 component, 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 component 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 component.

Vì bạn có một component độc lập, bạn cần cấu trúc file 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:

ls src

Ta sẽ có:

App.css App.js App.test.js emoji.svg index.css index.js Instructions.js reportWebVitals.js setupTests.js

Bạn có mã cho component <App> (App.css, App.js và App.test.js) nằm ngay trong thư mục root, tức là cùng vị trí với index.css và index.js và component tùy chỉnh của bạn là Instructions.js.

React 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 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 component, 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ụ: một tệp hình ảnh có tên Logo.svg rõ ràng có thể không phải là một phần của thành phần được gọi Header.js.

Một trong những cấu trúc đơn giản nhất là tạo một thư mục có tên components và bên trong có từng thư mục riêng cho từng component. Điều này sẽ cho phép bạn nhóm các component của mình một cách 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 component.

Tạo một thư mục components

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

mkdir src/components

Tiếp theo, di chuyển các file sau vào thư mục components: 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/

Ở đâ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 ở trang web của bạn:

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

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

Để làm điều đó, hãy mở file index.js rồi thay đổi đường dẫn App thành như sau:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

Lưu và quay lại trang web bạn sẽ không còn thấy lỗi nữa.

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ã component là bước đầu tiên, nhưng bạn vẫn có mã CSS của Instructions trộn lẫn trong file 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 component vào các thư mục riêng biệt.

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

Đầu tiên, hãy tạo một thư mục cụ thể cho component <App>:

mkdir src/components/App

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

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

Sau di chuyển xong thì bạn sẽ gặp lỗi tương tự ở trang web như phía trên:

Failed to compile ./src/components/App.js Error: ENOENT: no such file or directory, open 'C:\xampp\htdocs\reactjs\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 file index.js. Mở file index.js ra, sau đó cập nhật đường dẫn để App trỏ đến component App trong thư mục App:

import React from 'react'; import ReactDOM from 'react-dom'; import './index.css'; import App from './components/App/App'; import reportWebVitals from './reportWebVitals'; ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.getElementById('root') ); // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals();

Tiếp theo, vì component <Instructions> không ở cùng cấp thư mục với component <App>, nên bạn sẽ cần thay đổi đường dẫn import. Trước tiên ta cần tạo một thư mục cho Instructions. Tạo một thư mục có tên Instructions trong thư mục src/components:

mkdir src/components/Instructions

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

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

Bây giờ bạn có thể hoàn tất việc cập nhật đường dẫn file để kết nối component với ứng dụng của mình.

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

Bây giờ mỗi component đã nằm trong một thư mục riêng, bạn có thể điều chỉnh đường dẫn import vào App.js.

Mở file App.js. Vì đường dẫn là tương đối, bạn sẽ cần phải di chuyển lên một thư mục src/components - sau đó vào thư mục Instructions cho file Instructions.js, nhưng vì đây là file JavaScript nên bạn không cần phải đưa .js vào:

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

Lưu và quay lại trang web rồi refresh lại trang, bạn sẽ không thấy lỗi nữa.

Lưu ý: Bạn cũng có thể gọi file 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. Lợi thế của điều này là import của bạn nhỏ hơn một chút. Nếu đường dẫn trỏ đến một thư mục, thì quá trình import sẽ tự tìm kiếm một file index.js. Import cho src/components/App/index.js trong file 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 là bạn nên nhất quán.

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

Bây giờ mỗi component đã có thư mục riêng của nó, nhưng không phải mọi thứ đều hoàn toàn độc lập. Bước cuối cùng là ta cần tạo cho Instructions một file CSS riêng biệt.

Đầu tiên, tạo một file CSS có tên Instructions.css trong src/components/Instructions với nội dung như sau:

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

Lưu lại rồi mở file App.css ra để cập nhật nội dung thành (bỏ những phần có .instructions):

.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 lại, sau đó mở file Instructions.js để đưa vào import được đánh dấu như sau:

import { 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 lại và quay lại trang web bạn refresh lại bạn sẽ thấy trang web hoạt động bình thường.

Bây giờ bạn hãy nhìn lại cấu trúc thư mục lần cuối nhé.

Trước tiên là thư mục src:

ls src

Kết quả:

components index.css index.js reportWebVitals.js setupTests.js

Tiếp theo là thư mục components:

ls src/components

Kết quả:

App Instructions

Thư mục App:

ls src/components/App

Kết quả:

App.css App.js App.test.js

Thư mục Instructions:

ls src/components/Instructions

Kết quả:

Instructions.css Instructions.js emoji.svg

Đến đây thì bạn đã tạo ra một cấu trúc vững chắc cho dự án của mình, và việc 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 việc 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 route và sử dụng một thư mục chung cho các component được sử dụng trên các route.

Hiện tại, hãy gắn bó với một 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ẽ làm cho việc tái cấu trúc trở nên khó khăn.

Bây giờ bạn đã biết cách tạo và tổ chức một component dựa trên lớp, trong bước tiếp theo, bạn sẽ tạo một component hàm.

Bước 4 - Xây dựng một component hàm

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

Một component hàm là một hàm JavaScript trả về một số JSX. Nó không cần phải thừa kế 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 <Instructions> như một component hàm, bạn cần thay đổi lớp thành một hàm và loại bỏ phương thức render để 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 trình soạn thảo văn bản.

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

import { Component } from 'react'; import './Instructions.css'; import emoji from './emoji.svg' exportdefaultfunctionInstructions() { 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 ta xóa import { Component } đi, ta được:

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 ta loại bỏ phương thức render() đi:

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 lại và quay lại trang web, bạn refresh và sẽ vẫn nó thực hiện được bình thường.

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 phần thân hàm. Trước tiên, bạn cũng sẽ cần gán hàm cho một biến và sau đó export biến đó:

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

Các component hàm đơn giản và component dựa trên lớp rất giống nhau. Khi bạn có một component đơ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 component. 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 component và sử dụng các thuộc tính. Component 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 component hàm 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

Như vậy đến đây thì bạn có một ứng dụng nhỏ với các phần độc lập. Bạn đã biết cách tạo hai loại component chính: hàm và lớp. Bạn đã tách các phần của các component 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 đã biết cách import và sử dụng lại các component.

Với sự hiểu biết về component, 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 chuỗi các component là một bước quan trọng trong tư duy trong React.