剧场模式
首页前端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 条回复
加微信(qiuzhi99666)入群官方服务号
随机课程
React & Redux 实战 Reminder Pro 项目

React & Redux 实战 Reminder Pro 项目

5 个视频31 分钟初级

Pro¥ 59.00¥ 47.20

Redux已完结

学员(99)
YunZhi · 大乘Sandro · 太乙xpbu · 大乘求知小白 · 真仙Cen Zhilin · 大乘Soyas · 真仙郭宇铭 · 真仙烂肉 · 大罗温文尔雅 · 道祖郑永强 · 元婴ryuusennka · 大罗jeanim · 大乘
最新动态
YunZhi · 大乘学习到了0:11
Sandro · 太乙学习到了7:03
xpbu · 大乘学习到了7:29
求知小白 · 真仙学习到了1:06
Cen Zhilin · 大乘学习到了7:24
统计信息
    学员: 15699
    视频数量: 916
    帖子数量: 406

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

Top