React로 블로그 만들기 #1

React로 블로그 만들기 #1

- Header, Navigation 구성 -

1. create-react-app 만들기

- create-react-app react-blog(프로젝트 이름)

2.패키지 설치

- styled-components : css 대신 styled-components 사용 (참조 : https://www.styled-components.com/)

3. 불필요한 파일 삭제 및 폴더 생성

1) 삭제

- App.css

- index.css

- App.text.js

- logo.svg

- serviceWorker.js

2) 생성

- src/Layout : 레이아웃 폴더

4. src/Layout/Header.js 생성

import React, { Component } from 'react';

import styled from 'styled-components';

class Header extends Component {

render() {

return (

<Container>

<Element>

<ShortCut>로그인/회원가입</ShortCut>

<Logo>

<img

width="100%"

height="100%"

src="https://t1.daumcdn.net/cfile/tistory/99CD014B5BD01FA412"

alt="logo"/>

</Logo>

<Search><h1>React Blog</h1></Search>

</Element>

</Container>

);

}

}

export default Header;

const Container = styled.div`

width: 100%;

border-bottom: 1px solid #d1d8e4;

`

const Element = styled.div`

margin: 0 auto;

width: 1080px;

height: 100px;

display: flex;

flex-flow: row wrap;

`

const ShortCut = styled.div`

order: 1;

width: 100%;

height: 20px;

text-align: right;

background-color: #a8ff78;

`

const Logo = styled.div`

order: 2;

width: 200px;

height: 80px;

`

const Search = styled.div`

order: 3;

width: 880px;

background-color: #78ffd6;

text-align: center;

`

5. src/Layout/Navigation.js 생성

import React, { Component } from 'react';

import styled from 'styled-components';

class Navigation extends Component {

render() {

return (

<Nav>

<NavList>

<NavItem>소개</NavItem>

<NavItem>게시판</NavItem>

<NavItem>연락</NavItem>

<NavItem>메뉴1</NavItem>

<NavItem>메뉴2</NavItem>

<NavItem>메뉴3</NavItem>

</NavList>

</Nav>

);

}

}

export default Navigation;

const Nav = styled.div`

width: 100%;

height: 30px;

border-bottom: 1px solid #d1d8e4;

`

const NavList = styled.ul`

width: 1080px;

display: flex;

margin: 0 auto;

`

const NavItem = styled.li`

width: 60px;

margin-left: 18px;

margin-top: 5px;

display: flex;

`

6. src/App.js 수정

import React, { Component } from 'react';

import styled from 'styled-components';

import Header from './Layout/Header';

import Navigation from './Layout/Navigation';

class App extends Component {

render() {

return (

<Layout>

<Header />

<Navigation />

</Layout>

);

}

}

const Layout = styled.div`

margin: 0 auto;

display: flex;

width: 100%;

flex-flow: row wrap;

`

export default App;

7. 결과