React ~基礎編~ コンポーネント

react

React学習記録

前回のReact ~基礎編~ 事前準備では、学習を始めるにあたって必要な環境を準備しました。

今回から、早速、Reactの学習を始めましょう。

コンポーネント

コンポーネントには、「クラスコンポーネント」と「関数コンポーネント」の2種類があります。

クラスコンポーネント

クラスコンポーネントは、Reactのベースのコンポーネントです。javaScriptのクラス内にロジックを記述します。renderは、必須です。

デモ

簡単なサンプルコードを描いてみましょう。

表示結果です⬇︎

前述の通り、クラスコンポーネントでReactのコンポーネントをHTML内に埋め込みました。

index.html内に記述した「<div id=”root”></div>」のHTML要素をindex.js側で取得し、作成しておいた<Hello/>コンポーネントをマウントする、といった具合です。

クラスコンポーネントでは、React.Component を継承した独自のコンポーネントを作成することが可能です。

複数のタグを返したい場合は、次のようにdivタグで囲みます。

関数コンポーネント

関数コンポーネントは、javaScriptの関数内にロジックを書きます。renderメソッドは必要ありません。単に、コンテンツを返すだけです。

デモ

簡単なサンプルコードを描いてみましょう。

表示結果です⬇︎

コンポーネントの違い

クラスコンポーネントと関数コンポーネントには、いくつかの違いがあります。

  • どちらもpropsを受け取り、コンテンツを返す
  • 関数コンポーネントは、ステートやライフサイクルメソッドを利用できない
  • hookの導入により、フル機能の関数コンポーネントを実装できるようになった

現時点では分からない用語が出てきたと思いますが、気にせず学習を進めましょう。

次回

次回は、JSXについて学びましょう。

コメントを残す