React におけるコンポーネントの作成とネスト

はじめに

React ドキュメントへようこそ！この実験では、コンポーネントの作成とネストについて学びます。

これは Guided Lab です。学習と実践を支援するためのステップバイステップの指示を提供します。各ステップを完了し、実践的な経験を積むために、指示に注意深く従ってください。過去のデータによると、この初級レベルの実験の完了率は 93%です。学習者から 97% の好評価を得ています。

VM には既に React プロジェクトが用意されています。一般的には、App.js にコードを追加するだけです。

依存関係をインストールするには、次のコマンドを使用してください。

npm i

React アプリケーションはコンポーネントで構成されています。コンポーネントは独自のロジックと外観を持つ UI（ユーザーインターフェイス）の一部です。コンポーネントはボタンほど小さくても、ページ全体ほど大きくても構いません。

React コンポーネントはマークアップを返す JavaScript 関数です。

// App.js
function MyButton() {
  return <button>I'm a button</button>;
}

MyButton を宣言したので、別のコンポーネントにネストすることができます。

// App.js
export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

<MyButton /> が大文字で始まることに注意してください。これが React コンポーネントであることを示しています。React コンポーネント名は常に大文字で始める必要があり、HTML タグは小文字でなければなりません。

export default キーワードは、ファイル内のメインコンポーネントを指定します。JavaScript の構文に慣れていない場合は、MDN と javascript.info に素晴らしいリファレンスがあります。

プロジェクトを実行するには、次のコマンドを使用してください。その後、Web 8080 タブを更新して Web ページをプレビューできます。

npm start

おめでとうございます！コンポーネントの作成とネストの実験を完了しました。スキルを向上させるために、LabEx でさらに実験を行って練習してください。