今回はReactの基本的な用語をまとめます。
Reactで出てくる用語が分からない時の参考になれば幸いです。
SPA(シングルページアプリケーション)
これは、単一のHTMLページでアプリケーションの実行に必要なすべてのアセット（JavaScriptやCSSファイルなど）をロードすることができるアプリケーションです。ページのリロードが発生しないため、ユーザーが快適に使用することができます。
また、全てをシングルページアプリケーションで構築せずとも、既存のウェブサイトの一部分だけを拡張し使用することも可能です。
ES6、ES2015、ES2016 など
これらの頭字語は全て、ECMAScript言語の標準仕様の最近のバージョンのことを指しています。JavaScript言語とはこれらの仕様に対する実装です。また、アロー関数やクラス、テンプレートリテラル、let, constステートメントなどはES6バージョンで追加されており、できることの幅が大きく変化しています。
コンパイル
プログラミング言語を、動作する機械が理解できるように翻訳する作業のことです。
コンポーネント
ページに表示されるReact要素を返す、小さく再利用可能なコードのことです。再利用できることは、プログラミングにおいてとても重要です。
種類
class component
クラスによって定義されたコンポーネント
- React.conponentを継承する。
- ライフサイクルやstateをもつ。
- propsにはthisが必要である。
- renderメソッド内でJSXをreturnする。
functional component
関数型で定義されたコンポーネント
- ES6のアロー関数で記述する。
- stateをもたない。
- propsを引数に受け取る。
- JSXをreturnする。
props
Reactコンポーネントへの入力のことです。親コンポーネントから子コンポーネントへと順番に渡されるようなデータです。
また、読み取り専用なため、変更されるべきではありません。
state
コンポーネント内で管理する変数のことです。
あるコンポーネントが時間とともに変化するデータと関連付けられている場合はstateが必要です。
stateとpropsの大きな違いは、propsは親コンポーネントから渡されますが、stateはコンポーネント自身によって管理されるということです。コンポーネントは自身のpropsを変更することができませんが、state は変更することができます。
ライフサイクルメソッド
コンポーネントの様々なフェーズにおいて実行される特別な関数です。
コンポーネントの時間の流れは、生まれて、成長して、消えていくまでの循環です。それぞれの段階で必要な処理を記述します。
Mounting→Updating→Unmounting
これをなぜ使うのかと言いますと、関数の外に影響を与える関数を記述するためです。
最後に
Reactを学習する上で登場する基本的な用語を自分なりにまとめてみました。また、Reactの特徴の一つであるJSXについては別の記事にて書かせていただいておりますので、そちらも見て頂けたら幸いです。
URL : https://qiita.com/Taisei-rgb/items/137f24d6256d71bab90a
ここまで記事を読んでいただきありがとうございました。React学習中の方の少しでも参考になれば幸いです。今後もフロントエンドをメインにアウトプットをしていきますので、今後ともよろしくお願い致します。