[React.js] BootStrap을 적용해보자

1. 세팅

1). react-router-dom 설치

npm i react-router-dom

 

2). react bootstrap 설치

npm install react-bootstrap bootstrap

3). Browser globals 추가

# REACT-APP ->  public -> index.html 아래 내용 추가

<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js" crossorigin></script>

<script
  src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"
  crossorigin></script>

<script
  src="https://cdn.jsdelivr.net/npm/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin></script>

<script>var Alert = ReactBootstrap.Alert;</script>

4). CSS 추가

# 1. REACT-APP -> src ->  index.js 상단 추가
import 'bootstrap/dist/css/bootstrap.min.css';

# 2. REACT-APP -> public -> index.html
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
  integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
  crossorigin="anonymous"
/>

2. NavBar 추가하기

1). 폴더, 파일 생성

 

2). Exetnsions에서 다운로드

 

  가.

 

  나.

 

위 2가지를 설치하고 .js에서 rafce를 타이핑하면 자동완성을 해준다. 

 

3). 기본 껍데기 만들기 [Amen.js,  Home.js, Projects.js, Questions.js, ReactDoc.js]

 

4. App.js에서 페이지 연결

 

5. NavBar 추가 [나는 Responsive behaviors 추가해줬다.]

# https://react-bootstrap.netlify.app/docs/components/navbar/ 이동
# components -> NavBarElements.js 생성

1. NavBarElements.js

import React from 'react'
import { Navbar, Container, Nav, NavDropdown } from 'react-bootstrap';

const NavBarElements = () => {
    return (
        <Navbar collapseOnSelect expand="lg" className="bg-body-tertiary">
          <Container>
            <Navbar.Brand href="#home">React-Bootstrap</Navbar.Brand>
            <Navbar.Toggle aria-controls="responsive-navbar-nav" />
            <Navbar.Collapse id="responsive-navbar-nav">
              <Nav className="me-auto">
                <Nav.Link href="#features">Features</Nav.Link>
                <Nav.Link href="#pricing">Pricing</Nav.Link>
                <NavDropdown title="Dropdown" id="collapsible-nav-dropdown">
                  <NavDropdown.Item href="#action/3.1">Action</NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.2">
                    Another action
                  </NavDropdown.Item>
                  <NavDropdown.Item href="#action/3.3">Something</NavDropdown.Item>
                  <NavDropdown.Divider />
                  <NavDropdown.Item href="#action/3.4">
                    Separated link
                  </NavDropdown.Item>
                </NavDropdown>
              </Nav>
              <Nav>
                <Nav.Link href="#deets">More deets</Nav.Link>
                <Nav.Link eventKey={2} href="#memes">
                  Dank memes
                </Nav.Link>
              </Nav>
            </Navbar.Collapse>
          </Container>
        </Navbar>
      );
    }

export default NavBarElements

2. App.js
import './App.css';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
import Home from './screens/Home';
import Projects from './screens/Projects';
import Questions from './screens/Questions';
import ReactDoc from './screens/ReactDoc';
import Aman from './screens/Aman';
import NavBarElements from './components/NavBarElements'; # 추가한 부분

function App() {
  return (
    <Router>
      <NavBarElements /> # 추가한 부분
      <Routes>
        <Route  path='/' element = { <Home /> } />
        <Route  path='/Aman' element = { <Aman /> } />
        <Route  path='/Projects' element = { <Projects /> } />
        <Route  path='/Questions' element = { <Questions /> } />
        <Route  path='/ReactDoc' element = { <ReactDoc /> } />
      </Routes>
    </Router>
  );
}

export default App;

반응형이다..고급져

 

3. 커브 헤더 추가하기

1. styled-components 설치

# https://styled-components.com/docs/basics 이동
npm install styled-components

2. VsCode Extensions 추가 [스타일 컴포넌트 자동완성]

3. 폴더, 파일 생성

 

4. 커브 디자인 적용하기

# src -> components -> Styles -> container -> Container.js
import React from 'react';
import styled from 'styled-components';

export const Container = styled.div`
    width: 100%;
    height: 100vh; //vh는 화면 전체
    background-color: aqua;
    color: white
`

# src -> components -> Styles -> Header -> Header.js
import React from "react";
import { styled } from "styled-components";

export const Header = styled.section`
    width: 100%;
    height: 80vh;
    position: relative;
    display: flex;
    justify-content: center;
    overflow: hidden;
    align-items: center;
    &::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        max-width: 100%;
        min-height: 40px;
        display: inline-block;
        transform: scaleX(1.5);
        background-position: right top;
        background-size: 100vw 200px;
        background-color: #282c34;
        border-radius: 0 0 50% 50% / 0 0 100% 100%;;
    }
`

export const MainHeader = styled.div`
    position: relative;
    z-index: 1;
    margin: 0 auto;
    max-width: 500px;
    background-color: transparent;
`

# src -> screens -> Home.js
import React from 'react'
import { Container } from '../components/Styles/Container/Container'
import { Header, MainHeader } from '../components/Styles/Header/Header'

const Home = () => {
  return(
    <Container>
        <Header>
          <MainHeader>
              <h1>HI, MY 부t스trap 화면</h1>
          </MainHeader>
        </Header>
    </Container>
    )
}

export default Home

 

성공 !