Styling with classes, Organise components

React에서는 class name을 붙여줄때 그냥 class라고 쓰는게 아니라
className으로 써줘야 한다.

/**
Challenge: 

- Add an `ul` inside the Header's `nav` and create
  the following `li`s: "Pricing", "About", & "Contact"
- Using flexbox, line up the nav items horizontally, and
  put them inline with the React logo.
- Change the image styling to happen in CSS instead of in-line
  For practice, add a new class to the image in order to style it
*/

function Header() {
    return (
        <header>
            <nav className="nav">
                <img src="./react-logo.png" width="40px" />
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

function Footer() {
    return (
        <footer>
            <small>© 2021 Ziroll development. All rights reserved.</small>
        </footer>
    )
}

function MainContent() {
    return (
        <div>
            <h1>Reasons I'm excited to learn React</h1>
            <ol>
                <li>It's a popular library, so I'll be 
                able to fit in with the cool kids!</li>
                <li>I'm more likely to get a job as a developer
                if I know React</li>
            </ol>
        </div>
    )
}

function Page() {
    return (
        <div>
            <Header />
            <MainContent />
            <Footer />
        </div>
    )
}

ReactDOM.render(<Page />, document.getElementById("root"))

위의 코드에서 볼 수 잇듯이

<nav className="nav">
<ul className="nav-items">

이런식으로 클래스네임 적어줬고
index.css 파일에

.nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav-items {
    list-style: none;
    display: flex;
}

.nav-items > li {
    padding: 10px;
}

display:flex 써줘서 nav만들어줬다.
이런식으로

다음으로 organise components를 해보자...
저기 위에 function Header()부분을 새로 파일로 만들어준다.

Header.js

import React from "react"

export default function Header() {
    return (
        <header>
            <nav className="nav">
                <img src="./react-logo.png" className="nav-logo" />
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

이렇게.. 새로 파일 만들어준거니까 import React from "react" 써주고
index.js에 보내줘야 하니까 export default를 추가해준다.
index.js에는 맨위에 이것도 추가해준다.

import Header from "./Header"

Header이거 import해줘야 하니까...