Hướng dẫn thêm React vào một trang web bất kỳ

Cách thêm React vào trang web chỉ trong 1 phút

Trong phần này, chúng tôi sẽ hướng dẫn cách thêm một thành phần React vào một trang HTML hiện có. Bạn có thể làm theo cùng 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.

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.

Bước 1: Thêm Vùng chứa DOM vào HTML

Đầu tiên, hãy mở trang HTML mà bạn muốn chỉnh sửa. Thêm một <div>thẻ trống để đánh dấu vị trí bạn muốn hiển thị nội dung nào đó với React. Ví dụ:

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

<div id="like_button_container"></div>

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

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

Tiếp theo, thêm ba <script>thẻ vào trang HTML ngay trước </body>thẻ đóng :

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

  <!-- Load React. -->

  <!-- Note: when deploying, replace "development.js" with "production.min.js". -->

 <script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>

 <script src="https://unpkg.com/react-dom@17/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 React

Tạo một tệp có tên like_button.jsbên cạnh trang HTML của bạn.

Mở mã khởi động này và dán vào tệp bạn đã tạo.

Mẹo

Đoạn mã này định nghĩa một thành phần React được gọi là LikeButton. Đừng lo lắng nếu bạn chưa hiểu nó - chúng tôi sẽ trình bày 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 các 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 , thêm hai dòng vào cuối like_button.js:

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

const domContainer = document.querySelector('#like_button_container');

ReactDOM.render(e(LikeButton), domContainer);

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 hỗ trợ bởi trình duyệt. Đây là lý do tại sao chúng tôi sử dụng một lệnh gọi hàm JavaScript để cho React biết những gì sẽ hiển thị:

const e = React.createElement;

// Display a "Like" <button>

return e(

  'button',

  { onClick: () => this.setState({ liked: true }) },

  'Like'

);

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

// Display a "Like" <button>

return (

  <button onClick={() => this.setState({ liked: true })}>

    Like

  </button>

);

Hai đoạn mã này tương đương nhau. 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 cho việc 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 công cụ 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 <script>thẻ này vào trang của bạn:

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

Bây giờ bạn có thể sử dụng JSX trong bất kỳ <script>thẻ nào bằng cách thêm type="text/babel"thuộc tính vào thẻ đó. Đây là một tệp HTML mẫu với JSX mà bạn có thể tải xuống và chơi cùng.

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 <script>thẻ mới này và các type="text/babel"thuộc tính bạn đã thêm. Thay vào đó, trong phần tiếp theo, bạn sẽ thiết lập bộ tiền xử lý JSX để <script>tự động chuyển đổi tất cả các thẻ của bạn .

Thêm JSX vào một 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ư gói hoặc máy chủ phát triển. Về cơ bản, thêm JSX giống như thêm một bộ tiền xử lý CSS. Yêu cầu duy nhất là phải cài đặt Node.js trên máy tính của bạn.

Đi tới thư mục dự án của bạn trong thiết bị đầu cuối và dán hai lệnh sau:

1. Bước 1: Chạy npm init -y(nếu nó không thành công, đây là một bản sửa lỗi )
2. Bước 2: Chạynpm install babel-cli@6 babel-preset-react-app@3

Chạy bộ tiền xử lý JSX

Tạo một thư mục có tên srcvà chạy lệnh đầu cuối này:

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

Trên đây là một số thông tin về cách thêm React vào một trang we,  bạn có thể tham khảo thêm để ứng dụng vào các dự án sắp tới của mình! Bạn cũng có thể tìm hiểu thêm thông tin về ReactJs qua khóa học lập trình ReactJs và các khóa học lập trình khác của Viện công nghệ thông tin T3H.