学生向けプログラミング入門 | 無料

学生向けにプログラミングを無料で解説。Java、C++、Ruby、PHP、データベース、Ruby on Rails, Python, Django

Django3.2 | 08 | QRオーダーシステムの構築 | React-Bootstrap

QRオーダーシステムの構築 Django Python React

[07 | React]　<<　[ホーム]　>>　[09 | React-Toastify]

ランキング参加中
プログラミング

「React Bootstrap」と「Bootstrap」を追加します。


コマンド
npm i react-bootstrap@1.5.2 bootstrap@4.6.0 -s


「index.js」ファイルにBootstrapをインポートする記述を追加します。


記述追加　「Desktop/QRMenu/qrmenu_react/src/index.js」1行目

import "bootstrap/dist/css/bootstrap.min.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')
);



「public/index.html」ファイルにGoogleフォントの記述を追加します。


記述追加　「QRMenu/qrmenu_react/public/index.html」27〜32行目

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json provides metadata used when your web app is installed on a
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notice the use of %PUBLIC_URL% in the tags above.
      It will be replaced with the URL of the `public` folder during the build.
      Only files inside the `public` folder can be referenced from the HTML.

      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
      work correctly both with client-side routing and a non-root public URL.
      Learn how to configure a non-root public URL by running `npm run build`.
    -->
    <title>QRオーダーシステム</title>
    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap"
      rel="stylesheet"
    />
  </head>
  <body>
    <noscript>You need to enable JavaScript to run this app.</noscript>
    <div id="root"></div>
    <!--
      This HTML file is a template.
      If you open it directly in the browser, you will see an empty page.

      You can add webfonts, meta tags, or analytics to this file.
      The build step will place the bundled scripts into the <body> tag.

      To begin the development, run `npm start` or `yarn start`.
      To create a production bundle, use `npm run build` or `yarn build`.
    -->
  </body>
</html>



「qrmenu_react/src/index.css」ファイルを更新します。


記述更新　「QRMenu/qrmenu_react/src/index.css」

body {
  background-color: #f2f2f2;
}

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



「qrmenu_react/src」フォルダの中に、「layouts」フォルダを新規作成します。
新規作成した「layouts」フォルダに「MainLayout.js」ファイルを新規作成します。


新規作成　「QRMenu/qrmenu_react/src/layouts/MainLayout.js」

import { Navbar, Nav, Container } from 'react-bootstrap';
import { useHistory } from 'react-router-dom';
import React from 'react';

const MainLayout = ({ children }) => {
  const history = useHistory();

  const onSignIn = () => {
    history.replace("/login");
    
  }

  return (
    <>
      <Navbar bg="dark" variant="dark" className="mb-4">
        <Navbar.Brand href="/">QRオーダーシステム</Navbar.Brand>
        <Nav className="flex-grow-1 justify-content-end">
          <Nav.Link onClick={onSignIn}>ログイン</Nav.Link>
        </Nav>
      </Navbar>
      <Container>{children}</Container>
    </>
  )
}

export default MainLayout;



「src/pages/Home.js」ファイルの記述を変更します。


記述変更　「QRMenu/qrmenu_react/src/pages/Home.js」

import React from 'react';
import MainLayout from '../layouts/MainLayout';

const Home = () => <MainLayout>ホームページ</MainLayout>;

export default Home;



「src/pages/Login.js」ファイルの記述を変更します。


記述変更　「QRMenu/qrmenu_react/src/pages/Login.js」

import React from 'react';
import MainLayout from '../layouts/MainLayout';

const Login = () => <MainLayout>ログイン</MainLayout>;

export default Login;



npmをスタートさせ、ブラウザで確認します。


コマンド
npm start


ブラウザ確認
http://localhost:3000/

ブラウザ確認
ブラウザ確認



↓↓クリックして頂けると励みになります。

ランキング参加中
プログラミング


[07 | React]　<<　[ホーム]　>>　[09 | React-Toastify]