Vue.jsを使用している際にもVuexやVue Routerなどで、 Stateを全てのコンポーネントに渡すことができるという機能がありましたが、 そのReact版がReact Reduxです。大まかに、React Reduxを使ったState/Store/Actionの設定まとめをしていきます。 React Redu…

Reactにはpropsとよく似たものにstateという機能があります。 こちらもコンポーネントに対して値を渡すことができる機能ですが、 propsが静的な値（変化しない値）である一方、stateはコンポーネント内で値を変更させることができます。以下がその使用例です…

propTypesによって、propsから受け取る値のタイプを定義することができます。 エラーは出ませんが、警告を出してくれます。 バリデーションのような感じで使えます。 import React from 'react'; import PropTypes from 'prop-types'; // インポートする con…

propsを設定したコンポーネントをレンダリングする際に、デフォルトで値をもたせたいという場合があります。そのような際には以下のようにdefaultPropsという設定を行いましょう。 import React from 'react'; const App = () => { const details = [ {name:…

未だに使い慣れていないJavaScript版foreachのmap関数。 たまたまpropsと組み合わせて使用する機会があったため、記録として残します。 import React from 'react'; const App = () => { // ①リストレンダリングするためのオブジェクトを用意 const details …