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