Help us understand the problem. What is going on with this article?

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チートシート | コレワカ

engineerhikaru
💻Web制作 / 📱アプリ開発に役立つ情報を発信するアカウントはこちら / システム開発〜Web制作〜アプリ開発を経験
https://korenarawakaru.com/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away