无需 create-react-app 即可创建 React App！

React 快速入门 ⚛️ 📦

React 前端快速入门 ⚛️ 📦

创建基本 React 应用程序的最简单方法是运行 npx create-react-app，然后你的基本 React 应用程序就会自动创建完成。但是你有没有想过，我可以自己完成整个过程吗？是的，你可以。

先决条件：Node.js 和 VS Code。这就是你所需要的。

我们开始做吧 ..！！！

1.打开 VS Code 终端并运行以下命令：

npm init -y

通过运行此命令，将形成 package.json，其中包含发布到 NPM 之前所需的重要信息，还定义了 npm 用于安装依赖项、运行脚本和识别项目入口点的项目属性。

npm install react react-dom

React 需要用于创建用户界面，而 React-Dom 是 React 和浏览器 DOM 之间的粘合剂。

运行此命令后，将创建 node_modules 和 package.lock.json。Node 模块包含从 npm 下载的所有依赖项。package.lock.json 跟踪已安装的每个软件包的确切版本以及每个软件包的依赖关系树。

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

Babel 是一个 JS 编译器，可以将现代 JS 代码转换为原生 JS 代码，以便在旧版浏览器和环境中使用。Babel-loader 使用 Babel 和 Webpack 转译 JS 文件。
更多内容请访问https://babeljs.io/docs/en/

2.创建一个文件.babelrc并复制以下代码

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

该文件是 babel 的配置文件，而预设则充当一组可共享的 Babel 插件和/或配置选项。

npm install --save-dev webpack webpack-cli webpack-dev-server

Webpack 是一个用于编译 JavaScript 模块的工具，也称为模块打包器。当输入大量文件时，它会生成一个（或多个）文件来运行你的应用。Webpack-CLI 提供了 webpack 在其配置文件中使用的选项接口。

npm install --save-dev html-webpack-plugin style-loader css-loader file-loader

所有这些都是帮助与 webpack 一起捆绑各种文件的加载器。

3.创建文件webpack.config.js并复制以下代码

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

module.exports = {
  entry: "./src/index.js",
  output: {
    filename: "bundle.[hash].js",
    path: path.resolve(__dirname, "dist"),
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
  resolve: {
    modules: [__dirname, "src", "node_modules"],
    extensions: ["*", ".js", ".jsx", ".tsx", ".ts"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        loader: require.resolve("babel-loader"),
      },
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.png|svg|jpg|gif$/,
        use: ["file-loader"],
      }, 
    ],
  },
};

此配置文件提供了所有必需的信息，例如入口点、bundle 的输出文件名和路径、插件以及 webpack 用于打包和解析各种文件的各种加载器。
更多信息请访问：https://webpack.js.org/concepts/

4.创建一个文件夹“src”，并在其中创建一个文件“App.js”

import React from "react";

const App = () => ( 
    <div>
        <h1>Hello React</h1>
    </div>
);

export default App;

这是一个基本的箭头函数，它返回包裹在 h1 标签内的 Hello React。

5.创建一个文件“index.js”，作为我们代码的入口点。

import React from "react";
import ReactDOM from "react-dom";
import App from "./App";

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

6.创建另一个文件“index.html”

<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>React</title>
</head>

<body>
    <div id="root"></div>
</body>

</html>

在我们的配置中，我们指定它应该读取 ./src/index.HTML 作为模板。我们还将 inject 选项设置为 true。使用该选项，Html-webpack-plugin 会将一个包含 Webpack 提供路径的脚本直接添加到最终的 HTML 页面中。这个最终页面就是运行 npm run build 后在 dist/index.html 中得到的页面，也是运行 npm start 后从 / 目录加载的页面。

7.在 package.json 中，用以下代码行代替脚本标签

"scripts": {
    "start": "webpack serve  --hot --open",
    "build": "webpack --config webpack.config.js --mode production"
  }

您可以通过编写 npm start 来启动您的 React 应用程序，您将看到一个空白页面，上面写着 Hello React。

您已完成..！！

现在您可以自定义您的 React 应用程序并向其中添加各种组件。

虽然这个过程相当漫长，但 create-react-app 可以帮你简化这个过程。它只需一个命令 npx create-react-app filename，就能自动完成创建每个文件的繁琐步骤。

文章来源：https://dev.to/riddhiagrawal001/create-react-app-without-create-react-app-2lgd

无需 create-react-app 即可创建 React 应用！React 快速入门 ⚛️ 📦 React 前端快速入门 ⚛️ 📦