Cách tạo các phần tử React với JSX
Trong 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 bạn 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 bạn , bạn có thể tận dụng các hàm và phương thức JavaScript, bao gồm ánh xạ mảng và đánh giá ngắn mạch cho 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 node trong đá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.
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.19.0 và npm version 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 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 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 - Thêm Đánh dấu vào Phần tử React
Như đã đề cập trước đó, 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ố chức năng 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 cơ bản giống HTML 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ẽ group các phần tử để React có thể biên dịch chúng với đánh dấu tối thiểu để lại kết quả HTML sạch.
Để bắt đầu, hãy tạo một dự án mới. Trên dòng lệnh của bạn, hãy chạy tập lệnh sau để cài đặt một dự án mới bằng cách sử dụng create-react-app :
- npx create-react-app jsx-tutorial
Sau khi dự án kết thúc, hãy thay đổi vào folder :
- cd jsx-tutorial
Trong cửa sổ hoặc tab terminal mới, hãy bắt đầu dự án bằng cách sử dụng tập lệnh start Tạo ứng dụng React . Trình duyệt sẽ tự động làm mới các thay đổi, vì vậy hãy để tập lệnh này chạy trong suốt thời gian bạn làm việc:
- npm start
Bạn sẽ nhận được một server local đ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 dự án đó tại http://localhost:3000/ . Nếu bạn đang chạy nó từ một server từ xa, địa chỉ sẽ là http:// your_IP_address :3000 .
Trình duyệt của bạn sẽ tải với một ứng dụng React được bao gồm như một phần của Create React App.
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 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ở App.js trong editor . Đây là thành phần root được đưa vào trang. Tất cả các thành phần sẽ bắt đầu từ đây.
Trong một terminal mới, di chuyển vào folder dự án và mở src/App.js bằng lệnh sau:
- nano src/App.js
Bạn sẽ thấy một file như thế này:
import React from 'react'; 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 xóa import logo from './logo.svg dòng import logo from './logo.svg và mọi thứ sau câu lệnh trả về trong hàm. Thay đổi nó để trả về null . Mã cuối cùng sẽ giống như sau:
import React from 'react'; import './App.css'; function App() { return null; } export default App; Lưu và thoát khỏi editor .
Cuối cùng, xóa logo. Trong cửa sổ terminal , nhập lệnh sau:
- rm src/logo.svg
Bạn sẽ không sử dụng file SVG này trong ứng dụng của bạn và bạn nên xóa các file không sử dụng khi làm việc. Nó sẽ tổ chức tốt hơn mã của bạn về lâu dài.
Bây giờ các phần này của dự án của bạn đã bị xóa, 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 React biên dịch 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 ra một mô hình về trang web 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 đó 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ự. Tuy nhiên, có một vài bắt được.
Đầu tiên, nếu bạn nhìn vào tab hoặc cửa sổ đang chạy server của bạn , bạn sẽ thấy điều này:
Output... ./src/App.js Line 1:8: 'React' is defined but never used no-unused-vars ... Đó là Linter nói với bạn rằng bạn không sử dụng mã nhập khẩu Phản ứng. Khi bạn thêm dòng import React from 'react' vào mã của bạn , bạn đang nhập mã JavaScript chuyển đổi mã JSX thành mã React. Nếu không có JSX, thì không cần nhập.
Hãy thay đổi điều đó bằng cách thêm một lượng nhỏ JSX. Bắt đầu bằng cách thay thế null bằng ví dụ Hello, World :
import React from 'react'; import './App.css'; function App() { return <h1>Hello, World</h1>; } export default App; Lưu các file . Nếu bạn nhìn vào terminal có server đang chạy, thông báo cảnh báo sẽ không xuất hiện . Nếu bạn truy cập trình duyệt của bạn , bạn sẽ thấy thông báo dưới dạng phần tử h1 .
Tiếp theo, bên dưới <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 React from 'react'; 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 cần đặt biểu thức trong dấu ngoặc đơn.
Lưu các file . Khi bạn thực hiện, bạn sẽ thấy lỗi trong terminal đang chạy server của bạn :
Output./src/App.js Line 7:5: Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? 5 | return( 6 | <h1>Hello, World</h1> > 7 | <p>I am writing JSX</p> | ^ 8 | ) 9 | } 10 | 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. 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 editor và thêm thẻ trống:
import React from 'react'; import './App.css'; function App() { return( <> <h1>Hello, World</h1> <p>I am writing JSX</p> </> ) } export default App; 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ể 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 kết quả được phân tích cú pháp.
Lưu mã và thoát khỏi file . 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ỏ:
Đến đây bạn đã thêm một số JSX cơ bản vào thành phần của bạn 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ố kiểu dáng vào thành phần của bạn .
Bước 2 - Thêm kiểu vào một 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 bạn để 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, một 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 đã nhập.
Đến đây bạn đã có mã của bạn , đã đến lúc thêm một số kiểu. Mở App.css trong editor của bạn:
- nano src/App.css
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. Vì bạn không cần CSS, bạn có thể xóa nó.
Sau khi xóa mã, bạn sẽ có một file trống.
Tiếp theo, bạn sẽ thêm một số kiểu để căn giữa văn bản. Trong src/App.css , hãy 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 lớp CSS được gọi 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 và thoát. 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 lớp CSS vào thành phần React của bạn . Mở mã JavaScript thành phần:
- nano src/App.js
Mã CSS đã được nhập bằng nhập dòng import './App.css' . Điều đó nghĩa là webpack sẽ kéo mã vào để tạo một biểu định kiểu cuối cùng, nhưng để áp dụng CSS cho các phần tử của bạn, bạn cần thêm các lớp.
Đầu tiên, trong editor của bạn, hãy thay đổi các thẻ trống, <> , thành <div> .
import React from 'react'; import './App.css'; function App() { return( <div> <h1>Hello, World</h1> <p>I am writing JSX</p> </div> ) } export default App; Trong mã này, bạn đã thay thế các thẻ trống— <> —bằng các thẻ div . Các thẻ trống rất hữu ích để group 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 lớp. Đây là nơi JSX sẽ bắt đầu khác với HTML. Nếu bạn muốn thêm một lớp 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 vài 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 đó 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 gọi là 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 class thuộc tính, bạn sẽ thêm thuộc tính className . Theo luật , nếu một thuộc tính không hoạt động như mong đợi, hãy thử thêm version vỏ 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. Có một vài trường hợp khác , nhưng may mắn thay danh sách khá ngắn.
Lưu ý: Trong React, các thuộc tính thường được gọi là đạo cụ . Đạo cụ 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 trùng với bất kỳ thông số kỹ thuật HTML nào. Trong hướng dẫn này, 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 đạo cụ 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.
Đến đây bạn đã biết cách thuộc tính class được sử dụng trong React, bạn có thể cập nhật mã của bạn để bao gồm các kiểu. Trong editor của bạn, hãy thêm className="container" vào thẻ div mở của bạn:
import React from 'react'; 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 . Khi bạn làm như vậy, trang sẽ reload 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 editor của bạn và thêm id greeting vào phần tử <h1> của bạn. Nó sẽ giống như HTML chuẩn:
import React from 'react'; 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à reload trình duyệt. Nó sẽ giống nhau.
Lúc này, 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ó giống HTML, nhưng nó có sức mạnh của JavaScript. Điều đó 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 bạn . Để tham chiếu một thuộc tính, hãy bọc nó bằng dấu ngoặc nhọn— {} —trên dấu ngoặc kép.
Trong editor 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 React from 'react'; 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 return được gọi là greeting với giá trị là "greeting" , sau đó tham chiếu đến biến trong thuộc tính id của <h1> của bạn.
Lưu và thoát khỏi file . Trang sẽ giống nhau, nhưng có thẻ id .
Lúc này, bạn đã làm việc với một số phần tử của riêng chúng, nhưng bạn cũng 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 biểu tượng cảm xúc, bạn sẽ nhận được Tên viết tắt CLDR của họ.
Để bắt đầu, bạn cần thêm một vài yếu tố khác vào trang. Mở src/App.js trong editor của bạn. Giữ nó mở trong bước này.
- nano src/App.js
Trước tiên, hãy 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 React from 'react'; 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; Ở đây bạn đã tạo một <ul> để chứa danh sách các biểu tượng cảm xúc. 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 <span> có thêm một số thuộc tính. Mỗi span có 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 trợ năng 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 aria-label và một thuộc tính id với tên của biểu tượng cảm xúc. aria-label 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à thoát khỏi file . Trình duyệt của bạn sẽ làm mới và bạn sẽ thấy điều này:
Bây giờ thêm một chút phong cách. Mở mã CSS trong editor của bạn:
- nano src/App.css
Thêm mã được đánh dấu sau để xóa nền và đường viền mặc định cho các node 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 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 node và thay đổi phông chữ. Bạn cũng đã xóa các kiểu danh sách và thêm display: flex vào phần tử <ul> để làm cho nó nằm ngang.
Lưu file CSS. Trình duyệt của bạn sẽ làm mới và bạn sẽ thấy điều này:
Đến đây 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 user . Trong bước tiếp theo, bạn sẽ bắt đầu làm cho trang tương tác 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 file .
Đến đây 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 bạn đượ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 bạn thay vì đính kèm trình xử lý sự kiện:
import React from 'react'; 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 , nghĩa là bạn đã thêm nó dưới dạng onClick . Thuộc tính onClick này sử dụng chức năng ẩn danh để truy xuất thông tin về mục đã được nhấp.
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 bằng event.target.id . Bạn có thể kích hoạt cảnh báo bằng hàm alert() .
Lưu các file . Trong 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 cảnh báo có tên.
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à chuyể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 đầu vào và kết quả , 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. Lợi thế 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 file riêng sau đó nếu muốn.
Trong editor của bạn, hãy tạo một hàm gọi là displayEmojiName lấy sự kiện và gọi hàm alert() với một id. Sau đó, chuyển hàm cho từng thuộc tính onClick :
import React from 'react'; 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 các file . Trong trình duyệt của bạn, nhấp vào biểu tượng cảm xúc và bạn sẽ thấy cảnh 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 bạn 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 chuẩn.
Trong editor , bạn cần tạo một mảng dữ liệu biểu tượng cảm xúc trong file src/App.js Mở lại file nếu bạn đã đóng nó:
- nano 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 ý 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 React from 'react'; 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() { ... } export default App; Đến đây bạn có dữ liệu, bạn có thể lặp lại nó. Để sử dụng JavaScript bên trong JSX, bạn cần bao quanh nó bằng dấu ngoặc nhọn: {} . Điều này cũng giống như khi bạn thêm chức năng vào thuộc tính.
Để tạo các thành phần React, bạn 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 lưu ý khi viết mã.
Đầu tiên, một group các mục cần được bao quanh bởi một containers <div> . Thứ hai, mỗi mục cần một thuộc tính đặc biệt gọi là key . key cần phải là một phần dữ liệu duy nhất mà React có thể sử dụng để theo dõi các phần tử để có thể biết khi nào cần cập nhật thành phần . Khóa sẽ bị loại bỏ khỏi HTML đã biên dịch, vì nó chỉ dành cho mục đích nội bộ. Khi nào bạn làm việc với các vòng lặp, bạn 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 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ả trô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> sẽ là containers . Bạn sẽ ánh xạ dữ liệu và trả về một <li> kèm theo một khóa 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 <button> và <span> bằng thông tin từ vòng lặp.
Trong editor của bạn, hãy thêm những thứ sau:
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"; 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 mã, bạn đã ánh xạ qua mảng emojis trong <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 key tựa key . Nút sẽ có chức năng tương tự như bình thường. Trong phần tử <span> , thay thế aria-label và id bằng name . Nội dung của <span> phải là biểu tượng cảm xúc.
Lưu các file . Cửa sổ của bạn sẽ được làm mới và bạn sẽ thấy dữ liệu. Lưu ý khóa không có trong HTML được tạo.
Việc 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 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 user nếu một số trường hợp nhất định là đúng hoặc bạn có thể cần hiển thị một số thông tin account cho administrator mà bạn không muốn user 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 nghĩa là bạn sẽ sử dụng một điều kiện và nếu phần đầu tiên là trung thực, 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 user đã đăng nhập, bạn sẽ bao quanh phần tử bằng dấu ngoặc nhọn và thêm điều kiện trước đó.
{isLoggedIn && <button>Log Out</button>} Trong ví dụ này, bạn đang sử dụng toán tử && , trả về giá trị cuối cùng nếu mọi thứ đều trung thực. Nếu không, nó trả về false , điều này sẽ thông báo cho React không trả lại đánh dấu bổ sung. Nếu isLoggedIn là thật, React sẽ hiển thị nút. Nếu isLoggedIn là sai, 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 React from 'react'; import './App.css'; ... 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> ... </ul> </div> ) } export default App; Trong editor của bạn , bạn đã tạo một biến có tên là displayAction với giá trị là false. Sau đó, bạn bao quanh <p> bằng dấu ngoặc nhọn. Ở đầu dấu ngoặc nhọn, bạn đã thêm displayAction && để tạo điều kiện.
Lưu file và bạn sẽ thấy phần tử biến mất trong trình duyệt của bạn . Đ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 phần mềm hỗ trợ từ thành phần mẹ .
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.
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 bạn , thêm kiểu cho các phần tử đó, chuyể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 bạn để giảm mã trùng lặp và hiển thị và ẩn các phần tử có điều kiện.
Đây là cơ sở bạn cần để chế tạo các thành phần 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.
Nếu bạn muốn tìm hiểu thêm về React, hãy xem trang chủ đề React của ta .
Các tin liên quan
