前言
yhd-react-cli 是一款基于 create-react-app 脚手架创建的React项目的定制化工具，可以方便快捷地创建带有一些约定和模板的React项目。本文将详细介绍如何使用 yhd-react-cli 进行项目的创建和使用。
安装
首先，需要在本地全局安装 yhd-react-cli：
npm install -g yhd-react-cli
如果出现权限问题，可以使用 sudo npm install -g yhd-react-cli。
创建项目
安装完成后，在命令行中运行以下命令以创建一个新的React项目：
yhd-react-cli create projectName
其中，projectName 是你的项目名称。
运行该命令后，yhd-react-cli 将会开始创建项目，并提示你输入一些配置信息：
- 项目的技术栈：React全家桶、Vue、Angular等
- 项目的UI框架：Ant Design、Material-UI等
- 项目的CSS预处理器：less、sass等
根据你的需求进行选择，并按照提示进行操作即可。
项目结构
创建完成后，项目的结构如下：
-- -------------------- ---- -------
------------
--- ---------
--- -------------
--- ------------
--- -------
--- ----
--- -------
--- -----------
--- --------
--- ------
--- ---------
--- ------其中：
public：用于存放不需要webpack编译的文件，比如index.html。src：主要的源代码目录。src/assets：存放项目中的静态资源，比如图片、字体等。src/components：存放项目中的React组件代码。src/index.js：项目的入口文件，用于初始化React应用。src/pages：存放项目中的页面代码。src/router.js：用于定义项目的路由规则。src/utils：存放项目中的通用工具代码。
使用示例
接下来，演示如何使用 yhd-react-cli 创建一个简单的React应用。
创建项目
首先在命令行中输入以下命令：
yhd-react-cli create my-app
安装项目依赖
进入项目目录，输入以下命令安装项目依赖：
cd my-app npm install
运行项目
输入以下命令启动React应用：
npm start
在浏览器中访问 http://localhost:3000/，会看到一个简单的页面。
编写组件
在 src/components 目录下，创建一个组件文件 MyComponent.js，文件内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
-------- ------------------ -
----- ------ - ------
------ -
-----
---------- ------------
------
--
-
------ ------- ------------使用组件
在 src/pages目录下，创建一个页面文件 MyPage.js，文件内容如下：
-- -------------------- ---- -------
------ ----- ---- --------
------ ----------- ---- ----------------------------
-------- -------- -
------ -
-----
------------ ------------ --
------
--
-
------ ------- -------在 src/router.js 中添加路由规则：
-- -------------------- ---- -------
------ ----- ---- --------
------ --------------- ------ ------- ---- -------------------
------ ------ ---- -----------------
-------- -------- -
------ -
---------------
--------
------ ----- -------- ------------------ --
---------
----------------
--
-
------ ------- -------最后，在 src/index.js 中引入路由组件：
import React from 'react';
import ReactDOM from 'react-dom';
import Router from './router';
ReactDOM.render(
<Router />,
document.getElementById('root')
);打包项目
在命令行中输入以下命令进行打包：
npm run build
打包完成后，build 目录中生成了可以部署的静态文件。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60056cb081e8991b448e61ed