前端那些事之react篇实现登录（前后台分离）

2019独角兽企业重金招聘Python工程师标准>>>

1.下载脚手架

• 安装顺序：npm install -g create-react-app
• create-react-app my-app（可以在指定的目录下创建）
• cd my-app/
• npm start

2.下载路由

• 指定版本：先安装 npm install --save react-router@3.0.0
• 最新版本4.1.1跳转不过去

3.下载antd desin

• npm install antd --save

4.react-redux

• npm install --save react-redux
• npm install --save redux

5. ajax请求用插件superagent来实现

简介：SuperAgent 是一个轻量的Ajax API，服务器端（Node.js）客户端（浏览器端）均可使用,SuperAgent具有学习曲线低、使用简单、可读性好的特点,可作为客户端请求代理模块使用，当你想处理get,post,put,delete,head请求时，可以考虑使用SuperAgent。

下载命令：npm install superagent --save

react 实现异步调用redux-thunk

• 安装方法：npm install redux-thunk --save
• 中间件与异步操作
• 学习地址：http://www.ruanyifeng.com/blog/2016/09/redux_tutorial_part_two_async_operations.html

import React from 'react';
import ReactDom from 'react-dom';
//导入路由组件
import Router from './rotuer/index';
import {createStore,combineReducers,applyMiddleware,compose} from 'redux';
import {Provider,connect} from 'react-redux';
import reducer from './reducer/index';
import thunk from 'redux-thunk'
//创建一个全局变量
const store =createStore(reducer,compose(
    //发送异步请求
    applyMiddleware(thunk),
    //可以使用redux在chorme浏览器中调试
    window.devToolsExtension()
))
const Logo=React.createClass({
    render(){
        return(
            <div>
                <Provider store={store}>
                   <Router/>
                </Provider>
            </div>
        )
    },
    //组件加载完成
    componentDidMount(){

    }
})
export default Logo;

转载于:https://my.oschina.net/yongxinke/blog/892497