剧场模式
首页前端ReduxReact & Redux 实战 Reminder Pro 项目

React & Redux 实战 Reminder Pro 项目 #1 项目搭建

求知小风 · 元婴发布于
5

demo: https://mystifying-goodall-3138f9.netlify.com/

http://www.bootcdn.cn/

<link href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet">

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import registerServiceWorker from './registerServiceWorker';
import { composeWithDevTools } from 'redux-devtools-extension';
import { Provider } from 'react-redux';
import logger from 'redux-logger';
import { createStore, applyMiddleware } from 'redux';
import rootReducer from './reducers';

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

ReactDOM.render(
  <Provider store={ store }>
    <App />
  </Provider>,
  document.getElementById('root')
);
registerServiceWorker();

src/components/App.js

import React, { Component } from 'react';

class App extends Component {
  render() {
    return (
      <div className="App">
        <div className="title">Reminder Pro</div>

        <div className="form-inline">
          <div className="form-group mr-2">
            <input type="text" className="form-control" placeholder="I have to..." />
          </div>
          <button type="button" className="btn btn-success">Add Reminder</button>
        </div>
      </div>
    );
  }
}

export default App;

src/index.css

.App {
  padding-top: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  text-align: center;
  font-size: 26px;
}

src/reducers/index.js

const reminders = (state = {}, action = {}) => {
  switch(action.type) {
    default: return state;
  }
}

export default reminders;
5 条回复
加讲师微信(qiuzhi99pro)官方服务号
学员(130)
Guanine · 道祖evilming · 真仙JesusCracker · 大罗Arthur · 道祖biantonghai · 太乙招财大胖菊 · 道祖风林火山 · 练虚Anna Huang · 元婴鱼之愿 · 元婴zeni18 · 真仙温文尔雅 · 道祖老魔学英文 · 道祖
最新动态
Guanine · 道祖学习到了0:02
evilming · 真仙学习到了7:31
JesusCracker · 大罗学习到了7:29
Arthur · 道祖学习到了7:00
biantonghai · 太乙学习到了7:31
统计信息
    学员: 19209
    视频数量: 1171
    帖子数量: 430

© 汕尾市求知科技有限公司 | 关注我们 | 在线学员:118

粤公网安备 44152102000088号 | 粤ICP备19038915号

Top