Lưu ý nhanh: Chúng tôi chỉ tập trung vào trường hợp sử dụng đơn giản hơn ở đây 😉 Cảm ơn các câu trả lời 🙂: We only focus on the simpler use case here 😉
Thanks for the responses 🙂
Chuyển đổi một trang hoặc trang web tĩnh thành ứng dụng React có thể đơn giản hơn những gì một số người có thể nghĩ, đó là, tùy thuộc vào sự phức tạp của trang web của bạn. Ý chính là bạn sẽ chỉ tái cấu trúc và định dạng mọi thứ. Chỉ cần cắm dữ liệu vào nó hoặc với API để làm cho nó năng động hoặc cảm thấy giống như một ứng dụng.
Trong blog nhanh này, tôi sẽ trải qua các bước đơn giản về cách chuyển đổi trang tĩnh thành ứng dụng React.
Điều kiện tiên quyết
Điều này giả định rằng bạn đã phản ứng được cài đặt vào máy của mình và tất nhiên, bạn biết ý chính của thư viện.
Vì vậy, trước khi chúng tôi bắt đầu chuyển đổi, hãy thực hiện một ứng dụng tạo đơn giản để khởi tạo dự án của chúng tôi. Tôi sẽ sử dụng npx
ở đây:
npx create-react-app My_App
# wait for it to finish...
cd My_App # or code My_App if you have VS code
Nhập chế độ FullScreenen EXIT Mode FullScreen
Xóa các tệp không cần thiết và mã Boilerplate. Bây giờ chúng tôi đã sẵn sàng để đi.
Chuyển đổi
Biến trang/s thành các thành phần cha mẹ
Nếu bạn chỉ có một trang, bạn có thể tạo một thư mục có tên components
trong thư mục
# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
0. Sau đó, tạo một tệp # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
1 duy nhất ở đó như # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
2. Tạo một thành phần React trong # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
2, sau đó sao chép và dán phần thân của tệp HTML tĩnh của bạn vào câu lệnh trả về của thành phần đó.Và nếu bạn có nhiều trang, tôi khuyên bạn nên tạo một thư mục
# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
4 riêng trong thư mục # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
0 và tạo tệp # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
6 cho mỗi trang [HTML] của trang web tĩnh của bạn. Một lần nữa, 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.Khắc phục cú pháp
Điều tiếp theo chúng tôi sẽ làm là chính xác cú pháp của mã HTML đơn giản của chúng tôi thành JSX. Cụ thể hơn, thay đổi như sau:
- Thay đổi
7 thành# installing bootstrap for react via npm/yarn instead of cdn npm i react-bootstrap # or yarn add react-bootstrap
8# installing bootstrap for react via npm/yarn instead of cdn npm i react-bootstrap # or yarn add react-bootstrap
- Thay đổi
9 Đạo cụ từ chuỗi thành các đối tượng và thay đổi# installing bootstrap for react via npm/yarn instead of cdn npm i react-bootstrap # or yarn add react-bootstrap
0 của đạo cụ CSS thànhWelcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
1 [nghĩa làWelcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
2 thànhWelcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
3].Welcome to Homepage! Headline 1 Lorem Ipsum dolor...
- Kết thúc các thẻ tự đóng [tức là
4 đếnWelcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
5 hoặcWelcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
6 đếnWelcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
7.Welcome to Homepage! Headline 1 Lorem Ipsum dolor... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... Lorem ipsum dolor sit amet... ... ...
Thêm CSS
Bây giờ, đã đến lúc thêm CSS của bạn vào các thành phần. Tạo thư mục
Welcome to Homepage!
Headline 1
Lorem Ipsum dolor...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
...
...
8 trong thư mục # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
0 và bỏ tất cả các tệp
Lorem ipsum dolor sit amet...
0 của bạn. Sau đó, nhập CSS tương ứng cho mỗi trang [nếu có].Phụ thuộc
Cài đặt các phụ thuộc của trang của bạn [nghĩa là bootstrap, font-food, v.v.] gần đây đã được gửi qua CDN được khuyến nghị cài đặt qua
Lorem ipsum dolor sit amet...
1 hoặc
Lorem ipsum dolor sit amet...
2 [nếu có]. Cố gắng tìm mô -đun React tương ứng cho thành phần của bạn và cài đặt chúng trong ứng dụng React của bạn:# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
Nhập chế độ FullScreenen EXIT Mode FullScreen
Xóa các tệp không cần thiết và mã Boilerplate. Bây giờ chúng tôi đã sẵn sàng để đi.
Chuyển đổi
Biến trang/s thành các thành phần cha mẹ
Nếu bạn chỉ có một trang, bạn có thể tạo một thư mục có tên components
trong thư mục
# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
0. Sau đó, tạo một tệp # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
1 duy nhất ở đó như # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
2. Tạo một thành phần React trong # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
2, sau đó sao chép và dán phần thân của tệp HTML tĩnh của bạn vào câu lệnh trả về của thành phần đó.Và nếu bạn có nhiều trang, tôi khuyên bạn nên tạo một thư mục
# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
4 riêng trong thư mục # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
0 và tạo tệp # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
6 cho mỗi trang [HTML] của trang web tĩnh của bạn. Một lần nữa, 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. Khắc phục cú pháp
Welcome to Homepage!
Headline 1
Lorem Ipsum dolor...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
Lorem ipsum dolor sit amet...
...
...
Nhập chế độ FullScreenen EXIT Mode FullScreen
Từ đó, chúng ta có thể thấy rõ mô hình lặp đi lặp lại của:
Lorem ipsum dolor sit amet...
Nhập chế độ FullScreenen EXIT Mode FullScreen
Chúng ta có thể biến nó thành một thành phần và ngăn mình viết chúng nhiều lần:
// src/components/Section.jsx
export default function Section[{ data }] {
return [
{data}
]
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
Đó là một, nhưng chúng ta có thể nhóm thêm trang này thành phân cấp. Hãy vượt qua từng điều đó:
Trước hết, hãy chú ý rằng chúng tôi cũng có tiêu đề? Đó cũng là một thành phần khác:
// src/components/Header.jsx
export default function Header[{ headline, description }] {
return [
{headline}
{description}
]
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
Và bây giờ, bằng cách nhìn vào hệ thống phân cấp HTML của chúng tôi, thành phần cha mẹ nơi chúng tôi sẽ đặt tiêu đề và các thành phần phần sẽ là
Lorem ipsum dolor sit amet...
4, vì vậy hãy nhập các thành phần đó chúng tôi vừa tạo và làm tổ chúng bên trong thành phần bài viết:// src/components/Article.jsx
// assuming that we have a data source
// for the contents of the page
import Header from './Header'
import Section from './Section'
export default function Article[props] {
const { headline, description, sections } = props;
return [
{
sections.map[section => [
]
]
}
]
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
Bây giờ chúng tôi đang nấu ăn!
Được rồi, đối với tái cấu trúc cuối cùng, nhận thấy rằng trên HTML tĩnh của chúng tôi, có nhiều thẻ
Lorem ipsum dolor sit amet...
4 có cấu trúc tương tự sau đó? Đoán xem, chúng ta cũng có thể làm điều tương tự ở đây:// src/pages/Main.js
import Article from '../components/Article.jsx'
export default function Main[] {
const someData = ...
return [
Welcome to Homepage!
{
someData.map[data => {
const { headline, description, sections } = data
return [
]
}]
}
]
}
Nhập chế độ FullScreenen EXIT Mode FullScreen
Nhưng chờ đã, bạn có nhận thấy một vấn đề phổ biến xảy ra trên ứng dụng React không? Nếu bạn là một độc giả mắt đại bàng, thì có, chúng tôi đã cam kết
Lorem ipsum dolor sit amet...
6 ở đây. Chúng ta có thể sử dụng Redux hoặc chỉ đơn giản là API ngữ cảnh, nhưng đó là một chủ đề khác cho một blog khác, vì vậy bây giờ hãy liên lạc với tôi.OK, chỉ cần lưu ý rằng thành phần
Lorem ipsum dolor sit amet...
7 mà chúng tôi vừa tạo được lưu trong thư mục # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
4 vì nó thực sự đại diện cho toàn bộ trang đã có trong chính nó.Lộ trình
Bước này là tùy chọn [chỉ khi bạn có nhiều trang] và chúng tôi có thể tận dụng
Lorem ipsum dolor sit amet...
9 để chúng tôi không cần phải làm mới trang.Bạn có thể cài đặt
// src/components/Section.jsx
export default function Section[{ data }] {
return [
{data}
]
}
0 qua
Lorem ipsum dolor sit amet...
1 hoặc
Lorem ipsum dolor sit amet...
2 và bắt đầu định tuyến từ // src/components/Section.jsx
export default function Section[{ data }] {
return [
{data}
]
}
3 ở cấp cao nhất của thư mục # installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
0.Suy nghĩ cuối cùng
React là một cách tuyệt vời để xây dựng các ứng dụng, nhưng nếu bạn đã có một trang web tĩnh và bạn muốn chuyển đổi nó để phản ứng và tự hỏi liệu có thể không, vâng, có một cách giải quyết.
Dù sao, tôi hy vọng bạn thấy blog này hữu ích và cho đến khi 'lần sau, xem ya'!
Theo dõi tôi trên Twitter