Trong bài viết này, chúng ta sẽ nói xin chào với React. Chúng ta sẽ khám phá một chút chi tiết về nền tảng và các trường hợp sử dụng của nó, thiết lập chuỗi công cụ React cơ bản trên máy tính cục bộ của chúng ta, đồng thời tạo và chơi với một ứng dụng khởi động đơn giản — tìm hiểu một chút về cách React hoạt động trong quy trình
điều kiện tiên quyếtQuen thuộc với các ngôn ngữ HTML, CSS và JavaScript cốt lõi, kiến thức về thiết bị đầu cuối/dòng lệnh
React sử dụng cú pháp HTML-in-JavaScript được gọi là JSX [JavaScript và XML]. Sự quen thuộc với cả HTML và JavaScript sẽ giúp bạn tìm hiểu JSX và xác định rõ hơn liệu các lỗi trong ứng dụng của bạn có liên quan đến JavaScript hay miền cụ thể hơn của React hay không
Khách quanĐể thiết lập môi trường phát triển React cục bộ, hãy tạo một ứng dụng bắt đầu và hiểu những điều cơ bản về cách thức hoạt động của nó
Xin chào phản ứng
Như dòng giới thiệu chính thức của nó, React là một thư viện để xây dựng giao diện người dùng. React không phải là một framework – nó thậm chí không dành riêng cho web. Nó được sử dụng với các thư viện khác để kết xuất với một số môi trường nhất định. Chẳng hạn, React Native có thể được sử dụng để xây dựng các ứng dụng di động
Để xây dựng cho web, các nhà phát triển sử dụng React song song với ReactDOM. React và ReactDOM thường được thảo luận trong cùng một không gian — và được sử dụng để giải quyết các vấn đề giống như — các khung phát triển web thực sự khác. Khi chúng tôi đề cập đến React như một "khuôn khổ", chúng tôi đang làm việc với sự hiểu biết thông tục đó
Mục tiêu chính của React là giảm thiểu các lỗi xảy ra khi các nhà phát triển đang xây dựng giao diện người dùng. Nó thực hiện điều này thông qua việc sử dụng các thành phần — các đoạn mã logic, độc lập mô tả một phần của giao diện người dùng. Các thành phần này có thể được kết hợp với nhau để tạo ra một giao diện người dùng đầy đủ và React trừu tượng hóa phần lớn công việc kết xuất, giúp bạn tập trung vào thiết kế giao diện người dùng
Trường hợp sử dụng
Không giống như các khung khác được trình bày trong mô-đun này, React không thực thi các quy tắc nghiêm ngặt xung quanh quy ước mã hoặc tổ chức tệp. Điều này cho phép các nhóm thiết lập các quy ước phù hợp nhất với họ và áp dụng React theo bất kỳ cách nào họ muốn. React có thể xử lý một nút duy nhất, một vài phần của giao diện hoặc toàn bộ giao diện người dùng của ứng dụng
Mặc dù React có thể được sử dụng cho các phần nhỏ của giao diện, nhưng không dễ để "thích vào" một ứng dụng như một thư viện như jQuery hoặc thậm chí là một framework như Vue — sẽ dễ tiếp cận hơn khi bạn xây dựng toàn bộ ứng dụng của mình bằng React
Ngoài ra, nhiều lợi ích dành cho nhà phát triển trải nghiệm của ứng dụng React, chẳng hạn như viết giao diện với JSX, yêu cầu quy trình biên dịch. Thêm một trình biên dịch như Babel vào một trang web làm cho mã trên đó chạy chậm, vì vậy các nhà phát triển thường thiết lập công cụ như vậy với một bước xây dựng. React được cho là có yêu cầu cao về công cụ, nhưng nó có thể học được
Bài viết này sẽ tập trung vào trường hợp sử dụng React để hiển thị toàn bộ giao diện người dùng của ứng dụng, sử dụng công cụ được cung cấp bởi công cụ tạo ứng dụng phản ứng của chính Facebook
React sử dụng JavaScript như thế nào?
React sử dụng các tính năng của JavaScript hiện đại cho nhiều mẫu của nó. Sự khác biệt lớn nhất của nó với JavaScript là việc sử dụng cú pháp JSX. JSX mở rộng cú pháp của JavaScript để mã giống như HTML có thể tồn tại cùng với nó. Ví dụ
const heading = Mozilla Developer Network;
Hằng tiêu đề này được gọi là biểu thức JSX. React có thể sử dụng nó để hiển thị thẻ
const header =
Mozilla Developer Network
1 đó trong ứng dụng của chúng tôiGiả sử chúng tôi muốn bọc tiêu đề của mình trong thẻ
const header =
Mozilla Developer Network
2, vì lý do ngữ nghĩa? const header = [
Mozilla Developer Network
];
Ghi chú. Dấu ngoặc đơn trong đoạn mã trước không phải là duy nhất đối với JSX và không có bất kỳ ảnh hưởng nào đến ứng dụng của bạn. Chúng là tín hiệu cho bạn [và máy tính của bạn] rằng nhiều dòng mã bên trong là một phần của cùng một biểu thức. Bạn cũng có thể viết biểu thức tiêu đề như thế này
const header =
Mozilla Developer Network
Tuy nhiên, điều này có vẻ hơi khó xử, vì thẻ
const header =
Mozilla Developer Network
2 bắt đầu biểu thức không được thụt vào cùng vị trí với thẻ đóng tương ứng của nóTất nhiên, trình duyệt của bạn không thể đọc JSX nếu không có trợ giúp. Khi được biên dịch [sử dụng công cụ như Babel hoặc Parcel], biểu thức tiêu đề của chúng ta sẽ như thế này
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
Có thể bỏ qua bước biên dịch và sử dụng
const header =
Mozilla Developer Network
4 để tự viết giao diện người dùng của mình. Tuy nhiên, khi làm điều này, bạn sẽ mất đi lợi ích khai báo của JSX và mã của bạn trở nên khó đọc hơn. Biên dịch là một bước bổ sung trong quá trình phát triển, nhưng nhiều nhà phát triển trong cộng đồng React cho rằng khả năng đọc của JSX là đáng giá. Ngoài ra, phát triển giao diện người dùng hiện đại hầu như luôn bao gồm quá trình xây dựng — bạn phải hạ cấp cú pháp hiện đại để tương thích với các trình duyệt cũ hơn và bạn có thể muốn thu nhỏ mã của mình để tối ưu hóa hiệu suất tải. Công cụ phổ biến như Babel đã đi kèm với hỗ trợ JSX ngay lập tức, vì vậy bạn không phải tự định cấu hình biên dịch trừ khi bạn muốnVì JSX là sự pha trộn giữa HTML và JavaScript, một số nhà phát triển thấy nó trực quan. Những người khác nói rằng bản chất pha trộn của nó làm cho nó khó hiểu. Tuy nhiên, khi bạn cảm thấy thoải mái với nó, nó sẽ cho phép bạn xây dựng giao diện người dùng nhanh hơn và trực quan hơn, đồng thời cho phép những người khác hiểu rõ hơn về cơ sở mã của bạn trong nháy mắt
Để đọc thêm về JSX, hãy xem bài viết chuyên sâu về JSX của nhóm React
Thiết lập ứng dụng React đầu tiên của bạn
Có nhiều cách để sử dụng React, nhưng chúng ta sẽ sử dụng công cụ tạo ứng dụng phản ứng giao diện dòng lệnh [CLI], như đã đề cập trước đó, giúp đẩy nhanh quá trình phát triển ứng dụng React bằng cách cài đặt một số gói và tạo một số gói.
Có thể thêm React vào trang web mà không cần tạo ứng dụng phản ứng bằng cách sao chép một số phần tử
const header =
Mozilla Developer Network
5 vào tệp HTML, nhưng CLI ứng dụng tạo phản ứng là điểm khởi đầu chung cho các ứng dụng React. Sử dụng nó sẽ cho phép bạn dành nhiều thời gian hơn để xây dựng ứng dụng của mình và ít thời gian hơn để thiết lậpYêu cầu
Để sử dụng ứng dụng tạo-phản ứng, bạn cần có Node. js đã cài đặt. Bạn nên sử dụng phiên bản hỗ trợ dài hạn [LTS]. Nút bao gồm npm [trình quản lý gói nút] và npx [trình chạy gói nút]
Bạn cũng có thể sử dụng trình quản lý gói Yarn thay thế, nhưng chúng tôi sẽ cho rằng bạn đang sử dụng npm trong bộ hướng dẫn này. Xem Khái niệm cơ bản về quản lý gói để biết thêm thông tin về npm và sợi
Nếu bạn đang sử dụng Windows, bạn sẽ cần cài đặt một số phần mềm để tương đương với thiết bị đầu cuối Unix/macOS để sử dụng các lệnh thiết bị đầu cuối được đề cập trong hướng dẫn này. Gitbash [là một phần của bộ công cụ git dành cho Windows] hoặc Windows Subsystem for Linux [WSL] đều phù hợp. Xem Khóa học về sự cố dòng lệnh để biết thêm thông tin về những điều này và về các lệnh đầu cuối nói chung
Ngoài ra, hãy nhớ rằng React và ReactDOM tạo ra các ứng dụng chỉ hoạt động trên một bộ trình duyệt khá hiện đại - IE9+ thông qua một số polyfill. Bạn nên sử dụng trình duyệt hiện đại như Firefox, Microsoft Edge, Safari hoặc Chrome khi thực hiện các hướng dẫn này
Ngoài ra, hãy xem phần sau để biết thêm thông tin
- "Npm là gì" trên nodejs. tổ chức
- "Giới thiệu npx" trên blog npm
- Tài liệu tạo-phản ứng-ứng dụng
Đang khởi tạo ứng dụng của bạn
ứng dụng tạo phản ứng có một đối số. tên bạn muốn đặt cho ứng dụng của mình. ứng dụng tạo phản ứng sử dụng tên này để tạo một thư mục mới, sau đó tạo các tệp cần thiết bên trong nó. Đảm bảo rằng bạn
const header =
Mozilla Developer Network
6 đến nơi bạn muốn ứng dụng của mình nằm trên ổ cứng, sau đó chạy phần sau trong thiết bị đầu cuối của bạnconst header =
Mozilla Developer Network
0Điều này tạo ra một thư mục
const header =
Mozilla Developer Network
7 và thực hiện một số điều bên trong nó- Cài đặt một số gói npm cần thiết cho chức năng của ứng dụng
- Viết kịch bản để bắt đầu và phục vụ ứng dụng
- Tạo cấu trúc tệp và thư mục xác định kiến trúc ứng dụng cơ bản
- Khởi tạo thư mục dưới dạng kho lưu trữ git, nếu bạn đã cài đặt git trên máy tính của mình
Ghi chú. nếu bạn đã cài đặt trình quản lý gói Sợi, ứng dụng tạo phản ứng sẽ mặc định sử dụng nó thay vì npm. Nếu bạn đã cài đặt cả hai trình quản lý gói và rõ ràng muốn sử dụng npm, bạn có thể thêm cờ
const header =
Mozilla Developer Network
8 khi chạy ứng dụng tạo phản ứngconst header =
Mozilla Developer Network
3ứng dụng tạo phản ứng sẽ hiển thị một số thông báo trong thiết bị đầu cuối của bạn khi nó hoạt động; . Quá trình này có thể mất vài phút, vì vậy bây giờ có thể là thời điểm tốt để đi pha một tách trà
Khi quá trình hoàn tất, hãy đưa
const header =
Mozilla Developer Network
6 vào thư mục const header =
Mozilla Developer Network
7 và chạy lệnh const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
1. Các tập lệnh được cài đặt bởi ứng dụng tạo phản ứng sẽ bắt đầu được phân phát tại máy chủ cục bộ tại localhost. 3000 và mở ứng dụng trong tab trình duyệt mới. Trình duyệt của bạn sẽ hiển thị một cái gì đó như thế nàycấu trúc ứng dụng
ứng dụng tạo phản ứng cung cấp cho chúng tôi mọi thứ chúng tôi cần để phát triển ứng dụng React. Cấu trúc tệp ban đầu của nó trông như thế này
const header =
Mozilla Developer Network
7Thư mục
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
2 là nơi chúng ta sẽ dành phần lớn thời gian, vì đó là nơi mã nguồn cho ứng dụng của chúng ta tồn tạiThư mục
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
3 chứa các tệp sẽ được trình duyệt của bạn đọc trong khi bạn đang phát triển ứng dụng; . React đưa mã của bạn vào tệp này để trình duyệt của bạn có thể chạy nó. Có một số đánh dấu khác giúp tạo chức năng ứng dụng phản ứng, vì vậy hãy cẩn thận không chỉnh sửa nó trừ khi bạn biết mình đang làm gì. Bạn rất nên thay đổi văn bản bên trong phần tử const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
5 trong tệp này để phản ánh tiêu đề ứng dụng của bạn. Tiêu đề trang chính xác rất quan trọng đối với khả năng truy cậpThư mục
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
3 cũng sẽ được xuất bản khi bạn xây dựng và triển khai phiên bản sản xuất của ứng dụng. Chúng tôi sẽ không đề cập đến việc triển khai trong hướng dẫn này, nhưng bạn sẽ có thể sử dụng một giải pháp tương tự như giải pháp được mô tả trong hướng dẫn Triển khai ứng dụng của chúng tôiTệp
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
7 chứa thông tin về dự án của chúng tôi mà Node. js/npm sử dụng để giữ cho nó có tổ chức. Tệp này không phải là duy nhất cho các ứng dụng React; . Bạn không cần phải hiểu hết về tệp này để hoàn thành hướng dẫn này, tuy nhiên, nếu bạn muốn tìm hiểu thêm về nó, bạn có thể đọc Tệp const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
7 là gì? . tổ chức; Exploring our first React component —
Trong React, một thành phần là một mô-đun có thể tái sử dụng để hiển thị một phần ứng dụng của chúng tôi. Những phần này có thể lớn hoặc nhỏ, nhưng chúng thường được xác định rõ ràng. họ phục vụ một mục đích duy nhất, rõ ràng
Hãy mở
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
9, vì trình duyệt của chúng tôi đang nhắc chúng tôi chỉnh sửa nó. Tệp này chứa thành phần đầu tiên của chúng tôi, const header =
Mozilla Developer Network
00 và một vài dòng mã khácconst header =
Mozilla Developer Network
7Tệp
const header =
Mozilla Developer Network
01 bao gồm ba phần chính. một số câu lệnh const header =
Mozilla Developer Network
02 ở trên cùng, thành phần const header =
Mozilla Developer Network
00 ở giữa và câu lệnh const header =
Mozilla Developer Network
04 ở cuối. Hầu hết các thành phần React đều tuân theo mẫu nàyBáo cáo nhập khẩu
Các câu lệnh
const header =
Mozilla Developer Network
02 ở đầu tệp cho phép const header =
Mozilla Developer Network
01 sử dụng mã đã được xác định ở nơi khác. Hãy xem xét những tuyên bố này kỹ hơnconst header = [
Mozilla Developer Network
];
4Câu lệnh đầu tiên nhập logo từ
const header =
Mozilla Developer Network
07. Lưu ý việc sử dụng const header =
Mozilla Developer Network
08 ở đầu đường dẫn và phần mở rộng const header =
Mozilla Developer Network
09 ở cuối — những phần mở rộng này cho chúng tôi biết rằng tệp là cục bộ và đó không phải là tệp JavaScript. Thật vậy, tệp const header =
Mozilla Developer Network
30 nằm trong thư mục nguồn của chúng tôiCâu lệnh thứ hai nhập CSS liên quan đến thành phần Ứng dụng của chúng tôi. Lưu ý rằng không có tên biến và không có chỉ thị
const header =
Mozilla Developer Network
31. Đây được gọi là nhập hiệu ứng phụ — nó không nhập bất kỳ giá trị nào vào tệp JavaScript, nhưng nó báo cho Webpack, trình đóng gói, thêm tệp CSS được tham chiếu vào gói CSS cuối cùngCác bản phát hành React trước bản phát hành React 17 vào năm 2020 cũng yêu cầu nhập chính thư viện React, như trong -
const header =
Mozilla Developer Network
32. Bỏ qua bước này sẽ dẫn đến lỗi. React đã biến JSX mà chúng ta viết thành const header =
Mozilla Developer Network
4, vì vậy tất cả các thành phần React cần thiết để nhập mô-đun const header =
Mozilla Developer Network
34. React 17 đã giới thiệu một phiên bản mới, được viết lại của biến đổi JSX khiến câu lệnh này trở nên không cần thiết, với sự hỗ trợ được nhập ngược lại cho React 16. 14. 0, phản ứng 15. 7. 0 và phản ứng 0. 14. 10 [đọc thêm trên tài liệu React chính thức]Thành phần ứng dụng
Sau khi nhập, chúng ta có một hàm tên là
const header =
Mozilla Developer Network
00. Trong khi hầu hết cộng đồng JavaScript thích các tên kiểu chữ hoa lạc đà như const header =
Mozilla Developer Network
36, thì các thành phần React sử dụng các tên biến kiểu chữ hoa chữ thường, như const header =
Mozilla Developer Network
37, để làm rõ rằng một phần tử JSX đã cho là một thành phần React chứ không phải một thẻ HTML thông thường. Nếu bạn đổi tên hàm const header =
Mozilla Developer Network
00 thành const header =
Mozilla Developer Network
39, trình duyệt của bạn sẽ hiển thị lỗi cho bạnHãy xem xét kỹ hơn về
const header =
Mozilla Developer Network
00const header =
Mozilla Developer Network
9Hàm
const header =
Mozilla Developer Network
00 trả về một biểu thức JSX. Biểu thức này xác định những gì trình duyệt của bạn cuối cùng hiển thị cho DOMMột số phần tử trong biểu thức có các thuộc tính, được viết giống như trong HTML, theo mẫu của
const header =
Mozilla Developer Network
72. Ở dòng 3, thẻ mở đầu const header =
Mozilla Developer Network
73 có thuộc tính const header =
Mozilla Developer Network
74. Điều này giống như thuộc tính const header =
Mozilla Developer Network
75 trong HTML, nhưng vì JSX là JavaScript nên chúng tôi không thể sử dụng từ const header =
Mozilla Developer Network
75 — nó được dành riêng, nghĩa là JavaScript đã sử dụng nó cho một mục đích cụ thể và nó sẽ gây ra sự cố ở đây trong mã của chúng tôi. Một vài thuộc tính HTML khác được viết khác trong JSX so với trong HTML, vì cùng một lý do. Chúng tôi sẽ bảo vệ họ khi chúng tôi gặp họHãy dành một chút thời gian để thay đổi thẻ
const header =
Mozilla Developer Network
77 trên dòng 6 thành "Xin chào, Thế giới. ", sau đó lưu tệp của bạn. Bạn sẽ nhận thấy rằng thay đổi này được hiển thị ngay lập tức trong máy chủ phát triển đang chạy ở tốc độ const header =
Mozilla Developer Network
78 trong trình duyệt của bạn. Bây giờ hãy xóa thẻ const header =
Mozilla Developer Network
79 và lưu lại; Thành phần
const header =
Mozilla Developer Network
00 của bạn bây giờ trông như thế nàyconst header = [
Mozilla Developer Network
];
0Báo cáo xuất khẩu
Ở dưới cùng của tệp
const header =
Mozilla Developer Network
01, câu lệnh const header =
Mozilla Developer Network
72 làm cho thành phần const header =
Mozilla Developer Network
00 của chúng tôi có sẵn cho các mô-đun khácĐặt câu hỏi về chỉ số
Hãy mở
const header =
Mozilla Developer Network
74, vì đó là nơi mà thành phần const header =
Mozilla Developer Network
00 đang được sử dụng. Tệp này là điểm vào cho ứng dụng của chúng tôi và ban đầu nó trông như thế nàyconst header = [
Mozilla Developer Network
];
1Như với
const header =
Mozilla Developer Network
01, tệp bắt đầu bằng cách nhập tất cả các mô-đun JS và các nội dung khác mà nó cần để chạyHai câu lệnh đầu tiên nhập các thư viện
const header =
Mozilla Developer Network
34 và const header =
Mozilla Developer Network
78 vì chúng được tham chiếu sau trong tệp. Chúng tôi không viết đường dẫn hoặc tiện ích mở rộng khi nhập các thư viện này vì chúng không phải là tệp cục bộ. Trên thực tế, chúng được liệt kê dưới dạng phụ thuộc trong tệp const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
7 của chúng tôi. Hãy cẩn thận với sự khác biệt này khi bạn học qua bài học nàyconst header = [
Mozilla Developer Network
];
40 giữ các kiểu toàn cầu được áp dụng cho toàn bộ ứng dụng của chúng tôi. Chúng tôi cũng có thể thấy thành phần const header =
Mozilla Developer Network
00 của chúng tôi được nhập tại đây; Dòng 7 gọi hàm
const header = [
Mozilla Developer Network
];
44 của React với phần tử DOM bên trong mà chúng ta muốn thành phần được hiển thị, trong trường hợp này là phần tử có ID là const header = [
Mozilla Developer Network
];
45. Nếu bạn nhìn vào bên trong const header = [
Mozilla Developer Network
];
46, bạn sẽ thấy rằng đây là một phần tử const header =
Mozilla Developer Network
73 ngay bên trong const header = [
Mozilla Developer Network
];
48. React sẽ tạo một root cho node này và tiếp quản quản lý DOM bên trong nó [đọc thêm về tài liệu phản ứng chính thức]. Hàm trả về const header = [
Mozilla Developer Network
];
45 mà chúng ta có thể sử dụng để const header =
Mozilla Developer Network
90 một phần tử React vào DOMDòng 8 gọi
const header =
Mozilla Developer Network
91 với thành phần chúng tôi muốn kết xuất, trong trường hợp này là const header =
Mozilla Developer Network
92Tất cả những điều này cho React biết rằng chúng tôi muốn kết xuất ứng dụng React của mình với thành phần
const header =
Mozilla Developer Network
00 làm gốc hoặc thành phần đầu tiênGhi chú. Trong JSX, các thành phần React và các phần tử HTML phải có dấu gạch chéo. Viết chỉ
const header =
Mozilla Developer Network
94 hoặc chỉ const header =
Mozilla Developer Network
95 sẽ gây ra lỗiconst header =
Mozilla Developer Network
96 là một tập hợp các chỉ số hữu ích nhằm nắm bắt trải nghiệm người dùng trên một trang web, nhưng chúng không nằm trong phạm vi của bài viết này. Bạn có thể xóa dòng nhập của nó, cũng như dòng const header =
Mozilla Developer Network
97Tệp
const header =
Mozilla Developer Network
98 cuối cùng của bạn sẽ trông như thế nàyconst header = [
Mozilla Developer Network
];
2Biến và đạo cụ
Tiếp theo, chúng ta sẽ sử dụng một số kỹ năng JavaScript của mình để chỉnh sửa các thành phần và làm việc với dữ liệu trong React thoải mái hơn một chút. Chúng ta sẽ nói về cách các biến được sử dụng bên trong JSX và giới thiệu các đạo cụ, là cách truyền dữ liệu vào một thành phần [sau đó có thể được truy cập bằng các biến]
Các biến trong JSX
Trở lại
const header =
Mozilla Developer Network
01, hãy tập trung vào dòng 8const header = [
Mozilla Developer Network
];
3Ở đây, giá trị thuộc tính
const header = React.createElement["header", null,
React.createElement["h1", null, "Mozilla Developer Network"]
];
2 của thẻ const header = [
Mozilla Developer Network
];
00 nằm trong dấu ngoặc nhọn. Đây là cách JSX nhận ra các biến. React sẽ thấy const header = [
Mozilla Developer Network
];
02, biết bạn đang nói đến phần nhập logo ở dòng 2 của ứng dụng của chúng ta, sau đó lấy tệp logo và kết xuất nóHãy thử tạo một biến của riêng chúng ta. Trước câu trả lời của ________ 100, quảng cáo ________ 304. Thành phần
const header =
Mozilla Developer Network
00 của bạn bây giờ trông như thế nàyconst header = [
Mozilla Developer Network
];
4Thay đổi dòng 8 để sử dụng biến
const header = [
Mozilla Developer Network
];
06 của chúng tôi thay vì từ "Thế giới", như thế nàyconst header = [
Mozilla Developer Network
];
5Khi bạn lưu, trình duyệt của bạn sẽ hiển thị "Xin chào, React. " thay vì "Xin chào, Thế giới. "
Các biến rất tiện lợi, nhưng biến mà chúng ta vừa thiết lập không sử dụng hiệu quả các tính năng của React. Đó là nơi đạo cụ đến
đạo cụ thành phần
Prop là bất kỳ dữ liệu nào được truyền vào thành phần React. Đạo cụ phản ứng có thể so sánh với thuộc tính HTML. Trong đó các phần tử HTML có các thuộc tính, các thành phần React có các đạo cụ. Đạo cụ được viết bên trong lệnh gọi thành phần và sử dụng cú pháp giống như thuộc tính HTML —
const header = [
Mozilla Developer Network
];
07. Trong React, luồng dữ liệu là một chiều. đạo cụ chỉ có thể được truyền từ các thành phần Cha xuống các thành phần Con; Hãy mở
const header =
Mozilla Developer Network
98 và thực hiện cuộc gọi const header = [
Mozilla Developer Network
];
09 của chúng tôi chỗ dựa đầu tiên của nóThêm một chỗ dựa của
const header = [
Mozilla Developer Network
];
06 vào lệnh gọi thành phần const header = [
Mozilla Developer Network
];
09, với giá trị là const header = [
Mozilla Developer Network
];
12. Khi bạn hoàn thành, mã của bạn sẽ giống như thế nàyconst header = [
Mozilla Developer Network
];
6Trở lại
const header =
Mozilla Developer Network
01, hãy xem lại chức năng của Ứng dụng, chức năng này có nội dung như sau [với câu lệnh const header = [
Mozilla Developer Network
];
14 được rút ngắn cho ngắn gọn]const header = [
Mozilla Developer Network
];
7Thay đổi chữ ký của hàm
const header =
Mozilla Developer Network
00 để nó chấp nhận const header = [
Mozilla Developer Network
];
16 làm tham số và xóa const const header = [
Mozilla Developer Network
];
06. Cũng giống như bất kỳ tham số chức năng nào khác, bạn có thể đặt const header = [
Mozilla Developer Network
];
16 trong một const header = [
Mozilla Developer Network
];
19 để in nó ra bảng điều khiển của trình duyệt của bạn. Hãy tiếp tục và làm điều đó trước câu lệnh const header = [
Mozilla Developer Network
];
14, như vậyconst header = [
Mozilla Developer Network
];
8Với thay đổi này, {subject} trở thành không xác định, vì vậy hãy bình luận dòng
const header = [
Mozilla Developer Network
];
21 ngay bây giờ. Lưu tệp của bạn và kiểm tra bảng điều khiển JavaScript của trình duyệt của bạn. Bạn sẽ thấy một cái gì đó như thế này đăng nhậpconst header = [
Mozilla Developer Network
];
9Thuộc tính đối tượng
const header = [
Mozilla Developer Network
];
06 tương ứng với chỗ dựa const header = [
Mozilla Developer Network
];
06 mà chúng tôi đã thêm vào lệnh gọi thành phần const header =
Mozilla Developer Network
92 của mình và chuỗi const header = [
Mozilla Developer Network
];
12 tương ứng với giá trị của nó. Các đạo cụ thành phần trong React luôn được thu thập vào các đối tượng theo cách nàyGiờ đây,
const header = [
Mozilla Developer Network
];
06 là một trong những đạo cụ của chúng ta, hãy sử dụng nó trong const header =
Mozilla Developer Network
01. Thay đổi hằng số const header = [
Mozilla Developer Network
];
06 để thay vì định nghĩa nó là chuỗi const header =
Mozilla Developer Network
34, bạn đang đọc giá trị của const header = [
Mozilla Developer Network
];
30. Bây giờ, bạn cũng có thể bỏ ghi chú dòng const header = [
Mozilla Developer Network
];
21 và nếu muốn, hãy xóa const header = [
Mozilla Developer Network
];
19 của bạnconst header =
Mozilla Developer Network
0Khi bạn lưu, ứng dụng sẽ chào bạn bằng "Xin chào, Clarice. ". Nếu bạn quay lại
const header =
Mozilla Developer Network
98, chỉnh sửa giá trị của const header = [
Mozilla Developer Network
];
06 và lưu, văn bản của bạn sẽ thay đổi. Lưu ý rằng nếu bạn muốn rời khỏi dòng const header = [
Mozilla Developer Network
];
35 trong suốt quá trình thay đổi này, bạn cũng có thể cập nhật biến JSX thành {props. môn học}Tóm lược
Điều này đưa chúng ta đến phần cuối của cái nhìn ban đầu về React, bao gồm cách cài đặt nó cục bộ, tạo ứng dụng khởi động và cách hoạt động của những điều cơ bản. Trong bài viết tiếp theo, chúng ta sẽ bắt đầu xây dựng ứng dụng phù hợp đầu tiên của mình — danh sách việc cần làm. Tuy nhiên, trước khi chúng ta làm điều đó, hãy tóm tắt lại một số điều chúng ta đã học được