搭建react + react-redux环境
基本的前置环境搭建
react作为全世界使用人数最多的前端框架之一，里面的设计和优雅不言而喻，可是对于新人前端，这种搭设还不是很友好，今天我们就来手动的假设一个环境吧.
其实我们react最好的就是使用我们的脚手架进行安装，虽然是写给初学者看的文章，但是即使在工作中，我们任然希望大家使用官方提供的脚手架进行搭建，省去我们自行配置需要踩的坑.
首先，确保我们的node.js环境是正常安装。我们在命令行使用node -v进行查看，没有报错的话。证明我们的node环境是正常的。如果有问题请大家去node.js官方网站进行下载我们的node.js并进行安装。
- 命令行检测node.js 是否安装正常
node -v- 在安装正常后，我们通过npm安装我们的脚手架工具
npm install -g create-react-app
npm install -g yarn
经过一些列的读条，可能会比较慢一点，但是我们的正确安装怎么都不会迟到吧。除非你真的是很倒霉，否则现在的源速度基本可以保证安装的成功。
开始搭建react基本环境
通过这一步搭建我们基本可以完成一个可以运行的前端环境，并且在这个基础上，我们可以加入react-redux和react-router的组件。
架设我们的运行环境在d:\WebstrormProjects\reactdemo下，我们进入该文件目录下。使用我们的脚手架命令创建工程。
- 在命令行执行
create-react-app demo02
经过一顿猛如虎的操作，相信大家已经能看到以下的目录：
安装完成后的目录文件结构
我们只保留src下的index.js文件，src下的其他文件我们先干掉。
我们将src/index.js文件内容改成为
import React from 'react';
import ReactDOM from 'react-dom';
import HelloReact from './Pages/HelloReact';
ReactDOM.render(<HelloReact />, document.getElementById('root'));
在src下创建Pages目录，然后创建HelloReact.js来与我们的之前修改的index.js文件对应，存放我们的页面组件代码，在react下万物皆组件，页面也是一样。
HelloReact.js 页面内容如下：
import React, {Component} from 'react';
class HelloReact extends Component {
render() {
return (
<div>
Hello React.
</div>
);
}
}
export default HelloReact;
进过我们的调整，最终的目录和文件结构如下：
调整后文件目录
我们在进入 d:\WebstrormProjects\reactdemo\demo02 运行 npm run start 查看下我们的页面是否运行正常。
页面正常
这是浏览器弹出，显示我们输入的页面信息。到这里我们的React基本环境就已经搭建完成，接下来，我们就要搭建我们的react-redux环境。
redux 和 react-redux包的安装与配置
在react中我们的组件之间状态的传递数据，只能是父组件向子组件传递，而子组件只能接受这些信息。但是这不符合我们的实际操作逻辑，因为数据是共享的，谁都能改才符合共享的原则。相关的redux概念很多，我在这里就不多讲。还是以搭建为主。
接着上面的例子，我们在d:\WebstrormProjects\reactdemo\demo02目录下执行以下命令
- 安装redux和react-redux
yarn add redux react-redux
redux安装完成，这个redux相当于我们的数据仓库，为了有这个仓库，我们就需要在src代码中创建store目录，来存放我们的相关操作文件
我们在src/store下创建index.js输入以下代码
import {createStore} from 'redux';
import reducer from './reducer'; // 相当于仓库管理员
const store = createStore(reducer); // 创建仓库放入管理员
export default store;
然后还是在src/store/下创建reducer.js文件输入以下代码
const defaultStates = {
inputValue: '写入任务',
list: [
'睁眼起床',
'下床刷牙',
'穿衣出门',
],
};
export default (previousState = defaultStates, action) => {
return previousState;
}
到这里我们的仓库已经搭建完成。接下来需要我们通过react-redux与我们的Pages中的页面结合了。
首先我们需要修改src/index.js代码如下：
import React from 'react';
import ReactDOM from 'react-dom';
import HelloReact from './Pages/HelloReact';
import {Provider} from "react-redux"; // 引入Provider组件
import store from "./store";
// 无状态组件
const App = () => {
// 包裹在Provider之间的组件都可以进行对数据仓库数据的操作
return (
<Provider store={store}>
<HelloReact/>
</Provider>
);
};
ReactDOM.render(<App/>, document.getElementById('root'));
为了测试我们的react-redux环境是否搭建成功，我们修改src\Pages\HelloReact.js来做个todolist的例子。修改HelloReact.js代码如下：
import React, {Component} from 'react';
import {connect} from "react-redux";
import store from "../store";
class HelloReact extends Component {
constructor(props) {
super(props);
this.state = store.getState();
}
render() {
return (
<div>
<div>
<input type="text" style={{height: '17px'}} placeholder={this.props.inputValue}
value={this.props.inputValue}
onChange={this.props.inputChange}/>
<button style={{verticalAlign: 'middle'}} onClick={this.props.clickBtn}>添加</button>
</div>
<div>
<ul>
{this.props.list.map((item, index) => {
return (<li key={item + index}>{item}</li>);
})}
</ul>
</div>
</div>
);
}
}
// 隐射关系把原来的state映射成组件中的props属性
const stateToProps = (state) => {
return {
inputValue: state.inputValue,
list: state.list,
};
};
const dispatchToProps = (dispatch) => {
return {
inputChange(e) {
let action = {
type: 'inputChange',
value: e.target.value,
};
dispatch(action);
},
clickBtn() {
let action = {
type: 'addItem',
};
dispatch(action);
}
};
};
export default connect(stateToProps, dispatchToProps)(HelloReact);
因为上面代码有dispath，所以我们的src/store/reducer.js是可以接收到的。所以我们要修改里面的代码来处理接收到的信息。
const defaultStates = {
inputValue: '写入任务',
list: [
'睁眼起床',
'下床刷牙',
'穿衣出门',
],
};
export default (previousState = defaultStates, action) => {
if (action.type === 'inputChange') {
let newState = JSON.parse(JSON.stringify(previousState));
newState.inputValue = action.value;
return newState;
}
if (action.type === 'addItem') {
let newState = JSON.parse(JSON.stringify(previousState));
newState.list.push(newState.inputValue);
newState.inputValue = '';
return newState;
}
return previousState;
}
到这里我们的基本假设就已经完成了。谢谢大家观看。
本文源代码地址：代码传送门
