简介
在前端开发中，React 是目前最受欢迎的框架之一，Webpack 则是目前最流行的模块打包工具。而 React-Webpack-Starterkit 只是在这两者基础上的一个脚手架，简化了 React 和 Webpack 的配置过程，使得我们可以在短时间内快速创建一个可运行的 React 应用。
React-Webpack-Starterkit 提供了以下功能：
- 开箱即用的配置，使用起来非常方便
- 支持热更新，修改代码后无需手动刷新浏览器
- 集成了多个常用的工具和插件，如 ESLint、PostCSS 等
安装
使用 React-Webpack-Starterkit 需要先安装 Node.js 和 npm。
- 在命令行中输入以下命令，安装 React-Webpack-Starterkit：
npm install -g react-webpack-starterkit
- 安装完成后，使用以下命令创建一个项目：
react-webpack-starterkit my-project
其中，my-project 为你的项目名称，可根据实际情况修改。
使用
使用 React-Webpack-Starterkit 创建的项目包含以下文件和文件夹：
src：存放源代码的文件夹public：存放静态文件的文件夹，如 HTML 文件、图片等webpack.config.js：Webpack 的配置文件package.json：项目的配置文件，包含了项目的依赖和脚本命令等信息
修改代码前，需要先在项目的根目录下，运行以下命令启动开发服务器：
npm start
启动成功后，在浏览器中输入 http://localhost:3000，就可以看到我们的应用了。
示例
下面是一个简单的示例，演示如何在 React-Webpack-Starterkit 中创建一个计数器应用。
1. 创建组件
在 src 目录下创建一个 Counter.js 文件，其中包含一个 Counter 组件：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------- ------- --------------- -
------------------ -
-------------
---------- - -
------ --
--
-
--------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
----------- - -- -- -
----------------------- -- --
------ --------------- - --
----
--
-------- -
------ -
-----
------------
--------- ----------------------
------- ------------------------------------
------- --------------------------------------
------
--
-
-
------ ------- --------2. 引入组件
在 src/index.js 文件中引入并渲染 Counter 组件：
import React from 'react';
import ReactDOM from 'react-dom';
import Counter from './Counter';
ReactDOM.render(<Counter />, document.getElementById('root'));3. 运行项目
在命令行中输入 npm start 启动开发服务器，并访问 http://localhost:3000 查看效果。
在浏览器中，点击“+1”或“-1”按钮，即可修改计数器的值。
结语
本篇文章介绍了 npm 包 React-Webpack-Starterkit 的使用方法，并提供了一个简单的示例，希望对前端开发者有所帮助。在实际项目中，我们可以基于 React-Webpack-Starterkit 进行二次开发，快速搭建自己的应用。同时，也可以通过阅读 React-Webpack-Starterkit 的源码，深入了解 React 和 Webpack 的配置过程，提升自己的前端开发能力。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055b8081e8991b448d9121