无需 create-react-app 从头创建您的 React 项目：完整指南。

即使您并非第一次创建 React 项目，从头开始创建和设置自己的 React 项目有时也会有些棘手。因此，我们创建了 create-react-app命令，它可以为我们准备并安装所有样板文件，并在创建过程完成后的第一时间让我们的应用程序随时可用。

但是，尽管 create-react-app 是一个非常好的入门选择，特别是对于那些刚接触 React 世界或者不想花时间设置所有东西的人来说，但有趣的是，还有另一种方法来完成任务。

你可以想象，这种方法并不像运行命令那么简单，但它肯定会对你的开发者生涯更加令人满意和有用（更不用说它是一个可重复使用的过程，你会摆脱 create-react-app 带来的不必要的东西，这些东西会使你的项目超载）。

请注意，我不会为项目使用特定的结构，因为我认为这是非常个人化的，每个开发人员的工作方式都不同，所以我把选择权留给你。

那么，说了这么多，让我们开始深入研究吧！

步骤 1：创建托管我们项目的文件夹

我们将首先在我们选择的位置为我们的项目创建一个新目录。

mkdir my-react-project

一旦创建，我们将导航到它。

cd my-react-project

步骤2：初始化项目

为了初始化我们的项目，我们将运行一个npm命令。

npm是一个为 JavaScript 打造的包、版本和依赖项管理器。如果您尚未安装 npm，则需要直接安装Node.js，因为它们可以协同工作，并且 npm 也包含在 Node.js 的安装包中。Node.js 允许我们在服务器端执行 JavaScript。

您可以完美地使用不同的包管理器，例如Yarn或Bower。

如果您不确定之前是否安装过 npm/Node.js，只需运行以下命令检查它们的最新安装版本。如果这些命令返回版本号，则表示您的计算机上已安装它们。否则，您需要重新安装它们。

npm -v

node -v

一旦我们的计算机上准备好使用 npm 和 Node.js，我们将运行以下命令：

npm init

此命令将创建一个package.json文件，该文件中指定了我们项目的所有依赖项和脚本。

在文件创建的整个过程中，终端会弹出一些问题，让你使用正确的信息设置你的项目。如果你想跳过当前问题，只需按 Enter 键跳到下一个问题。

如果您不想为项目提供额外的信息或者只是想稍后进行配置，只需在命令中添加-y标志：

npm init -y

安装完成后，我们的项目中会有一个新的 package.json 文件，如下所示：

{
  "name": "my-react-project",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

步骤3：安装依赖项

我们还需要手动安装一些依赖项，以便我们将来的 React 应用程序能够正常且按预期运行。

React 依赖项

我们将在 React 端安装以下依赖项：

react：我们将要使用的 JavaScript 库。
react-dom：包含一些管理 DOM 元素的方法的包。
react-router-dom：包含 React Router 的 DOM 绑定的包。

npm install react react-dom react-router-dom

Webpack 依赖项

我们还需要一个模块打包器来让我们的项目为 Web 做好准备。Webpack会打包项目中的所有 JavaScript 文件，并准备所有必要的资源以供浏览器使用。

由于我们只需要 Webpack 在开发环境中工作，我们将安装其所有相关依赖项，并在命令中添加标志--save-dev或简单的-D 。

我们将在 Webpack 端安装以下依赖项：

webpack：捆绑器。
webpack-cli： Webpack 的 CLI。

npm install --save-dev webpack webpack-cli

Babel 依赖项

Babel 是一个 JavaScript 编译器，它将 JavaScript ES6 转换（或转译）为 JavaScript ES5，因为目前并非所有浏览器都支持 ECMAScript 6 功能。

我们要安装的 Babel 相关依赖项如下：

@babel/core： Babel 编译器核心。
@babel/preset-react：包含一组用于支持 React 功能的插件的包。

npm install --save-dev @babel/core @babel/preset-react

在进一步讨论依赖关系之前，我们将在项目中配置 Babel，以便我们的 JavaScript 文件能够按预期进行转换。

让我们回到终端为该配置创建一个新文件：

touch .babelrc

然后，只需添加以下代码片段：

.babelrc

{
  "presets": [
    "@babel/preset-react"
  ]
}

Webpack 的加载器

Webpack 需要一个叫做loader 的东西来预处理文件。它们对于打包 JavaScript 以外的静态资源非常有用。

这些是我们将要使用的基本加载器：

babel-loader：Babel 的加载器。
html-loader：HTML 的加载器。
style-loader：将样式注入 DOM 的加载器。
css-loader：CSS 的加载器。
sass-loader(*)：SASS/SCSS 的加载器。

(*) 此加载器并非必需，但如果您想要使用 CSS 预处理器，则也需要一个相应的加载器。此外，还存在适用于 LESS、PostCSS、Stylus 等的加载器……

npm install --save-dev babel-loader html-loader style-loader css-loader sass-loader

Webpack 插件

我们还需要有助于捆绑的 Webpack 插件。

html-webpack-plugin：此插件用于创建用于捆绑服务的 HTML 文件。

注意：由于我们是在开发环境中工作，所以我们只会使用一个加载器来加载样式。但对于生产环境，建议使用MiniCssExtractPlugin从包中提取 CSS 。此插件会将 CSS 提取到单独的文件中，并为每个包含 CSS 的 JavaScript 文件创建文件。

加载器速度更快，并将样式设置为<style>标签内的内部样式，而插件将使用<link>标签将外部样式文件链接到 HTML 文档。

服务器依赖项

我们的应用还需要服务器，所以我们也会使用与服务器相关的依赖项。我们将安装以下内容：

express：我们将使用 Node.js 框架来创建服务器文件并处理服务器请求。
nodemon：每当应用程序目录发生更改时，该工具就会刷新我们的 Web 应用程序。

npm install express

npm install --save-dev nodemon

步骤4：配置Webpack

下一步是将我们刚刚安装的 Webpack 的加载器和插件放在一个配置文件中，让它知道在我们的文件捆绑过程中它的行为应该如何。

首先，我们将为此创建一个空文件。回到终端：

touch webpack.config.js

在深入了解该配置文件的内容之前，我们将了解它的实际作用及其行为方式。

首先，我们需要告诉 Webpack我们应用的入口点在哪里。这个入口点是一个名为index.js的 JavaScript 文件。

我们还需要指定输出文件，它将是所有捆绑的最终 JavaScript 文件，并且是唯一一个从所提供的 HTML 文件中明确引用的文件。

此时，需要特别提到dist文件夹。此文件夹是在打包过程中创建的目录，用于保存打包过程中生成的所有静态文件。

Webpack 还需要了解要处理的文件类型，以便正确地进行转换。目前，这些类型包括 JavaScript、HTML、CSS 和 SASS/SCSS。但是，如果将来我们需要处理更多不同类型的文件（我们肯定会），例如图片、字体等等，这些文件也需要各自的加载器。

最后，我们还需要配置必要的插件。在本例中，是HtmlWebpackPlugin，它将生成提供给浏览器的 HTML。

webpack.config.js

const path = require("path");
const webpack = require("webpack");
const HTMLWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./index.js",
  output: {
    filename: "bundle.js",
    path: path.resolve("dist"),
    publicPath: "/",
  },
  module: {
    rules:[
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: "babel-loader"
      },
      {
        test: /\.html$/,
        use: "html-loader"
      },
      /*Choose only one of the following two: if you're using 
      plain CSS, use the first one, and if you're using a
      preprocessor, in this case SASS, use the second one*/
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.scss$/,
        use:[
          "style-loader",
          "css-loader",
          "sass-loader"
        ],
      },
    ], 
  },  
  plugins: [
    new HTMLWebpackPlugin({
      template: "index.html"
    }),
  ]
}

步骤 5：创建 HTML 模板

好吧，这是最简单的一步，但我们仍然需要采取它🙂

我们需要创建一个基本的 HTML 文档， HTMLWebpackPlugin将使用它作为模板来生成新的 HTML 文档。就这么简单。
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>My React App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

注意<div>id 为root 的空值。我们稍后会学习它。

步骤 6：创建服务器

服务器将是一个新的 JavaScript 文件，它将打开一个端口进行监听，进行更多的配置并发出一些请求。

touch app.js

我们将其命名为app.js，但您可以随意命名。请注意大小写。稍后您将了解原因。

app.js

const express = require("express");
const app = express();
const path = require("path");
const port = process.env.PORT || 3000;

app.listen(port, () => {
   console.log(`The app server is running on port: ${port}`);
});

const DIST_DIR = path.join(__dirname, "dist");
const HTML_FILE = path.join(DIST_DIR, "index.html");

app.use(express.json());
app.use(express.static("public"));
app.use(express.static("dist"));

app.get("/", (req, res) => {
   res.sendFile(HTML_FILE, function(err){
      if(err){
         res.status(500).send(err);
      }
   });
});

我们在这个文件中所做的是启动一个新的服务器，监听 3000 端口的连接。然后，Webpack 生成的 HTML 文件会被发送到根 URL（换句话说，这个 HTML 文件将成为我们应用的主页）。我们还指定public和dist目录下的所有文件都是静态的，并应按静态文件处理。

步骤 7：创建 React 应用

现在，我们将创建App.js，它将成为我们的 React 应用程序的主要组件（此处大写警告！）。

App.js

import React from "react";

const App = () => {
   return <div>Hello, World!</div>;
};

export default App;

该组件的渲染将被注入到所提供的 HTML 中，因此当我们打开浏览器时我们将看到Hello, World!。

让我们看看如何做到这一点。

步骤 8：创建 React 应用的入口点

在这一步中，我们将指定应用程序的路由，以及应该在 DOM 中的哪个位置插入来自 React 的内容。

index.js

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

import App from "./App.js";
import "./styles.scss";

const appRouting = (
  <Router>
    <Switch>
      <Route exact path="/" component={App} />
    </Switch>
  </Router>
);

ReactDOM.render(appRouting, document.getElementById("root"));

我们只是表明当 URL 与根路径完全匹配时应该渲染App组件，并且渲染内容应该放在索引文档中id 为root 的标签内。

步骤 9：定义脚本

最后，我们将设置脚本以便构建和运行我们的应用程序。

回到package.json，我们最初在脚本部分有这样的内容：

{
  ...
    "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
    }
  ...
}

现在，我们将添加更多：运行和构建，如下所示：

{
  ...
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "rm -rf dist && webpack --mode development",
    "dev": "nodemon app.js"
  ...
}

步骤 10：构建并运行我们的应用程序

最后一步是（最终）构建并运行我们的应用程序。

我们首先需要运行一个构建命令来捆绑所有内容。

npm run build

然后，运行它。

npm run dev

我们的应用程序现已在以下网址提供：localhost:3000。

就这样！现在我们的 React 应用程序已经准备好了，可以开始使用了🙌🏼

如果你已经读到这里，非常感谢。希望本教程对你有所帮助，我们下期再见。

🎉 不要忘记在Instagram和Twitter上关注我以获取更多相关内容。