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;