Reactでアプリを作成しました【12】【Website with Bootstrap】

環境の準備

①ターミナルでreactアプリケーションを作成する。

$ npx create-react-app <プロジェクト名>
% cd <プロジェクト名>
% npm start

② 必要なパッケージをインストールする。

$ npm install npm install styled-components framer-motion
$ npm install bootstrap

コンポーネント・ファイル構成

 src
  ├── components
       └──Hero.js
  ├── images
  ├── App.js
  ├── index.js
├── .env

.env

SKIP_PREFLIGHT_CHECK=true

src/components/Hero.js

import React from "react";
import styled from "styled-components";
import { Navbar } from "react-bootstrap";
import { Button } from "react-bootstrap";
import image1 from "../images/image1.png";
import image12 from "../images/image12.png";

export const Nav = styled.nav`
  background: #000;
  height: 80px;
  margin-top: -80px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;

  @media screen and (max-width: 960px) {
    transition: 0.8s all ease;
  }
`;

// const Navbar = styled.nav`
//   width: 100%;
//   display: 80px;
//   background-color: green;
//   display: flex;
//   flex-direction: column;
// `;

const Section = styled.section`
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #131313;
`;
const Container = styled.div`
  display: grid;
  grid-template-columns: 1fr 1fr;
  height: 100vh;
  padding: 3rem calc((100vw-1300px) / 2);

  @media screen and (max-width: 768px) {
    grid-grid-template-columns: 1fr;
  }
`;

const ColumnLeft = styled.div`
  display: flex;
  color: #fff;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 5rem 2rem;

  h1 {
    margin-bottom: 2rem;
    font-size: 4.5rem;
  }
  div {
    margin: 0.5rem 0;
    font-size: 2.2rem;
    line-height: 1.1;
  }
`;
// const Button = styled.div`
//   border-radius: 15px;
//   border: 2px solid white;
//   background-color: green;
//   padding: 0.5rem 0.5rem;
//   font-size: 1rem;
//   border: 3px solid #fff;
//   border-radius: 4px;
//   outline: none;
//   cursor: pointer;
//   background: transpartent;
// `;
const Image = styled.img``;

const ColumnRight = styled.div``;

const Hero = () => {
  return (
    <>
      <Navbar expand="xxl" variant="light" bg="light">
        <Navbar.Brand href="#">Dorgaben</Navbar.Brand>
        <Navbar.Collapse>
          <Navbar.Text>
            Dorgaben's <a href="#login">Mark Otto</a>
          </Navbar.Text>
        </Navbar.Collapse>
        <Button variant="warning" size="lg">
          Sign Up
        </Button>{" "}
        <Button variant="success" size="lg">
          Get Start
        </Button>{" "}
      </Navbar>

      <Section>
        <Container>
          <ColumnLeft>
            <h1>Welcome to Dogaben.</h1>
            <div className="explanation">
              <p>Journey to the Unknown, 100 Years of Life.</p>
              <p> Watch the video and learn!</p>
              <p>If you don't understand something, ask a question!</p>
              <p> Change your life!</p>
              <p> Enjoy your life!</p>
            </div>
            {/* <Button>Get Started</Button> */}
          </ColumnLeft>
          <ColumnRight>
            <Image src={image12} alt="dolphin" />
            <Image src={image1} alt="dolphin" />
          </ColumnRight>
        </Container>
      </Section>
    </>
  );
};

export default Hero;

App.js

import Hero from "./components/Hero";
import "./App.css";
import "bootstrap/dist/css/bootstrap.min.css";

function App() {
  return <Hero />;
}

export default App;