create-react-appの仕様

Question

前提・実現したいこと

最近reactの学習をはじめました。　ググって、先人の方が色々残してくれたサンプルコードを色々試しています。
create-react-app コマンドでできた雛形の App.js が

function App() {
..

で始まるものと、

Class App Extends Component {
・・

のものとがあります。これは、create-react-appのバージョン違いによるもので生成されるスクリプトが変わると認識しています。

これから学習する場合、新しい方の記述（この場合 function App() )で慣れるべきと考えていますが、
できれば、　Class App Extends Component 　で記述されているサンプルコードを咀嚼して新しい書き方に変換できるように
なりたいです。
この違いや背景を理解したいのですが、どこを読めば良いかわかりません。
初心者で恐縮ですが、ご教授いただけると大変助かります。

Answer 1

コンポーネントを関数で定義するものを関数コンポーネント、クラスで定義するものをクラスコンポーンネントと呼びます。

最初はクラスコンポーネントだけでした。

次に、関数コンポーネントが登場しました。

この両者の使いわけは、

• リスト状態やライフサイクルメソッドをもたせなければならないコンポーネントをクラスコンポーネントで定義する
• リスト状態もライフイクルメソッドをもたせる必要がないメソッドを関数コンポーネントで定義する

でした。
2019年にhooksが登場しました。これは関数コンポーネントに状態やライフサイクル処理をアドインできるものです。これによってクラスコンポーネントは不要となり、すべてを関数コンポーネントで定義できる(ごく少数の例外、たとえばエラー境界除く)ようになりました。

Answer 2

create-react-appのバージョンでも変わりますが。Reactの歴史によるものかと思います。

Reactは書き方が比較的変わっていきます。

現在は function App()という書き方が主流ですが、こちらに変わったのはReact Hooksを使うようになったからかと思います。
それまではステートレスファンクショナルコンポーネント（SFC)という形でステートを持たないコンポーネントをレンダリングするために使われていました。

反対にステートを持つコンポーネントを作るために、 class App extends React.Component{}の記述が使われており、 コンストラクターでステートの定義をしていましたがReact Hooksが主流になってきたことでクラスコンポーネントよりステートレスファンクショナルコンポーネントが使われるようになってきたのだと思います。