ReactJS: Cách tạo các phần tử React với JSX
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 mình và sẽ cho phép bạn xây dựng các thành phần React trông giống như đánh dấu HTML tiêu chuẩn. JSX là ngôn ngữ tạo khuôn mẫu của các phần tử React và do đó là nền tảng cho bất kỳ đánh dấu nào mà React sẽ hiển thị vào ứng dụng của bạn.
Vì JSX cho phép bạn cũng viết JavaScript trong đánh dấu của mình, bạn sẽ có thể tận dụng các hàm và phương thức JavaScript, bao gồm ánh xạ mảng và các điều kiện.
Là một phần của hướng dẫn, bạn sẽ nắm bắt các sự kiện nhấp chuột trực tiếp vào các nút trong phần đánh dấu và bắt các trường hợp khi cú pháp không khớp chính xác với HTML chuẩn, chẳng hạn như với các lớp CSS. Ở cuối hướng dẫn này, bạn sẽ có một ứng dụng đang hoạt động sử dụng nhiều tính năng JSX để hiển thị danh sách các phần tử có trình nghe nhấp chuột được tích hợp sẵn. Đây là một mẫu phổ biến trong các ứng dụng React mà bạn sẽ sử dụng thường xuyên trong quá trình học framework. Bạn cũng sẽ có thể kết hợp các phần tử HTML chuẩn cùng với JavaScript để xem cách React cung cấp cho bạn khả năng tạo các đoạn mã nhỏ, có thể tái sử dụng.
Điều kiện tiên quyết
- Bạn sẽ 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 phiên bản 10.19.0 và npm phiên bản 6.13.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 sẽ cần có khả năng tạo ứng dụng bằng Create React App.
- Bạn cũng sẽ cần 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 - Thêm Đánh dấu vào Phần tử React
Như đã đề cập ở trên, React có một ngôn ngữ đánh dấu đặc biệt được gọi là JSX. Nó là sự kết hợp giữa cú pháp HTML và JavaScript trông giống như sau:
<div> {inventory.filter(item => item.available).map(item => ( <Card> <div className="title"}>{item.name}</div> <div className="price">{item.price}</div> </Card> )) } </div>
Bạn sẽ nhận ra một số hàm JavaScript như .filter và .map, cũng như một số HTML tiêu chuẩn như <div>. Nhưng có những phần khác trông giống cả HTML và JavaScript, chẳng hạn như <Card> và className.
Đây là JSX, ngôn ngữ đánh dấu đặc biệt mang lại cho các thành phần React cảm giác của HTML với sức mạnh của JavaScript.
Trong bước này, bạn sẽ học cách thêm cú pháp giống HTML cơ bản vào phần tử React hiện có. Để bắt đầu, bạn sẽ thêm các phần tử HTML chuẩn vào một hàm JavaScript, sau đó xem mã đã biên dịch trong trình duyệt. Bạn cũng sẽ nhóm các phần tử để React có thể biên dịch chúng với đánh dấu tối thiểu để có đầu ra HTML thuần khiết.
Để bắt đầu, ta hãy tạo một dự án mới. Bạn hãy mở terminal và đưa vào lệnh sau sử dụng create-react-app:
npx create-react-app jsx-tutorial
Sau khi tạo xong dự án ta hãy thay đổi vào thư mục:
cd jsx-tutorial
Tiếp theo ta khởi chạy dự án với tập lệnh start:
npm start
Bạn sẽ nhận được một máy chủ cục bộ đang chạy. Nếu dự án không mở trong cửa sổ trình duyệt, bạn có thể tìm thấy nó tại http://localhost: 3000/. Nếu bạn đang chạy từ một máy chủ từ xa, địa chỉ sẽ là http://your_IP_address: 3000.
Bạn sẽ xây dựng một tập hợp các thành phần tùy chỉnh hoàn toàn mới, vì vậy bạn sẽ cần bắt đầu bằng cách xóa một số mã soạn sẵn để bạn có thể có một dự án trống. Để bắt đầu, hãy mở file App.js ra, file này nằm trong thư mục src/, nội dung của file như sau:
import logo from './logo.svg';
import './App.css';
function App() {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.js</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
</div>
);
}
export default App;
Bây giờ, hãy thay đổi file App.js để nó chỉ còn nội dung như sau:
import './App.css'; function App() { return null; } export default App;
Cuối cùng, xóa logo. Trong cửa sổ terminal, bạn nhập lệnh sau:
rm src/logo.svg
Bạn sẽ không sử dụng tệp SVG này trong ứng dụng của mình và bạn nên xóa các tệp không sử dụng khi làm việc. Nó sẽ có tổ chức tốt hơn về lâu dài.
Bây giờ bạn có thể chuyển sang khám phá các khía cạnh của JSX. Ngôn ngữ đánh dấu này được biên dịch bởi React và cuối cùng trở thành HTML mà bạn thấy trên trang web. Không đi quá sâu vào nội bộ, React lấy JSX và tạo một mô hình về trang của bạn sẽ trông như thế nào, sau đó tạo các phần tử cần thiết và thêm chúng vào trang.
Điều đó có nghĩa là bạn có thể viết những gì trông giống như HTML và mong đợi rằng HTML được hiển thị sẽ tương tự.
Giờ ta hãy thêm một lượng nhỏ JSX bằng cách thay thế null bằng ví dụ Hello, World như sau:
import './App.css'; function App() { return <h1>Hello, World</h1>; } export default App;
Nếu bạn truy cập trình duyệt của mình, bạn sẽ thấy thông báo dưới dạng phần tử h1:
Tiếp theo, bên dưới thẻ <h1>, hãy thêm một thẻ đoạn có chứa chuỗi I am writing JSX. Mã sẽ trông như thế này:
import './App.css'; function App() { return( <h1>Hello, World</h1> <p>I am writing JSX</p> ) } export default App;
Vì JSX kéo dài nhiều dòng, bạn sẽ cần đặt biểu thức trong dấu ngoặc đơn () sau return.
Lưu các tập tin. Khi bạn thực hiện, bạn sẽ thấy lỗi trong thiết bị đầu cuối đang chạy máy chủ của mình:
./src/App.js
SyntaxError: C:\xampp\htdocs\reactjs\jsx-tutorial\src\App.js: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (6:3)
4 | return(
5 | <h1>Hello, World</h1>
> 6 | <p>I am writing JSX</p>
| ^
7 | )
8 | }
9 | export default App;
Khi bạn trả về JSX từ một hàm hoặc câu lệnh, bạn phải trả về một phần tử duy nhất. Phần tử đó có thể có các phần tử con lồng nhau, nhưng phải có một phần tử cấp cao nhất duy nhất. Trong trường hợp này, bạn đang trả về hai phần tử.
Cách khắc phục là một thay đổi mã nhỏ. Bao quanh mã bằng một thẻ trống. Thẻ trống là một phần tử HTML không có bất kỳ từ nào. Nó trông như thế này: <> </>.
Quay lại ./src/App.js trong trình chỉnh sửa của bạn và thêm thẻ trống:
import './App.css'; function App() { return( <> <h1>Hello, World</h1> <p>I am writing JSX</p> </> ) } export default App;
Bạn lưu lại code và quay lại trình duyệt, kết quả là bạn sẽ không thấy lỗi nữa.
Thẻ trống tạo ra một phần tử duy nhất, nhưng khi mã được biên dịch, nó không được thêm vào đánh dấu cuối cùng. Điều này sẽ giữ cho mã của bạn sạch sẽ trong khi vẫn cung cấp cho React một phần tử duy nhất.
Lưu ý: Bạn cũng có thể bao bọc mã bằng một div thay vì các thẻ trống, miễn là mã trả về một phần tử. Trong ví dụ này, thẻ trống có lợi thế là không thêm đánh dấu bổ sung vào đầu ra được phân tích cú pháp.
Lưu mã và thoát khỏi tệp. Trình duyệt của bạn sẽ làm mới và hiển thị trang đã cập nhật với phần tử đoạn văn. Ngoài ra, khi mã được chuyển đổi, các thẻ trống sẽ bị loại bỏ:
Bây giờ bạn đã thêm một số JSX cơ bản vào thành phần của mình và tìm hiểu cách tất cả JSX cần được lồng vào một thành phần duy nhất. Trong bước tiếp theo, bạn sẽ thêm một số style vào thành phần của mình.
Bước 2 - Thêm style vào phần tử có thuộc tính
Trong bước này, bạn sẽ tạo kiểu cho các phần tử trong thành phần của mình để tìm hiểu cách các thuộc tính HTML hoạt động với JSX. Có nhiều tùy chọn tạo kiểu trong React. Một số liên quan đến việc viết CSS bằng Javascript, số khác sử dụng bộ tiền xử lý. Trong hướng dẫn này, bạn sẽ làm việc với các lớp CSS và CSS đã import.
Bây giờ bạn đã có mã của mình, đã đến lúc thêm một số style. Mở App.css trong trình soạn thảo văn bản của bạn ra, vì bạn đang bắt đầu với JSX mới, CSS hiện tại đề cập đến các phần tử không còn tồn tại. Do đó bạn hãy xóa trắng mọi thứ trong file App.css.
Tiếp theo, bạn sẽ thêm một số style để căn giữa văn bản. Trong src/App.css, thêm mã sau:
.container {
display: flex;
flex-direction: column;
align-items: center;
}
Trong khối mã này, bạn đã tạo một bộ chọn class CSS có tên là .container và sử dụng bộ chọn đó để căn giữa nội dung bằng cách sử dụng display: flex.
Lưu file, khi đó trình duyệt sẽ cập nhật, nhưng không có gì thay đổi. Trước khi có thể thấy sự thay đổi, bạn cần thêm class CSS vào component React của mình.
Mở file App.js ra và thay thẻ trống bằng thẻ <div>, ta được:
import './App.css';
function App() {
return(
<div>
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;
Các thẻ trống rất hữu ích để nhóm mã của bạn mà không cần thêm bất kỳ thẻ bổ sung nào, nhưng ở đây bạn cần sử dụng div vì các thẻ trống không chấp nhận bất kỳ thuộc tính HTML nào.
Tiếp theo, bạn cần thêm tên class. Đây là nơi JSX sẽ bắt đầu khác với HTML. Nếu bạn muốn thêm một class vào một phần tử HTML thông thường, bạn sẽ làm như thế này:
<div class = "container" >
Nhưng vì JSX là JavaScript nên nó có một số hạn chế. Một trong những hạn chế là JavaScript có các từ khóa dành riêng. Điều đó có nghĩa là bạn không thể sử dụng một số từ nhất định trong bất kỳ mã JavaScript nào. Ví dụ: bạn không thể tạo một biến có tên null vì từ đó đã được đặt trước.
Một trong những từ dành riêng là class. React xoay quanh từ dành riêng này bằng cách thay đổi nó một chút. Thay vì thêm thuộc tính class, bạn sẽ thêm thuộc tính className. Theo quy tắc, nếu một thuộc tính không hoạt động như mong đợi, hãy thử thêm phiên bản dạng lạc đà. Một thuộc tính hơi khác là thuộc tính for mà bạn sử dụng cho nhãn (<label>). Có một vài trường hợp khác, nhưng may mắn thay, danh sách này khá ngắn.
Lưu ý: Trong React, các thuộc tính thường được gọi là
props. Props là những phần dữ liệu mà bạn có thể chuyển cho các thành phần tùy chỉnh khác. Chúng trông giống như các thuộc tính ngoại trừ việc chúng không khớp với bất kỳ thông số kỹ thuật HTML nào. Trong hướng dẫn này, chúng ta sẽ gọi chúng là các thuộc tính vì chúng chủ yếu được sử dụng giống như các thuộc tính HTML tiêu chuẩn. Điều này sẽ phân biệt chúng với các props không hoạt động như các thuộc tính HTML, sẽ được đề cập ở phần sau của loạt bài này.
Bây giờ bạn đã biết cách thuộc tính lớp được sử dụng trong React, bạn có thể cập nhật mã của mình để có các style. Trong trình soạn thảo văn bản của bạn, hãy thêm className = "container" vào thẻ div mở của bạn:
import './App.css';
function App() {
return(
<div className="container">
<h1>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;
Lưu các file lại, khi đó trang sẽ tải lại và nội dung sẽ được căn giữa.
Thuộc tính className là duy nhất trong React. Bạn có thể thêm hầu hết các thuộc tính HTML vào JSX mà không có bất kỳ thay đổi nào. Ví dụ: quay lại trình soạn thảo văn bản của bạn và thêm id lời chào vào phần tử <h1> của bạn. Nó sẽ giống như HTML tiêu chuẩn:
import './App.css';
function App() {
return(
<div className="container">
<h1 id="greeting">Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;
Lưu trang và tải lại trình duyệt, sẽ không có lỗi xảy ra.
Đến đây thì bạn đã thấy rằng JSX trông giống như đánh dấu tiêu chuẩn, nhưng lợi thế của JSX là mặc dù nó trông giống HTML, nhưng nó có sức mạnh của JavaScript. Điều đó có nghĩa là bạn có thể gán các biến và tham chiếu chúng trong các thuộc tính của mình. Để tham chiếu một thuộc tính, hãy bọc nó bằng cặp ngoặc xoắn - {} - thay cho các dấu nháy kép.
Trong trình soạn thảo văn bản của bạn, hãy thêm các dòng được đánh dấu sau để tham chiếu một thuộc tính:
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
</div>
)
}
export default App;
Trong đoạn mã này, bạn đã tạo một biến phía trên câu lệnh trả về có tên là greeting với giá trị là "greeting", sau đó tham chiếu đến biến trong thuộc tính id của thẻ <h1> của bạn.
Lưu lại và bạn sẽ thấy không có lỗi xảy ra.
Như vậy bạn đã có thể sử dụng JSX để thêm nhiều phần tử HTML và lồng chúng để tạo các trang phức tạp.
Để chứng minh điều này, bạn sẽ tạo một trang với danh sách các biểu tượng cảm xúc. Những biểu tượng cảm xúc này sẽ được bao bọc bằng một phần tử <button>. Khi bạn nhấp vào một biểu tượng cảm xúc, bạn sẽ nhận được Tên viết tắt CLDR của nó.
Để bắt đầu, bạn sẽ cần thêm một vài yếu tố khác vào trang. Mở file src/App.js trong trình soạn thảo văn bản của bạn.
Đầu tiên, thêm danh sách các biểu tượng cảm xúc bằng cách thêm các dòng được đánh dấu sau:
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;
Mỗi biểu tượng cảm xúc nằm trong một phần tử <li> riêng biệt và được bao quanh bằng một phần tử <button>. Trong bước tiếp theo, bạn sẽ thêm một sự kiện vào nút này.
Bạn cũng bao quanh biểu tượng cảm xúc bằng thẻ <span> có thêm một số thuộc tính. Mỗi thẻ <span> có một thuộc tính role được đặt thành role img. Điều này sẽ báo hiệu cho phần mềm hỗ trợ tiếp cận rằng phần tử đang hoạt động giống như một hình ảnh. Ngoài ra, mỗi <span> còn có một thuộc tính aria-label và một thuộc tính id với tên của biểu tượng cảm xúc. Nhãn aria sẽ cho khách truy cập biết với trình đọc màn hình những gì được hiển thị. Bạn sẽ sử dụng id khi viết các sự kiện trong bước tiếp theo.
Khi bạn viết mã theo cách này, bạn đang sử dụng các phần tử ngữ nghĩa, điều này sẽ giúp giữ cho trang có thể truy cập và dễ dàng phân tích cú pháp cho trình đọc màn hình.
Lưu và quay lại trình duyệt của bạn và bạn sẽ thấy:
Bây giờ thêm một chút style. Bạn hãy mở file src/App.csstrong trình soạn thảo văn bản của bạn và thêm mã được đánh dấu như sau để xóa nền và đường viền mặc định cho các nút trong khi tăng kích thước 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;
}
Trong đoạn mã này, bạn sử dụng font-size, border và các thông số khác để điều chỉnh giao diện của các nút của bạn và thay đổi phông chữ. Bạn cũng loại bỏ các kiểu danh sách và thêm display: flex vào <ul> để làm cho nó được đặt theo phương ngang.
Lưu và quay lại trình duyệt của bạn và bạn sẽ thấy:
Bây giờ bạn đã làm việc với một số phần tử JSX trông giống như HTML thông thường. Bạn đã thêm các lớp, id và thẻ aria và đã làm việc với dữ liệu dưới dạng chuỗi và biến. Nhưng React cũng sử dụng các thuộc tính để xác định cách các phần tử của bạn phản hồi với các sự kiện của người dùng. Trong bước tiếp theo, bạn sẽ bắt đầu tạo tính tương tác cho trang bằng cách thêm các sự kiện vào nút.
Bước 3 - Thêm sự kiện vào phần tử
Trong bước này, bạn sẽ thêm sự kiện vào các phần tử bằng cách sử dụng các thuộc tính đặc biệt và ghi lại sự kiện nhấp chuột trên phần tử nút. Bạn sẽ học cách nắm bắt thông tin từ sự kiện để thực hiện một hành động khác hoặc sử dụng thông tin khác trong phạm vi của tệp.
Bây giờ bạn đã có một trang cơ bản với thông tin, đã đến lúc thêm một vài sự kiện vào đó. Có nhiều trình xử lý sự kiện mà bạn có thể thêm vào các phần tử HTML. React cung cấp cho bạn quyền truy cập vào tất cả những thứ này. Vì mã JavaScript của bạn được kết hợp với đánh dấu của bạn, bạn có thể nhanh chóng thêm các sự kiện trong khi vẫn giữ cho mã của mình được tổ chức tốt.
Để bắt đầu, hãy thêm trình xử lý sự kiện onclick. Điều này cho phép bạn thêm một số mã JavaScript trực tiếp vào phần tử của mình thay vì đính kèm trình xử lý sự kiện:
import './App.css';
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button
onClick={event => alert(event.target.id)}
>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;
Vì đây là JSX, bạn camelCased onclick, có nghĩa là bạn đã thêm nó vào onClick. Thuộc tính onClick này sử dụng một hàm ẩn danh để truy xuất thông tin về mục đã được nhấp vào.
Bạn đã thêm một hàm mũi tên ẩn danh sẽ nhận sự kiện từ nút được nhấp và sự kiện sẽ có mục tiêu là phần tử <span>. Thông tin bạn cần có trong thuộc tính id mà bạn có thể truy cập event.target.id. Bạn có thể kích hoạt cảnh báo bằng hàm alert().
Lưu lại và quay lại trình duyệt của bạn, nhấp vào một trong các biểu tượng cảm xúc và bạn sẽ nhận được thông báo.
Bạn có thể giảm sự trùng lặp bằng cách khai báo hàm một lần và truyền nó cho mỗi hành động onClick. Vì hàm không dựa vào bất kỳ thứ gì khác ngoài các đầu vào và đầu ra, bạn có thể khai báo nó bên ngoài hàm thành phần chính. Nói cách khác, hàm không cần truy cập phạm vi của thành phần. Ưu điểm của việc giữ chúng riêng biệt là hàm thành phần của bạn ngắn hơn một chút và bạn có thể chuyển hàm ra một tệp riêng sau đó nếu muốn.
Trong trình soạn thảo văn bản của bạn, hãy tạo một hàm được gọi là displayEmojiName nhận sự kiện và gọi hàm alert() bằng một id. Sau đó, chuyển hàm cho từng thuộc tính onClick:
import './App.css';
const displayEmojiName = event => alert(event.target.id);
function App() {
const greeting = "greeting";
return(
<div className="container">
<h1 id={greeting}>Hello, World</h1>
<p>I am writing JSX</p>
<ul>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="grinning face" id="grinning face">😀</span>
</button>
</li>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="party popper" id="party popper">🎉</span>
</button>
</li>
<li>
<button
onClick={displayEmojiName}
>
<span role="img" aria-label="woman dancing" id="woman dancing">💃</span>
</button>
</li>
</ul>
</div>
)
}
export default App;
Lưu và quay lại trình duyệt của bạn, nhấp vào một biểu tượng cảm xúc và bạn sẽ thấy thông báo tương tự.
Trong bước này, bạn đã thêm các sự kiện vào từng phần tử. Bạn cũng đã thấy cách JSX sử dụng các tên hơi khác nhau cho các sự kiện phần tử và bạn bắt đầu viết mã có thể sử dụng lại bằng cách sử dụng hàm và sử dụng lại nó trên một số phần tử. Trong bước tiếp theo, bạn sẽ viết một hàm có thể sử dụng lại trả về các phần tử JSX thay vì viết từng phần tử bằng tay. Điều này sẽ làm giảm sự trùng lặp hơn nữa.
Bước 4 - Ánh xạ dữ liệu để tạo phần tử
Trong bước này, bạn sẽ chuyển sang sử dụng JSX như một đánh dấu đơn giản. Bạn sẽ học cách kết hợp nó với JavaScript để tạo đánh dấu động giúp giảm mã và cải thiện khả năng đọc. Bạn sẽ cấu trúc lại mã của mình thành một mảng mà bạn sẽ lặp lại để tạo các phần tử HTML.
JSX không giới hạn bạn với một cú pháp giống HTML. Nó cũng cung cấp cho bạn khả năng sử dụng JavaScript trực tiếp trong đánh dấu của bạn. Bạn đã thử điều này một chút bằng cách chuyển các hàm cho các thuộc tính. Bạn cũng đã sử dụng các biến để sử dụng lại dữ liệu. Bây giờ đã đến lúc tạo JSX trực tiếp từ dữ liệu bằng cách sử dụng mã JavaScript tiêu chuẩn.
Trong trình soạn thảo văn bản, bạn sẽ cần tạo một mảng dữ liệu biểu tượng cảm xúc trong file src/App.js.
Thêm một mảng sẽ chứa các đối tượng có biểu tượng cảm xúc và tên biểu tượng cảm xúc. Lưu ý rằng biểu tượng cảm xúc cần được bao quanh bởi dấu ngoặc kép. Tạo mảng này bên trên hàm App:
import './App.css'; const displayEmojiName = event => alert(event.target.id); const emojis = [ { emoji: "😀", name: "grinning face" }, { emoji: "🎉", name: "party popper" }, { emoji: "💃", name: "woman dancing" } ];function App() { const greeting = "greeting"; return( <div className="container"> <h1 id={greeting}>Hello, World</h1> <p>I am writing JSX</p> <ul> <li> <button onClick={displayEmojiName} > <span role="img" aria-label="grinning face" id="grinning face">😀</span> </button> </li> <li> <button onClick={displayEmojiName} > <span role="img" aria-label="party popper" id="party popper">🎉</span> </button> </li> <li> <button onClick={displayEmojiName} > <span role="img" aria-label="woman dancing" id="woman dancing">💃</span> </button> </li> </ul> </div> ) } export default App;
Bây giờ bạn đã có dữ liệu, bạn có thể sử dụng nó. Để sử dụng bên trong JavaScript của JSX, bạn cần phải bao quanh nó với cặp ngoặc xoắn: {}. Điều này cũng giống như khi bạn thêm các hàm vào các thuộc tính.
Để tạo các component React, bạn sẽ cần chuyển đổi dữ liệu sang các phần tử JSX. Để làm điều này, bạn sẽ ánh xạ dữ liệu và trả về một phần tử JSX. Có một số điều bạn cần ghi nhớ khi viết mã.
Đầu tiên, một nhóm các mục cần được bao quanh bởi một container <div>. Thứ hai, mỗi mục cần một thuộc tính đặc biệt được gọi là key. Các key là một mảnh duy nhất của dữ liệu mà React có thể sử dụng để theo dõi các phần tử để nó có thể biết khi nào nên cập nhật component. Key sẽ bị loại bỏ khỏi HTML đã biên dịch, vì nó chỉ dành cho mục đích nội bộ. Bất cứ khi nào bạn làm việc với các vòng lặp, bạn sẽ cần thêm một chuỗi đơn giản làm khóa.
Dưới đây là một ví dụ đơn giản hóa ánh xạ danh sách tên vào một file chứa <div>:
...
const names = [
"Atul Gawande",
"Stan Sakai",
"Barry Lopez"
];
return(
<div>
{names.map(name => <div key={name}>{name}</div>)}
</div>
)
...
HTML kết quả sẽ giống như sau:
...
<div>
<div>Atul Gawande</div>
<div>Stan Sakai</div>
<div>Barry Lopez</div>
</div>
...
Việc chuyển đổi danh sách biểu tượng cảm xúc cũng sẽ tương tự. <ul> là container. Bạn sẽ ánh xạ dữ liệu và trả về một <li> với một key của tên ngắn biểu tượng cảm xúc. Bạn sẽ thay thế dữ liệu được mã hóa cứng trong thẻ <button> và <span> bằng thông tin từ vòng lặp.
Trong trình soạn thảo văn bản của bạn, hãy thêm những dòng được highlight 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";return( <div className="container"> <h1 id={greeting}>Hello, World</h1> <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;
Trong đoạn code trên, bạn đã ánh xạ (map) lên mảng emojis trong thẻ <ul> và trả về một <li>. Trong mỗi <li> bạn đã sử dụng tên biểu tượng cảm xúc làm prop key. Trong phần tử <span>, thay thế aria-label và id bằng name. Nội dung của thẻ <span> phải là biểu tượng cảm xúc.
Lưu lại và quay lại trình duyệt và bạn sẽ thấy kết quả tương tự. Lưu ý rằng key không có trong HTML được tạo.
Kết hợp JSX với JavaScript tiêu chuẩn cung cấp cho bạn rất nhiều công cụ để tạo nội dung động và bạn có thể sử dụng bất kỳ JavaScript tiêu chuẩn nào bạn muốn. Trong bước này, bạn đã thay thế JSX được mã hóa cứng bằng một mảng và một vòng lặp để tạo HTML động. Trong bước tiếp theo, bạn sẽ hiển thị thông tin có điều kiện bằng cách sử dụng dấu tròn.
Bước 5 - Hiển thị có điều kiện các phần tử có mạch ngắn
Trong bước này, bạn sẽ sử dụng dấu tròn để hiển thị có điều kiện các phần tử HTML nhất định. Điều này sẽ cho phép bạn tạo các thành phần có thể ẩn hoặc hiển thị HTML dựa trên thông tin bổ sung, giúp các thành phần của bạn linh hoạt để xử lý nhiều tình huống.
Đôi khi bạn sẽ cần một thành phần để hiển thị thông tin trong một số trường hợp chứ không phải các thành phần khác. Ví dụ: bạn có thể chỉ muốn hiển thị thông báo cảnh báo cho người dùng nếu một số trường hợp nhất định là đúng hoặc bạn có thể muốn hiển thị một số thông tin tài khoản cho quản trị viên mà bạn không muốn người dùng bình thường nhìn thấy.
Để làm điều này, bạn sẽ sử dụng ngắn mạch. Điều này có nghĩa là bạn sẽ sử dụng một điều kiện và nếu phần đầu tiên là đúng, nó sẽ trả về thông tin trong phần thứ hai.
Đây là một ví dụ. Nếu bạn chỉ muốn hiển thị một nút khi người dùng đã đăng nhập, bạn sẽ bao quanh phần tử bằng cặp ngoặc xoắn và thêm điều kiện phía trước.
{isLoggedIn && <button>Log Out</button>}
Trong ví dụ này, bạn đang sử dụng toán tử &&, toán tử trả về giá trị cuối cùng nếu các điều kiện đều đúng. Nếu không, nó sẽ trả về false, điều này sẽ thông báo cho React biết sẽ không trả về đánh dấu bổ sung nào. Nếu isLoggedIn là đúng, thì React sẽ hiển thị nút. Nếu isLoggedIn là sai thì nó sẽ không hiển thị nút.
Để thử điều này, hãy thêm các dòng được đánh dấu 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;
Như vậy bạn đã tạo một biến được gọi displayAction với giá trị là false.Sau đó bạn bao quanh thẻ <p> bằng dấu ngoặc nhọn. Khi bắt đầu dấu ngoặc nhọn, bạn đã thêm vào displayAction && để thiết lập điều kiện.
Lưu tệp, quay lại trình duyệt và bạn sẽ thấy phần tử <p> biến mất trong trình duyệt của mình. Điều quan trọng, nó cũng sẽ không xuất hiện trong HTML được tạo. Điều này không giống như ẩn một phần tử bằng CSS. Nó hoàn toàn không tồn tại trong lần đánh dấu cuối cùng.
Ngay bây giờ giá trị của displayAction đã được mã hóa cứng, nhưng bạn cũng có thể lưu trữ giá trị đó dưới dạng trạng thái hoặc chuyển nó dưới dạng hỗ trợ từ thành phần props.
Trong bước này, bạn đã học cách hiển thị có điều kiện các phần tử. Điều này cung cấp cho bạn khả năng tạo các thành phần có thể tùy chỉnh dựa trên thông tin khác.
Phần kết luận
Đến đây bạn đã tạo một ứng dụng tùy chỉnh với JSX. Bạn đã học cách thêm các phần tử giống HTML vào thành phần của mình, thêm style cho các phần tử đó, truyền các thuộc tính để tạo đánh dấu ngữ nghĩa và có thể truy cập cũng như thêm sự kiện vào các thành phần. Sau đó, bạn trộn JavaScript vào JSX của mình để giảm mã trùng lặp và hiển thị và ẩn các phần tử theo điều kiện.
Đây là cơ sở bạn cần để tạo các component sau này. Sử dụng kết hợp JavaScript và HTML, bạn có thể xây dựng các thành phần động linh hoạt và cho phép ứng dụng của bạn phát triển và thay đổi.