Html tĩnh với phản ứng

Chuyển đổi một trang web hoặc trang web tĩnh thành ứng dụng React có thể đơn giản hơn những gì mà 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 kết nối dữ liệu vào nó hoặc với API để làm cho nó hoạt độ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 nghiệm qua các bước đơn giản về cách chuyển 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 hồi ứng dụ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 động dự án của chúng tôi. Tôi sẽ sử dụng

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

9 tại đâ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ã soạn sẵn. Bây giờ chúng tôi đã sẵn sàng để đi

Chuyển đổi

Change page/s to the cha mẹ thành phần

Nếu bạn chỉ có một trang, bạn có thể tạo một thư mục có tên

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

0 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 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 private in the directory

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

0 and create file

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

6 for each page (HTML) of your web site. Một lần nữa, tạo các thành phần React cho từng tệp (hoặc trang) và sao chép phần thân của 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à cú pháp chính xác của mã HTML đơn giản của chúng tôi thành JSX. Các cụ thể hơn, thay đổi như sau

• Change______07 thành

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  8
• Change

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  9 Đạo cụ từ chuỗi thành các đối tượng và thay đổi_______010 của đạo cụ CSS thành

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  11 (nghĩa là

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  12 thành

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  13)
• Endends of the cards character close (tức là

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  14 đến

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  15 hoặc

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  16 đến

  # installing bootstrap for react via npm/yarn instead of cdn
  npm i react-bootstrap
  # or
  yarn add react-bootstrap
  

  17

Add CSS

Bây giờ, đã đến lúc add CSS của bạn vào các thành phần. Tạo thư mục

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

18 trong thư mục ________ 00 và bỏ tất cả các tệp ________ 010 của bạn. Sau đó, nhập CSS tương ứng cho từng trang (nếu có)

Phụ thuộc

Cài đặt các thuộc tính 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

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

11 hoặc

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

12 (nếu có). Cố gắng tìm mô-đun React tương ứng với 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ã soạn sẵn. Bây giờ chúng tôi đã sẵn sàng để đi

Chuyển đổi

Change page/s to the cha mẹ thành phần

Nếu bạn chỉ có một trang, bạn có thể tạo một thư mục có tên

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

0 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 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 private in the directory

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

0 and create file

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

6 for each page (HTML) of your web site. Một lần nữa, tạo các thành phần React cho từng tệp (hoặc trang) và sao chép phần thân của tệp HTML vào các thành phần React

Khắc phục cú pháp

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

1

Nhập chế độ FullScreenen EXIT Mode FullScreen

Từ đó, chúng ta có thể xác định cấu hình vòng lặp đi lặp lại của

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

1

Nhập chế độ FullScreenen EXIT Mode FullScreen

Chúng ta có thể biến nó thành một phần và ngăn mình viết chúng nhiều lần

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

4

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. Please vượt qua từng điều đó

Trước hết, hãy lưu ý rằng chúng tôi cũng có tiêu đề?

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

5

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 phần thành phần sẽ là

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

14, vì vậy hãy nhập các thành phần mà chúng tôi vừa tạo và làm cho các bên của chúng tôi thành phần trong bài viết.
______07

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 tĩnh HTML của chúng tôi, có nhiều thẻ

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

14 có cấu trúc tương tự sau đó? .
______09

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?

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

16 ở đâ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 hệ với tôi

OK, chỉ cần lưu ý rằng thành phần

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

17 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

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

19 để chúng tôi không cần phải làm trang mới

You could install

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

40 qua

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

11 hoặc

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

12 và bắt đầu định tuyến từ

# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap

43 ở mức 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

Phản ứng 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 hồi ứng dụng và các câu hỏi tự nhiên thì không thể, 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 bạn'

Theo dõi tôi trên Twitter

Tôi có thể học React sau HTML và CSS không?

Mỗi nhà phát triển đầu tiên bắt đầu hành trình của họ với HTML và CSS. Vì vậy, trước khi bạn bắt đầu học cách phản ứng, bạn nên có lệnh tốt để viết HTML và CSS. trước khi bắt đầu học cách phản ứng, bạn nên có khả năng viết HTML và CSS tốt .

HTML CSS has been used in ReactJS not?

Phản ứng không thực hiện được các thành phần phản hồi tạo kiểu đầu HTML và tạo kiểu CSS cho HTML. Theo như trình duyệt có liên quan, React không tìm thấy nó