첫 번째 컴포넌트

Coddy React 여정의 기초 (Fundamentals) 섹션에 포함된 레슨 — 42개 중 2번째.

첫 번째 컴포넌트를 작성할 시간입니다. App.jsx를 살펴보세요. JSX를 반환하는 함수입니다:

export default function App() {
    return (
        <div>

        </div>
    );
}

지금은 빈 <div>를 반환하므로 미리보기가 비어 있습니다. 내부에 넣는 모든 JSX가 렌더링됩니다 (제목, 단락, 버튼 등 무엇이든 가능합니다):

<h1 id="title">Hello, React!</h1>

id 속성에 주의하세요: HTML에서와 동일하게 작동하며, 테스트 시 이 id를 사용하여 엘리먼트를 찾습니다. 다른 두 파일은 앱의 내부 구조를 담당합니다: index.html은 앱을 호스팅하고 main.jsx는 App을 페이지에 마운트합니다. 이 파일들은 잠겨 있습니다. App.jsx가 여러분이 작업할 공간입니다.

챌린지

초급

앱이 세상에 인사를 건네도록 만들어 보세요.

App.jsx의 <div> 내부에 id="title"을 가진 <h1>을 추가하세요.
텍스트는 정확히 Hello, React!이어야 합니다.

직접 해보기

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>