はじめに
Reactに今まで全く触れてこなかったのですが、元々興味があったため最近になって少し勉強をし始めました。
その中で、新しい内容や概念が多く登場したため簡単に調べた内容を簡単にまとめてみます。
自分がプログラミングに触れてから時間も浅いため、この内容も初学者向けのものになります。
React.jsとは
Facebook社が公開している,UIのパーツ（構成部品）を作るためのライブラリです。
React.jsの特徴
- UIの機能追加に特化しており、ユーザーが使いやすいUIを作りやすくしてくれる
- 効率よく処理を行い、できるだけユーザーが操作にストレスを感じないように高速で動作する
- コンポーネント指向 (UIを部品化して管理を行いやすくし、再利用をしやすくする設計手法の1つ)
JSX
JavaScript XMLの略で、JavaScriptを拡張した言語です。
テンプレート言語の一つになります。
JSXの特徴
- HTML風に書けるため可読性が高い
- HTMLのタグが使える
- JSXTransfomerが自動でコンパイルをしてくれる
実際にAppクラスを定義してその中に、JSXで画面にHello world.と表示するコードを書いてみます。
import React, { Component } from 'react';
class App extends Component {
render() {
return <h1>Hello world.</h1>;
}
}
export default App;
このように直感的に書くことができることがメリットとなります。
JSXでの記述だけを見ると、1行目のimport React, { Component } from 'react';は必要無いようにも思えますが、JSXで記述したものはwebpackコマンド実行時に内部的にbabelが呼ばれて、以下のように変換されることにより一般的なWebブラウザでも解釈できるJavaScript構文へと変換されています。
import React, { Component } from 'react';
class App extends Component {
render() {
return React.createElement (
"h1",
null,
"Hello world."
);
}
}
export default App;
そのため、JSXを使用するためには1行目の記述が必要になります。
Component(コンポーネント)
- クラスコンポーネント
- ファンクショナルコンポーネント(関数コンポーネント)
の2種類があります。
props
コンポーネントのプロパティのことです。
親コンポーネントから子コンポーネントへの受け渡しが出来るが、受け取ったpropsの変更や更新は出来ません。
なお、関数の受け渡しも可能です
propsの参照
this.props
defaultProps
propsのデフォルト値を設定できます。
propTypes
propsのバリデーションです。
// 型のチェック
Hoge.propTypes = { num: PropTypes.number }
//型と値の有無のチェック
Hoge.propTypes = { num: PropTypes.isRequired.number }
state
コンポート内部の状態のことであり、コンポーネント内で使用できる値です。
値が変更される度にrenderが走ります。
propsと似ているようで違います。
propsとの違い
- 使用箇所
- props: 親コンポーネントから子コンポーネントへ受け渡してが可能
- state: そのコンポーネント内部でのみ使用可能
- 変更、更新
- props: 不可
- state; 可
stateの参照
this.state
初期値の設定
constructorメソッドを使用します。
なお、constructorメソッドにはpropsを渡すことができます。
constructor(props) {
super(props);
this.state={
hoge: 0,
};
}
値の更新
setStateメソッドを使用します。
this.setState({hoge: 1});
setStateメソッドを使用して更新するとレンダリングがされるのですが、以下の方法ではレンダリングがされないため非推奨となっています。
this.state.hoge = 1;
おわり
今回はReact.jsで必須となる知識について自分のアウトプットも兼ねて書きました。
最後まで見ていただき、ありがとうございました。