Django3.2 | 09 | QRオーダーシステムの構築 | React-Toastify - 学生向けプログラミング入門

[08 | React-Bootstrap]　<<　[ホーム]　>>　[10 | ログイン機能実装前準備]

React-Toastifyをインストールします。

コマンド
npm i react-toastify@7.0.3 -s

「src/index.js」ファイルに記述を追加します。

記述追加　【QRMenu/qrmenu_react/src/index.js】2行目

import "bootstrap/dist/css/bootstrap.min.css";
import "react-toastify/dist/ReactToastify.css";

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './router/App';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

「src/router/App.js」ファイルに記述を追加します。

記述追加　【QRMenu/qrmenu_react/src/router/App.js】

import { BrowserRouter, Switch, Route } from 'react-router-dom';
import { ToastContainer } from 'react-toastify';
import React from 'react';

import Home from '../pages/Home';
import Login from '../pages/Login';

function App() {
  return (
    <>
    <BrowserRouter>
      <Switch>
        <Route exact path='/'>
          <Home />
        </Route>
        <Route exact path='/login'>
          <Login />
        </Route>
      </Switch>
    </BrowserRouter>
    <ToastContainer />
    </>
  )
}

export default App;

「src/index.css」ファイルに記述を追加します。

記述追加　【QRMenu/qrmenu_react/src/index.css】

body {
  background-color: #f2f2f2;
}

* {
  font-family: "Kosugi Maru", sans-serif;
}

.btn-standard {
  background-color: #ff3366;
  color: white;
}

.btn-standard:hover {
  background-color: #fc285d;
  color: white;
}