■ bindするのは、アロー関数を使ってハンドラを書いていない時 constructor(props) { super(props); this.onTap = this.onTap.bind(this); } onTap() { console.log("tapped!!"); } onTap2 = () => { console.log("you don't need to bind this."); } render…

MobXプロジェクトをCRAで作りたくて、Decoratorsを有効にしたいんだけど、という時に使用 create-react-app <app_name> --scripts-version custom-react-scripts参考medium.com</app_name>

React用ルーティングライブラリ github.comReact単体だと、URLとアプリの描画状態が紐付いていない。 ルーティングライブラリを導入すると、、 ・特定URLを打ち込むと、特定の画面に遷移 ・特定の画面状態を、URLに反映 が、できるようになる‍♂️web向けに導…

React Redux is the official React binding for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update data.Reactコンポーネントが、Reduxの管理するストアからデータを読み、ストアに向けて…

react-reduxを使う際に、良しとされているコンポーネント分離の考え方。 最近ではHooksを利用するやり方も？Container Component・ReactとReduxの連携役 ・ReduxからActionやStateを受け取ってPropsとして渡す ・JSXを入れない ・ラップ用のdivを除いて、自…

Redux: Fluxの概念を拡張したstate管理ライブラリ・Store: アプリの状態（state）とロジックを保持 ・Reducer: Storeが保持する状態を変化させる関数 ・Action: 状態変化を起こすメッセージオブジェクト補足） ・FluxにはDispatcherの概念があるが、こちらに…

配下にあるコンポーネントにハンドラを受け渡し、そのハンドラ内でsetStateする場合、あらかじめthis参照を親インスタンスにバインドしておく必要がある。JavaScriptにおいては関数を変数として渡す際、コンテキスト（this参照）については渡されない為。実…

とにかく、元のstateにある配列を直接いじらないこと。 class Shelf extends Component { constructor(props) { super(props); this.state = { books: [{ id: 0, title: "Never Ending Story" }], controlId: 1, }; } addBook(title) { const { books, contr…

Functional Component import React from 'react'; const Cheers = (props) => { return <div>Hello, {props.name}!!</div>; } Class Component ・stateを利用してコンポーネントの状態を記録できる ・ライフサイクルメソッドを利用できる import React from 'react'; c…

マストで入れるやつ👨‍🌾chrome.google.comあとはReactタブ選んで左側のターゲットアイコン使って、調べたいエレメントをクリック👆 Redux用はこっち chrome.google.com

ReactのJSX展開が試せたりする🤓

npm 5.2 からcreate-react-appが標準で使える $ npx create-react-app <app-name> Redux インストール $ npm i react-redux redux</app-name>