加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-15 07:21:50 所属栏目:百科 来源:网络整理
导读: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 in

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;

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读