#2 The Basics of react

[2.2] first React Element
1) react 기본 지식

• React JS : 어플리케이션이 아주 인터랙티브하도록 만들어주는 library. 엔진과 같다.
• React-dom : library 또는 package. 모든 react element들을 HTML body에 둘 수 있도록 해줌.
• ReactDOM.render() : render의 의미는 react element를 가지고 HTML로 만들어 배치한다는 것. 즉, 사용자에게 보여준다는 의미
• ReactDOM.render(span, span이 가야할 위치)
  -> 그래서 보통 body에 id=“root” 만들어서 span을 root 안에 두라고 함
  2) js와 리엑트의 차이
  바닐라JS는 HTML -> JS 순서
  리액트는 JS -> HTML 순서
• JS가 element를 생성하고 React JS가 그것을 HTML로 번역하는 것
  React JS는 업데이트 해야 하는 HTML을 업데이트 할 수 있음

[2.3] Events in React
1) const render로 두가지를 하고 싶다면

• div를 만든다
• 배열로 넣어준다

 const container = React.createElement('div', null, [h3, btn])

2) property에 eventListener 넣는 것 가능

• 클릭 이벤트 리스너 만들어보기 / property안에 넣는것 : id, eventListener, 등등
• 이벤트 앞에 on붙여주기!

    const btn = React.createElement(
      'button',
      {
        onClick: () => console.log("i'm clicked"),
        style: {
          backgroundColor: 'tomato',
        },
      },
      'Click me'
    )

[2.5] JSX

• JSX는 쉽게 쓴 것을 변환해주는 문법
• Babel https://ko.reactjs.org/docs/introducing-jsx.html#jsx-represents-objects

1) JSX 문법으로 써주기

  const root = document.getElementById('root')
    const Title = (
      <h3 id="title" onMouseEnter={() => console.log('mouse enter')}>
        Hello I'm a title
      </h3>
    )

    const Button = (
      <button
        style={{ backgroundColor: 'tomato' }}
        onClick={() => console.log("i'm clicked")}
      >
        Click me
      </button>
    )

    const container = React.createElement('div', null, [Title, Button])
    ReactDOM.render(container, root)

=>

• <태그>기입
• <태그> </태그> 안에 내용 기입
• 속성 쓰기 id="" 형태

2) 바벨 달아주기

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

3) JSX로 쓴 태그 스크립트에 type="text/babel" 넣어주기

  <script type="text/babel">

[2.6] JSX part Two
1) 컨테이너 바꿔주기
1.

    const Button = () => (
      <button
        style={{ backgroundColor: 'tomato' }}
        onClick={() => console.log("i'm clicked")}
      >
        Click me
      </button>
    )

    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    )
    ReactDOM.render(<Container />, root)