html에서 react 맛보기

💫 body 안에 script 추가해보기
CDN링크: [<https://ko.reactjs.org/docs/cdn-links.html>](<https://ko.reactjs.org/docs/cdn-links.html>)
<script crossorigin src="<https://unpkg.com/react@17/umd/react.development.js>"></script>
<script crossorigin src="<https://unpkg.com/react-dom@17/umd/react-dom.development.js>"></script>

//babel
<script src="<https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js>"></script>
<script type="text/babel">
</script>

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

JSX 문법 알아보기(JS + XML)

• return 시 하나의 태그로 감싸져 있어야함 <> </>

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

• 태그가 비어있다면 XML처럼 /> 를 이용해 바로 닫아줘야함

const element = <img src={user.avatarUrl} />;

• 중괄호 안에 JavaScript 표현식을 넣을 수 있다.

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

function formatName(user) {
  return user.firstName + ' ' + user.lastName;
}

const user = {
  firstName: 'Harper',
  lastName: 'Perez'
};

const element = (
  <h1>
    Hello, {formatName(user)}!
  </h1>
);

ReactDOM.render(
  element,
  document.getElementById('root')
);

// 중괄호를 사용하여 속성 값에 JavaScript 표현식을 삽입할 수도 있습니다.
<img src={user.avatarUrl}></img>;

// react DOM 은 변경된 부분만 업데이트 합니다.
function tick() {
  const element = (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {new Date().toLocaleTimeString()}.</h2>
    </div>
  );
  ReactDOM.render(element, document.getElementById('root'));
}

setInterval(tick, 1000);

• class → className
• inline style 적용방법
• onClick, onSubmit

// html
<button onclick="activateLasers()">
  Activate Lasers
</button>

// jsx
<button onClick={activateLasers}>
  Activate Lasers
</button>