前端那些事之react篇实现登录(前后台分离)
前端那些事之react篇实现登录(前后台分离)
上官清偌 发表于7个月前
前端那些事之react篇实现登录(前后台分离)
  • 发表于 7个月前
  • 阅读 99
  • 收藏 0
  • 点赞 0
  • 评论 0

腾讯云 技术升级10大核心产品年终让利>>>   

摘要: 前端那些事之react篇实现登录(前后台分离)

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

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;
共有 人打赏支持
粉丝 10
博文 79
码字总数 85670
×
上官清偌
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: