React đã được thiết kế ngay từ đầu để áp dụng dần dần và bạn có thể sử dụng ít hay nhiều React tùy theo nhu cầu của mình. Có lẽ bạn chỉ muốn thêm một số “mức độ tương tác” vào một trang hiện có. Các thành phần phản ứng là một cách tuyệt vời để làm điều đó
Phần lớn các trang web không phải và không cần phải là ứng dụng một trang. Với một vài dòng mã và không có công cụ xây dựng, hãy thử React trong một phần nhỏ của trang web của bạn. Sau đó, bạn có thể dần dần mở rộng sự hiện diện của nó hoặc giữ nó trong một vài tiện ích động
- Thêm phản ứng trong một phút
- Không bắt buộc. Hãy thử React với JSX [không cần gói. ]
Thêm phản ứng trong một phút
Trong phần này, chúng tôi sẽ trình bày cách thêm thành phần React vào trang HTML hiện có. Bạn có thể làm theo với trang web của riêng bạn hoặc tạo một tệp HTML trống để thực hành
Sẽ không có công cụ hoặc yêu cầu cài đặt phức tạp nào — để hoàn thành phần này, bạn chỉ cần có kết nối internet và một phút thời gian của mình
Không bắt buộc. Tải xuống toàn bộ ví dụ [đã nén 2KB]
Bước 1. Thêm Vùng chứa DOM vào HTML
Đầu tiên, mở trang HTML mà bạn muốn chỉnh sửa. Thêm một thẻ
0 trống để đánh dấu vị trí bạn muốn hiển thị thứ gì đó bằng React. Ví dụ
Chúng tôi đã cung cấp cho
0 này một thuộc tính HTML duy nhất của
0. Điều này sẽ cho phép chúng tôi tìm thấy nó từ mã JavaScript sau này và hiển thị một thành phần React bên trong nóMẹo
Bạn có thể đặt một “vùng chứa”
0 như thế này ở bất cứ đâu bên trong thẻ
2. Bạn có thể có bao nhiêu vùng chứa DOM độc lập trên một trang tùy theo nhu cầu của bạn. Chúng thường trống — React sẽ thay thế bất kỳ nội dung hiện có nào bên trong các thùng chứa DOM
Bước 2. Thêm thẻ tập lệnh
Tiếp theo, thêm ba thẻ
3 vào trang HTML ngay trước thẻ đóng
4
Hai thẻ đầu tiên tải React. Cái thứ ba sẽ tải mã thành phần của bạn
Bước 3. Tạo một thành phần phản ứng
Tạo một tệp có tên
5 bên cạnh trang HTML của bạnMở mã khởi động này và dán nó vào tệp bạn đã tạo
Mẹo
Mã này định nghĩa một thành phần React có tên là
6. Đừng lo lắng nếu bạn chưa hiểu nó - chúng tôi sẽ đề cập đến các khối xây dựng của React sau trong hướng dẫn thực hành và hướng dẫn khái niệm chính của chúng tôi. Bây giờ, hãy để nó hiển thị trên màn hình
Sau mã khởi động, hãy thêm ba dòng vào cuối
5// .. the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
Ba dòng mã này tìm thấy
0 mà chúng ta đã thêm vào HTML của mình ở bước đầu tiên, tạo ứng dụng React với ứng dụng đó, sau đó hiển thị thành phần React của nút “Thích” bên trong ứng dụng đóĐó là nó
Không có bước bốn. Bạn vừa thêm thành phần React đầu tiên vào trang web của mình
Hãy xem các phần tiếp theo để biết thêm các mẹo tích hợp React
Xem mã nguồn ví dụ đầy đủ
Tải xuống toàn bộ ví dụ [đã nén 2KB]
Mẹo. Tái sử dụng một thành phần
Thông thường, bạn có thể muốn hiển thị các thành phần React ở nhiều nơi trên trang HTML. Dưới đây là một ví dụ hiển thị nút “Thích” ba lần và chuyển một số dữ liệu tới nút này
Xem mã nguồn ví dụ đầy đủ
Tải xuống toàn bộ ví dụ [đã nén 2KB]
Ghi chú
Chiến lược này chủ yếu hữu ích khi các phần được hỗ trợ bởi React của trang bị cô lập với nhau. Bên trong mã React, thay vào đó, việc sử dụng thành phần thành phần sẽ dễ dàng hơn
Mẹo. Giảm thiểu JavaScript cho sản xuất
Trước khi triển khai trang web của bạn vào sản xuất, hãy lưu ý rằng JavaScript chưa được rút gọn có thể làm chậm đáng kể trang đối với người dùng của bạn
Nếu bạn đã thu nhỏ tập lệnh ứng dụng, trang web của bạn sẽ sẵn sàng sản xuất nếu bạn đảm bảo rằng HTML đã triển khai sẽ tải các phiên bản React kết thúc bằng
9
1Nếu bạn không có bước thu nhỏ cho tập lệnh của mình, đây là một cách để thiết lập
Không bắt buộc. Thử React với JSX
Trong các ví dụ trên, chúng tôi chỉ dựa vào các tính năng được trình duyệt hỗ trợ. Đây là lý do tại sao chúng tôi sử dụng lệnh gọi hàm JavaScript để cho React biết nội dung sẽ hiển thị
2Tuy nhiên, React cũng cung cấp tùy chọn sử dụng JSX thay thế
3Hai đoạn mã này là tương đương. Mặc dù JSX hoàn toàn là tùy chọn, nhưng nhiều người thấy nó hữu ích khi viết mã giao diện người dùng — cả với React và với các thư viện khác
Bạn có thể chơi với JSX bằng trình chuyển đổi trực tuyến này
Nhanh chóng thử JSX
Cách nhanh nhất để thử JSX trong dự án của bạn là thêm thẻ
3 này vào trang của bạn
5Bây giờ bạn có thể sử dụng JSX trong bất kỳ thẻ
3 nào bằng cách thêm thuộc tính // .. the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
2 vào thẻ đó. Đây là một tệp HTML ví dụ với JSX mà bạn có thể tải xuống và sử dụngCách tiếp cận này phù hợp để học và tạo các bản trình diễn đơn giản. Tuy nhiên, nó làm cho trang web của bạn chậm và không phù hợp để sản xuất. Khi bạn đã sẵn sàng tiếp tục, hãy xóa thẻ
3 mới này và các thuộc tính // .. the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
2 mà bạn đã thêm. Thay vào đó, trong phần tiếp theo, bạn sẽ thiết lập bộ tiền xử lý JSX để tự động chuyển đổi tất cả các thẻ
3 của mìnhThêm JSX vào Dự án
Việc thêm JSX vào một dự án không yêu cầu các công cụ phức tạp như trình đóng gói hoặc máy chủ phát triển. Về cơ bản, việc thêm JSX rất giống với việc thêm bộ tiền xử lý CSS. Yêu cầu duy nhất là phải có Node. js được cài đặt trên máy tính của bạn
Chuyển đến thư mục dự án của bạn trong thiết bị đầu cuối và dán hai lệnh này
- Bước 1. Chạy
6 [nếu không thành công, đây là cách khắc phục]// .. the starter code you pasted ... const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
- Bước 2. Chạy
7// .. the starter code you pasted ... const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
Mẹo
Ở đây chúng tôi chỉ sử dụng npm để cài đặt bộ tiền xử lý JSX; . Cả React và mã ứng dụng có thể ở dạng thẻ
3 mà không có thay đổi nào
Xin chúc mừng. Bạn vừa thêm một thiết lập JSX sẵn sàng sản xuất vào dự án của mình
Chạy bộ tiền xử lý JSX
Tạo một thư mục có tên
// .. the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
9 và chạy lệnh đầu cuối này
5Ghi chú
10 không phải lỗi đánh máy — đó là công cụ chạy gói đi kèm với npm 5. 2+
Nếu bạn thấy thông báo lỗi cho biết “Bạn đã cài đặt nhầm gói
11”, bạn có thể đã bỏ lỡ bước trước đó. Thực hiện nó trong cùng một thư mục, rồi thử lại
Đừng đợi nó kết thúc - lệnh này sẽ bắt đầu trình theo dõi tự động cho JSX
Nếu bây giờ bạn tạo một tệp có tên là
12 với mã khởi động JSX này, trình theo dõi sẽ tạo một tệp
5 đã được xử lý trước với mã JavaScript đơn giản phù hợp với trình duyệt. Khi bạn chỉnh sửa tệp nguồn bằng JSX, quá trình chuyển đổi sẽ tự động chạy lạiNhư một phần thưởng, điều này cũng cho phép bạn sử dụng các tính năng cú pháp JavaScript hiện đại như các lớp mà không phải lo lắng về việc phá vỡ các trình duyệt cũ hơn. Công cụ chúng tôi vừa sử dụng có tên là Babel và bạn có thể tìm hiểu thêm về công cụ này từ tài liệu của nó
Nếu bạn nhận thấy rằng bạn đang cảm thấy thoải mái với các công cụ xây dựng và muốn chúng làm được nhiều việc hơn cho bạn, thì phần tiếp theo sẽ mô tả một số chuỗi công cụ phổ biến và dễ tiếp cận nhất. Nếu không — những thẻ tập lệnh đó sẽ hoạt động tốt