React의 core concept는 다음과 같다:

4가지 react의 core concept와, react-dom으로 dom 조작을 하고, react-router로 한 웹페이지 내에서 화면을 바꾼다는 개념 정도를 챙기면 수월하게 배울 수 있다.

JSX, react-dom

간단한 React 사이트는 이렇게 생겼다.

index.html

<!doctype html>
<html lang="en">
  <body>
    <header id="sandy"></header>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>

main.jsx

import { createRoot } from 'react-dom/client'

createRoot(document.getElementById('sandy')).render(
  <p>Welcome!</p>
)

main.jsx를 컴파일하면 main.js가 된다. 그리고 index.html과 main.js는 브라우저가 이해할 수 있다.

이러한 JSX→JS 변환은 esbuild, SWC, Babel이 한다.

그렇다면 이걸로 끝인가?

아니다