(56) ゆるコンピュータ科学ラジオ - YouTube https://kaiyuusya.jp/webLog/article/code-sandbox www.onamae.com

最もわかりやすいサイトはこれですね。 choippo.com

ヘッドレスCMSとは？

さて、前にやったときに,firebase authenticationだと、エラーが出てうまくいかなかったので、これがないアプリで試したいと思います これまでの順番で、TextCodeRegistryWithoutAuthというプロジェクトでやっていきます。 アプリの大きさについては、注意は…

本格的にPWAにするにはどうするか？ （そもそもPWAとは？ (44) 【PWA】Webアプリをネイティブアプリ化！ - YouTube PWAとは？Webサイトを「ほぼアプリ化」する方法 | 株式会社パンタグラフ (pantograph.co.jp)） Service Workerを、プロジェクト内にセ…

まず、Expoを利用して、React Navigationを使った簡単なアプリを作成しました。 （プロジェクト名）/App.js import { StatusBar } from 'expo-status-bar'; import { StyleSheet, Text, View, Button } from 'react-native'; import { NavigationContainer }…

npx expo startするだけなら、依存するライブラリは不要だが、 ビルドするとなると以下のように、依存するライブラリのインストールと、babel.config.jsの修正・追加が必要です。 module.exports = function(api) { api.cache(true); return { presets: ['ba…

Expoアプリを作成したら、 expo login ⇒Email、パスワードの記入を促されるので記入 npm install -g eas-cli ※ npm install eas-cliにしてしまうと、プロジェクトにローカルに、eas-cliがインストールされてしまい、後々ビルドがうまくいってもアプリが起動…

ReactでTesting Library/Jestを使ってテストを学ぼう | アールエフェクト (reffect.co.jp)

https://reactnativeblog.com/this-will-change-the-way-of-routing-in-expo-react-native

・DetailScreen.jsについては、view部分は、RegisterScreenと同様であるため、return以下はコピペでよさそう。 ・RegisterScreenから、DetailScreenへ、firestoreのデータのIDの値を渡す必要がある。 DetailScreenはそのＩＤのデータを表示すればよい。 演習…

・プロジェクト名が同じものがあったりするとうまくいかない場合が多いため、プロジェクト名はこれまでとかぶらないようにすべし。 （・読み込むファイルについてのimport文は改めて書き直したほうがよいかもしれない）

AppRegistry · React Native まず、React Nativeのプロジェクトを、Expoで作成した際のファイルの構成について理解しておく必要がありそうです。 エントリーポイントはどれでしょうか? それは、node_modulesにあるexpoディレクトリ内にある、entryApp.js で…

コードをストックするアプリをスマホに入れるとして、 プログラミングは基本パソコンでするのであまり役に立たないことに気づいてしまいました。 そこで、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を使う方法を解説する【初心者向き…

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