如何在ReactJS中使用HTML模板

我们都知道ReactJS是一个前端开发框架。对于前端，我们需要创建HTML模板。因此，本文将教您如何在ReactJS中使用HTML模板。这个过程非常简单。

前提条件:

npm
create-react-app
方法:

我们将在React js中创建一个简单的单页HTML模板。它们包括主页、博客、联系我们和课程等不同部分。它看起来与普通的HTML和CSS模板相同。

使用HTML模板的步骤:

步骤1: 您将使用create-react-app启动一个新项目，因此打开终端并键入：

npx create-react-app myreact

步骤2： 现在在终端中输入给定的命令，进入你的react-footer文件夹：

cd myreact

步骤3： 现在我们将在公共目录下创建一个 assets 文件夹，并创建一个 style.css 文件。路径如下：

public/assets/style.css

项目结构： 运行 npm install 后，项目的结构将会如下所示。

如何在ReactJS中使用HTML模板

步骤4：创建HTML模板或下载：

首先，我们需要创建一个在React JS中使用的HTML模板。如果您没有HTML模板，可以直接下载。

步骤5：编辑index.html

进入public/index.html并将其中现有的CSS和JavaScript文件删除。将您的CSS和JavaScript链接添加到其中。然后index.html如下所示：

index.html

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="utf-8" />
    <meta name="viewport"
          content="width=device-width, initial-scale=1" />
    <meta name="theme-color"
          content="#000000" />
    <meta name="description"
          content="Web site created using create-react-app" />
    <link rel="stylesheet" href="./assets/style.css">
    <title>Geeksforgeeks</title>
</head>
 
<body>
    <noscript>You need to enable JavaScript 
                to run this app.</noscript>
    <div id="root"></div>
    <script type="text/javascript">
              AddFillerLink("content", "navigation", "extra")
      </script>
</body>
 
</html>

步骤6：编辑App.js

前往 src/App.js 目录并删除 return() 函数中的现有代码。添加一个空的Fragment标签，并将HTML模板的主体部分粘贴到其中。按照以下代码操作。

import React from 'react';
function App() {
    return (
        <>
            <div id="container">
                <div id="header">
                    <nav>
                        <h1>Geeksforgeeks</h1>
                        <li><a href='#header'>Home</a></li>
                        <li ><a href="#extra">Bolgs</a></li>
                        <li ><a href=
"https://www.geeksforgeeks.org/about/contact-us/?ref=write-footer">
                            Contact US</a></li>
                        <li ><a href=
                            "https://practice.geeksforgeeks.org/?ref=ghm">
                            Courses</a></li>
                    </nav>
                </div>
                <div id="wrapper">
                    <div id="content">
                        <h1>Welcome to Geeksforgeeks</h1>
                        <h2>Build your career with Geeksforgeeks </h2>
                        <p>
                            Geeksforgeeks provides you to best
                            tutorials, articles, coding, courses etc.
                            <p>Geeksforgeeks DSA self placed code is
                                best course ever and it is made by experts.</p>
                        </p>
                        <button>Learn More</button>
                    </div>
                </div>
                <div id="navigation">
                    <img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20221207112807/Image1.png"
                        alt="logo" />
                </div>
                <div id="extra">
                    <div id="card">
                        <h3>Create Math captcha using PHP</h3>
                        <p>In this article we are implement Math captcha.</p>
                        <button>Read More</button>
                    </div>
                    <div id="card">
                        <h3>Style Google Custom Search Manually</h3>
                        <p>We are styling Google Custom Search
                            manually with CSS</p>
                        <button>Read More</button>
                    </div>
                    <div id="card">
                        <h3>What is Interaction Manager.</h3>
                        <p>In this article we will see what is
                            Interaction Manager and how use it.</p>
                        <button>Read More</button>
                    </div>
                </div>
                <div id="footer"><p>Copyright@2007</p>
                </div>
            </div>
        </>
    )
}
export default App;

步骤7：添加style.css

我们可以添加CSS来进行样式化。为此，我们需要编辑位于 public/assets 文件夹中的 style.css 。然后 style.css 的内容如下所示：

html,
body {
    margin: 0;
    padding: 0;
}
body {
    color: #292929;
    font: 90% Roboto, Arial, sans-serif;
    font-weight: 300;
}
div#header {
    position: relative;
}
div#header h1 {
    height: 80px;
    line-height: 80px;
    margin: 0;
    padding-left: 10px;
    background: green;
    color: white;
    margin-left: 5%;
}
div#header nav {
    position: relative;
    display: flex;
    list-style: none;
    margin: 0;
    padding-left: 10px;
    background: green;
    color: white;
}
div#header li {
    align-items: center;
    justify-content: center;
    margin-top: 28px;
    padding-left: 10%;
    color: white;
}
div#header li a {
    color: #fff;
    text-decoration: none;
}
div#navigation img {
    width: 30rem;
    height: 22rem;
    margin: 6px;
}
div#extra {
    display: flex;
    padding: 0px;
    margin: auto;
}
div#extra #card {
    width: 20rem;
    height: 13rem;
    margin: 5%;
    padding: 5px;
    border: 2px solid #292929;
}
div#extra #card button {
    height: 50px;
    width: 10rem;
    background-color: rgb(8, 62, 8);
    color: #fff;
    border: none;
    position: absolute;
    bottom: 4px;
    border-radius: 10px;
    margin: 20px;
}
div#footer {
    background: #42444e;
    color: #fff;
}
div#footer p {
    padding: 20px 10px;
    text-align: center;
}
div#wrapper {
    float: left;
    width: 60;
    margin-left: 5%;
}
div#wrapper#content {
    text-align: center;
}
div#content h1 {
    font-size: 50px;
    font-weight: 800;
    color: rgb(11, 49, 11);
}
div#content button {
    height: 50px;
    width: 10rem;
    background-color: rgb(8, 62, 8);
    color: #fff;
    border: none;
    border-radius: 10px;
    margin: 20px;
}
div#navigation {
    float: right;
    width: 40%;
}
div#extra {
    clear: both;
    width: 100%;
}