引言
在构建一个 React 项目时，我们经常会遇到一些重复性的工作，如创建项目架构、配置 webpack 或者 babel 等。为了能够提高这些工作的效率，有一个方便的工具可以帮助我们一键完成这些繁琐的任务，那就是 create-rrr-app。
create-rrr-app 是一个 React + Redux + React Router 的脚手架，基于官方脚手架 create-react-app 的基础上添加了对 redux 和 react-router 的集成。在项目创建过程中，它帮我们完成了很多工作，从而使我们可以更集中地关注项目的核心部分。
本文将为大家介绍如何使用 create-rrr-app。
安装
要使用 create-rrr-app，首先需要在本地安装它。
通过 npm 安装：
npm install -g create-rrr-app
通过 yarn 安装：
yarn global add create-rrr-app
如果你安装时遇到权限问题，请使用管理员身份运行命令。
创建项目
安装完成后，就可以在命令行中输入 create-rrr-app 来创建一个新的项目，如下所示：
create-rrr-app my-app
其中，my-app 是创建的项目名称。当然，你也可以将其替换为你想要的项目名称。
运行项目
项目创建完成后，就可以在项目根目录下使用以下命令来运行项目：
npm start
或者使用 yarn：
yarn start
在项目启动后，你可以在浏览器中访问 http://localhost:3000 来查看效果。
项目目录结构
使用 create-rrr-app 创建的项目有如下目录结构：
-- -------------------- ---- -------
-------
---------
-------------
------------
-------
-----------
----------
-------------
----
--------
--------
-----------
------
---
---------
--------
---------
--------其中，public 目录下是一些静态资源，如 HTML 模板、图标、应用程序的配置等。
src 目录下则是应用程序的代码，包括组件、redux action 和 reducer 等。
集成 Redux 和 React Router
使用 create-rrr-app 创建的项目已经默认集成了 Redux 和 React Router，我们只需要编写相应的代码，便可以使用这两个库。
React Router
我们可以在 src 目录下创建一个 Router.js 文件，该文件用于定义应用程序的路由。下面的代码演示了如何定义一个路由：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ - ----- ----- - ---- ---------------
----- ------ - -- -- -
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
--
------ ------- -------在上面的代码中，我们使用了 react-router-dom 库来定义路由。其中：
Switch组件表示只匹配一个路由，当匹配到一个路由时，就不再匹配其他路由；Route组件表示一个路由，其中path属性表示路由的路径，component属性表示路由对应的组件。
Redux
我们可以在 src 目录下创建一个 store 目录，该目录用于存放 Redux 相关的代码。下面的代码演示了如何创建一个 Redux store：
import { createStore } from 'redux';
import rootReducer from '../reducers';
const store = createStore(rootReducer);
export default store;在上面的代码中，我们使用了 redux 库来创建 Redux store，rootReducer 是应用程序所有 reducer 的集合。
接着，我们需要在应用程序中使用该 store。例如，在 index.js 中引入 Provider 和 store：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- -------------------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的代码中，我们使用了 Provider 组件将 store 传递给所有子组件，在需要使用 state 或 dispatch 的子组件中，可以通过 connect 方法来连接 store。
示例代码
最后，我们提供一个示例代码，该代码实现了一个计数器应用程序，用户可以通过点击按钮来调整计数器的值：
App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -------------
----- --- - -- ------ ---------- --------- -- -- -
-----
---------- ------------
------- ------------------------------
------- ------------------------------
------
--
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -
----------
---------
--
------ ------- ------------------------ -------------------------actions/index.js
export const increment = () => ({
type: 'INCREMENT'
});
export const decrement = () => ({
type: 'DECREMENT'
});reducers/index.js
-- -------------------- ---- -------
----- ------------ - -
------ -
--
----- ----------- - ------ - ------------- ------- -- -
------ ------------- -
---- ------------
------ -
---------
------ ----------- - -
--
---- ------------
------ -
---------
------ ----------- - -
--
--------
------ ------
-
--
------ ------- ------------Router.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ - --- - ---- ---------------
----- ------ - -- -- -
--------
------ ----- -------- --------------- --
---------
--
------ ------- -------使用示例：
create-rrr-app my-app cd my-app npm start
打开浏览器，访问 http://localhost:3000，即可看到计数器应用程序的效果。
参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005523b81e8991b448cfc42