初めに
フロントエンド開発初心者がReactの案件に参画することになったため、チュートリアル等で勉強し得た知識をまとめてみました。
Reactとは
Reactはユーザーインターフェース(UI)を構築するためのJavaScriptライブラリです。
UIを「コンポーネント」という小さく独立した部品を組み合わせて構築することができます。
Reactの使用例
実際にReactを使ったサンプルアプリを見てみましょう。
以下は押されたボタンによって値を増減させる簡単なカウンターアプリです。
See the Pen Counter by Amsel (@amsel1676) on CodePen.
class Counter extends React.Component{
constructor(props){
super(props);
this.state = {
count: 0,
};
}
render(){
return (
<div>
<div className="title">Counter</div>
<button
className="minusButton"
onClick={() => this.setState({count: this.state.count-1})}
>
-
</button>
<div className="counter">{this.state.count}</div>
<button
className="plusButton"
onClick={() => this.setState({count: this.state.count+1})}
>
+
</button>
</div>
);
}
}
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
Counterコンポーネント
class Counter extends React.Component{
constructor(props){
super(props);
this.state = {
count: 0,
};
}
render(){
return (
<div>
<div className="title">Counter</div>
<button
className="minusButton"
onClick={() => this.setState({count: this.state.count-1})}
>
-
</button>
<div className="counter">{this.state.count}</div>
<button
className="plusButton"
onClick={() => this.setState({count: this.state.count+1})}
>
+
</button>
</div>
);
}
}
上のコードのCounterがReactコンポーネントです。
Counterコンポーネントはpropsというパラメータを受け取り、constructorメソッドで値を初期化させ、renderメソッドで表示するビューの説明書である仮想DOMを返却します。
Counterコンポーネントはstateというオブジェクトでアプリケーションの状態を保持して、状態が変わるごとにその差分を再レンダリングする仕組みになっています。
この状態管理の仕組みにより、上のサンプルアプリではボタンを押した結果がすぐに画面に描画されるようになっています。
コンポーネント呼び出し
ReactDOM.render(
<Counter />,
document.getElementById('app')
);
上記がコンポーネントの呼び出し部分となります。
ReactDOM.renderメソッドはCounterコンポーネントが返却した仮想DOMを指定したDOMにレンダリングします。
JSX
上のコードはJavaScriptとHTMLタグが入り混じったような特徴的な見た目をしていますが、これはJSXを用いて書かれているためです。
JSXとは「JavaScript XML」の略で、XML風に作られたJavaScriptの拡張シンタックスです。
JSXのメリット
JSXはあくまで拡張シンタックスであり、JSXで書かれたコードはBabelを通じてJavaScriptの関数呼び出しへと置き換えられます。
つまりReactはJSXを使用せずに書くことが可能です。
JSXを使用せずに書くと以下のようになります。
function Welcome(props){
return React.createElement(
'h1',
null,
`Welcome ${props.name}`,
);
}
ReactDOM.render(
<Welcome name="Tom" />,
document.getElementById('app')
);
同様のコードをJSXを使用して書くと以下のようになります。
function Welcome(props) {
return <h1>Welcome, {props.name}</h1>;
}
ReactDOM.render(
<Welcome name="Tom" />,
document.getElementById('app')
);
このようにJSXを使用することでHTML風に構造が可視化され、可読性が向上します。