Sử dụng ít hoặc nhiều phản ứng như bạn cần.
React đã được thiết kế ngay từ đầu để áp dụng dần dần và bạn có thể sử dụng ít hoặc nhiều phản ứng như bạn cần. Có lẽ bạn chỉ muốn thêm một số vết rắc của 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 đó.you can use as little or as much React as you need. Perhaps you only want to add some “sprinkles of interactivity” to an existing page. React components are a great way to do that.
Phần lớn các trang web aren, và don lồng cần, các ứ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ử phản ứng trong một phần nhỏ trên 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ó chứa một vài vật dụng động.a few lines of code and no build tooling, try React in a small part of your website. You can then either gradually expand its presence, or keep it contained to a few dynamic widgets.
- Thêm phản ứng trong một phút
- Tùy chọn: Hãy thử React với JSX [không cần thiết!]
Thêm phản ứng trong một phút
Trong phần này, chúng tôi sẽ chỉ ra cách thêm thành phần React vào trang HTML hiện có. Bạn có thể theo dõi cùng 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ụ phức tạp hoặc yêu cầu cài đặt - để hoàn thành phần này, bạn chỉ cần kết nối internet và một phút thời gian của bạn.to complete this section, you only need an internet connection, and a minute of your time.
Tùy chọn: Tải xuống ví dụ đầy đủ [có khóa kéo 2kb]
Bước 1: Thêm container DOM vào HTML
Đầu tiên, hãy mở trang HTML bạn muốn chỉnh sửa. Thêm thẻ Chúng tôi đã cho Mẹo Bạn có thể đặt một container của người Viking Tiếp theo, thêm ba thẻ Hai thẻ đầu tiên tải phản ứng. Cái thứ ba sẽ tải mã thành phần của bạn. Tạo một tệp được gọi là Mở mã khởi động này và dán nó vào tệp bạn đã tạo.this starter code and paste it into the file you created. Mẹo Bạn có thể đặt một container của người Viking Bước 2: Thêm thẻ tập lệnhthe starter code, add three
lines to the bottom of Tiếp theo, thêm ba thẻ Bước 3: Tạo thành phần ReactYou have just added the first React component to your
website. Tạo một tệp được gọi là Mở mã khởi động này và dán nó vào tệp bạn đã tạo. Mã này xác định một thành phần React gọi là Ba dòng mã này tìm thấy Mở mã khởi động này và dán nó vào tệp bạn đã tạo. Mã này xác định một thành phần React gọi là Sau mã khởi động, thêm ba dòng vào cuối Ba dòng mã này tìm thấy 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 bạn. Kiểm tra các phần tiếp theo để biết thêm lời khuyên về tích hợp React.your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in Xem mã nguồn ví dụ đầy đủ 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 của người Viking như thế giới ba lần và truyền một số dữ liệu cho nó: Ghi chúJSX is completely optional, many people find it helpful for writing UI code — both with React and with other libraries. Chiến lược này chủ yếu là hữu ích trong khi các phần chạy bằng phản ứng của trang được phân lập với nhau. Bên trong mã React, thay vào đó, nó dễ sử dụng thành phần thành phần dễ dàng hơn. Trước khi triển khai trang web của bạn để sản xuất, hãy chú ý rằng JavaScript chưa từng có có thể làm chậm đáng kể trang cho người dùng của bạn. Nếu bạn đã thu nhỏ các 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 được triển khai sẽ tải các phiên bản của React kết thúc trong Nếu bạn không có một bước thu nhỏ cho các kịch bản của mình, thì đây là một cách để thiết lập nó.isn’t suitable for production. When you’re ready to move forward, remove this new 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ư Bundler hoặc máy chủ phát triển. Về cơ bản, việc thêm JSX giống như thêm bộ tiền xử lý CSS. Yêu cầu duy nhất là đã cài đặt Node.js trên máy tính của bạn.is a lot like adding a CSS preprocessor. The only requirement is to have Node.js installed on your computer. 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: Mẹo Chúng tôi chỉ sử dụng NPM ở đây chỉ để cài đặt bộ tiền xử lý JSX; Bạn đã thắng cần nó cho bất cứ điều gì khác. Cả React và mã ứng dụng đều có thể ở dưới dạng thẻ 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 bạn.production-ready JSX setup to your project. Tạo một thư mục có tên Ghi chú Nếu bạn thấy một thông báo lỗi nói rằng bạn đã cài đặt nhầm gói Don Tiết chờ nó kết thúc - lệnh này bắt đầu một người theo dõi tự động cho JSX. Nếu bây giờ bạn tạo một tệp có tên Như 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 gọi là Babel và bạn có thể tìm hiểu thêm về nó từ tài liệu của nó. Nếu bạn nhận thấy rằng bạn đã 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 nhiều hơn cho bạn, phần tiếp theo sẽ mô tả một số công cụ phổ biến và dễ tiếp cận nhất. Nếu không - những thẻ script đó sẽ làm tốt!
2. Bạn có thể có nhiều thùng chứa DOM độc lập trên một trang như bạn cần. Chúng thường trống - React sẽ thay thế mọi nội dung hiện có bên trong các thùng chứa DOM.anywhere inside the
2 tag. You may have as many independent DOM containers on
one page as you need. They are usually empty — React will replace any existing content inside DOM containers.
Bước 2: Thêm thẻ tập lệnh
3 vào trang HTML ngay trước khi đóng thẻ
4:
Bước 3: Tạo thành phần React
5 bên cạnh trang HTML của bạn.
2. Bạn có thể có nhiều thùng chứa DOM độc lập trên một trang như bạn cần. Chúng thường trống - React sẽ thay thế mọi nội dung hiện có bên trong các thùng chứa DOM.
5:
// ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
3 vào trang HTML ngay trước khi đóng thẻ
4:
Hai thẻ đầu tiên tải phản ứng. Cái thứ ba sẽ tải mã thành phần của bạn.
5 bên cạnh trang HTML của bạn.
6. Don Tiết lo lắng nếu bạn không hiểu điều đó-chúng tôi sẽ bao gồm các khối xây dựng React sau đó trong hướng dẫn thực hành của chúng tôi và hướng dẫn khái niệm chính. Hiện tại, hãy để Lôi chỉ hiển thị trên màn hình!
Sau mã khởi động, thêm ba dòng vào cuối
5:
6. Don Tiết lo lắng nếu bạn không hiểu điều đó-chúng tôi sẽ bao gồm các khối xây dựng React sau đó trong hướng dẫn thực hành của chúng tôi và hướng dẫn khái niệm chính. Hiện tại, hãy để Lôi chỉ hiển thị trên màn hình!
5:
Đó là nó!
9:
Tải xuống ví dụ đầy đủ [có khóa kéo 2kb]
const e = React.createElement;
// Display a "Like"
return e[
'button',
{ onClick: [] => this.setState[{ liked: true }] },
'Like'
];
// Display a "Like"
return [
this.setState[{ liked: true }]}>
Like
];
Mẹo: Minify JavaScript để sản xuất
9:
3 tag and the
2 attributes you’ve added. Instead,
in the next section you will set up a JSX preprocessor to convert all your // ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
3 tags automatically.
Thêm JSX vào một dự án
6 [nếu nó thất bại, đây là một bản sửa lỗi] Run // ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
6 [if it fails, here’s a fix]// ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
7 Run // ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
7// ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
3 mà không có thay đổi.using npm here only to install the JSX preprocessor; you won’t need it for anything else. Both React and the application code can stay as
3 tags with no changes.
Chạy tiền xử lý JSX
9 và chạy lệnh đầu cuối này:// ... the starter code you pasted ...
const domContainer = document.querySelector['#like_button_container'];const root = ReactDOM.createRoot[domContainer];root.render[e[LikeButton]];
npx babel --watch src --out-dir . --presets react-app/prod
0 không phải là một lỗi đánh máy - nó là một công cụ chạy gói đi kèm với NPM 5.2+.
1, bạn có thể đã bỏ lỡ bước trước. Thực hiện nó trong cùng một thư mục, và sau đó thử lại.
2 với mã khởi động JSX này, trình xem sẽ tạo một
5 được xử lý trước với mã JavaScript đơn giản phù hợp cho trình duyệt. Khi bạn chỉnh sửa tệp nguồn với JSX, biến đổi sẽ tự động chạy lại.JSX starter code, the watcher will create a preprocessed
5 with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.
Làm thế nào tích hợp với React trong HTML?
HTML có hoạt động với phản ứng không?
Tôi có thể chuyển đổi HTML thành phản ứng không?
Tôi có thể sử dụng React với HTML và CSS không?
Chủ Đề