前言
在当前的前端技术栈中，React 和 Redux 已经成为了热门的技术选型。而搭建一个 React + Redux 项目是前端开发者常常需要面对的问题之一。因此，本文介绍了一个简单、高效的 npm 包——init-react-redux-app，它可以帮助你快速搭建一个基于 React 和 Redux 的项目框架，并附带一些基本的开发工具。本文将为大家详细介绍使用该包创建一个前端项目的步骤以及使用方法。
什么是 init-react-redux-app
init-react-redux-app 是一个开箱即用的项目模板，集成了 React、Redux、React Router、ESLint、Babel、Webpack 等前端工具。该包的主要功能是：
- 快速搭建一个基于 React 和 Redux 的项目框架
- 默认集成了 React、Redux、React Router、ESLint、Babel、Webpack 等前端工具
- 只需要进行少量的配置，就可以启动一个基础的 React + Redux 项目
安装
使用 npm 安装该包：
npm install -g init-react-redux-app
使用
在你的项目目录下执行以下命令：
init-react-redux-app my-react-app
这条命令将会在目录下创建一个名为 my-react-app 的新项目。
在工具的运行过程中，你需要配置一些信息，用于个性化替换（如项目名称），请按照提示进行配置。最终，你将创建出一个符合你需要的、基于 React 和 Redux 框架的项目。
项目目录结构
通过 init-react-redux-app 创建的项目默认的目录结构如下：
-- -------------------- ---- -------
-------------
-------------
-------
----------
-----------
----
-------
-------
--------
-------
-----------
-----------
----------
--------
----------
--------------
---------
--------
----------
------
---------------------
-----------------
----------------------
------
--------
--------
---------
----------
------------
---------
---------------------
----------------------这里为大家介绍一下目录结构中一些比较重要的文件和文件夹：
public目录是用于存放静态资源（如index.html文件、favicon.ico等）的文件夹。src目录是项目的核心文件夹，所有的组件、样式、数据逻辑、接口等都应该存放在该目录内。components目录是用于存放组件的文件夹，它包含着项目的所有组件。constants目录是用于存放定义的 action type。reducers目录是用于存放 reducers 的文件夹，它包含着项目的所有 reducers。store目录是用于存放 store 配置的文件夹，它包含着项目的 store 的配置入口文件。.babelrc文件是 Babel 的配置文件，用于配置项目在编译过程中所需要使用的插件和预设。.eslintrc文件是 ESLint 的配置文件，用于配置编码风格规范和代码检查规则。package.json存在于项目的根目录下，它是用于管理项目所使用的所有依赖包和脚本命令的配置文件。
示例代码
这里我们以创建一个计数器为例子来展示该项目的具体使用。
1. 安装依赖包
在项目目录下使用以下命令安装依赖：
npm install
2. 创建 counter reducer
在项目的 constants 目录下创建一个新文件 ActionTypes.js，在文件中定义 action type：
export const INCREMENT = 'INCREMENT'; export const DECREMENT = 'DECREMENT';
在项目的 reducers 目录下创建一个新文件 counter.js，在文件中定义一个 reducer，用于更新计数器：
-- -------------------- ---- -------
------ - -- ----- ---- ---------------------------
----- ------------ - -
------ -
--
------ ------- -------- ------------- - ------------- ------- -
------ ------------- -
---- ----------------
------ - ------ ----------- - - --
---- ----------------
------ - ------ ----------- - - --
--------
------ ------
-
-3. 创建 store
在项目的 store 目录下创建一个新文件 configureStore.js，用于创建 project store。
-- -------------------- ---- ------- ------ - ------------ ---------------- ------- - ---- -------- ------ --------------- ---- -------------- ------ ----------- ---- -------------- ----- ------------------------- - -------- --------------------------------- ------------------------ - -------------------------- - - -- - --------------- ------ ------- -------- ---------------------------- - ----- ----- - -------------------------------------- -------------- ------ ------ -
4. 创建 actions
在项目的 src 目录下创建一个新文件 index.js，用于 exports store。
import configureStore from './store/configureStore'; export const store = configureStore();
在项目的 src 目录下创建一个新文件 actions.js，用于创建 dispatch 增加计数器数值和减少计数器数值的 action。
-- -------------------- ---- -------
------ - -- ----- ---- ---------------------------
------ -------- ----------- -
------ -
----- ---------------
--
-
------ -------- ----------- -
------ -
----- ---------------
--
-
------ -------- ---------------- -
------ ---------- --------- -- -
----- - ----- - - -------------------
-- ------ - - --- -- -
-------
-
----------------------
--
-
------ -------- -------------------- - ----- -
------ -------- -- -
------------- -- -
----------------------
-- -------
--
-5. 创建计数器组件
在项目的 components 目录下创建一个新文件 Counter.jsx，用于展示计数器组件。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
------ --------- ---- -------------
------ -
----------
----------
---------------
--------------
- ---- -------------
----- ------- ------- --------- -
------ --------- - -
--------- --------------------------
------ ---------------------------
--
--------------- - -- -- -
---------------------------------
--
--------------- - -- -- -
---------------------------------
--
-------------------- - -- -- -
--------------------------------------
--
-------------------- - -- -- -
--------------------------------------
--
-------- -
----- - ----- - - -----------
------ -
---
-------- ------- -----
-- --
------- -----------------------------------------
-- --
------- -----------------------------------------
-- --
------- ------------------------------------
--------- -- ---
---------
-- --
------- ------------------------------------
--------- -----
---------
----
--
-
-
-------- ---------------------- -
------ -
------ -------------------
--
-
------ ------- ----------------------------------6. 修改主程序入口文件
在项目的 src 目录下的 App.js 文件中，添加计数器组件之后的内容：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ ------- ---- -----------------------
----- --- ------- --------- -
-------- -
------ -
-----
-------- --
------
--
-
-
------ ------- ----7. 启动应用
使用以下命令启动应用：
npm start
在浏览器中打开 localhost:3000，即可看到运行的计数器示例。
总结
通过本文的介绍，你应该已经对于 npm 包 init-react-redux-app 的使用有了深入的了解。希望该文章可以帮助更多的前端开发者更快速地创建自己的项目。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600562e581e8991b448e07f6