Hướng dẫn how do i import a html template into react? - làm cách nào để nhập một mẫu html vào react?

Hướng dẫn how do i import a html template into react? - làm cách nào để nhập một mẫu html vào react?

React là một thư viện JavaScript phổ biến bây giờ. Nó chủ yếu được sử dụng để cập nhật chế độ xem phía trước của trang và nó hoạt động nhanh hơn trang web khác để sử dụng DOM ảo. Cách bạn có thể thay đổi mẫu HTML thành dự án React và chạy từ Máy chủ React được hiển thị trong hướng dẫn này. Bạn phải tải xuống bất kỳ mẫu HTML miễn phí nào và tạo một ứng dụng React mới trước khi bắt đầu hướng dẫn này.

Steps:

1. Mẫu HTML mà tôi đã sử dụng trong hướng dẫn này được tải xuống từ liên kết sau. Bạn có thể tải xuống để sử dụng cho mục đích thử nghiệm của bạn.

https://www.free-css.com/free-css-templates/pit Age232/cảnh quan

2. Tôi đã tạo một ứng dụng React mới có tên ReactApp. Bạn có thể lưu trữ ở bất kỳ vị trí nào trong ổ đĩa của bạn. Nhưng tôi sẽ áp dụng MySQL và PHP trong hướng dẫn tiếp theo của tôi, vì vậy tôi đã lưu trữ thư mục trong thư mục HTDOCS. Nếu bạn là người mới trong React thì bạn có thể nhấp vào đây để biết các bước để cài đặt Reactjs.reactapp. You can store the in any location of your drive. But I will apply mysql and PHP in my next tutorial, so I have stored the folder under htdocs folder. If you are new in react then you can click here to know the steps for installing reactjs.

3. Sao chép tất cả các thư mục từ thư mục mẫu HTML và dán vào thư mục công khai của thư mục ReactApp.

4. Tạo một thư mục có tên các trang trong thư mục SRC của RecatApp. Bạn phải tạo các tệp JS cần thiết phụ thuộc vào các trang HTML chứa trong mẫu HTML. Tôi đã sử dụng một mẫu trang ở đây và chỉ có một tệp HTML trong thư mục mẫu.pages under src folder of recatapp. You have to create necessary js files depends on the html pages contains in HTML template. I have used one page template here and there is only one html file in the template folder.

5index.html file from HTML template folder and copy the content inside tag and paste the content inside the tag of index.html file under public folder of reactapp.

6. Tạo một tệp có tên Home.js trong src/ trang/ thư mục. Sao chép nội dung sau trong tệp.Home.js under src/pages/ folder. Copy the following content in the file.

import React, {Component} from 'react';
class Home extends Component {
    render() {
	    return (
		
); } } export default Home;

7. Sao chép nội dung của thẻ của index.html không có liên kết tập lệnh từ mẫu và dán bên trong Tag of return () của tệp home.js. Thêm liên kết tập lệnh bên dưới thẻ của index.html của thư mục công khai. tag of index.html without script links from the template and paste inside the

tag of return() of Home.js file. Add the script link below the tag of index.html of public folder.

8. Bây giờ, thay thế tất cả, và gắn thẻ bằng, và trong tệp Home.js.Home.js file.

9. Mở tệp App.js từ thư mục SRC và thay thế mã bằng mã sau.app.js file from the src folder and replace the code with the following code.

import React from 'react';
import logo from './logo.svg';
import './App.css';
import Home from './pages/Home';
function App() {
  return (
    
  );
}
export default App;

10. Chạy máy chủ React và kiểm tra mẫu đang chạy như một dự án React.

Hy vọng, bạn đã chuyển đổi mẫu thành công. Trong hướng dẫn tiếp theo, tôi sẽ chỉ ra cách bạn có thể làm cho dự án này động bằng cách sử dụng PHP và MySQL.

Nhiều lần chúng ta có thể đã nghĩ về một cái gì đó tuyệt vời nhưng không thể xây dựng hoặc tạo ra nó. Đây là trường hợp với hầu hết các nhà phát triển/ nhà phát triển UI phụ trợ khi họ muốn xây dựng một thiết kế UX tuyệt đẹp.

Là một kỹ sư đang làm việc trên các thiết kế / mã phụ trợ hoặc ai là kỹ sư UI, việc thiết kế UX có thể không phải là bộ đồ mạnh mẽ của bạn. Để bắt đầu, chúng tôi có thể tìm kiếm các mẫu ý tưởng và HTML có sẵn trực tuyến và bắt chước thiết kế. Nhưng nó không dễ dàng như vậy? Là nó. Phá vỡ mẫu HTML thành một hướng dẫn cụ thể của khung dường như luôn khó khăn.

Hôm nay tôi sẽ chứng minh làm thế nào bạn có thể chuyển đổi bất kỳ mẫu HTML nào thành một dự án React, chia chúng thành thành phần và biến nó thành một trang web năng động. Điều này sẽ giúp bạn bắt đầu dự án Stack đầy đủ của bạn và giúp bạn tập hợp các ý tưởng và mã của bạn vào trực quan hóa.

Để bắt đầu, hãy để hiểu những gì là ReactReact

React là một thư viện tập lệnh Java để xây dựng giao diện người dùng. Tích hợp React với Redux (một container cho các ứng dụng JS), bạn có thể đạt được dự án giao diện người dùng độc lập và triển khai bất cứ nơi nào. Đọc thêm về React Truy cập trang web chính thức. Đối với Redux bấm vào đây
Read More about React visit the official website. For Redux click here

Hãy tải xuống Node.js trước tiên để xây dựng ứng dụng React của chúng tôi - Tải xuống tại đây

Sau khi cài đặt thành công (Node> = 10.16 và NPM> = 5.6), bạn có thể mở một thiết bị đầu cuối và tạo một dự án React mới với mẫu TypeScript

NPX created-react-app myReactProject-TypeScript Mẫu

Tạo ứng dụng React mới (lệnh có 2 dấu gạch nối trước mẫu)

Bây giờ thêm một số gói cơ sở, bạn có thể sử dụng sợi (hướng dẫn phản ứng) hoặc NPM mà bạn thích

NPM Thêm TypeScript @typ/Node @typ/React @typ

NPM cài đặt một số gói phản ứng cơ sở (có thể mất một thời gian)

Bây giờ, hãy để kiểm tra và làm sạch dự án của chúng tôi và tạo một thư mục thành phần cơ bản.

Sử dụng mã Visual Studio, bạn có thể mở nó bằng cách gõ ‘mã. Trong thiết bị đầu cuối. Làm sạch dự án bằng cách thực hiện các thay đổi sau ‘code .’ in the terminal. Clean up the project by making the following changes

Tạo thư mục: Các thành phần/ứng dụng bên trong SRC Move: App.TSX thành các thành phần/ứng dụngcomponents/app inside src
Move: App.tsx into components/app

Xóa: công khai/robot.txt xóa: src/app.css Delete: src/app.test.tsx xóa: src/index.css Xóa: src/logo.svg sửa đổi: public/index.html public/logo192.png xóa: public/logo512.png đã xóa: src/setuptests.ts đã xóa: sợi.locklock
delete: src/App.css
delete: src/App.test.tsx
delete: src/index.css
delete: src/logo.svg
modified: public/index.html — Remove Logo references
delete: public/logo192.png
delete: public/logo512.png
deleted: src/setupTests.ts
deleted: yarn.lock

Xóa tham chiếu của index.css và logo.svg khỏi app.tsx. Hoàn toàn làm sạch dự án mà không có dữ liệu demo. Dự án trông như thế này

Thực hiện kiểm tra ứng dụng một lần trước khi bắt đầu.

Chạy dự án bằng cách sử dụng NPM bắt đầu

Đây là cách nó trông như thế nào

Điều này sẽ khởi động ứng dụng của bạn vào localhost: 3000 (mặc định)

Bây giờ chúng tôi đã hoàn thành với Base React Project Start, hãy để nhận một số mẫu mà chúng tôi muốn chuyển đổi để phản ứng với React Project. Bạn có thể tìm kiếm và tải xuống mẫu của riêng bạn. Để trình diễn, tôi sẽ cho phép tải xuống mẫu được đề cập dưới đây

Khi bạn tải xuống bất kỳ mẫu nào, điều đầu tiên cần làm là xác định các phần các thành phần mà bạn sẽ tạo để chuyển đổi điều này để phản ứng dự án

Chia một mẫu thành các thành phần

Như bạn có thể thấy chúng ta cần phá vỡ và xác định các thành phần trong mẫu HTML. Trong trường hợp của chúng tôi, họ sẽ

Dựa trên bảng điều hướng bên của bảng điều hướng Menu Menu Menu Nhấp vào, chúng tôi sẽ tải nội dung khác nhau trong thành phần nội dung chính

Bây giờ, hãy để tạo ra các thành phần riêng lẻ trong VSCODE. Để tạo thành phần, bạn cần tạo một thư mục có tên thành phần, hãy tạo tệp thành phần (.tsx) và tệp index.tsx, theo cấu trúc thư mục. Trong trường hợp này, nó sẽ trông giống như thế này.

Hiện tại tất cả các tập tin đều trống. Chúng tôi vừa tạo ra một cấu trúc thư mục.

Bây giờ chúng ta cần di chuyển mỗi phần cẩn thận vào thành phần liên quan. Mở ra index.html từ đền và bắt đầu sao chép các phần vào tệp .conponent.tsx tương ứng

Trong khi sao chép, chúng ta cần chăm sóc 2 thứ.

  1. Chúng tôi sẽ tạo các thành phần chức năng bên trong tệp .componet.tsx và bên trong return, chúng tôi sẽ điền vào HTML được sao chép
  2. Chúng ta sẽ cần phải đóng mỗi phần tử HTML mở. Ví dụ sẽ hoạt động trong HTML nhưng trong React sẽ xảy ra lỗi, do đó bạn cần phải đóng cái này như
  3. Lớp học sẽ được thay thế bằng tên lớp theo tiêu chuẩn React. Vì vậy, khi bạn sao chép nội dung HTML vào thành phần React, hãy thay thế lớp từ khóa bằng tên lớp
  4. Tất cả các kiểu nội tuyến nên được tạo thành một lớp và được giữ trong công khai/Custom.css và sau đó bạn có thể nhập tùy chỉnh này.css trong index.html dưới công khai
  5. Sao chép tất cả nội dung tĩnh như hình ảnh, tập lệnh, CSS trong thư mục công khai bên trong Dự án React

6. Sửa đổi chỉ mục.html bên trong thư mục công khai với index.html từ mẫu. Đây là cách chỉ mục hiện tại.html từ thư mục công khai trông giống như

Trước khi chụp chỉ mục.html

Trong khi thực hiện bước này, hãy ghi nhớ

một. Sau khi sao chép thay thế toàn bộ phần cơ thể bằng



b. Đảm bảo tiêu đề HTML của bạn có một liên kết đến bảng kê khai. Điều này được yêu cầu bởi React

c. Nếu bạn có bất kỳ tập lệnh nào trong phần cơ thể, bạn có thể giữ nó ở đó hoặc chuyển sang phần tiêu đề.

Sau khi bắt được index.html

Bây giờ phần được kiểm soát bởi React và chỉ thay thế nội dung được cập nhật

Phản ứng cập nhật phần tử gốc với thành phần ứng dụng

Bây giờ chúng tôi đã điền vào tệp index.html, đã chuyển tất cả các tệp tài sản/CSS/JS và hình ảnh sang thư mục công khai, công việc duy nhất cần làm là chuyển nội dung cho mỗi phần sang thành phần liên quan. Có lẽ sẽ mất một lúc. Bắt đầu với thành phần nhỏ nhất và dễ nhất. Trong trường hợp của chúng tôi sẽ là thành phần chân trang. Đối với mỗi thành phần, bạn cần

  1. Tạo một thành phần chức năng trống và xuất nó

2. Cập nhật tệp index.tsx liên quan để xuất thành phần này. Bạn có thể trực tiếp xuất từ ​​chính thành phần.tsx, nhưng như một thông lệ tốt, chúng tôi xuất các tệp thông qua chỉ mục.

3. Cập nhật nội dung chân trang vào phần trả về footer.component.tsx của

Xóa phần bình luận trong khi sao chép và thay thế ‘lớp bằng cách phân loại trong tệp thành phần. Sau khi di chuyển, giữ một trình giữ chỗ theo bản gốc để theo dõi những gì bạn đã di chuyển

Như thế này, chúng ta cần di chuyển tất cả các thành phần từng thành phần vào các thành phần tương ứng của chúng. Tiến hành với điều này hoặc có một tham chiếu đến liên kết dự án dưới đây trong trường hợp bạn gặp phải vấn đề trong bước này.

Hãy để lấy thêm một ví dụ nữa. Bây giờ chúng tôi sẽ di chuyển bảng điều khiển thanh bên và tạo bộ định tuyến sang các thành phần phụ, để khi nhấp vào một phần tử, phần cụ thể được tải ở phía bên phải

Bây giờ hãy tạo tuyến đường cho mỗi trang bằng thuộc tính liên kết

Bây giờ chúng tôi đã tạo các tuyến đường, chúng tôi có thể ánh xạ các thành phần khác nhau cho các tuyến này bằng cách sử dụng một công tắc đơn giản trong thành phần bố cục chính. Trước khi chuyển sang bước này, đảm bảo bạn đã tạo tất cả các thành phần riêng biệt.

Trong khi kết hợp các thành phần với cha mẹ, bây giờ bạn có thể tham chiếu các thành phần con được tạo trực tiếp

Bộ định tuyến có thể được tạo dựa trên những gì bạn muốn hiển thị khi nhấp vào các phần tử

Một tối ưu hóa cần được thực hiện trong mã trên là tách biệt mã chung. Ví dụ Tháo các bên bên ngoài và giữ thẻ bên ngoài công tắc. Tôi để nó cho các bạn

Khi bạn đã hoàn thành sự xen kẽ này, Tadaaa, bạn đã sẵn sàng để đi, chỉ cần kích hoạt NPM bắt đầu

Toàn bộ trang web hiện là một dự án React. Bạn có thể mô đun hóa dự án này thành các thành phần nhỏ hơn. Lưu ý rằng khi một thành phần chỉ được tải lại chỉ là một phần của DOM được làm mới và do đó nếu bạn cảm thấy một phần có thể thay đổi thường xuyên hơn, thì bạn phải tạo chúng trong các thành phần khác nhau.

Tôi hy vọng bạn đã có niềm vui và sẽ thấy điều này hữu ích. Bạn có thể tìm thấy mã nguồn cho dự án này ở đây.

https://github.com/5-k/HtmlToReactApplication

Nếu bạn thích nội dung của tôi, hãy hỗ trợ hoặc mua cho tôi một ly cà phê: P

Chúng ta có thể sử dụng mẫu HTML trong React không?

Nếu trang web của bạn có nhiều hơn một trang, hãy đảm bảo bạn tạo một thư mục trang riêng biệt trong thư mục SRC và tạo a.Tệp JS cho mỗi trang HTML của trang web của bạn.Sau đó, tạo các thành phần React cho mỗi tệp hoặc trang và sao chép phần thân của các tệp HTML vào các thành phần React.create React components for each file or page and copy-paste the body of the HTML files into the React components.

Làm thế nào tích hợp HTML với React?

Thêm phản ứng trong một phút..
Bước 1: Thêm một thùng chứa DOM vào HTML.Đầu tiên, hãy mở trang HTML bạn muốn chỉnh sửa.....
Bước 2: Thêm thẻ tập lệnh.Tiếp theo, thêm ba thẻ vào trang HTML ngay trước khi thẻ đóng: ....
Bước 3: Tạo một thành phần React.Tạo một tệp có tên Like_Button.js bên cạnh trang HTML của bạn ..