Để thêm thư viện ReactJs vào trong một trang website HTML rất đơn giản, tương tự như JQuery chúng ta làm theo các bước sau.

Bước 1: Tạo một trang index.html như bình thường, và chúng ta có 1 thẻ div chờ với id tuỳ đặt tên. Nội dung của div này sẽ được bổ sung bằng code Javascript sau này sử dụng thư viện ReactJs

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

Bước 2: Thêm các thư viện ReactJs vào trang html bằng thể script

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Add React in One Minute</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="https://unpkg.com/[email protected]/umd/react.production.min.js" crossorigin></script>
    <script src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js" crossorigin></script>
    <script src="main.js"></script>
  </body>
</html>

Bước 3: Trong file main.js chúng ta tạo DOM qua hàm cảu React và render vào vị trí thẻ div #root

'use strict';
        const e = React.createElement(
            'h1',
            { style: { color: 'red' }, onClick: () => alert('Trung Tâm Java Master') },
            'Hello, world!'
        );
        const domContainer = document.querySelector('#root');
        ReactDOM.render(e, domContainer);

Bước 4: (Sử dụng JSX) Lựa chọn sử dụng JSX thay cho dùng DOM như bên trên. JSX là cách sử dụng viết HTML trong javascript, hỗ trợ thêm bởi thư viện babel . Chúng ta sẽ tìm hiểu JSX ở một bài khác, JSX cách viết như code html trong javascript, có bổ sung cách viết expression. JSX sẽ dễ dùng hơn là viết DOM

<!DOCTYPE html>
<html>

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

    <script crossorigin
            src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
    <script crossorigin
            src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/[email protected]/babel.min.js"></script>

</head>

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

    <script type="text/babel">
        'use strict';
        const e = <h1>Hello World</h1>
        const domContainer = document.querySelector('#root');
        ReactDOM.render(e, domContainer);
    </script>
</body>

</html>

Tổng kết: ReactJS chúng ta hay sử dụng công cụ backend bằng nodejs và thư viện để build code thay vì thêm trực tiếp trên trang HTML như trên vì hiệu suất chậm render thẻ HTML và nặng nếu trang có nhiều nội dung.