Phản ứng có sử dụng html hoặc xml không?

HTML là ngôn ngữ của web, nhưng việc tạo toàn bộ trang web chỉ bằng HTML có thể lặp đi lặp lại và khó quản lý

Trong bài viết này, chúng ta sẽ xem cách sử dụng thư viện JavaScript React như một cách để tăng thêm sự tiện lợi và khả năng tái sử dụng cho các trang web của chúng ta

React là một công cụ mạnh mẽ cho bất kỳ nhà phát triển nào biết HTML và muốn xây dựng các trang web năng động và có tổ chức hơn, nhanh hơn

Bắt đầu nào

Muốn có hướng dẫn đầy đủ để trở thành nhà phát triển React chuyên nghiệp từ đầu đến cuối?

Tại sao tôi nên sử dụng React thay vì HTML?

React xuất hiện vào năm 2013 như một cách tốt hơn để xây dựng các ứng dụng web bằng JavaScript. Nó thường được gọi là thư viện để xây dựng giao diện người dùng, viết tắt của "giao diện người dùng"

Điều khiến React trở thành một thư viện đáng học hỏi là nó không thay thế HTML

Nó tận dụng sự phổ biến và sức mạnh của HTML như là ngôn ngữ lập trình phổ biến nhất, bằng cách cho phép bạn sử dụng cú pháp rất giống với HTML để xây dựng giao diện và thêm các tính năng động cho nó bằng JavaScript

Cách xây dựng giao diện người dùng với HTML

Với tính linh hoạt của React, chúng tôi có thể tạo lại bất kỳ trang web hoặc giao diện người dùng nào mà chúng tôi thấy trên web

Đối với bài học này, hãy tạo lại một phần của ứng dụng mà bạn có thể sử dụng hàng ngày—Google Tìm kiếm

Điều này có vẻ đầy tham vọng nếu bạn là người mới làm quen với React, nhưng nó chỉ yêu cầu kiến ​​thức về hai khái niệm đơn giản. HTML và các hàm JavaScript cơ bản

Cách xây dựng giao diện người dùng mà không cần biết React hay thậm chí là JavaScript là gì?

Bằng cách sử dụng các phần tử HTML như một phần của tài liệu HTML đơn giản

Đây là cách chúng tôi sẽ hiển thị ba kết quả đầu tiên xuất hiện khi bạn tìm kiếm "reactjs" trong Google

  
    
  

  
    

      

        React - A JavaScript Library for Building User Interfaces
        

          
reactjs.org
        
        

          React makes it painless to create interactive UIs.
        
      
      

        React (web framework) - Wikipedia
        

          
https://en.wikipedia.org › wiki › React_(web_framework)
        
        

          React is a JavaScript library for building user interfaces.
        
      
      

        React (@reactjs) | Twitter
        

          
https://twitter.com › reactjs
        
        

          The latest Tweets from React (@reactjs).
        
      
    
  

Chỉ sử dụng HTML tĩnh sẽ ổn nếu chúng ta chỉ cần hiển thị một vài liên kết

Nhưng làm cách nào chúng tôi có thể hiển thị hàng trăm hoặc hàng nghìn liên kết theo cách này, tất cả đều có dữ liệu khác nhau, như một công cụ tìm kiếm có thể cần thực hiện?

Điều gì tốt hơn, nghĩa là, một cách đơn giản hơn và dễ mở rộng hơn để viết điều này?

HTML một mình sẽ không phải là câu trả lời. Chúng tôi sẽ cần một cách làm cho trang web của chúng tôi năng động hơn để hiển thị nhiều liên kết như chúng tôi cần

Khi nói đến việc thêm hành vi vào một trang web, chúng ta cần JavaScript. Và vì mục tiêu của chúng tôi là xây dựng các ứng dụng tuyệt vời bằng JavaScript, nên chúng tôi biết sử dụng React

Cách nâng cấp bất kỳ trang web HTML nào lên ứng dụng React

Hãy biến HTML tĩnh của chúng ta thành một ứng dụng React động

Nghe có vẻ khó?

Chúng ta có thể xây dựng một ứng dụng React từ một tài liệu HTML duy nhất. Tất cả những gì chúng ta phải làm là đưa React vào với các tập lệnh bên ngoài sau. *

Đầu tiên là để xây dựng ứng dụng React của chúng tôi và thứ hai là để hiển thị hoặc hiển thị ứng dụng React trong trình duyệt

Đầu tiên là React, ReactDOM thứ hai

Kịch bản thứ ba là đưa vào một công cụ gọi là Babel. Chúng ta sẽ chạm vào những gì nó làm trong một chút

Đây là mã của chúng tôi trông như thế nào vào thời điểm này

và nó gần như là một ứng dụng React

Lưu ý rằng chúng tôi có một tập lệnh nơi chúng tôi có thể viết mã React của mình, nhưng không có HTML

Hãy khắc phục điều đó

Cách tạo và kết xuất ứng dụng React của chúng tôi

Mọi ứng dụng React phải có cái được gọi là điểm vào

Điểm vào là một phần tử HTML nơi chúng tôi chèn ứng dụng React của mình vào trang

Điểm vào thông thường là một div có id là root (

7)

Chúng tôi sẽ thêm nó, sau đó sử dụng chức năng

8 từ ReactDOM để thực hiện công việc kết xuất ứng dụng

Đầu tiên là chính ứng dụng, nghĩa là HTML của chúng tôi từ trước đó và thứ hai phải tham chiếu điểm vào của chúng tôi. Chúng ta có thể tạo tham chiếu đó bằng cách nói

9

Vì vậy, bây giờ chúng tôi có mọi thứ chúng tôi cần để chạy ứng dụng React của mình

Và nếu chúng ta nhìn vào kết quả của mình, nó sẽ hoạt động như trước đây. Hoàn hảo

Bây giờ, hãy sử dụng React để cải thiện trang web của chúng tôi bằng cách hiển thị động các liên kết của chúng tôi

Cách làm cho HTML có thể tái sử dụng với các thành phần React

Nếu chúng tôi kiểm tra cấu trúc HTML của mình, mỗi liên kết bao gồm các phần giống nhau. Mỗi cái có một URL, một tiêu đề, một URL ngắn hơn và một đoạn trích. Đối với mỗi liên kết, chúng ta phải lặp đi lặp lại cùng một phần tử HTML

Trong lập trình, nếu bạn phải lặp đi lặp lại nhiều lần, đó có thể là dấu hiệu cho thấy mã của bạn có thể được đơn giản hóa và rút ngắn theo một cách nào đó. Là lập trình viên, chúng tôi luôn cố gắng lặp lại chính mình ít nhất có thể

Chúng tôi cố gắng viết mã KHÔ, nơi bạn "không lặp lại chính mình. "

Về cốt lõi, React là JavaScript cộng với một số tính năng giúp chúng tôi xây dựng ứng dụng

Và vì chúng ta đang làm việc với JavaScript, tính năng JavaScript cho phép chúng ta tạo hoặc xuất nội dung nào đó bao nhiêu lần tùy thích là gì?

một chức năng

Hãy tạo một cái ở đây và chúng ta sẽ gọi nó là Liên kết

function Link() {
  // create link HTML output
}

Lý do là chúng tôi muốn chức năng này trả về hoặc xuất HTML của liên kết mỗi khi chúng tôi gọi nó

Để làm điều đó, hãy trả về HTML của liên kết đầu tiên của chúng tôi

________số 8

Vì vậy, bây giờ hãy sử dụng nó để hiển thị từng liên kết mà nó trả về

Để làm như vậy, thay vì gọi nó như

0, trong React, chúng ta có thể viết nó giống như nó là một phần tử HTML

1

Nếu bạn nhìn thấy điều này lần đầu tiên, nó có thể khiến não bạn bị bẻ cong một chút

Ở đây chúng tôi đang sử dụng cú pháp HTML, nhưng chúng tôi đang gọi một hàm JavaScript. Bạn sẽ cảm thấy thoải mái với nó khi bạn thấy điều này thường xuyên hơn

(Ngoài ra, bạn có nhận thấy rằng chúng tôi không phải sử dụng thẻ mở và thẻ đóng, giống như đó là một phần tử HTML bình thường không? Hãy nói thêm về điều đó trong một phút nữa. )

Làm cách nào để React chuyển đổi cú pháp trông giống HTML thành JavaScript?

Nó làm như vậy với sự trợ giúp của một công cụ đặc biệt gọi là Babel, tập lệnh thứ ba mà chúng tôi đã thêm vào. Bạn có thể xem nó hoạt động như thế nào ở đây

Điều gì đang xảy ra?

Babel, một công cụ JavaScript được gọi là trình biên dịch, chuyển đổi ("biên dịch") mã trông giống HTML này thành JavaScript hợp lệ

Cú pháp giống như HTML này là gì?

HTML này, thực tế là JavaScript, được gọi là JSX, viết tắt của "JavaScript XML. "

XML, nếu bạn chưa quen, là một cách viết HTML chặt chẽ hơn một chút

Nghiêm ngặt hơn có nghĩa là chúng ta cần sử dụng dấu gạch chéo về phía trước cho các phần tử có một thẻ. Ví dụ.

2 trong HTML vì JSX hợp lệ là

3

Vì vậy, để nhắc lại, JSX không phải là mã JavaScript hợp lệ

Có nghĩa là bạn không thể đặt JSX vào trình duyệt và mong đợi nó hoạt động. Chúng ta cần cả một trình biên dịch, như Babel, để chuyển nó thành JavaScript hợp lệ, rồi React để sử dụng JavaScript đã tạo đó

Vì vậy, bây giờ để sử dụng phần tử Liên kết tùy chỉnh của chúng tôi, chúng tôi xóa cả ba HTML của liên kết và thay thế chúng bằng ba Liên kết, như vậy

3

Và nếu chúng ta nhìn vào kết quả của mình, chúng ta thực sự có ba liên kết

Đây là sức mạnh của React. nó có khả năng sử dụng lại các hàm JavaScript, nhưng cho phép chúng tôi sử dụng chúng giống như chúng là HTML

Chúng tôi coi các phần tử tùy chỉnh này được tạo bằng JavaScript là các thành phần

Vì vậy, chúng tôi đã đạt được rất nhiều khả năng đọc ở đây bằng cách sử dụng các thành phần. Chúng tôi không có bất kỳ sự nhầm lẫn nào về những gì chúng tôi đang xem xét nếu chúng tôi đặt tên cho các thành phần của mình tốt. Không cần phải đọc qua rất nhiều phần tử HTML để xem những gì ứng dụng hiển thị

Chúng tôi thấy ngay rằng chúng tôi có ba liên kết tùy chỉnh

Giải phẫu của một thành phần chức năng

Bây giờ chúng ta đã biết cách hoạt động của các thành phần, hãy xem xét lần thứ hai thành phần chức năng Liên kết của chúng ta

Mã của chúng tôi có thể trông khá đơn giản, nhưng có một vài điều tinh tế mà bạn nên lưu ý ở đây

________số 8

Tên thành phần chức năng được viết hoa. Liên kết thay vì liên kết. Đây là quy ước đặt tên bắt buộc cho các thành phần React. Chúng tôi sử dụng tên viết hoa để phân biệt các thành phần với chức năng bình thường. Lưu ý rằng các hàm trả về JSX không giống như các hàm JavaScript bình thường

Lưu ý cách JSX mà chúng ta đang trả về có một tập hợp các dấu ngoặc đơn xung quanh nó. Vì bạn lần đầu tiên viết mã React, nên rất dễ quên các dấu ngoặc đơn này, điều này sẽ dẫn đến lỗi. Gói JSX của bạn trong ngoặc đơn nếu nó kéo dài nhiều hơn một dòng

Cuối cùng, chức năng Liên kết của chúng tôi trả về một số JSX. Mọi thành phần React phải trả về các phần tử JSX hoặc các thành phần React khác. Và vâng, các thành phần React có thể trả về các thành phần khác

Vì vậy, vì các thành phần React có thể trả về các thành phần React khác, nên chúng ta có thể tạo một thành phần Ứng dụng

Thành phần Ứng dụng này sẽ chứa toàn bộ bộ hoặc cây thành phần của chúng tôi và sẽ hiển thị những gì ứng dụng của chúng tôi bao gồm

Và với một thành phần Ứng dụng, điều này làm cho phương thức kết xuất của chúng ta dễ đọc hơn nhiều

5

Từ mã này, chúng tôi thấy rằng các thành phần React có phân cấp hoặc thứ tự giống như các phần tử HTML. Kết quả là, chúng ta có thể gọi các phần khác nhau của cây thành phần của chúng ta là cha mẹ hoặc con cái

Trong trường hợp này, ví dụ: đối với mỗi thành phần Liên kết được kết xuất, Ứng dụng là thành phần chính. Đối với Ứng dụng, cả ba Liên kết đều là con của nó

Lưu ý rằng bất cứ khi nào chúng tôi kết xuất hoặc trả lại JSX, chỉ có thể có một thành phần chính. Nhưng một thành phần cha có thể có nhiều thành phần con (cũng như các phần tử) nếu cần

Khi chúng tôi xem xét đầu ra của mã, bạn có thể nhận thấy vấn đề sau

Chúng tôi có ba trường hợp của cùng một liên kết. Đó là bởi vì chúng tôi đang sử dụng cùng một dữ liệu cho mỗi liên kết mà chúng tôi tạo. Tuy nhiên, chúng tôi biết mỗi liên kết có dữ liệu khác nhau—tiêu đề, URL, URL ngắn và đoạn trích khác nhau

Vậy làm cách nào để chuyển dữ liệu duy nhất vào các thành phần của chúng tôi?

Cách truyền dữ liệu động cho các thành phần. đạo cụ

Nếu chúng tôi muốn chuyển một số văn bản tiêu đề sang một hàm JavaScript bình thường, chúng tôi sẽ làm như thế này

6

Nhưng làm thế nào để chúng ta truyền dữ liệu cho các thành phần chức năng?

Các phần tử HTML thông thường chấp nhận dữ liệu ở dạng thuộc tính. Nhưng không giống như các thuộc tính HTML, các thuộc tính không được nhận dạng trên các thành phần React. Dữ liệu không nằm trên chính thành phần đó. Họ đi đâu?

Là đối số cho thành phần chức năng. Một lần nữa, đây là thứ chúng ta quen thuộc vì chúng ta biết những điều cơ bản về chức năng

Chúng tôi biết rằng các hàm xuất dữ liệu bằng cách sử dụng

4 và chấp nhận dữ liệu với các đối số

Nếu chúng ta có một phần tử HTML, giả sử một div có thuộc tính gọi là "tiêu đề", thì mã này sẽ không hợp lệ. HTML không có thuộc tính tiêu đề cho bất kỳ phần tử nào của nó

0

Nhưng nếu chúng tôi đã tạo "thuộc tính" tiêu đề này trên thành phần Liên kết của mình

1

Điều này là hợp lệ. Và vì chúng tôi đã viết tiêu đề giống như một thuộc tính trên thành phần của mình, nên nó được chuyển đến hàm Liên kết dưới dạng đối số có tên là "tiêu đề"

Trong mã chúng ta có thể nghĩ về nó như thế này

2

Lưu ý rằng đối số linkData là một đối tượng

React thu thập và sắp xếp dữ liệu được truyền đến một thành phần nhất định dưới dạng một đối tượng

Tên của dữ liệu được truyền cho một thành phần, chẳng hạn như tiêu đề, là props

Tất cả các giá trị prop tồn tại trong chính thành phần chức năng trên một đối tượng props

Và vì mục tiêu của chúng tôi là sử dụng tiêu đề chống đỡ trong thành phần Liên kết của chúng tôi, chúng tôi có thể viết như sau

3

Chúng tôi sử dụng cú pháp dấu ngoặc nhọn

5 để chèn tiêu đề prop từ props. tiêu đề bất cứ nơi nào chúng tôi muốn. Và điều tương tự cũng áp dụng cho bất kỳ chỗ dựa nào khác được truyền lại cho một thành phần

Các dấu ngoặc nhọn này cho phép chúng ta chèn hoặc nội suy các giá trị động ở bất cứ đâu chúng ta cần

Bây giờ chúng tôi có mọi thứ chúng tôi cần để sửa các liên kết của mình. Đối với mỗi thành phần Liên kết, chúng tôi cần chuyển tiêu đề, URL, URL ngắn và đoạn trích dưới dạng đạo cụ riêng lẻ

4

Nhìn vào đầu ra của chúng tôi, chúng tôi vẫn nhận được kết quả tương tự

Nhưng có một chút đánh đổi ở đây. Thông qua các đạo cụ, chúng tôi có thể làm cho thành phần Liên kết của mình dễ đọc hơn nhiều

Bây giờ chúng tôi có thể tạo bất kỳ Liên kết nào dựa trên bất kỳ dữ liệu chống đỡ (hợp lệ) nào mà chúng tôi cung cấp cho nó

Nhưng bây giờ bạn có thể thấy rằng thành phần Ứng dụng của chúng tôi đã lớn hơn rất nhiều bằng cách cung cấp các giá trị chống đỡ ngay lập tức trên mỗi Liên kết

Có cách nào để chúng ta có thể di chuyển tất cả dữ liệu này sang nơi khác không?

Cách tách dữ liệu khỏi giao diện

Hãy di chuyển dữ liệu của chúng ta ra khỏi cây thành phần và đặt nó ở đâu đó thuận tiện hơn, nhưng vẫn sử dụng dữ liệu khi cần thiết

Để làm điều đó, chúng ta sẽ tạo một mảng các đối tượng có dữ liệu liên kết để truyền xuống các thành phần Liên kết thông qua các đạo cụ

Điều này cho phép chúng tôi đặt dữ liệu của mình ở bất cứ đâu chúng tôi muốn, thậm chí trong một tệp JavaScript khác. Lợi ích là nó không làm lộn xộn các thành phần của chúng ta nữa

5

Bây giờ làm cách nào để hiển thị từng Liên kết với dữ liệu của nó bằng cách sử dụng mảng linkData?

Nếu bạn đã từng làm việc với mảng trước đây, để lấy từng phần tử, chúng ta lặp hoặc lặp qua mảng. Ở đây, đối với mỗi vòng lặp, chúng ta có thể chuyển lại dữ liệu đạo cụ xuống thành phần Liên kết

Mẫu này là một mẫu rất phổ biến trong React. Nhiều đến mức có một phương thức mảng đặc biệt mà chúng ta có thể sử dụng để thực hiện phép lặp này, được gọi là. bản đồ(). Nó không giống như phương thức bản đồ trong JavaScript thông thường—nó chỉ để làm việc với JSX và các thành phần

6

Bằng cách di chuyển dữ liệu của chúng tôi ra khỏi giao diện người dùng và hiển thị từng liên kết bằng cách sử dụng. map(), chúng ta có một ứng dụng React đơn giản hơn nhiều có thể chấp nhận bao nhiêu liên kết tùy ý

Cuối cùng, lưu ý trong mã của chúng tôi rằng nơi chúng tôi đang ánh xạ qua linkData của mình, toàn bộ biểu thức được bao quanh bởi các dấu ngoặc nhọn của chúng tôi. Xin lưu ý rằng JSX cho phép chúng tôi chèn bất kỳ biểu thức JavaScript hợp lệ nào giữa các dấu ngoặc nhọn

Cách xây dựng ứng dụng theo cách "React"

Điểm bao gồm các mô hình khác nhau là gì?

Không chỉ trình bày kiến ​​thức cơ bản về JSX và cách React kết hợp HTML và JavaScript mà còn cho bạn thấy cách các nhà phát triển React nghĩ

Làm thế nào để bạn nghĩ như một nhà phát triển React?

Khi một nhà phát triển React lên kế hoạch cho một ứng dụng mà họ muốn tạo, họ bắt đầu bằng cách xác định tất cả các phần riêng lẻ của ứng dụng và xem những phần nào có thể được tạo thành các thành phần có thể tái sử dụng

Chúng tôi làm điều đó bằng cách xem liệu mỗi phần có cấu trúc hình ảnh (HTML) giống nhau hay không và chấp nhận các bộ dữ liệu giống nhau hoặc rất giống nhau (thông qua đạo cụ)

Bây giờ để đến vòng tròn đầy đủ, chúng ta hãy có một cái nhìn mới về giao diện người dùng bắt đầu mà chúng ta muốn tạo lại lúc đầu

Nếu chúng ta xem điều này giống như một nhà phát triển React, thì nó có thể trông giống như thế này

Bạn sử dụng các thành phần càng tốt thì bạn càng có thể dễ dàng xây dựng các trang web và ứng dụng của riêng mình nhanh hơn

Thưởng thức bài viết này?

React Bootcamp lấy mọi thứ bạn nên biết về việc học React và gói nó thành một gói toàn diện, bao gồm video, cheatsheet, cộng với phần thưởng đặc biệt

Có được thông tin nội bộ mà hàng trăm nhà phát triển đã sử dụng để thành thạo React, tìm được công việc mơ ước và kiểm soát tương lai của họ

Nhấn vào đây để được thông báo khi nó mở ra

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

QUẢNG CÁO

---

xà lan lau sậy

Nhà phát triển phản ứng thích tạo ra các ứng dụng đáng kinh ngạc. Hướng dẫn bạn cách React Bootcamp. com

---

Nếu bài viết này hữu ích, hãy tweet nó

Học cách viết mã miễn phí. Chương trình giảng dạy mã nguồn mở của freeCodeCamp đã giúp hơn 40.000 người có được việc làm với tư cách là nhà phát triển. Bắt đầu

React có sử dụng XML không?

React có được sử dụng với HTML không?

React có sử dụng HTML và CSS không?

React có giống với HTML không?