Tôi có thể sử dụng html trong phản ứng không?
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 ứ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 Show
Quen thuộc với các ngôn ngữ HTML, CSS và JavaScript cốt lõi, kiến thức về terminal/command line 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 ứngNhư 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ụngKhô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ụ
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ẻ 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ẻ 2, vì lý do ngữ nghĩa?
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
Tuy nhiên, điều này có vẻ hơi khó xử, vì thẻ 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
Có thể bỏ qua bước biên dịch và sử dụng 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ạnCó 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ử 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
Đ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 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ạn 0Điều này tạo ra một thư mục 7 và thực hiện một số điều bên trong nó
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ờ 8 khi chạy ứng dụng tạo phản ứng 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 6 vào thư mục 7 và chạy lệnh 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 7Thư mục 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 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ử 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 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 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 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ở 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, 00 và một vài dòng mã khác 7Tệp 01 bao gồm ba phần chính. một số câu lệnh 02 ở trên cùng, thành phần 00 ở giữa và câu lệnh 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ẩuCác câu lệnh 02 ở đầu tệp cho phép 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ơn 4Câu lệnh đầu tiên nhập logo từ 07. Lưu ý việc sử dụng 08 ở đầu đường dẫn và phần mở rộng 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 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ị 31. Đây được gọi là nhập tác dụ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 - 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 4, vì vậy tất cả các thành phần React cần thiết để nhập mô-đun 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ụngSau khi nhập, chúng ta có một hàm tên là 00. Trong khi hầu hết cộng đồng JavaScript thích các tên kiểu chữ hoa lạc đà như 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ư 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 00 thành 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ề 00 9Hàm 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 72. Ở dòng 3, thẻ mở đầu 73 có thuộc tính 74. Điều này giống như thuộc tính 75 trong HTML, nhưng vì JSX là JavaScript nên chúng tôi không thể sử dụng từ 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ẻ 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 độ 78 trong trình duyệt của bạn. Bây giờ hãy xóa thẻ 79 và lưu lại; Thành phần 00 của bạn bây giờ trông như thế này 0Báo cáo xuất khẩuỞ dưới cùng của tệp 01, câu lệnh 72 làm cho thành phần 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ở 74, vì đó là nơi mà thành phần 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ày 1Như với 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 34 và 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 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ày 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 00 của chúng tôi được nhập tại đây; Dòng 7 gọi hàm 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à 45. Nếu bạn nhìn vào bên trong 46, bạn sẽ thấy rằng đây là một phần tử 73 ngay bên trong 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ề 45 mà chúng ta có thể sử dụng để 90 một phần tử React vào DOMDòng 8 gọi 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à 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 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ỉ 94 hoặc chỉ 95 sẽ gây ra lỗi 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 97Tệp 98 cuối cùng của bạn sẽ trông như thế này 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 JSXTrở lại 01, hãy tập trung vào dòng 8 3Ở đây, giá trị thuộc tính 2 của thẻ 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 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 00 của bạn bây giờ trông như thế này 4Thay đổi dòng 8 để sử dụng biến 06 của chúng tôi thay vì từ "Thế giới", như thế này 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ầnProp 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 — 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ở 98 và thực hiện cuộc gọi 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 06 vào lệnh gọi thành phần 09, với giá trị là 12. Khi bạn hoàn thành, mã của bạn sẽ giống như thế này 6Trở lại 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 14 được rút ngắn cho ngắn gọn) 7Thay đổi chữ ký của hàm 00 để nó chấp nhận 16 làm tham số và xóa const 06. Cũng giống như bất kỳ tham số chức năng nào khác, bạn có thể đặt 16 trong một 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 14, như vậy 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 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ập 9Thuộc tính đối tượng 06 tương ứng với chỗ dựa 06 mà chúng tôi đã thêm vào lệnh gọi thành phần 92 của mình và chuỗi 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, 06 là một trong những đạo cụ của chúng ta, hãy sử dụng nó trong 01. Thay đổi hằng số 06 để thay vì định nghĩa nó là chuỗi 34, bạn đang đọc giá trị của 30. Bây giờ, bạn cũng có thể bỏ ghi chú dòng 21 và nếu muốn, hãy xóa 19 của bạn 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 98, chỉnh sửa giá trị của 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 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. vấn đề}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 Bạn có thể đưa HTML vào React không?JSX cho phép chúng ta viết HTML bằng React . JSX giúp viết và thêm HTML dễ dàng hơn trong React.
Tôi có thể sử dụng React với HTML và CSS không?Có, cả ứng dụng Angular và React đều có thể (và thường được) "xây dựng" thành HTML, CSS và JS tĩnh . |