下記を参考 Expo の Expo Application Services (EAS) をざっくりと説明してみる (zenn.dev) React Native + ExpoのアプリにHermes、EAS Build、EAS Submitを導入した (zenn.dev)

遷移する画面にパラメータを渡すのではなく、reduxのようにしたい場合があると思います。ここではreduxではなくzustandを導入します。 （プロジェクト）/App.js import { StatusBar } from 'expo-status-bar'; import { Button } from 'react-native'; impor…

React Navigationというライブラリを使用します。 import { StatusBar } from 'expo-status-bar'; import { Button, StyleSheet, Text, View } from 'react-native'; import { NavigationContainer} from '@react-navigation/native'; import { createStackN…

import { StatusBar } from 'expo-status-bar'; import { FlatList, StyleSheet, Text, TouchableOpacity, View, Alert} from 'react-native'; const DATA = [ {id:1, title:'JavaScript'}, {id:2, title:'Java'}, {id:3, title:'Python'} ]; const renderIt…

import { StatusBar } from 'expo-status-bar'; import { FlatList, StyleSheet, Text, View } from 'react-native'; const DATA = [ {id:1, title:'JavaScript'}, {id:2, title:'Java'}, {id:3, title:'Python'} ]; const renderItem = ({item}) => { retur…

import { StatusBar } from 'expo-status-bar'; import { TextInput } from 'react-native'; import { StyleSheet, Text, View, Button} from 'react-native'; import { useState } from 'react'; export default function App() { const [inputText, setInp…

Textについては、下記参照 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View } from 'react-native'; export default function App() { return ( <View style={styles.container}> <Text style={styles.text}>Good Morning</Text> <StatusBar style="auto" /> </View> ); } const styles = StyleSheet.…

コード記述の点で、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が有用で…

３つのファイルに分けて記載してます。 create-react-appを使用して作成してます。 index.js［（プロジェクト）/src 直下］ import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import r…

プロジェクトを用意します。 ここでは、react-tailwind-firstとします。 コマンドプロンプトで、プロジェクトを作成したディレクトリに移動し、 npx create-react-app react-tailwind-first と入力しEnter。 次にtailwindを使えるようにします。 ブログ記事…

やはり、React.jsをやっていく、ひいては、React Nativeをやっていく上では、CSSの知識（CSSそのものが必要な場合あるいはそれに類したもの）が必要となるため、覚悟を決めて、CSSを学習してみる。 React.jsの環境だと、エディタでの変更がすぐにブラウザに…

zenn.dev 上記と同様に下記を使ってみたが、時間がうまく扱えない。 date-fns.org ので、js-Jodaをしてみたが、React.jsではうまく読み込めず、エラーメッセージも意味不明。 なので、Day.jsを試してみた。これは、以前のMoment.jsの後継に当たる？ようであ…