将静态 HTML/CSS 网站转换为 React App
快速说明：我们只关注这里更简单的用例😉
感谢您的回复🙂
将静态页面或网站转换为 React App 可能比一些人想象的要简单，这取决于网站的复杂程度。要点是，你只需要重构和格式化内容。只需将数据插入其中，或者使用 API 使其动态化或更像一个 App。
在这篇简短的博客中，我将介绍如何将静态页面转换为 React App 的简单步骤。
先决条件
这假设您已经在您的机器上安装了 React，当然，您知道该库的要点。
因此，在开始转换之前，让我们先用 create-react-app 来初始化我们的项目。我将npx在这里使用：
npx create-react-app My_App
# wait for it to finish...
cd My_App # or code My_App if you have VS code
删除不必要的文件和样板代码。现在我们就可以开始了。
转换
将页面转换为父组件
如果您只有一个页面，您可以在 文件夹components下创建一个名为 的文件夹src。然后，.jsx在其中创建一个单独的文件，例如index.jsx。在 中创建一个 React 组件index.jsx，然后将静态 HTML 文件的主体复制并粘贴到该组件的 return 语句中。
如果您有多个页面，我建议在文件夹pages下创建一个单独的文件夹src，并.js为静态网站的每个（HTML）页面创建一个文件。同样，为每个文件（或页面）创建 React 组件，并将 HTML 文件的主体复制粘贴到 React 组件中。
修复语法
接下来我们要做的是将纯 HTML 代码的语法改写为 JSX。具体来说，修改如下内容：
- 更改
class为className - 将 props 从字符串更改
style为对象，并将BBQ-casingCSS props 的 更改为camelCase（即style="text-align: center;"）style={textAlign: 'center'}。 - 结束自闭合标签（即
<img>到<img />，或<br>到<br />）。
添加 CSS
现在，是时候将 CSS 添加到组件中了。在文件夹styles下创建一个文件夹src，将所有CSS文件拖放到其中。然后，为每个页面导入相应的 CSS（如果适用）。
依赖项
npm建议通过或安装yarn（如果有的话）最近通过 CDN 分发的页面依赖项（例如 Bootstrap、Font-Awesome 等）。尝试找到组件对应的 React 模块，并在 React 应用中安装它们：
# installing bootstrap for react via npm/yarn instead of cdn
npm i react-bootstrap
# or
yarn add react-bootstrap
然后，将它们导入到相应的组件/页面。
分解页面
这是我们真正利用 React 的部分，即将每个页面分解为更小的可重复使用的组件。
如果您还没有文件夹，请在此步骤中创建一个components。如果您的网站在编写时充分考虑了语义化，那么转换过程将会非常轻松。
了解页面结构。思考一下页面由哪些部分组成，哪些较小的组件或子组件构成了页面的哪个区域。
例如：
<main>
<h1>Welcome to Homepage!</h1>
<article>
<header>
<h1>Headline 1</h1>
<p>
Lorem Ipsum dolor...
</p>
</header>
<section>
<p>
Lorem ipsum dolor sit amet...
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet...
</p>
</section>
<section>
<p>
Lorem ipsum dolor sit amet...
</p>
</section>
...
</article>
<article>
<header>
...
</main>
从那里，我们可以清楚地看到以下重复模式：
<section>
<p>
Lorem ipsum dolor sit amet...
</p>
</section>
我们可以将其变成一个组件并防止我们重复编写它们：
// src/components/Section.jsx
export default function Section({ data }) {
return (
<section>
<p>
{data}
</p>
</section>
)
}
这是其中之一，但我们可以进一步将此页面划分为多个层次。让我们逐一介绍一下：
首先，注意到我们还有 header 吗？这也是另一个组件：
// src/components/Header.jsx
export default function Header({ headline, description }) {
return (
<header>
<h1>{headline}</h1>
<p>
{description}
</p>
</header>
)
}
现在，通过查看我们的 HTML 层次结构，我们将放置 Header 和 Section 组件的父组件将是Article，因此让我们导入刚刚创建的那些组件并将它们嵌套在 Article 组件中：
// 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 (
<article>
<Header
headline={headline}
description={description}
/>
{
sections.map(section => (
<Section data={section} />)
)
}
</article>
)
}
现在我们开始做饭！
Article好了，对于最后的重构，注意到我们的静态 HTML 中，后面还有更多类似结构的标签吗？猜猜怎么着，我们也可以在这里做同样的事情：
// src/pages/Main.js
import Article from '../components/Article.jsx'
export default function Main() {
const someData = ...
return (
<main>
<h1>Welcome to Homepage!</h1>
{
someData.map(data => {
const { headline, description, sections } = data
return (
<Article
headline={headline}
description={description}
sections={sections}
/>
)
})
}
</main>
)
}
但是等等，你有没有注意到 React App 中一个常见的问题？如果你是个眼尖的读者，那么是的，我们prop-drilling在这里犯了错误。我们可以使用 Redux 或者简单的 Context API，但那是另一篇博客的主题了，所以现在先忍耐一下。
好的，请注意，Main我们刚刚创建的组件保存在pages文件夹下，因为它实际上代表了整个页面。
路由
此步骤是可选的（仅当您有多个页面时），我们可以利用它，React Router这样我们就不需要刷新页面。
您可以react-router-dom通过npm或安装并从文件夹内的顶层yarn开始路由。App.jssrc
最后的想法
React 是一种构建应用程序的绝佳方式，但如果您已经有一个静态网站，并且想要将其转换为 React，并且想知道这是否可行，那么，是的，有一种解决方法。
无论如何，我希望您发现这个博客对您有帮助，下次再见！
在Twitter上关注我
文章来源：https://dev.to/menard_codes/converting-static-html-css-site-to-react-app-263e