Hướng dẫn how integrate html with react? - cách tích hợp html với phản ứng?

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ẻ

trống để đánh dấu điểm mà bạn muốn hiển thị một cái gì đó với React. Ví dụ:



<div id="like_button_container">div>

Chúng tôi đã cho

một thuộc tính ____10 HTML duy nhất. Điều này sẽ cho phép chúng tôi tìm thấy nó từ mã JavaScript sau và hiển thị một thành phần phản ứng bên trong nó.

Mẹo

Bạn có thể đặt một container của người Viking

như thế này ở bất cứ đâu bên trong thẻ
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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

Tiếp theo, thêm ba thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
3 vào trang HTML ngay trước khi đóng thẻ
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
4:

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>

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.

Bước 3: Tạo thành phần React

Tạo một tệp được gọi là

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
5 bên cạnh trang HTML của bạn.

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

như thế này ở bất cứ đâu bên trong thẻ
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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.

Bước 2: Thêm thẻ tập lệnhthe starter code, add three lines to the bottom of

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
5:

// ... the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));

Tiếp theo, thêm ba thẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
3 vào trang HTML ngay trước khi đóng thẻ
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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.

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à

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
5 bên cạnh trang HTML của bạn.

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à

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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:

Ba dòng mã này tìm thấy

mà chúng tôi đã thêm vào HTML của chúng tôi trong bước đầu tiên, tạo một ứng dụng React với nó và sau đó hiển thị thành phần React Nút của chúng tôi bên trong nó.

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à

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
5:

Ba dòng mã này tìm thấy

mà chúng tôi đã thêm vào HTML của chúng tôi trong bước đầu tiên, tạo một ứng dụng React với nó và sau đó hiển thị thành phần React Nút của chúng tôi bên trong nó.

Đó 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 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

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
9:

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>

Xem mã nguồn ví dụ đầy đủ

Tải xuống ví dụ đầy đủ (có khóa kéo 2kb)

Mẹo: tái sử dụng một thành phần

const e = React.createElement;

// Display a "Like" 

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ó:

// Display a "Like" 

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.

Mẹo: Minify JavaScript để sản xuất

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.

<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>

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

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
9:

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

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
3 tag and the
// ... the starter code you pasted ...

const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));
2 attributes you’ve added. Instead, in the next section you will set up a JSX preprocessor to convert all your
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
3 tags automatically.

Thêm JSX vào một dự án

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:

  1. Bước 1: Chạy
    // ... the starter code you pasted ...
    
    const domContainer = document.querySelector('#like_button_container');const root = ReactDOM.createRoot(domContainer);root.render(e(LikeButton));
    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)
  2. Bước 2: Chạy
    // ... 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

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ẻ

  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
3 tags with no changes.

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.

Chạy 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:

npx babel --watch src --out-dir . --presets react-app/prod

Ghi chú

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>
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+.

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

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>
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.

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

<script src="https://unpkg.com/react@18/umd/react.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>
2 với mã khởi động JSX này, trình xem sẽ tạo một
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
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
  

  
  
  <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin>script>  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin>script>
  
  <script src="like_button.js">script>
body>
5 with the plain JavaScript code suitable for the browser. When you edit the source file with JSX, the transform will re-run automatically.

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!

Làm thế nào tích hợp với React trong HTML?

Thêm phản ứng trong một phút..
Bước 1: Thêm một thùng chứa DOM vào HTML. Đầu tiên, hãy mở trang HTML bạn muốn chỉnh sửa. ....
Bước 2: Thêm thẻ tập lệnh. Tiếp theo, thêm ba thẻ vào trang HTML ngay trước khi thẻ đóng: ....
Bước 3: Tạo một thành phần React. Tạo một tệp có tên Like_Button.js bên cạnh trang HTML của bạn ..

HTML có hoạt động với phản ứng không?

Theo mặc định, React không cho phép bạn tiêm HTML trong một thành phần, vì nhiều lý do bao gồm cả kịch bản chéo trang.Tuy nhiên, đối với một số trường hợp như biên tập viên CMS hoặc WYSIWYG, bạn phải đối phó với HTML RAW.Trong hướng dẫn này, bạn sẽ tìm hiểu làm thế nào bạn có thể nhúng HTML thô vào một thành phần., for various reasons including cross-site scripting. However, for some cases like a CMS or WYSIWYG editor, you have to deal with raw HTML. In this guide, you will learn how you can embed raw HTML inside a component.

Tôi có thể chuyển đổi HTML thành phản ứng không?

Khi bạn chuyển đổi trang web HTML thành ReactJS, bạn cần biến các trang web thành các thành phần.Hơn nữa, nếu bạn chỉ có một trang, bạn có thể tạo một thư mục gọi là các thành phần trong thư mục SRC.Sau đó, bạn cần tạo một đơn.Tệp JSX ở đó như chỉ mục.you need to turn web pages into components. Furthermore, if you only have one page, you can create a folder called components under the SRC folder. Then, you need to create a single . JSX file there like index.

Tôi có thể sử dụng React với HTML và CSS không?

React là một lớp trên đỉnh JavaScript đóng vai trò lớn trong cách cấu trúc UI, nhưng định nghĩa thực tế về nội dung, bố cục, màu sắc và logic để tìm nạp dữ liệu, v.v.của HTML, CSS và JavaScript.the actual definition of the content, the layout, the colors, and the logic for fetching the data, and so on is defined in a combination of HTML, CSS, and JavaScript.