将静态 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