Hướng dẫn convert reactjs to html
Sau đây là bài viết chuyển đổi bất kỳ trang web HTML nào thành trang web/app dựa trên ReactJS components. Nếu bạn đang xây dựng một ứng dụng trang đơn hoàn toàn mới và cần một điểm khởi đầu, bài viết này là dành cho bạn. Show Mặc dù việc xây dựng một trang web chỉ biết HTML, CSS và Javascript là khá đủ, nhưng điều đáng nói là các công ty sau đây đã quyết định chuyển sang một trang web React:
và một số doanh nghiệp con khác của các công ty này. Bài viết này sẽ cho bạn thấy làm thế nào để covert trang web của mình sang ReactJs(sử dụng các mẫu từ ColorLib để hoàn thành bài tập này). Tuyên bố miễn trừ trách nhiệm: Vì lý do bản quyền, các mẫu này chỉ dành cho thực tế và nếu muốn sử dụng, bạn có thể sẽ phải trả phí khi click download. 1. Tải templateTải xuống Creative Template vì đây sẽ là trang web chuẩn để sẽ dùng chuyển đổi thành React 2. Tạo Ứng dụng ReactTạo Ứng dụng React chạy các lệnh sau trong Terminal hoặc Console của bạn:
NOTE: Phiên bản Node phải lớn hơn 6.0 và NPM lớn hơn hoặc bằng 5.2. 3. Chuyển đổi các file cần thiếtChuyển tất cả các folders (css/, fonts/, img/, js/) trong Creative Template vào folder public và import chúng vào file public/index.html trong ứng dụng React của bạn. Sau đó bạn mở file index.html ở cả 2 project và tham chiếu chúng với nhau: copy styles and font từ template sang ứng dụng của bạn: Kết quả cuối cùng sẽ như thế này: Khi bạn đã hoàn thành bước này, tất cả các chức năng từ Template đã được chuyển sang Ứng dụng ReactJS mới của bạn. Toàn bộ trang web của bạn sẽ được nhúng trong nút Mở file Những gì chúng ta sắp làm tiếp theo là hoàn toàn tùy chọn, nhưng điều ta muốn là chuyển đổi App function này thành một class App. Vì vậy, ta làm như sau: Thay đổi Cung cấp cho Sao chép câu lệnh return từ hàm App()
sang hàm App Render() của class. Kết quả:
Do đó, chúng ta nên có bố cục giống như trước đây với logo React quay vẫn ở giữa màn hình. Bằng cách chuyển đổi component này thành một class, chúng ta có thể đưa vào biến state để có thể thay đổi các phần
hiển thị trong ứng dụng của bạn . Ngoài ra, bạn có thể truy cập vào React’s Lifecycle Methods để biết cách thêm logic vào giữa mounting và unmounting của các component. Tiếp theo, thêm nội dung vào component này. Đầu tiên, xóa header node và child của chúng để xóa trang web.
Khi đã cleared component, quay lại index.html từ bên trong Creative Template. Sao chép mọi thứ trong phần tử Làm theo các bước này một cách cẩn thận sẽ chuyển đổi bất kỳ trang web thông thường nào thành ứng dụng
ReactJS. Trên đây là bài viết bổ ích em muốn chia sẻ cho mọi người. Hi vọng giúp ích cho các bạn Nguồn: How to convert any web page into a React web page |