javascript 引导w /反应

Posted 2021-05-04

import React, { Component } from 'react';
import Calendar from './components/calendar';
import { createStore, applyMiddleware } from 'redux';
import logger from './middleware/logger';
import { Provider } from 'react-redux';
import reducer from './reducers';

// create a store w/ middleware for redux
const store = createStore(reducer, applyMiddleware(logger));

// add bootstrap js
global.jQuery = require('jquery');
window.$ = window.jQuery = global.jQuery;
require('bootstrap'); 

// app
class App extends Component {
  
  componentWillMount() {
    // load popover js 
    window.$(function() {
      window.$('[data-toggle="popover"]').popover();
    });

    // ....
  }
  
  render() {
    return (
      <Provider store={store}>
        <div className="App" id="app">
          <Calendar store={store} />
        </div>
        <div>
          other known calendars:
          <div
            type="button"
            className="btn btn-lg btn-danger"
            data-toggle="popover"
            title="Popover title"
            data-content="And here's some amazing content. It's very engaging. Right?"
          >
            Click to toggle popover
          </div>
        </div>
      </Provider>
    );
  }
}

export default App;