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
React - A JavaScript Library for Building User Interfaces
reactjs.org
React makes it painless to create interactive UIs.
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
reactjs Search Results
// React code will go here
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
9Vì 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
reactjs Search Results
ReactDOM.render[
React [@reactjs] | Twitter
//twitter.com › reactjs
The latest Tweets from React [@reactjs].
, document.getElementById['root']]
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ố 8Vì 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ư
reactjs Search Results
// React code will go here
0, trong React, chúng ta có thể viết nó giống như nó là một phần tử HTML
reactjs Search Results
// React code will go here
1Nế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ụ.
reactjs Search Results
// React code will go here
2 trong HTML vì JSX hợp lệ là
reactjs Search Results
// React code will go here
3Vì 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
3Và 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ố 8Tê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
5Từ 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
6Như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
reactjs Search Results
// React code will go here
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ó
0Như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
2Lư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
3Chúng tôi sử dụng cú pháp dấu ngoặc nhọn
reactjs Search Results
// React code will go here
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ầnCá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ẻ
4Nhì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
5Bâ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
6Bằ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ở raQUẢ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ậyNhà 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 không có cơ chế sẵn có để tìm nạp và hiển thị dữ liệu, nhưng có rất nhiều thư viện phân tích cú pháp XML có sẵn để sử dụng cho việc này . Trước khi bắt đầu hướng dẫn ứng dụng React, bạn phải có dữ liệu XML để hiển thị, bạn có thể cần thu thập dữ liệu này từ máy chủ.
React có được sử dụng với HTML không?
Ứng dụng React thường được xây dựng xung quanh một phần tử HTML duy nhất .
React có sử dụng HTML và CSS không?
React chỉ là một lớp ưa thích trên đầu HTML. Các thành phần React xuất ra HTML và CSS tạo kiểu cho HTML . Đối với trình duyệt có liên quan, React không tìm hiểu về nó. Trình duyệt áp dụng các quy tắc CSS cho HTML trên trang, cho dù HTML đó đến từ một.
React có giống với HTML không?
Việc xử lý sự kiện trong HTML và React khác nhau về cú pháp và một số quy tắc . Lý do đằng sau điều này là React hoạt động dựa trên khái niệm DOM ảo, mặt khác, HTML luôn có quyền truy cập vào Real DOM.