Create-React-App 不创建入门模板

JS

一篇关于不创建入门模板的文章，并。

在使用React开发应用程序时，Create-React-App是一个非常常用的工具。它可以帮助我们快速搭建React项目的基本结构，省去了手动配置的繁琐过程。然而，有时我们并不需要使用Create-React-App提供的入门模板，而是希望从零开始构建自己的项目结构。接下来，我们将介绍如何不使用Create-React-App的入门模板来创建一个简单的React应用。

步骤一：创建项目文件夹

首先，我们需要在本地文件系统上创建一个项目文件夹。可以选择在命令行中使用mkdir命令创建一个空文件夹，也可以使用文件管理器手动创建一个文件夹。假设我们将项目文件夹命名为"my-react-app"。

步骤二：初始化项目

接下来，我们需要在项目文件夹中初始化一个新的npm包。在命令行中，切换到项目文件夹目录下，并运行以下命令：

npm init -y

这将创建一个默认的package.JSon文件，其中包含了我们项目的基本信息和依赖管理。

步骤三：安装React和ReactDOM

在项目文件夹中，我们需要安装React和ReactDOM这两个关键的包。运行以下命令：

npm install react react-dom

这将下载并安装最新版本的React和ReactDOM包。

步骤四：创建HTML文件

在项目文件夹中，我们需要手动创建一个HTML文件作为我们React应用的入口点。可以使用任何文本编辑器打开一个空白文件，并将以下代码粘贴到文件中：

html
<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
    <link rel="stylesheet" class="url" target="_blank" rel="nofollow noreferrer" href="/to/?target=styles.CSS">
  </head>
  <body>
    <div id="root"></div>
    <script src="index.JS"></script>
  </body>
</html>

在这个HTML文件中，我们定义了一个id为"root"的div元素，它将作为我们React应用的根节点。我们还引入了一个名为"index.JS"的脚本文件，它将包含我们的React代码。

步骤五：创建React组件

现在，我们可以开始编写我们的React代码了。在项目文件夹中，创建一个名为"index.JS"的文件，并将以下代码粘贴到文件中：

Javascript
import React from 'react';
import ReactDOM from 'react-dom';
function App() {
  return (
    <div>
      <h1>Hello, React!</h1>
      
This is my first React app.
    </div>
  );
}
ReactDOM.render(<App />, document.getElementById('root'));

在这个代码中，我们定义了一个名为"App"的React函数组件。它返回一个包含了一个h1标题和一个p段落的div元素。最后，我们使用ReactDOM.render将App组件渲染到id为"root"的div元素中。

步骤六：运行应用

现在，我们的React应用已经准备就绪了。在命令行中，切换到项目文件夹目录下，并运行以下命令：

npm start

这将启动一个本地开发服务器，并在浏览器中打开我们的应用。如果一切顺利，你将在浏览器中看到一个显示"Hello, React!"和"This is my first React app."的页面。

通过以上步骤，我们成功地创建了一个简单的React应用，而不使用Create-React-App的入门模板。这样做可以让我们更好地理解React应用的基本结构和配置过程。当然，在实际开发中，Create-React-App仍然是一个非常有用的工具，可以帮助我们更快地搭建React项目。但是，如果你想从零开始构建自己的项目结构，以上步骤可以为你提供一些参考。