JSX

// JSX
const page = (
    <div>
        <h1 className="header">This is JSX</h1>
        <p>This is a paragraph</p>
    </div>
)

console.log(page)

ReactDOM.render(
    page,
    document.getElementById("root")
)

page variable 만들어줌...
div로 묶어준 이유? h1, p두개가 있기 때문에
원래는 하나밖에 못하는데 두개하려면 div로 묶어주면 됨.
그리고 렌더링할때는 variable이름 써주고
아까 배운데로 document.getElementById("") 써주면 됨.

challenge한거

Create a navbar in JSX:
    - Use the semantic `nav` element as the parent wrapper
    - Have an h1 element with the brand name of your "website"
    - Insert an unordered list for the other nav elements
        - Inside the `ul`, have three `li`s for "Pricing",
        "About", and "Contact"
    - Don't worry about styling yet - it'll just be plain-looking HTML for now
*/

const navbar = (
    <nav>
        <h1>Bob's Bistro</h1>
        <ul>
            <li>Menu</li>
            <li>About</li>
            <li>Contact</li>
        </ul>
    </nav>
)

ReactDOM.render(navbar, document.getElementById("root"))

여기서는 div대신 nav로 감싸주었음..

/**
Challenge: find out what happens if we try to append JSX
to our div#root using .append() instead of ReactDOM

1. Create a sample page in JSX (≥ 4 elements) and save them in a variable
2. Select the div with the ID of "root" and use `.append()` to append
   your JSX
3. See if you can guess what will show up in the browser before running
   the code
4. See if you can explain what actually shows up in the browser
 */

const page = (
    <div>
        <h1>My awesome website in React</h1>
        <h3>Reasons I love React</h3>
        <ol>
            <li>It's composable</li>
            <li>It's declarative</li>
            <li>It's a hireable skill</li>
            <li>It's actively maintained by skilled people</li>
        </ol>
    </div>
)

document.getElementById("root").append(JSON.stringify(page))

이 코드를 실행하면 Javascript object들만 결과로 나온다.
우리가 화면에서 얘를 볼 수 있는건 render해줄때만이다.

import React from "react"
import ReactDOM from "react-dom"

/**
Challenge: fix our code!

Don't forget, you're not using CDNs anymore, so there's no
global "ReactDOM" variable to use anymore.
 */

const page = (
    <div>
        <h1>My awesome website in React</h1>
        <h3>Reasons I love React</h3>
        <ol>
            <li>It's composable</li>
            <li>It's declarative</li>
            <li>It's a hireable skill</li>
            <li>It's actively maintained by skilled people</li>
        </ol>
    </div>
)

ReactDOM.render(page, document.getElementById("root"))

이렇게!! ReactDOM은 꼭 이렇게 import ReactDOM from "react-dom" import해줘야 한다.

ReactDOM.render(page, document.getElementById("root"))
요렇게 render해줘서 화면에 뜨는거..

import React from "react"
import ReactDOM from "react-dom"

const page = (
    <div>
        <img src="./react-logo.png" width="40px" />
        <h1>Fun facts about React</h1>
        <ul>
            <li>Was first released in 2013</li>
            <li>Was originally created by Jordan Walke</li>
            <li>Has well over 100K stars on GitHub</li>
            <li>Is maintained by Facebook</li>
            <li>Powers thousands of enterprise apps, including mobile apps</li>
        </ul>
    </div>
)

ReactDOM.render(page, document.getElementById("root"))

이미지 넣는거 html이랑 똑같아서 신기했다!
지금까지 코드에서는 const page이렇게 page라는 variable에
담아줬는데 보통은 이렇게 안하고 custom component라는걸 이용한다고 함..그게 뭔지는 다음 강의에서 알아보도록 하자ㅋㅋ

일단 여기서 퀴즈를 풀었는데
아래는 내가답한거 그리고 빨간색은 답이다..

1. Why do we need to import React from "react" in our files?
   because otherwise the code will be imperative.. To make it declarative
   React is what defines JSX.

2. If I were to console.log(page) in index.js, what would show up?
   javascript objects will be shown up...because we didn't render it we can't see
   what we want on the page
   A JavaScript object. React elements that describe what React should
   eventually add to the real DOM for us..

3. What's wrong with this code:

const page = (
    <h1>Hello</h1>
    <p>This is my website!</p>
)

they are not wrapped with div.. only one element can be there.
We need our JSX to be nested under a single parent element.

4. What does it mean for something to be "declarative" instead of "imperative"?
   it means when we tell what to do the programme will get it done
   Declarative means I can tell the computer WHAT to do
   and expect it to handle the details. Imperative means I need
   to tell it HOW to do each step..

5. What does it mean for something to be "composable"?
   it means in order to make one page you break it down so it can be composed all together
   in the future
   We have small pieces that we can put together to make something
   larger/greater than the individual pieces..