Reactで使われる用語などを自分用にまとめました。
認識間違っている部分ありましたら教えてください。
Reactでできること
・スライドショー
・ポップアップウィンドウ
・カウントダウン
・入力金額の自動化
・ブラウザ制御
・Ajax
など、JavaScriptでできることは大体できる。
コンポーネント
コンポーネントとは、画面上で表示される部品のこと。
一つのページに表示する要素を一つのファイルに全て記述するということではなく、
ボタン用のコンポーネント、フォームのコンポーネントなど、表示される要素を細分化して部品として扱い、それをまとめて表示するイメージ。
コードはhttps://ja.legacy.reactjs.org/docs/components-and-props.html から引用
クラスコンポーネント
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
関数コンポーネント
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
webアプリには画面上にコンテンツを表示するだけではなく、非同期にデータを保存するとか、新しい画像を呼び出して古い画像は削除するなど、複数の処理が入るのが常。
それら複数の処理をまとめてしまおう！というのが 関数 。
上記のコードであればWelcome関数はh1タグで「Hello, {引数の中に入っている名前}」が表示される。
returnで表示するエレメント（要素）を返すというのが基本的な形で、
return null; もしくはreturn false;とすれば空の要素が返せる。
こちらが主流になっている。
React Hooks
関数のコンポーネントに様々機能を追加できるもので、Reactの人気に火をつけた立役者。
React Hooksには複数の機能がある。
JSX
「JavaScript XML」の略。JavaScriptの拡張機能でHTMLタグの記述ができる。
コンポーネント化している（Reactは部品ごとにHTML/CSS/JavaScriptをまとめている）
HTMLファイルで<script type="text/babel"></script>でくくるとHTMLタグを表示することが可能になる。
フラグメント
Reactのコンポーネントは親要素を一つしか持つことができないので
<> </>（フラグメント）で囲うことで複数要素を表示できる。<React.Fragment></React.Fragment>や<div></div>で囲っても同じ結果になる。
function App() {
return (
<>
<p>フラグメント</p>
<p>表示できるかな</p>
</>
);
}
随時追加していきます。