Chúng ta có thể thêm HTML vào phản ứng JS 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
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 tôi có thể tạo tài liệu tham khảo đó 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
React - A JavaScript Library for Building User Interfaces
reactjs.org
React makes it painless to create interactive UIs.
];
}
function App[] {
return [
];
}
ReactDOM.render[, document.getElementById["root"]];
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
Link["Our link title here"];
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
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