Reactチートシート

Reactとは

ReactはUI構築のためのJavaScriptライブラリのこと

基本文法

ReactはReactコンポーネントを用いて、実装します

<div id="app">
  <!-- React.js適用範囲 -->
</div>
<script src="〇〇.jsx"></script>
import React from 'react';
import ReactDOM from 'react-dom';
class App extends React.Component{
  render(){
    return <div>Hello World</div>;
  }
}
const ROOT = document.querySelector('#app');
ReactDOM.render(<App/>, ROOT);

コンポーネント

基本コンポーネント

Reactインスタンスを作成

class App extends React.Component{
  render(){
    return <div>Hello World</div>;
  }
}

関数コンポーネント

関数表記により定義されたコンポーネント。状態制御やクラス構造が不要な場合に使用

function Func(props){
  return <div>{props.msg}</div>;
}

ネスト

定義したReactコンポーネントを入れ子にする

import React from 'react';
class Par extends React.Component{
  render(){
    return <div><Chi /></div>;
  }
}
class Chi extends React.Component{
  render(){
    return <div>Hello World</div>;
  }
}

レンダリング

指定したDOMにレンダリング(出力)する

import ReactDOM from 'react-dom';
const ROOT = document.querySelector('#app');
ReactDOM.render(<App/>, ROOT);

イベント

onClick

clickイベントを設置する

import React from 'react';
class App extends React.Component{
  handleClick(){
    alert();
  }
  render(){
    return <button onClick={(e) => this.handleClick(e)}>ボタン</button>;
  }
}

onChange

changeイベントを設置する

import React from 'react';
class App extends React.Component{
  state = {text: ''};
  handleChange(e){
    this.setState({text: e.target.value});
  }
  render(){
    return(
      <div>
        <input onChange={(e) => this.handleChange(e)}/>
        <p>{this.state.text}</p>
      </div>
    );
  }
}

ライフサイクル

constructor

Mounting時に一番最初に呼ばれるメソッド。主にstateの初期化に使用

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = { text: 'Hello World' };
  }
  render(){
    return <div>{this.state.text}</div>;
  }
}

componentDidMount

ComponentがDOMにMountされた後に呼ばれるメソッド。主にAjaxの処理やsetIntervalなどのイベントに使用

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = { cnt: 0 };
  }
  componentDidMount(){
    setInterval(()=>{ this.setState({ cnt: this.state.cnt + 1 }) }, 1000);
  }
  render(){
    return <div>{this.state.cnt}</div>;
  }
}

shouldComponentUpdate

新しいprops,stateを受け取りレンダリングされる前に呼ばれるメソッド。主に不要な再レンダリングを抑制してパフォーマンスの低下を防ぐ目的で使用

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = { cnt: 0 };
  }
  shouldComponentUpdate(nextProps, nextState){
    if (this.state.cnt !== nextState.cnt) { return true; }
    return false;
  }
  handleClick(e){
    this.setState({ cnt: this.state.cnt + 1 });
  }
  render(){
    return <button onClick={(e) => this.handleClick(e)}>カウント: {this.state.cnt}</button>;
  }
}

componentWillUnmount

ComponentをUnmountされる時に呼ばれるメソッド。主にcomponentDidMountの処理の解除で使用

import React from 'react';
class App extends React.Component{
  constructor(props){
    super(props);
    this.state = { cnt: 0 };
  }
  componentDidMount(){
    this.interval = setInterval(()=>{ this.setState({ cnt: this.state.cnt + 1 }) }, 1000);
  }
  componentWillUnmount(){
    clearInterval(this.interval);
  }
  render(){
    return <div>{this.state.cnt}</div>;
  }
}

その他

JSの埋め込み

JSXの記述部分にJSを埋め込む

import React from 'react';
class App extends React.Component{
  render(){
    const text = "Hello World";
    return <div>{text}</div>;
  }
}

コメント

コメントアウトする

import React from 'react';
class App extends React.Component{
  render(){
    // コメント
    return <div>{/* コメント */}</div>;
  }
}