Hướng dẫn how integrate html with react? - cách tích hợp html với phản ứng?
Ngày đăng:
15/11/2022
Trả lời:
0
Lượt xem:
191
5:
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.
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)
Đầ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! 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>
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ó.
như thế này ở bất cứ đâu bên trong thẻ
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.
<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>
Bước 2: Thêm thẻ tập lệnh
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>
<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>
Bước 3: Tạo thành phần React
5 bên cạnh trang HTML của bạn.
<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>
như thế này ở bất cứ đâu bên trong thẻ
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.
<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:
<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>
// ... 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ẻ
<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.
5 bên cạnh trang HTML của bạn.
<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!
<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>
Sau mã khởi động, thêm ba dòng vào cuối
5:
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ó.
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!
<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:
<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>
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ó!
9:
<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>
<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>
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 (
<button onClick={() => this.setState({ liked: true })}>
Like
button>
);
Mẹo: Minify JavaScript để sản xuất
<script src="https://unpkg.com/babel-standalone@6/babel.min.js">script>
9:
<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
<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 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.
<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>
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
<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.
<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>
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+.<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.<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.production.min.js" crossorigin>script>
<script src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js" crossorigin>script>
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.
<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>
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.