[React] 리액트로 포트폴리오 웹사이트 만들기 - 레이아웃

간편한 디자인을 위해 부트스트랩을 이용해보고자 한다!! 

react-bootstrap을 다운받고 임포트해주기

$ npm install react-bootstrap 

https://bootswatch.com/

Bootswatch: Free themes for Bootstrap

위 사이트로 들어간 후 마음에드는 테마를 다운로드해준다. 나는 Minty를 다운받았다.

다운받은 css파일을 프로젝트에 넣어주면 끝!! 

 

먼저 레이아웃을 만들기 위해 레이아웃 폴더를 만든 후 헤더, 푸터, 레이아웃 컴포넌트를 만들어줬당

https://react-bootstrap.github.io/

React-Bootstrap

그리고 리액트 부트스트랩 사이트에 들어가서 복붙해오면 된다 짱쉬움

 

componet 클릭 - navbars 검색해서 이거 복사하면 됨

 

Header.js

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

const Header = () => {
  return(
    <header>
      <Navbar bg="light" expand="lg">
        <Container>
          <Navbar.Brand>PORTFOLIO</Navbar.Brand>
          <Navbar.Toggle aria-controls="basic-navbar-nav" />
            <Nav className="ml-auto">
              <Nav.Link>Home</Nav.Link>
              <Nav.Link>Profile</Nav.Link>
              <Nav.Link>Project</Nav.Link>
              <Nav.Link>Contect</Nav.Link>
            </Nav>
        </Container>
      </Navbar>
    </header>
  )
}

export default Header;

복사해 온 후 필요한것만 남기고 삭제했다 메뉴를 오른쪽에 두고싶어서 Nav ClassName="ml-auto"로 바꿔줬다.

 

Footer.js

import react from 'react';
import { Container } from 'react-bootstrap';

const Footer = () => {
  return(
    <footer>
      <Container>
        <div style={{textAlign:'center'}}>
          Footer
        </div>
      </Container>
    </footer>
  )
}

export default Footer;

footer도 만들어주기

 

Layout.js

import React from 'react';
import Footer from './Footer';
import Header from './Header';

const Layout = ({children}) => {
  return (
    <>
      <Header />
      {children}
      <Footer />
    </>
  )
}

export default Layout;

그리고 Layout.js 파일도 만들어주기

 

App.js

import { Container } from 'react-bootstrap';
import Layout from './Layout/Layout';

function App() {
  return (
    <Layout>
      <Container style={{minHeight:'75vh'}}>
        
      </Container>
    </Layout>
  );
}

export default App;

 

마지막으로 App.js 파일에 만들어 놓은 레이아웃을 임포트해주면 완성이다.

 

화면

CSS랑 HTML 왕초보라 직접 만들려면 오래걸렸을것 같은데 부트스트랩 이용하니까 짱빠르고 쉽다