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

Bạn không cần phải xây dựng toàn bộ trang web của mình với React. Thêm phản ứng với HTML không yêu cầu cài đặt, mất một phút và cho phép bạn bắt đầu viết các thành phần tương tác ngay lập tức.

Bạn sẽ học

• Cách thêm React vào trang HTML trong một phút
• Cú pháp JSX là gì và cách nhanh chóng thử nó
• Cách thiết lập bộ tiền xử lý JSX để sản xuất

Thêm phản ứng trong một phút

React đã được thiết kế ngay từ đầu để áp dụng dần dần. Hầu hết các trang web aren aren (và don don cần) được xây dựng đầy đủ với React. Hướng dẫn này cho thấy cách thêm một số rắc của tương tác trên mạng vào một trang HTML hiện có.

Hãy thử điều này với trang web của riêng bạn hoặc tệp HTML trống. Tất cả những gì bạn cần là kết nối Internet và trình soạn thảo văn bản như Notepad hoặc VSCode. .

Bước 1: Thêm thẻ HTML gốc

Đầu tiên, hãy mở trang HTML bạn muốn chỉnh sửa. Thêm 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>
html>

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

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

<div id="like-button-root">div>

Nó được gọi là một gốc rễ bởi vì nó là nơi mà cây phản ứng sẽ bắt đầu. Bạn có thể đặt thẻ HTML gốc 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>
html>

Bạn có thể có nhiều thẻ HTML gốc như bạn cần trên một trang.

Bước 2: Thêm thẻ tập lệnh

Trong 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>
html>

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

• 'use strict';
  function LikeButton() {
  const [liked, setLiked] = React.useState(false);
  if (liked) {
  return 'You liked this!';
  }
  return React.createElement(
  'button',
  {
  onClick: () => setLiked(true),
  },
  'Like'
  );
  }

  0 cho phép bạn xác định các thành phần React.

• 'use strict';
  function LikeButton() {
  const [liked, setLiked] = React.useState(false);
  if (liked) {
  return 'You liked this!';
  }
  return React.createElement(
  'button',
  {
  onClick: () => setLiked(true),
  },
  'Like'
  );
  }

  1 cho phép phản ứng kết xuất các phần tử HTML cho DOM.

• 'use strict';
  function LikeButton() {
  const [liked, setLiked] = React.useState(false);
  if (liked) {
  return 'You liked this!';
  }
  return React.createElement(
  'button',
  {
  onClick: () => setLiked(true),
  },
  'Like'
  );
  }

  2 là nơi bạn sẽ viết thành phần của mình trong bước tiếp theo! is where you’ll write your component in the next step!

HTML của bạn bây giờ sẽ kết thúc như thế này:

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

Cạm bẫy

Trước khi triển khai đến một trang web trực tiếp, hãy đảm bảo thay thế

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

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

Tạo một tệp có tên

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';



function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

Bước 4: Thêm thành phần React của bạn vào trang

Cuối cùng, thêm ba dòng vào đáy

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

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

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

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

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

Xin chúc mừng! Bạn vừa hiển thị thành phần React đầu tiên của bạn cho trang web của bạn!

• Xem mã nguồn ví dụ đầy đủ
• Tải xuống ví dụ đầy đủ (có khóa kéo 2kb)

Bạn có thể sử dụng lại các thành phần!

Bạn có thể muốn hiển thị các thành phần React ở nhiều nơi trên cùng một trang HTML. Điều này rất hữu ích nếu các phần chạy bằng phản ứng của trang của bạn tách biệt với nhau. Bạn có thể làm điều này bằng cách đặt nhiều thẻ gốc vào HTML của bạn và sau đó hiển thị các thành phần React bên trong mỗi thành phần với

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

1. Trong

   const rootNode = document.getElementById('like-button-root');
   const root = ReactDOM.createRoot(rootNode);
   root.render(React.createElement(LikeButton));

   0, thêm một phần tử container bổ sung

   const rootNode = document.getElementById('like-button-root');
   const root = ReactDOM.createRoot(rootNode);
   root.render(React.createElement(LikeButton));

   1.

   const rootNode = document.getElementById('like-button-root');
   const root = ReactDOM.createRoot(rootNode);
   root.render(React.createElement(LikeButton));

   0, add an additional container element

   const rootNode = document.getElementById('like-button-root');
   const root = ReactDOM.createRoot(rootNode);
   root.render(React.createElement(LikeButton));

   1.
2. Trong

   'use strict';
   function LikeButton() {
   const [liked, setLiked] = React.useState(false);
   if (liked) {
   return 'You liked this!';
   }
   return React.createElement(
   'button',
   {
   onClick: () => setLiked(true),
   },
   'Like'
   );
   }

   2, thêm ba dòng nữa ở cuối:

   'use strict';
   function LikeButton() {
   const [liked, setLiked] = React.useState(false);
   if (liked) {
   return 'You liked this!';
   }
   return React.createElement(
   'button',
   {
   onClick: () => setLiked(true),
   },
   'Like'
   );
   }

   2, add three more lines at the end:

const anotherRootNode = document.getElementById('another-root');
const anotherRoot = ReactDOM.createRoot(anotherRootNode);
anotherRoot.render(React.createElement(LikeButton));

Nếu bạn cần kết xuất cùng một thành phần ở nhiều nơi, bạn có thể gán CSS

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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

Bước 5: Minify JavaScript để sản xuất

JavaScript chưa từng có có thể làm chậm đáng kể thời gian tải trang cho người dùng của bạn. Trước khi triển khai trang web của bạn để sản xuất, đó là một ý tưởng tốt để thu nhỏ các tập lệnh của nó.

• 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ó. for your scripts, here’s one way to set it up.
• Nếu bạn đã thu nhỏ các tập lệnh ứng dụng của mình, 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

  'use strict';
  function LikeButton() {
  const [liked, setLiked] = React.useState(false);
  if (liked) {
  return 'You liked this!';
  }
  return React.createElement(
  'button',
  {
  onClick: () => setLiked(true),
  },
  'Like'
  );
  }

  4 như vậy: your application scripts, your site will be production-ready if you ensure that the deployed HTML loads the versions of React ending in

  'use strict';
  function LikeButton() {
  const [liked, setLiked] = React.useState(false);
  if (liked) {
  return 'You liked this!';
  }
  return React.createElement(
  'button',
  {
  onClick: () => setLiked(true),
  },
  'Like'
  );
  }

  4 like so:

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

Hãy thử React với JSX

Các ví dụ trên dựa vào các tính năng được hỗ trợ bởi các trình duyệt. Đây là lý do tại sao

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'



);
}

return React.createElement('button', {onClick: () => setLiked(true)}, 'Like');

Tuy nhiên, React cũng cung cấp một tùy chọn để sử dụng JSX, cú pháp JavaScript giống như HTML, thay vào đó: thay vào đó:

return <button onClick={() => setLiked(true)}>Likebutton>;

Hai đoạn mã này tương đương. JSX là cú pháp phổ biến để mô tả đánh dấu trong JavaScript. Nhiều người thấy nó quen thuộc và hữu ích khi viết mã UI, cả hai với React và với các thư viện khác.

Bạn có thể chơi với việc chuyển đổi đánh dấu HTML thành JSX bằng cách sử dụng bộ chuyển đổi trực tuyến này.

Hãy thử JSX

Cách nhanh nhất để thử JSX là thêm trình biên dịch Babel làm 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>
html>

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

<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>
<script src="https://unpkg.com/@babel/standalone/babel.min.js">script>
<script src="like-button.js" type="text/babel">script>
body>

Bây giờ bạn có thể mở

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);

với mã JSX tương đương:

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

Lúc đầu, nó có thể cảm thấy hơi bất thường khi trộn JS với đánh dấu, nhưng nó sẽ phát triển trên bạn! Kiểm tra viết Markup trong JSX để giới thiệu. Dưới đây là một tệp HTML ví dụ với JSX mà bạn có thể tải xuống và chơi với.

Cạm bẫy

Trình biên dịch Babel

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

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

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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

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

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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

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. Thêm bộ tiền xử lý JSX rất giống như thêm bộ tiền xử lý CSS.

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 (chắc chắn bạn đã cài đặt Node.js!):Be sure you have Node.js installed!):

1. const anotherRootNode = document.getElementById('another-root');
   const anotherRoot = ReactDOM.createRoot(anotherRootNode);
   anotherRoot.render(React.createElement(LikeButton));
   
   
   
   

   7 (nếu nó thất bại, đây là một bản sửa lỗi)

2. const anotherRootNode = document.getElementById('another-root');
   const anotherRoot = ReactDOM.createRoot(anotherRootNode);
   anotherRoot.render(React.createElement(LikeButton));

   8

Bạn chỉ cần NPM để 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>
html>

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 bộ tiền xử lý JSX

Bạn có thể xử lý trước JSX để mỗi khi bạn lưu một tệp có JSX trong đó, biến đổi sẽ được chạy lại, chuyển đổi tệp JSX thành một tệp JavaScript mới, đơn giản mà trình duyệt có thể hiểu. Đây là cách để thiết lập điều này:

1. Tạo một thư mục gọi là

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

   <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.
2. Trong thiết bị đầu cuối của bạn, hãy chạy lệnh này:

   <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 (đừng chờ đợi để hoàn thành! Lệnh này bắt đầu một trình xem tự động để chỉnh sửa với JSX bên trong

   <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.)
3. Di chuyển JSX-IDED

   'use strict';
   function LikeButton() {
   const [liked, setLiked] = React.useState(false);
   if (liked) {
   return 'You liked this!';
   }
   return React.createElement(
   'button',
   {
   onClick: () => setLiked(true),
   },
   'Like'
   );
   }

   2 của bạn (nó sẽ trông như thế này!) Sang thư mục

   <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 mới.

   'use strict';
   function LikeButton() {
   const [liked, setLiked] = React.useState(false);
   if (liked) {
   return 'You liked this!';
   }
   return React.createElement(
   'button',
   {
   onClick: () => setLiked(true),
   },
   'Like'
   );
   }

   2 (it should look like this!) to the new

   <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 folder.

Người theo dõi sẽ tạo ra một

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

Cạm bẫy

Trình biên dịch Babel

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

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

const rootNode = document.getElementById('like-button-root');
const root = ReactDOM.createRoot(rootNode);
root.render(React.createElement(LikeButton));

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

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. Thêm bộ tiền xử lý JSX rất giống như thêm bộ tiền xử lý CSS.

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 (chắc chắn bạn đã cài đặt Node.js!):

const anotherRootNode = document.getElementById('another-root');const anotherRoot = ReactDOM.createRoot(anotherRootNode);anotherRoot.render(React.createElement(LikeButton));7 (nếu nó thất bại, đây là một bản sửa lỗi)

Bạn chỉ cần NPM để 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>
html>

• 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.
• Chạy bộ tiền xử lý JSX

Bạn có thể xử lý trước JSX để mỗi khi bạn lưu một tệp có JSX trong đó, biến đổi sẽ được chạy lại, chuyển đổi tệp JSX thành một tệp JavaScript mới, đơn giản mà trình duyệt có thể hiểu. Đây là cách để thiết lập điều này:

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

Tạo một thư mục gọi là

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

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

Trong thiết bị đầu cuối của bạn, hãy chạy lệnh này:

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

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

Di chuyển JSX-IDED

'use strict';
function LikeButton() {
const [liked, setLiked] = React.useState(false);
if (liked) {
return 'You liked this!';
}
return React.createElement(
'button',
{
onClick: () => setLiked(true),
},
'Like'
);
}

<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. Người theo dõi sẽ tạo ra một

   'use strict';
   function LikeButton() {
   const [liked, setLiked] = React.useState(false);
   if (liked) {
   return 'You liked this!';
   }
   return React.createElement(
   'button',
   {
   onClick: () => setLiked(true),
   },
   'Like'
   );
   }

   2 được xử lý trước với mã JavaScript đơn giản phù hợp với trình duyệt.component, which can be a string representing an HTML element or a function component
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>

   6, 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.props you want to pass
3. Công cụ bạn 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ó. Ngoài JSX, nó cho phép bạn sử dụng các tính năng cú pháp JavaScript gần đây nhất mà không phải lo lắng về việc phá vỡ các trình duyệt cũ hơn.children the component might have, such as text strings or other elements

Nếu 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, chúng tôi sẽ bao gồm một số công cụ phổ biến và dễ tiếp cận nhất ở đây.

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

Lặn sâu

Chúng ta có thể sử dụng HTML trong Reactjs không?

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