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
Tạo ứng dụng React mới [lệnh có 2 dấu gạch nối trước mẫu]NPX created-react-app myReactProject-TypeScript 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 cài đặt một số gói phản ứng cơ sở [có thể mất một thời gian]NPM Thêm TypeScript @typ/Node @typ/React @typ
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/appXó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.
Đây là cách nó trông như thế nàoChạy dự án bằng cách sử dụng NPM bắt đầu
Đ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ầnNhư 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ứ.
- 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
- 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ư
- 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
- 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
- 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.htmlTrong 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.htmlBâ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ụngBâ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
- 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.
//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