剧场模式
首页前后端分离ReactReact & Redux & React-Router & Nodejs 实战 crud 项目

React & Redux & React-Router & Node.js 实战 crud 项目 #2 Semantic Ui 和 React-Router

海外散仙厉飞雨 · 真仙发布于
5

https://semantic-ui.com/

http://www.bootcdn.cn/

https://reacttraining.com/react-router/web/example/basic

https://www.rails365.net/movies/react-ji-qiao-3-react-router-jiao-cheng-part

https://www.rails365.net/movies/react-ji-qiao-4-react-router-jiao-cheng-part

<link href="https://cdn.bootcss.com/semantic-ui/2.3.1/semantic.min.css" rel="stylesheet">

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App';
import GamesPage from './components/GamesPage';
import { Provider } from 'react-redux';
import registerServiceWorker from './registerServiceWorker';

import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';
import { composeWithDevTools } from 'redux-devtools-extension';
import logger from 'redux-logger';
import { BrowserRouter as Router, Route, NavLink } from "react-router-dom";

const store = createStore(
  rootReducer,
  composeWithDevTools(
    applyMiddleware(logger)
  )
);

ReactDOM.render(
  <Provider store={ store }>
    <Router>
      <div className="ui container">
        <div className="ui three item menu">
          <NavLink exact activeClassName="active" className="item" to="/">Home</NavLink>
          <NavLink exact activeClassName="active" className="item" to="/games">Games</NavLink>
          <NavLink activeClassName="active" className="item" to="/games/new">Add New Game</NavLink>
        </div>
        <Route exact path="/" component={ App } />
        <Route exact path="/games" component={ GamesPage } />
      </div>
    </Router>
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

src/components/GamesPage.js

import React, { Component } from 'react';

class GamesPage extends Component {
  render() {
    return (
      <div>
        GamesPage
      </div>
    );
  }
}

export default GamesPage;
0 条回复
暂无回复~~
课程目录

1FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #1 项目搭建

FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #2 Semantic Ui 和 React-Router

3FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #3 Redux connect

4FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #4 发送 ajax 请求

5FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #5 用 es6 语法来写服务器代码

6FreeReact & Redux & React-Router & Node.js 实战 crud 项目 #6 连接数据库 MongoDB

7ProReact & Redux & React-Router & Node.js 实战 crud 项目 #7 路由与表单

8ProReact & Redux & React-Router & Node.js 实战 crud 项目 #8 客户端验证

9ProReact & Redux & React-Router & Node.js 实战 crud 项目 #9 客户端发送创建记录的请求

10ProReact & Redux & React-Router & Node.js 实战 crud 项目 #10 前端和后端对错误路由的处理

11ProReact & Redux & React-Router & Node.js 实战 crud 项目 #11 后端创建数据和前端路由跳转

12ProReact & Redux & React-Router & Node.js 实战 crud 项目 #12 列表页面

13ProReact & Redux & React-Router & Node.js 实战 crud 项目 #13 新增记录时列表页延迟加载的问题

14ProReact & Redux & React-Router & Node.js 实战 crud 项目 #14 修改记录表单和路由参数

15ProReact & Redux & React-Router & Node.js 实战 crud 项目 #15 修改记录填充表单数据

16ProReact & Redux & React-Router & Node.js 实战 crud 项目 #16 修改记录提交数据

17ProReact & Redux & React-Router & Node.js 实战 crud 项目 #17 重构表单代码

18ProReact & Redux & React-Router & Node.js 实战 crud 项目 #18 删除记录(完结)

学员
HytonightYX · 真仙毛毛 · 金仙后期iosLongFeng · 太乙巅峰Super-Ps · 金仙后期zqaizsq · 真仙钟声 · 道祖eowyn · 金仙巅峰leo · 太乙玉仙zbx7858 · 道祖qianduan · 真仙Messi-Q · 真仙wangerpei333 · 太乙巅峰zhangtao · 金仙后期madecc · 真仙samuelshang · 大罗
最新动态
HytonightYX · 真仙学习到了1:22
毛毛 · 金仙后期学习到了0:31
iosLongFeng · 太乙巅峰学习到了6:30
Super-Ps · 金仙后期学习到了6:44
zqaizsq · 真仙学习到了6:34

© 汕尾市求知科技有限公司 | 粤ICP备19038915号 | 在线学员:28

Top