React文法チートシート

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[Reactチートシート | コレワカ](https://korenarawakaru.com/tech/react/cheatsheet)

## Reactとは
ReactはUI構築のためのJavaScriptライブラリのこと
[React公式サイト](https://ja.reactjs.org/)

## 基本的な書き方

```html:HTML
<div id="app">
  <!-- React.js適用範囲 -->
</div>
```
```jsx:JSX
class App extends React.Component{
  render(){
    return <div>Hello World</div>;
  }
}
const ROOT = document.querySelector('#app');
ReactDOM.render(<App/>, ROOT);
```

## コンポーネント
###基本コンポーネント
Reactコンポーネントを作成する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="PoPyjPY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_component">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPyjPY">
  React_component</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 関数コンポーネント
関数表記により定義されたコンポーネント。状態制御やクラス構造が不要な場合に使用する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="OJyBjym" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_function">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyBjym">
  React_function</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### ネスト
定義したReactコンポーネントを入れ子にする
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="NWGOvxw" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_nest">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/NWGOvxw">
  React_nest</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## イベント
### onClick
clickイベントを設置する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="abvRyNg" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_onClick">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/abvRyNg">
  React_onClick</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### onChange
changeイベントを設置する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="bGVmreY" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_onChange">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/bGVmreY">
  React_onChange</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## ライフサイクル
### constructor
Mounting時に一番最初に呼ばれるメソッド。主にstateの初期化に使用する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="YzyJxGq" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_constructor">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/YzyJxGq">
  React_constructor</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### componentDidMount
ComponentがDOMにMountされた後に呼ばれるメソッド。主にAjaxの処理やsetIntervalなどのイベントに使用する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="MWaPvjz" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_componentDidMount">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/MWaPvjz">
  React_componentDidMount</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### shouldComponentUpdate
新しいprops,stateを受け取りレンダリングされる前に呼ばれるメソッド。主に不要な再レンダリングを抑制してパフォーマンスの低下を防ぐ目的で使用する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="OJyBjbj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_shouldComponentUpdate">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/OJyBjbj">
  React_shouldComponentUpdate</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### componentWillUnmount
ComponentをUnmountされる時に呼ばれるメソッド。主にcomponentDidMountの処理の解除で使用する
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="zYvmdoQ" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_componentWillUnmount">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/zYvmdoQ">
  React_componentWillUnmount</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## その他
### JSの埋め込み
JSXの記述部分にJSを埋め込む
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="PoPyKWj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_jsembed">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/PoPyKWj">
  React_jsembed</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### コメント
<p class="codepen" data-height="265" data-theme-id="default" data-default-tab="js,result" data-user="engineerhikaru" data-slug-hash="JjYmyWj" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="React_comment">
  <span>See the Pen <a href="https://codepen.io/engineerhikaru/pen/JjYmyWj">
  React_comment</a> by engineerhikaru (<a href="https://codepen.io/engineerhikaru">@engineerhikaru</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

## この内容について
この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
[Reactチートシート | コレワカ](https://korenarawakaru.com/tech/react/cheatsheet)