对于前端工程师而言，搭建一个符合自己需求的 React 项目是必须掌握的技能。而 webpack 作为一个非常流行的构建工具，为 React 项目的开发提供了很大的便利。本文将介绍如何使用 npm 包 @davidlazic/generator-webpack-react 快速搭建一个基于 React 和 webpack 的前端项目。
安装
在使用该 npm 包前，你需要先安装两个工具：Node.js 和 Yeoman。在确认已经安装了这两个工具后，你可以使用以下命令安装该 npm 包：
npm install -g @davidlazic/generator-webpack-react
使用
在安装完成后，你可以使用以下命令在当前目录下生成一个新的项目：
yo @davidlazic/webpack-react
在输入命令后，你会看到一个交互式的命令行界面，你需要根据提示依次输入你的项目名称、项目描述、作者、项目启动端口号等信息。在输入完信息后，该 npm 包将自动帮你构建一个符合要求的项目，同时生成必要的文件和目录结构。
目录结构
在使用该 npm 包生成项目后，你的项目将会拥有以下目录结构：
-- -------------------- ---- ------- - --- ------------- --- ------- - --- ---------- --- ---- - --- ------ - --- ----------- - --- -------- - --- ---------------- - --- ------- - --- ----------- - --- ----------- --- ---------- --- ------------ --- ---------
其中，node_modules 目录为依赖库所在目录。public 目录下存放的是静态资源文件，例如 HTML 文件、图片等。src 目录下则是项目组件、页面、模块等源代码。
示例代码
接下来，我将使用一个简单的 React 组件作为示例代码。在 src/components/HelloWorld 目录下，新建一个文件 HelloWorld.js，并在其中编写以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------ -
------ -
---------- ------------
--
-
------ ------- -----------在项目中使用该组件，打开 src/App.js 文件，并将其修改为以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ---------- ---- --------------------------
-------- ----- -
------ -
---- ----------------
----------- --
------
--
-
------ ------- ----在修改完成后，运行以下命令启动项目：
npm start
在浏览器中输入 http://localhost:3000，你将可以看到以下效果：
总结
通过使用 npm 包 @davidlazic/generator-webpack-react，我们可以快速的搭建一个基于 React 和 webpack 的前端项目。同时，我们也学习了如何生成项目并了解了项目的目录结构。最后，我们使用示例代码演示了如何在项目中使用 React 组件。希望该文章能够对前端工程师们对搭建 React 项目有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600668f5d9381d61a3540ebb
