どーも、フリーランスエンジニアのyutaです。
以前は仕事でReact.jsを使ってたのですが、最近全然使ってなくて。
そしたらまた直近で使う機会が出てくることになったので、思い出しながらReact.jsについてまとめます。
React.jsとは
React.jsとはUI等の見た目を構築するためのJavaScriptのライブラリです。開発はFacebookとコミュニティによって行われています。
それまで全体を更新することで行ってたDOM操作を、仮想DOMという差分描画で圧倒的に速く処理することができるようになってます。
ちなみにJSXというHTMLに似た記法で見た目を作ることができます。
さらっと使ってみる
CDNリンクを使ってさらとReactとJSXを使ってみることも出来ます。サンプルを載せますので、下記コードでhtmlファイルを作りブラウザでアクセスしてみてください。
<!DOCTYPE html>
<html>
<head>
<script crossorigin
src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin
src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class HelloMessage extends React.Component {
constructor(props) {
super(props);
this.state = {name: 'state'}
}
render() {
return (
<div>
<h1>Hello {this.props.name}!</h1>
<h1>Hello {this.state.name}!</h1>
</div>
);
}
}
ReactDOM.render(<HelloMessage name='props'/>, document.getElementById('root'));
</script>
</body>
</html>
参考：https://reactjs.org/docs/react-without-jsx.html
今回はReactでよく使うprops、state、componentを一通り使ってみました。少し説明します。
propsとは
propsはプロパティの意味で、主に属性として設定できる値で親から子要素へデータを渡す際に利用します。
サンプルでは下記の部分で利用してます。
//Appコンポーネントに対しnameのpropsを渡して、
<App name='props data'/>
//Appコンポーネント内で利用してる
<h1>Hello World {this.props.name}!</h1>ちなみに子要素内でpropsを直接書き換えるのはNGです。
stateとは
stateは状態を管理するもので、コンポーネント利用時に設定できます。propsと違い後から変更も可能です。
サンプルでは下記の部分で利用してます。
//this.stateに対しnameをセットし
this.state = {name: 'state'}
//{}で囲み取り出す
<h1>Hello {this.state.name}!</h1>
//サンプルのrender()直下に下記を加えると1秒後に書き換わる
setInterval(() => {
this.setState({name: '変えちゃうぞ！'});
}, 1000);ちなみにstateがないstatelessな場合はfunction componentと呼び、下記のように書けたりもします。
function StatelessHelloMessage(props) {
return <div>Hello {props.name}</div>;
}
//アロー関数を使った場合
const StatelessHelloMessage = (props) => {
return <div>Hello {props.name}</div>;
}アロー関数を使うとかなり簡潔ですね。
componentとは
componentを使うとUIを再利用可能な部品に分割することができます。イメージとしてはJavaScriptの関数と同じような感じです。
renderメソッドでJSX等の画面に表示するものを返してくれます。
サンプルでは下記の部分で利用してます。
//コンポーネントを作成し(サンプルより少し省略)
class HelloMessage extends React.Component {
render() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
}
//ここで利用する指定をしてます。
ReactDOM.render(<HelloMessage/>, document.getElementById('root'));最後に
React入門として記事を書いてみましたが、いかがでしたでしょうか？
React + TypeScriptの記事を書いてみようと思います。
