简介
generator-react-ts是一个Yeoman generator，它为React和TypeScript项目生成了一个基础的文件和文件夹结构。本文为您介绍如何使用generator-react-ts来创建React项目。
准备
在使用generator-react-ts之前你需要先安装以下两个工具：
Node.js： npm包管理工具必须运行在Node.js之上。安装Node.js可参考官网。
Yeoman： 这是一个基于Node.js的脚手架工具，能够快速帮助你生成一个基础项目结构。通过指令npm install -g yo可在全局安装。
安装generator-react-ts
执行以下指令可以在本地安装generator-react-ts：
npm install -g generator-react-ts
创建项目
在终端中进入要创建项目的文件夹，执行以下指令：
yo react-ts
这样就会自动创建一个React项目的基础文件和文件夹结构。
项目结构
以下是使用generator-react-ts创建的基础项目结构：
-- -------------------- ---- -------
--- ---------
--- ------------
--- ------------
--- -------------
--- -----------------
--- ------
- --- ----------
- --- -----------
- --- -------------
--- ---
--- ---------
--- -------
--- ----------
- --- -----------
--- ---
- --- ----------
--- ------
--- --------------其中：
README.md：项目说明文件node_modules：依赖的npm包package.json： npm包管理文件tsconfig.json： TypeScript编译配置文件webpack.config.js：webpack打包配置文件public：公共资源文件夹src：源代码文件夹index.tsx：入口文件，渲染App组件App.tsx：组件文件，表示页面UI元素组件components：组件文件夹css：样式文件夹images：图片文件夹
运行项目
进入项目文件夹，先执行以下指令安装依赖：
npm install
然后，执行以下指令启动应用程序：
npm start
这将启动dev服务器，让你在本地计算机的浏览器中查看该应用。
示例代码
-- -------------------- ---- -------
------ ------ - -- - ---- --------
------ ------- ---- -----------------------
------ -------------------
------ ---- ---- --------------------------
----- ---- -- - -- -- -
------ -
---- ----------------
---- ---------- ---------- ----- --
---------- ----- ---- ----------------
-------- --
------
-
-
------ ------- ----总结
generator-react-ts是一个非常方便的工具，它能帮我们快速搭建一个基于React和TypeScript的Web应用程序。相信通过本文的介绍，你已经对如何使用generator-react-ts有了一个全面的了解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600572c881e8991b448e8f54