React文法チートシート

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
Reactチートシート | コレワカ

Reactとは

ReactはUI構築のためのJavaScriptライブラリのこと
React公式サイト

基本的な書き方

HTML

<div id="app">
  <!-- React.js適用範囲 -->
</div>

JSX

class App extends React.Component{
  render(){
    return <div>Hello World</div>;
  }
}
const ROOT = document.querySelector('#app');
ReactDOM.render(<App/>, ROOT);

コンポーネント

基本コンポーネント

Reactコンポーネントを作成する

See the Pen
React_component by engineerhikaru (@engineerhikaru)
on CodePen.

関数コンポーネント

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

See the Pen
React_function by engineerhikaru (@engineerhikaru)
on CodePen.

ネスト

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

See the Pen
React_nest by engineerhikaru (@engineerhikaru)
on CodePen.

イベント

onClick

clickイベントを設置する

See the Pen
React_onClick by engineerhikaru (@engineerhikaru)
on CodePen.

onChange

changeイベントを設置する

See the Pen
React_onChange by engineerhikaru (@engineerhikaru)
on CodePen.

ライフサイクル

constructor

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

See the Pen
React_constructor by engineerhikaru (@engineerhikaru)
on CodePen.

componentDidMount

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

See the Pen
React_componentDidMount by engineerhikaru (@engineerhikaru)
on CodePen.

shouldComponentUpdate

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

See the Pen
React_shouldComponentUpdate by engineerhikaru (@engineerhikaru)
on CodePen.

componentWillUnmount

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

See the Pen
React_componentWillUnmount by engineerhikaru (@engineerhikaru)
on CodePen.

その他

JSの埋め込み

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

See the Pen
React_jsembed by engineerhikaru (@engineerhikaru)
on CodePen.

コメント

See the Pen React_comment by engineerhikaru (@engineerhikaru) on CodePen.

この内容について

この内容は、私が運営しているサイトに、より見やすく掲載しているので、よければそちらもご活用ください。
Reactチートシート | コレワカ