React で ルーティングをする為のライブラリでデファクトスタンダードとなっているのが react-router です。 そして、Web 上で利用できるように DOM にバインディングができるライブラリが react-router-domです。 reacttraining.com github.com ちなみに、r…

Presentational Component(コンポーネント) と Container Component(コンテナー) Presentational Component(コンポーネント) Container Component(コンテナー) カウンターコンポーネントを Presentational Component(コンポーネント) と Container Component…

Qiitaへ「React + TypeScript で react-router の URLパラメーターを取得する」という記事を投稿しました。 qiita.com

タイトルのまま。 「React + TypeScript で State をもつ class コンポーネントを作成するときは、Generics の第二引数に State の型を指定する」 import React, {Component} from "react"; type AppState = { count: number } class App extends Component<…

Storybook + React(TypeScript) の環境で「@storybook/addon-info」と「react-docgen-typescript-loader」を使用して、コンポーネントが受け取るpropsの情報をドキュメントとして生成する事ができるが、特定のコンポーネントでのみ propTables が生成できな…

React Hooks の useState を使用する事で、関数コンポーネントでも状態の管理・更新ができるようになる。 import React, { useState } from 'react' const App = props => { const [state, setState] = useState(props) const {count, amount} = state retur…

これに結構ハマったのでメモ。 reduxForm()が返してくる関数の引数にconnect()で mapStateToProps と mapDispatchToProps を指定する。 import React, { Component } from 'react'; import { reduxForm } from 'redux-form'; import { connect } from 'react…

Qiitaへ「React + Redux の基本的な状態管理を Reducers を起点に考える」という記事を投稿しました。 qiita.com

create-react-app で作成したプロジェクトの React Component で propTypes を指定すると WebStorm で 「Unresolved variable isRequired」とエラーが表示されました。（エディター上のエラー） ググって見ると他にも「Unresolved variable string」とエラー…

default props props を使用している React Component で props が渡されたなかった場合のフォールバックとして default props を指定する事ができます。 default props は、 [コンポーネント名].defaultProps = {}と指定します。 (functional component で…