質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

Q&A

2回答

195閲覧

create-react-appの仕様

kt9999

総合スコア4

React.js

Reactは、アプリケーションのインターフェースを構築するためのオープンソースJavaScriptライブラリです。

0グッド

0クリップ

投稿2019/10/28 09:47

前提・実現したいこと

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

function App() { ..

で始まるものと、

Class App Extends Component { ・・

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

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

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

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

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

この両者の使いわけは、

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

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

投稿2019/10/30 05:23

uehaj

総合スコア16

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

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

投稿2019/10/29 14:34

zma3

総合スコア39

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問