Code Tu Tam

Cách thêm React vào website – Phần 1

Nguyễn Quang Anh
5/5 - (2 bình chọn)

React đã được thiết kế ngay từ đầu để bạn có thể thêm và sử dụng một phần hay toàn bộ thư viện React vào dự án của bạn. Phần lớn các trang web không phải là ứng dụng single-page, do vậy bạn có thể 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 chức năng, tiện ích.

Thêm React một cách nhanh chóng

Trong phần này, Codetutam 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 mình hoặc tạo một tệp HTML trống để thực hành.

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 thẻ <div> trống để đánh dấu vị trí bạn muốn hiển thị thứ gì đó bằng React. Ví dụ:

<div id="add-react-to-website"></div>

Chúng ta đã cung cấp cho <div> này một id duy nhất. Điều này sẽ cho phép sau này chúng ta có thể tìm thấy thẻ <div> này từ mã JavaScript và hiển thị một React component bên trong nó.

Bước 2: Thêm thẻ Script

Tiếp theo, thêm ba thẻ <script> vào trang HTML ngay trước thẻ đóng </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="main.js"></script>

</body>

Hai thẻ đầu tiên tải React. Cái thứ ba sẽ tải file JavaScript của bạn.

Bước 3: Tạo một React component

Tạo một file có tên main.js bên cạnh trang HTML của bạn.

Chèn đoạn mã này vào file main.js bạn vừa tạo ra:

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked this.';
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

Tiếp theo hãy thêm ba dòng vào cuối file main.js:

const domContainer = document.querySelector('#add-react-to-website');
const root = ReactDOM.createRoot(domContainer);
root.render(e(LikeButton));

Ba dòng code này tìm các thẻ <div> mà chúng ta đã thêm vào HTML của mình ở bước đầu tiên, tạo ứng dụng React và kết nối với ứng dụng đó, sau đó hiển thị  React component “LikeButton” bên trong ứng dụng đó.

Vậy là bạn vừa thêm một React component đầ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.

Mẹo: Sử dụng lại một React component

Thông thường, bạn có thể muốn hiển thị các React component ở nhiều nơi trên trang HTML. Dưới đây là một ví dụ hiển thị “LikeButton” ba lần và chuyển một số dữ liệu tới nút đó

File index.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>

    <h2>Add React in One Minute</h2>
    <p>This page demonstrates using React with no build tooling.</p>
    <p>React is loaded as a script tag.</p>

    <p>
      This is the first comment.
      <!-- We will put our React component inside this div. -->
      <div class="like_button_container" data-commentid="1"></div>
    </p>

    <p>
      This is the second comment.
      <!-- We will put our React component inside this div. -->
      <div class="like_button_container" data-commentid="2"></div>
    </p>

    <p>
      This is the third comment.
      <!-- We will put our React component inside this div. -->
      <div class="like_button_container" data-commentid="3"></div>
    </p>

    <!-- Load React. -->
    <!-- Note: when deploying, replace "development.js" with "production.min.js". -->
    <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>

    <!-- Load our React component. -->
    <script src="like_button.js"></script>

  </body>
</html>

File main.js:

'use strict';

const e = React.createElement;

class LikeButton extends React.Component {
  constructor(props) {
    super(props);
    this.state = { liked: false };
  }

  render() {
    if (this.state.liked) {
      return 'You liked comment number ' + this.props.commentID;
    }

    return e(
      'button',
      { onClick: () => this.setState({ liked: true }) },
      'Like'
    );
  }
}

// Find all DOM containers, and render Like buttons into them.
document.querySelectorAll('.like_button_container')
  .forEach(domContainer => {
    // Read the comment ID from a data-* attribute.
    const commentID = parseInt(domContainer.dataset.commentid, 10);
    const root = ReactDOM.createRoot(domContainer);
    root.render(
      e(LikeButton, { commentID: commentID })
    );
  });

Ghi chú: Cách làm 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.

Mẹo: Giảm thiểu mã JavaScript

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 web đố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 production.min.js:

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

Nếu bạn không có file rút gọn cho tập lệnh của mình, đây là một cách để thiết lập.

Trên đây là hướng dẫn cách để thêm React vào một website nhanh chóng. Đây là cách lý tưởng cho quá trình trải nghiệm cũng như thực hành các dự án nhỏ sử dụng React. Các bạn có thắc mắc hay có góp ý gì vui lòng để lại phản hồi dưới phần bình luận. Codetutam rất mong muốn nhận được sự tương tác của các bạn, qua đó cố gắng cải thiện chất lượng các bài viết tốt hơn để phục vụ độc giả. Chân thành cảm ơn!

 

Exit mobile version