コード記述の点で、React.jsとの最大の違いは、 HTML風のタグを使っていたが、React Native独自のタグ（XML仕様）を使用する点である。 このため、部品さえ指定すれば自動的に作成してくれていた部分をある程度記載しないと部品が表示されないようになってい…

分かりやすくするために、zustand関連ホームページで最も一般的な記載で作成するものとする。 ［プロジェクト］/src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; const …

Reactでのフォームの使い方は下記HP参照 https://www.w3schools.com/react/react_forms.asp Redux Formを使うという手もあります。 ReactでRedux Formを使ってフォームの管理をしてみる|やまでぃーのブログ 他には、React.jsでもReact Nativeでも使用できる…

前出の車の種類ごとのカウンターをzustandを使って作成したいと思い立ちました。 その前に準備です。 カウンターのプラスボタンのみのアプリケーションを作成してみます。 ［プロジェクト名］/src/App.js import useStore from './store'; function App() { …

ReduxやRedux toolkitの恩恵を感じるため以前作成したものがありましたが、備忘録を作成していてこれでは十分な恩恵を享受できないとわかったので、 更に細分化し、suvに具体的な車種を3つ、普通車にも車種を3つ追加して作成することとします。

https://himenon.github.io/docs/javascript/introduction-code-dependency/ https://www.jetbrains.com/help/webstorm/module-dependency-diagram.html 上記が見つかりましたので、今後使い方を学習していきます。

最近、useReducerなるHookが出てきたようです。 reffect.co.jp これを使うと、Reduxを使わなくてよいかも。 概念自体はReduxそのものですけど。 ただし、ここでは、useReducer出現以前の話をすることとし、 Reduxが推奨しているRedux toolkitを使用すること…

ここからは『Reactの公式ドキュメントを読み解く』と題して、React.jsの総復習を行ってみたいと思います。 Quick Start – React App.js function MyButton() { return ( <button> I'm a button </button> ); } export default function App() { return ( <div> <h1>Welcome to my app</h1> <MyButton /> </div>…

React Reduxをある程度理解したあと、下記のHPを読むと整理できます。 参考HP： React Redux の難しかった点をできるだけシンプルに図解 - Qiita これを踏まえたうえで備忘録を箇条書きにしてみました。 ・Stateの更新は唯一Reducerだけが行うことができる …

useDispatchも使用して、 mapDispatchToPropsを消し去り、connectメソッドも消し去る。 ［プロジェクト名］/src/components/App.js import {INCREASE_COUNT} from "../actions"; import {useDispatch} from 'react-redux'; import {useSelector} from 'react…

つぎにHooksを使って書き換えていきましょう。 まず、useSelectorを使って、mapStateToPropsの存在を消し去ります。 ［プロジェクト名］/src/components/App.js import {INCREASE_COUNT} from "../actions"; import {connect} from 'react-redux'; import {u…

さて、stateを変更するアプリケーション作成するには、reducerを作成する際に、その関数の引数に、stateに加え、actionを入れなくてはいけません。 actionを入れるとなると、ActionCreator、dispatchも使用することになります。 下記では、＋ボタンを押すと…

ここでは、Container Componentを作成してやってます。 ［プロジェクト名］/src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './components/App'; import {createStore} from 'redux'; import {Provider…

［プロジェクト名］/src/components/App.js import '../App.css'; import store from '../index'; function App() { return ( <div> <p>MyReact</p> <p>{store.getState().text}</p> </div> ); } export default App; ［プロジェクト名］/src/reducers/text.js const initialState = {…

さて、index.jsを下記のようにしていきます。 ［プロジェクト名］/src/index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import {createStore} from 'redux'; import {Provider} from 'react-redux'…

Reduxの印象としては、登場人物が多く、また、javascriptにありがちで、varietyがあり、初心者にとっつきにくいような感じでした。 Reac初心者でも読めば必ずわかるReactのRedux講座 | アールエフェクト (reffect.co.jp) このホームページを参考して話を進め…

まず、ReduxやRedux toolkitの恩恵を感じるために例を作成します。 完成形がこれです。 よく車の台数をカウントしている光景を見かけますが、車種別にカウントできるようにしました。 具体的には、それぞれの車種別にカウンターがあり、その総数が一番上にカ…

さて、そろそろreduxを勉強しようと思ったのですが、生のreduxは非推奨のようです。 redux toolkitが推奨されているようですので、こちらをやっていきましょう。 www.youtube.com 通しで、どのようなことをやるのかを学習したい場合は上記のYoutubeが有用で…