Cách tích hợp ReactJS vào dự án website bất kỳ
Bài viết được sự cho phép bởi tác giả Sơn Dương
Thông thường chúng ta hay tạo một dự án ReactJS riêng biệt để xây dựng một website hoàn chỉnh.
Tuy nhiên, bạn quên mất rằng, bản chất ReactJS chỉ là một thư viện front end, giúp xây dựng giao diện trang web được đơn giản hơn.
Do vậy, xét về khía cạnh tích hợp, việc sử dụng ReactJS hoàn toàn tương tự như cách mà bạn vẫn hay sử dụng các thư viện UI như bootstrap, jQuery… mà thôi.
Với một dự án rất lớn được xây dựng trên một công nghệ nào đó, ví dụ như Asp.net, Java Spring, hay NodeJS… Trong khi bạn muốn kiểm tra hoặc thêm giao diện cho một tính năng nào đó mà không làm ảnh hưởng tới toàn bộ dự án.
Trong trường hợp này, bạn có thể sử dụng ReactJS để xây dựng giao diện cho tính năng đó mà không ảnh hưởng tới phần còn lại.
Thực chất, Reactjs ra đời là để giải quyết những vấn đề như thế này. Nên là, việc tích hợp rất là đơn giản.
Chúng ta bắt nhỉ!
Ví dụ một chức năng cần thực hiện với ReactJS
Để minh họa cho bài viết, giả sử chúng ta có một dự án web nhỏ với tính năng cho phép đăng bài viết và viết bình luận cho bài viết đó.
Đầu tiên, mình cứ tạo một file index.html
trong thư mục dự án. Trong thực tế, index.html
là file gốc của dự án nên có thể sẽ có nhiều mã html của những tính năng khác.
Giả sử index.html
đã có mã nguồn như sau:
<div class="post-container"> <h1 class="post-header">T-shirt for sale</h1> <div class="post-body"> <img src="t-shirt.jpg" alt="img" width="300px" height="300px" /> </div> </div>
Giờ chúng ta thêm chức năng đăng bài viết vào trong này.
Tích hợp ReactJS
Chỉ cần thêm một thẻ html với một unique ID, ví dụ:
<div id="post-comments-root"> <!--This is a react root node--> </div>
Tiếp theo, chúng ta thêm thư viện ReactJS vào cuối của thẻ <body>
. Khi nào deploy dự án, bạn nhớ thay react.development.js
thành react. production.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>
Để có thể sử dụng được cú pháp JSX, bạn cần phải cài thêm thư viện babel. Nếu không, bạn sẽ phải sử dụng cú pháp ES5 thông thường, ví dụ: sử dụng React.createElement()
để trả về một react component.
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
Như vậy là bạn đã cài đặt thư viện ReactJS vào dự án website có sẵn xong rồi đấy. Phần tiếp theo hoàn toàn tương tự như cách mà chúng ta vẫn thực hiện khi làm việc với ReactJS thôi. Đó là tạo một component.
Xem thêm các việc làm ReactJS hấp dẫn tại TopDev
Chúng ta sẽ tạo một Post component (đặt tên file là post-comments.js), sau đó chèn vào trong index.html
là được.
<script src="react/components/post-comments.js" type="text/babel"></script>
Phần nội dung của Post component cụ thể như nào thì mình không viết cụ thể ra đây nhé. Bài viết này mình chỉ tập trung vào cách tích hợp ReactJS mà thôi.
Sau khi hoàn thành viết code cho các component xong, truy xuất root React DOM trong
index.html
sử dụng id:post-comments-root
và render root element sử dụng API:createRoot()
tương tự như cách mà bạn vẫn làm trong các dự án React
const domNode = document.getElementById("post-comments-root"); const root = ReactDOM.createRoot(domNode); root.render(<PostComments />);
Đã xong! Như vậy là bạn đã tích hợp xong React vào một dự án website đã có sẵn. Công việc tiếp theo thì bạn vẫn code React như bình thường thôi.
Bài viết gốc được đăng tải tại vntalking.com
Xem thêm:
- 5 VS Code Extensions hữu ích cho React developers
- Những câu hỏi phỏng vấn React thường gặp
- Một số custom hooks hay sử dụng cho React
Xem thêm Việc làm IT hấp dẫn trên TopDev
- M Mới ra trường không kinh nghiệm, sao làm BA?
- C Chuyển đổi SA key sang Workload Identity
- U Use Case Diagram và 5 sai lầm thường gặp
- K Kinh nghiệm xử lý câu lệnh điều kiện trong JavaScript
- D Dart là gì? Ứng dụng của ngôn ngữ lập trình Dart
- C Chuẩn Hóa CV, Nhận Ngay Phím Chất
- S So sánh MySQL và MongoDB: Nên chọn CSDL nào?
- D Dân BA có cần phải rành về kỹ thuật???
- C CSS Selector là gì? Cách sử dụng các loại CSS Selector phổ biến
- P Phân biệt Sketch, Wireframe, Mockup, và Prototype?