从头开始构建反应样板而不使用 create-react-app

在构建 React 应用程序时，create-react-app是最受欢迎的工具之一。但是，有时候你希望从头开始构建你的项目，以便更好地了解它是如何工作的。在本文中，我们将向您介绍如何从头开始构建反应模板而不使用 create-react-app。

步骤 1：设置您的项目

在开始编码之前，您需要设置您的项目。创建一个新目录，将其作为您的项目的根目录。接下来，你需要一个 package.json 文件，用以下命令来创建一个：

npm init -y

然后，您需要在根目录下创建一个名为 src 的目录，以放置您的 React 组件和其他源文件。

步骤 2：安装必需的库

在进行下一步之前，您需要为您的项目安装一些必要的库。您需要安装以下依赖项：

• react
• react-dom
• webpack
• webpack-cli
• webpack-dev-server
• babel-loader
• @babel/core
• @babel/preset-env
• @babel/preset-react

您可以使用以下命令将它们全部安装：

npm install react react-dom webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react --save-dev

步骤 3：创建你的 webpack 配置

接下来，您需要创建一个名为 webpack.config.js 的文件，以配置您的 webpack 构建。以下是一个示例配置文件：

const path = require("path");

module.exports = {
  entry: "./src/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  mode: "development",
  devServer: {
    contentBase: path.resolve(__dirname, "dist"),
    port: 3000,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
        },
      },
    ],
  },
  resolve: {
    extensions: [".js", ".jsx"],
  },
};

在这个配置文件中，我们指定了入口文件为 src/index.js，输出文件为 dist/bundle.js。我们还指定了用于开发服务器的端口号，并配置了 babel-loader 来处理我们的 JavaScript 文件。

步骤 4：创建你的 babel 配置

与 webpack 一样，您还需要配置 babel。创建一个名为 .babelrc 的文件，以配置 babel 的 presets。以下是一个示例配置文件：

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

这告诉 babel 使用 @babel/preset-env 来转换我们的 JavaScript 代码，并使用 @babel/preset-react 来转换我们的 JSX 代码。

步骤 5：编写您的应用程序

现在您已经设置了您的项目并安装了所需的依赖项，您可以开始编写您的 React 应用程序。在 src 目录中创建一个名为 index.js 的文件，并输入以下内容：

import React from "react";
import ReactDOM from "react-dom";

const App = () => {
  return <h1>Hello, world!</h1>;
};

ReactDOM.render(<App />, document.getElementById("root"));

这是一个非常简单的 React 组件，它将在页面上呈现一个标题。

步骤 6：测试您的应用程序

现在您可以运行您的应用程序并查看它是否在浏览器中正常工作。在命令行中运行以下命令来启动开发服务器：

npx webpack serve --mode development --open

这将启动一个开发服务器，并在浏览器中自动打开您的应用程序。如果一切顺利，您将看到一个包含 "Hello, world!" 标题的页面。

结论

通过使用以上步骤，您可以从头开始构建一个 React 应用程序而不使用 create-react-app 工具。尽管这需要您从头开始设置您的项目和配置文件，但它通常会提高您对您的应用程序工作原理的理解，以及您对 React 和其生态系统的更深入的了解。