コードをストックするアプリをスマホに入れるとして、 プログラミングは基本パソコンでするのであまり役に立たないことに気づいてしまいました。 そこで、PWAというキーワードに出会いましたので、このアプリについては、その線で進めていこうと思います。 E…

npx expo install react-dom react-native-web @expo/webpack-config npx expo start --web これ二つでいけそう。 https://docs.expo.dev/workflow/web/ https://docs.expo.dev/distribution/publishing-websites/(Firebase HostingやGitHub Pagesへ挙げる方…

（プロジェクト名）/ App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import RegisterScreen from './src/Screens/RegisterScreen'; import ListScreen from './src/Screens/ListScr…

まず、 ⑤-a．一覧表示(登録フォームの下)をFlatListで作成してますが、そのリストのアイテム内に、deleteボタンを挿入し、そのアイテムに該当するデータを削除できるようにします。 次に、 ⑤-ｂ．editボタンも挿入して、押すと詳細画面へ移行して、そこで編…

https://www.codeinwp.com/blog/react-native-component-libraries/

データ一覧画面の作成をしていきたいと思います。 Firebaseのドキュメントは実情とあっておらず使えませんでした。 ここでは、下記のHPを参考にしようとおもいましたが、これもあわず。 React環境でFirebase SDK v9のFirestoreでのCRUDの操作を学ぶ | アール…

Use React InstantSearch with React Native | Algolia

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…

スプレッド構文とは何だっけ?という方(自分)に対して、Reac Nativeでオブジェクトを扱う場合について調べてみます。 この辺からはより理解を深めるため説明を加えることで自分の学習とします。 オブジェクトとは、下記のような形式のものをいいます。 { name…

yuuzaki2000/FireAuthSample (github.com) npm install firebase@10.1.0 としてます。 Firebase Authenticationと Firestoreを実装しました。 まだ、一覧画面と、検索画面はできておらず、登録画面だけです。 firebaseConfigを別々のところで記載してしまう…

ターミナルでプロジェクトに移動して、 npm install @react-navigation/native@6 @react-navigation/stack@6 としました 下記くらいの機能の使用だけだと、React Navigationの場合は、依存関係のライブラりのインストールは不要なようです。（Documentには記…

下記のドキュメントを読んでみます。 Layout with Flexbox · React Native 英語がわからない人は、下記参考がよいでしょう。 React Nativeスタイリングの手引き (zenn.dev) 以下に二つ例を示します。なぜそうなるかを上のHPを参考に理解してみてください。 …

１．プランニング ２．モデリング ３．スタイリング ４．プログラミング ５．デザイン ６．リリース 順番に従って作成していくこととする。 １．については、まずはコンセプトである。 コードをストックするアプリを作成する。（コード検索画面で、タイトル…

React の流儀 – React (reactjs.org) 今は、Thinking in React に変わっています。これを自動翻訳にすると、React⇒反応、State⇒州などと訳されていて読めたものではありません。 このため古いReactの流儀を読んでみます。 １～４までは理解しやすいです。５…

React Nativeで、Expoを使って、プロジェクトを作成します。 CodeStockBaseという名称で作成します。 npx create-expo-app CodeStockBase 作成できたら、これを下記を参考に、GitHubに上げておきます。 VSCodeでGit・GitHubを使う方法を解説する【初心者向き…

プログラミングの場合、以前自分が書いたコードを参照にして、新たなコーディングをするということがあるでしょう。ただし、どのプロジェクトで書いたかはっきりせず、さがして時間がかかるということがあるでしょう。 自分が使いやすいコードをまとめておく…

【Redux入門】初学者でも理解できるReduxの仕組みを解説します！(Redux Toolkitを使用) - YouTube ひきつづき上記のYoutube動画を参考にして、React Nativeで作成してみます。 （プロジェクト名）/App.js import { StatusBar } from 'expo-status-bar';impor…

まずシンプルに作成 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {useState} from 'react'; export default function App() { const [count, setCount] = useState(0); const inc…

まずシンプルに作成 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {useState} from 'react'; export default function App() { const [count, setCount] = useState(0); const inc…

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, FlatList, TouchableOpacity } from 'react-native'; import { useState } from 'react'; const DATA = [ {id:'1', title:'テキスト１'}, {id:'2', title:'テキスト２'}, {i…

import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, TextInput, Button } from 'react-native'; import {useState} from 'react'; export default function App() { const [name, setName] = useState(""); const [nameText, s…

これまで学習してきたことを演習を通してまとめる意味で別のブログに作成してます。 React Nativeについてのブログ (hateblo.jp)

クラス型コンポーネントだと下記 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import React from 'react'; import { TextInput } from 'react-native'; import {collection, addDoc,getF…

さて、アプリは作成できたとして、いざビルドしようとしたところ、Androidプログラミングと違って、いろいろエラーが出るわ出るわでした。 人によって違うかとは思いますが、Exp44での話と、Exp49（現在最新バージョン）での話を書かせてもらいます。EAS bui…

FirebaseのFirestoreで データを登録する Firebase 10.1.0 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import React from 'react'; import { TextInput } from 'react-native'; import …

Expoでプロジェクトを作成すると、assetsフォルダにfavicon.pngという画像が用意されている。これを、FirebaseのStorageにアップロードしてみる。そして アップロードしたファイルをダウンロードする。そして、アップロードしたファイルを削除する。 Firebas…

FirebaseのAuthenticationを利用します。 Firebaseのバージョンは 10.1.0です。 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View,TextInput,Button } from 'react-native'; import React from 'react'; import {getAuth} fro…

カウンターを作成してみます。 import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import {useState} from 'react'; function SubCounter(props){ const increaseCount = () =>{ props.inc(); …

Firebaseとは？ (193) 【001】Firebaseとは - YouTube FirebaseはGoogleが提供するサービスなのですね。 使いたいサービスは以下の3つです。 1. Authentication 2.Storage 3.Firestore 1. Authenticationはログイン認証を自分で一から作らなくても簡単に作れ…