◾️render内の処理の実装 状態やActionはインスタンスのpropsが渡していくので、propsを変数として入れておく。表示する値は、reducer内のcountのオブジェクトのvalueの値であるので、props.valueを設定する。onClickに対応するメソッド・コールは、increment…

◾️connect関数 connect関数を使用して、StateやActionと、Componentとの関連付けを行って、Viewのイベントで状態を遷移させて、遷移後の状態を画面に再描画する。まず、react-reduxからconnect関数をインポートする。 次に、定義したいComponentを一つにする…

◾️store アプリケーションで扱う状態の変更を担うreducerを元にstoreを作成する。そのstoreがアプリケーション内のすべてのcomponentで使用できるようにするための仕込みを行う。 reduxパッケージから提供されているstoreを作成するための関数であるcreateSt…

◾️Reducer Actionが発生した時に、そのActionに組み込まれているtypeに応じて状態stateをどう変化させるのかということを定義する。 srcのディレクトリーに、reducersを作成し、その中にindex.js、count.jsを作成する。 index.jsは、アプリケーション内に存…

◾️Redux Reduxは、Facebookの提唱するFluxアーキテクチャに基づいて設計されたJavaScriptフレームワークで、特にComponentの階層が大きくなった時に状態を共有する手段として便利である。 $ yarn add redux react-redux Reduxは、Actions -> Reducers -> Sto…

◾️State（~ 続き） ボタンを置いてクリックしたらカウントアップする実装を行う。 コンストラクタで初期値を割り当てた状態は、その状態を変更するときは、setStateで行う import React, { Component } from 'react'; const App = () => (<Counter></Counter>) class Counter ex…

◾️State ReactのComponentでは、Componentの内部で状態をもつことができる。内部の状態をStateという。 PropsとStateの違い Propsは親のComponentから値を渡されたのに対して、StateはComponentの内部でのみ使用される。 Propsは変更不可能(immutable)な値、…

◾️PropTypes PropTypes：プロパティに対する型チェックをするためのパッケージ ライブラリ名を「prop-types」、ライブラリからインポートしたモジュール名を「PropTypes」 まず、PropTypesをインポートする import PropTypes from 'prop-types' 次に、コンポ…

◾️Component 1) Class Component：AppというクラスがComponentを継承して存在 import React, { Component } from 'react'; class App extends Component { render() { return ( <React.Fragment> <label htmlFor="bar">bar</label> <input type="text" onChange={() => {console.log("I am clicked!")}}></input> </React.Fragment> ) } } …

◾️App.jsの importのReactがないと、、、 import { Component } from 'react'; class App extends Component { render() { return <h1>Hello, world!</h1> } } export default App; 以下のように怒られてしまう。 ./src/App.js Line 5: 'React' must be in scope when…

gitで新しくブランチを切って、不要なファイルを削除 $ git rm src/App.css $ git rm src/logo.svg $ git rm src/App.test.js 不要なコードを削除した後のApp.js import React from 'react'; function App() { return <div><h1>Hello, world!</h1></div> } export default App; …

Githubでレポジトリを作成し、ローカルにクローン $ git clone https://github.com/xxxxxx/react-redux-crud-app.git yarn でcreate-react-appをインストール $ yarn global add create-react-app yarn global listでグローバルにインストールされているモジ…