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

[17 | react-dropzone]　<<　[ホーム]　>>　[19 | カテゴリー実装]

「src/pages/Home.js」ファイルを編集します。

記述編集　【QRMenu/qrmenu_react/src/pages/Home.js】

import { Button, Jumbotron, Container, Row, Col, Image } from 'react-bootstrap';
import React from 'react';
import MainLayout from '../layouts/MainLayout';

const Home = () => (
<MainLayout>
    <Jumbotron className="bg-light">
        <Container>
            <Row>
                <Col md={6} className="my-auto">
                    <h2><b>QRコードオーダーシステム</b></h2>
                    <h6 className="mt-4 mb-4">
                        QRコードでデジタルメニューを共有することができます。
                    </h6>
                    <br/>
                    <Button href="/places" variant="standard" size="lg">
                        メニュー作成
                    </Button>
                </Col>
                <Col md={6}>
                    <Image src="https://www.xicom.biz/blog/wp-content/uploads/2019/12/feature_food_app.gif" rounded fluid />
                </Col>                
            </Row>
        </Container>
    </Jumbotron>
</MainLayout>

);

export default Home;