前言
在今天的前端领域中，React 已经成为了一个非常重要的框架。随着 React 在业界的广泛应用，越来越多的开发者开始学习并使用这个框架，而 generator-react-beginner-kit 这个 npm 包，则是一个极佳的 React 项目脚手架。
本文将为大家介绍 generator-react-beginner-kit 的使用方法。
简介
generator-react-beginner-kit 是一个基于 Yeoman 的 React 项目脚手架，适用于初学者和中级开发者快速搭建一个基础的 React 项目。它具有以下一些优点：
- 自动生成项目基础结构，快速开始
- 实现了 webpack 打包和 devServer 开发服务器，开箱即用
- 自带一些常用的React开发库如redux,react-router
安装
使用 npm 可以轻松地安装 generator-react-beginner-kit：
# 使用 npm 安装 $ npm install -g generator-react-beginner-kit
安装完成后，就可以使用命令行工具来生成 React 项目了。
创建一个项目
首先，打开终端并进入要创建项目的目录。输入以下命令：
$ yo react-beginner-kit
这里的 yo 是 Yeoman 的命令行工具，react-beginner-kit 则是 generator-react-beginner-kit 的名称。
运行这个命令之后，Yeoman 会提示你输入一些项目基本信息，如项目名称、作者等。填好之后，Yeoman 会自动生成一个基础的 React 项目脚手架。整个过程不会超过 1 分钟，非常方便。
项目结构
generator-react-beginner-kit 生成的项目结构如下：
-- -------------------- ---- ------- ------------- --- ---- - --- ----------- - - --- ------- - - --- ------ - - --- -------- - --- -------- - --- ---------- --- ------------ --- ----------------- --- ---------
其中，src 目录存放所有的源代码，components 目录存放所有组件，index.js 是项目的入口文件。
运行项目
运行以下命令来启动项目：
$ npm run start
这个命令会使用 webpack 打包并启动一个开发服务器。然后你就可以访问 http://localhost:8080 来预览项目了。
添加组件
在 src/components 目录中，可以创建自己的组件。这里我们以创建一个 Hello 组件为例。
在 src/components/hello 目录中，创建一个名为 index.js 的文件，输入以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ----- ----- ------- --------------- -
-------- -
------ -
----------- ------------
--
-
-然后在 src/components/index.js 中加入以下代码：
export {default as Hello} from './hello';这个代码相当于把 Hello 组件导出，以便在其他组件中使用。
最后，在 App.js 中加入以下代码来使用 Hello 组件：
-- -------------------- ---- -------
------ ----- ---- --------
------ ------- ---- ---------------
------ ------- ----- --- ------- --------------- -
-------- -
------ -
-----
----------- -- -- ----- --------
------ --
------
--
-
-这个代码首先引入了 Hello 组件，然后在 render 方法中使用了它。
现在，运行项目并访问 http://localhost:8080，你会看到 Hello, World! 出现在页面上。
总结
generator-react-beginner-kit 是一个非常实用的 React 项目脚手架，可以方便地帮助开发者快速搭建一个基础的 React 项目。本文介绍了如何使用该工具来创建一个项目、添加组件等等，希望能对大家的 React 学习和开发有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60055d2c81e8991b448dae3e