Reactを勉強しようと思ったとき、初学者を惑わす1つの要因が、関数コンポーネントとクラスコンポーネントの存在だと思います。
例えば、textに渡した文字列を表示するコンポーネントを実装する場合、下記のようにfunctionでもClassでも書くことができます。
書き方は違いますが両方とも同じ動作をします。
functionで書かれているものを関数コンポーネント、Classで書かれているものをクラスコンポーネントと呼びます。
export default function Hoge({ text }: { hoge: string }) {
return (
<div>{text}</div>
);
}
import React from "react";
export default class HogeClass extends React.Component<{ text: string }, {}> {
render() {
return (
<div>{this.props.text}</div>
);
}
}
Reactをこれから始める場合、公式ページのチュートリアルをやる人が多いと思います。
こちらのチュートリアルはClassコンポーネントで書かれているので、最初にチュートリアルをした人はClassコンポーネントを使う方が良いのかな？と思う方も多いと思います。
ただ、タイトルに書いた通り、最初は関数コンポーネントを中心に勉強しましょう。
私はReactを使い始めて1年半ほど経ちますが、関数コンポーネントだけで全て実装できています。
Classコンポーネントは、既存のClassで書かれているコンポーネントを触らないといけない場合など、必要になってから学べば良いです。
関数コンポーネントが良い理由
関数コンポーネントが良い理由はクラスよりシンプルに書けるなどの理由もありますが、最大の理由はHooksを使えることです。
Hooksの説明は省きますが、状態管理やデータ通信などの非同期通信を反映などをシンプルに実装することができる仕組みで、動的なページを作る際は必須機能と言って良いほど重要な仕組みです。
詳細は下記、公式ドキュメントをご覧ください。
何から学び始めれば良いか？
公式ドキュメントのチュートリアルはクラスコンポーネントで書かれているのですが、Getting Startedは関数コンポーネントを中心に記載されています。
こちらから始めることをオススメします。
公式ページ以外にもReactについて書かれている記事はネット上に大量にありますが、Hooks登場前後で全然世界が違うので、読み始める前にいつ頃書かれたものかを確認するようにしてください。
Hooksは2019年2月にリリースされたので、2019年を境にHooks＋関数コンポーネントの記事が書かれ始めていると思います。
また、Reactに慣れるまでは、クラスコンポーネントで書かれている記事は古い（可能性が高い）というように雑に覚えておくだけで古い情報に惑わされる可能性が減ると思います。