React 是一个非常流行的 JavaScript 库，它被广泛地应用于前端开发中。对于初学者来说，React 可能有些繁琐。因此，有许多工具可以帮助前端开发人员更快地构建 React 应用程序。其中一个是 react-generator-webpack，它是一个 NPM 包，可以让你快速创建一个基于 React 和 Webpack 的项目。
安装
你可以使用 npm 或 yarn 安装 react-generator-webpack：
npm install -g react-generator-webpack
或者
yarn global add react-generator-webpack
安装完成后，就可以使用 reactgw 命令来创建一个新的 React 应用了。
创建一个新的 React 应用
在命令行中执行以下命令：
reactgw create my-app
这会创建名为 my-app 的新目录，并在其中初始化一个新的 React 应用程序。接下来，你需要进入 my-app 目录，启动开发服务器并在浏览器中查看应用程序：
cd my-app npm start
这将启动开发服务器并在浏览器中打开 http://localhost:3000，你可以在那里查看你的新 React 应用程序。
目录结构
创建一个新的 React 应用程序会在你的项目中生成许多文件和目录。这是一个标准的 React 应用程序的目录结构：
-- -------------------- ---- -------
-------
-------------
-------
----------
-----------
----
--------
------
-------
---------
------------
-----------------
-----------------
---------node_modules/- 包含你的项目依赖项的目录。public/- 包含静态资源文件和 HTML 模板。src/- 包含 React 组件和样式文件。package.json- 包的配置信息和依赖项清单。package-lock.json- 包管理器锁定文件，锁定依赖项的版本。webpack.config.js- Webpack 的配置文件。README.md- 项目的说明文档。
编写 React 组件
react-generator-webpack 提供了一个默认的 App.js 组件，你可以基于这个组件编写你的应用程序。
-- -------------------- ---- -------
------ ----- ---- --------
------ ------------
-------- ----- -
------ -
---- ----------------
------- -----------------------
---------- -----------
---------
------
--
-
------ ------- ----自定义 Webpack 配置
你可以编辑项目根目录下的 webpack.config.js 文件来自定义 Webpack 的配置。例如，你可以配置 Webpack 以使用 SCSS：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- -------------------- --------
--------- ------------
--
------- -
------ -
-
----- ----------
---- ---------------- ------------- ---------------
--
-
----- --------
-------- ----------------------------------
---- -
------- ---------------
-------- -
-------- --------------------- -----------------------
--
--
--
--
--
--构建应用程序
在开发完应用程序之后，你需要将其构建为生产模式。可以使用以下命令构建应用程序：
npm run build
这将生成一个 dist/ 目录，其中包含打包好的应用程序。
结论
react-generator-webpack 是一个非常有用的工具，可以帮助你快速创建一个基于 React 和 Webpack 的项目。使用它可以使你更容易地开始构建 React 应用程序，而无需手动设置 Webpack。
希望本教程可以帮助你开始使用 react-generator-webpack，构建你的下一个 React 应用程序！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600555a481e8991b448d2c1b