[WEBPACK] 8. Webpack : Tích Hợp Jquery, React, Redux Devtools (nghiepuit)

https://www.youtube.com/watch?v=_oL3PErft_s&list=PLJ5qtRQovuEOqsMokakP9ue-y_jXhmCwJ&index=8

Chỉnh sửa Router thành HashRouter

C:\Users\Administrator\Desktop\abc\src\components\App\App.js

import React, { Component } from 'react';
import './App.css';
import Menu from './../Menu/Menu';
import routes from './../../routes';
import { Switch, Route, BrowserRouter as Router, HashRouter } from 'react-router-dom';
class App extends Component {
  render() {
    return (
      <HashRouter>
        <div>
          <Menu />
          <div className="container">
            <div className="row">
              {this.showContentMenus(routes)}
            </div>
          </div>
        </div>
      </HashRouter>
    );
  }
  showContentMenus = (routes) => {
    var result = null;
    if (routes.length > 0) {
      result = routes.map((route, index) => {
        return (
          <Route
            key={index}
            path={route.path}
            exact={route.exact}
            component={route.main}
          />
        );
      });
    }
    return <Switch>{result}</Switch>;
  }
}
export default App;

Tích hợp Devtools

C:\Users\Administrator\Desktop\abc\src\app.js

Xem thêm: https://stackoverflow.com/questions/56215220/react-redux-error-passing-several-store-enhancers-to-createstore

import React from 'react';
import ReactDOM from 'react-dom';
import App from './components/App/App';
import { createStore, applyMiddleware } from 'redux';
import appReducers from './reducers/index';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import 'bootstrap3/dist/css/bootstrap.min.css';
import 'jquery';
import 'bootstrap3/dist/js/bootstrap.min.js';
const composeEnhancer = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
const store = createStore(appReducers, composeEnhancer(applyMiddleware(thunk)))
ReactDOM.render(
  <Provider store={store}>
      <App />
  </Provider>,
  document.getElementById('root')
);

8KB

src.rar