Tôi có thể hiển thị tệp HTML trong React không? | Archer Fry Amina

Không giống như các phần tử DOM của trình duyệt, các phần tử React là các đối tượng đơn giản và không tốn kém để tạo. React DOM đảm nhiệm việc cập nhật DOM để phù hợp với các phần tử React

Ghi chú

Người ta có thể nhầm lẫn các yếu tố với một khái niệm được biết đến rộng rãi hơn về "các thành phần". Chúng tôi sẽ giới thiệu các thành phần trong phần tiếp theo. Các phần tử là những thành phần được “làm bằng” và chúng tôi khuyến khích bạn đọc phần này trước khi tiếp tục

Kết xuất một phần tử vào DOM

Giả sử có một

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

<div id="root"></div>

Chúng tôi gọi đây là nút DOM “gốc” vì mọi thứ bên trong nó sẽ được quản lý bởi React DOM

Các ứng dụng được xây dựng chỉ bằng React thường có một nút DOM gốc duy nhất. Nếu bạn đang tích hợp React vào một ứng dụng hiện có, bạn có thể có bao nhiêu nút DOM gốc bị cô lập tùy thích

Để kết xuất phần tử React, trước tiên hãy chuyển phần tử DOM cho

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Dùng thử trên CodePen

Nó hiển thị “Xin chào, thế giới” trên trang

Cập nhật phần tử kết xuất

Các yếu tố phản ứng là bất biến. Khi bạn tạo một phần tử, bạn không thể thay đổi phần tử con hoặc thuộc tính của phần tử đó. Một yếu tố giống như một khung hình duy nhất trong một bộ phim. nó đại diện cho giao diện người dùng tại một thời điểm nhất định

Với kiến ​​thức của chúng tôi cho đến nay, cách duy nhất để cập nhật giao diện người dùng là tạo một phần tử mới và chuyển phần tử đó cho

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

Xem xét ví dụ về đồng hồ tích tắc này

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);}

setInterval(tick, 1000);

Dùng thử trên CodePen

Nó gọi

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

Ghi chú

Trong thực tế, hầu hết các ứng dụng React chỉ gọi

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

5 một lần. Trong các phần tiếp theo, chúng ta sẽ tìm hiểu cách mã như vậy được gói gọn trong các thành phần có trạng thái

Chúng tôi khuyên bạn không nên bỏ qua các chủ đề vì chúng xây dựng lẫn nhau

Chỉ cập nhật phản ứng Những gì cần thiết

React DOM so sánh phần tử và phần tử con của nó với phần tử trước đó và chỉ áp dụng các bản cập nhật DOM cần thiết để đưa DOM về trạng thái mong muốn

Bạn có thể xác minh bằng cách kiểm tra ví dụ cuối cùng bằng các công cụ trình duyệt

Mặc dù chúng tôi tạo một phần tử mô tả toàn bộ cây giao diện người dùng trên mỗi lần đánh dấu, nhưng chỉ nút văn bản có nội dung đã thay đổi được cập nhật bởi React DOM

Theo kinh nghiệm của chúng tôi, suy nghĩ về giao diện người dùng sẽ trông như thế nào tại bất kỳ thời điểm cụ thể nào, thay vì cách thay đổi nó theo thời gian, sẽ loại bỏ cả một lớp lỗi

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ẻ

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

Chúng tôi đã cung cấp cho

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

Mẹo

Bạn có thể đặt một “vùng chứa”

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

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

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

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ẻ

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

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

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

Mở 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à

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

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

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

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

<!-- .. existing HTML .. -->

<div id="like_button_container"></div>
<!-- .. existing HTML .. -->

Đó 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 tải các phiên bản React kết thúc bằng

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Nế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ị

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Tuy nhiên, React cũng cung cấp tùy chọn sử dụng JSX thay thế

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Hai đ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ẻ

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Bây giờ bạn có thể sử dụng JSX trong bất kỳ thẻ

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

Cá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ẻ

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

Thê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

1. Bước 1. Chạy

   const root = ReactDOM.createRoot(
     document.getElementById('root')
   );
   const element = <h1>Hello, world</h1>;
   root.render(element);

   26 (nếu không thành công, đây là cách khắc phục)
2. Bước 2. Chạy

   const root = ReactDOM.createRoot(
     document.getElementById('root')
   );
   const element = <h1>Hello, world</h1>;
   root.render(element);

   27

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ẻ

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

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

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

const root = ReactDOM.createRoot(
  document.getElementById('root')
);

function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  root.render(element);}

setInterval(tick, 1000);

Ghi chú

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

40 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

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

41”, 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à

const root = ReactDOM.createRoot(
  document.getElementById('root')
);
const element = <h1>Hello, world</h1>;
root.render(element);

  <!-- .. other HTML .. -->

  <!-- Load React. -->
  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
  <script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>  <script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>
  <!-- Load our React component. -->
  <script src="like_button.js"></script>
</body>

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

Tôi có thể chuyển đổi HTML sang React không?

Làm cách nào để in HTML trong React js?