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

📅  最后修改于: 2023-12-03 15:06:34.724000             🧑  作者: Mango

从头开始构建反应样板而不使用 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 和其生态系统的更深入的了解。