最初のコンポーネント

CoddyのReactジャーニー「基本概念」セクションの一部 — レッスン 2/42。

最初のコンポーネントを作成する時間です。App.jsx を見てみましょう。これは JSX を返す関数です:

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

        </div>
    );
}

現在は空の <div> を返しているため、プレビューは空欄になっています。内部に配置した JSX（見出し、段落、ボタンなど何でも）がレンダリングされます：

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

id 属性に注目してください。これは HTML とまったく同様に機能し、テストは id を使用してエレメントを検索します。他の2つのファイルはアプリの内部構造です。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>