0Pricing
React Academy · レッスン

最初のコンポーネントとレンダリング

最初のコンポーネント関数を記述し、createRootでDOMにレンダリングし、ホットリロードの動作を確認します。

「最初のコンポーネントとレンダリング」はCoddyKit上の無料React Academyレッスンです。 これはレッスン3/3です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはReact Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 React Academyコースには全3レッスンが含まれています。

概要

目標: 最初の React コンポーネントを作成し、createRoot でマウントして、ホットリロードを確認します。

関数コンポーネント

React コンポーネントは、JSX を返す単なる関数です。例: function App() { return <h1>Hi</h1> }。

createRoot でマウント

ReactDOM.createRoot を document.getElementById("root") とともに使い、その後 root.render(<App/>) を呼び出します。

コード例

最初のレンダリング: App をマウントして、クリックして state の更新を確認します。


<div id="root"></div>

ホットリロードの基本

ホットリロード: ファイルを保存すると、開発サーバーが再ビルドし、state を失わずに UI を更新します。

最初のアプリのヒント

ヒント:

  • コンポーネントは小さく保ちます。
  • App のように、わかりやすい名前を使います。
  • レンダリングに失敗した場合は、コンソールでエラーを確認します。

root 作成の確認

App をレンダリングする前に root を作成するため、React 18 で使用する関数は何ですか？

まとめ

まとめ: App() を定義し、createRoot でマウントして、ホットリロードによる即時のフィードバックを活用します。

よくある質問

「最初のコンポーネントとレンダリング」レッスンは無料ですか？

はい。「最初のコンポーネントとレンダリング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、React Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 React Academyコースには全3レッスンが含まれています。

「最初のコンポーネントとレンダリング」で何を学びますか？

最初のコンポーネント関数を記述し、createRootでDOMにレンダリングし、ホットリロードの動作を確認します。 ブラウザで直接実行するハンズオンコードでReact Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

React Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのReact Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン3/3です。

「最初のコンポーネントとレンダリング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このReact Academyレッスンでコードを書いて実行できますか？

はい。すべてのReact Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. React入門：概念とセットアップ
  2. プロジェクトのセットアップ：Vite、レイアウト、開発サーバー
  3. 最初のコンポーネントとレンダリング
← React Academyに戻る