本文詳細介紹了如何從零開始搭建一個 Typescript + React 開發(fā)的腳手架，包含如何添加 Redux 以及 React Router 的環(huán)境。

本文代碼地址：ts-react-redux

建議將代碼拉下來之后，配合本文一起查看，效果更佳。

代碼下載命令：git clone https://github.com/vettel-qin/ts-react-redux.git

相關文章目錄

從零開始，一步一步搭建Typescript + React + Redux項目——創(chuàng)建項目結構（一）

從零開始，一步一步搭建Typescript + React + Redux項目——開發(fā)環(huán)境配置（二）

從零開始，一步一步搭建 Typescript + React + Redux項目——集成React（三）

從零開始，一步一步搭建 Typescript + React + Redux項目——集成Redux（四）

從零開始，一步一步搭建 Typescript + React + Redux項目——項目打包（五）

從零開始，一步一步搭建 Typescript + React + Redux項目——團隊合作規(guī)范（六）

一、創(chuàng)建項目結構

1、新建文件夾并進入，命名為：ts-react-redux

????mkdir ts-react-redux && cd ts-react-redux

2、初始化 package.json文件，默認已經安裝node以及npm（如需安裝yarn，執(zhí)行npm install -g yarn）

????yarn init 按照提示填寫項目基本信息

3、初始化tsconfig.json文件

（1）、全局安裝typescript

????npm install -g typescript

????然后 tsc --init

（2）、項目內安裝 npx tsc --init (推薦)

4、創(chuàng)建src目錄，用來存放我們編寫的代碼。創(chuàng)建tools目錄，用來存放webpack配置文件

????mkdir src

????mkdir tools

5、在src目錄下 新建containers文件夾，用來存放頁面組件。新建components文件夾，用來存放公共組件。新建utils文件夾，用來存放常用工具類。新建entries文件夾，用來存放入口文件。

????cd src

????mkdir containers

????mkdir components

????mkdir utils

????mkdir entries

6、在tools目錄下新建webpack.config.ts，此時還沒有書寫內容，之后會詳細地進行配置。

7、在entries目錄下新建入口文件index.ts和HTML模板index.html

????index.html

????index.ts

文章及代碼中如有問題，歡迎指正，謝謝！