【ReactNative入門】アプリを作って学ぶチュートリアル

初心者がreact nativeでアプリを作れるようになる入門チュートリアルです。
expoを利用して環境構築を行うため、WindowsでもMacでもLinuxでも開発を行うことができ、実際にストアにリリースされているアプリのクローンを作りながらReactNativeを学びます。
ぜひiosやAndroidアプリをReactNativeで作ってみたい方はアプリを作りながら勉強してください。

■ 打田裕馬のメールマガジン（24,000円分のオンラインコースプレゼント付き）
https://uchida.link/funnel/2024-2/optin/?from=engapp_youtube_20221226_qKPrKRBXK4k&utm_source=youtube&utm_medium=social&utm_campaign=engapp_youtube_20221226_qKPrKRBXK4k

■ ProgateのES6
https://prog-8.com/courses/es6

■ React Hooks
https://ja.reactjs.org/docs/hooks-intro.html

■ ソースコード
https://github.com/uchidayuma/reactnativebasic/tree/create-finish-css

■ デザイン見本（Figma)
https://www.figma.com/file/Sbm8nfw9JbKJkb0ab9V15F/diary?node-id=9%3A173&t=hzs3sYArlUOuuHPJ-1

■各種リンク
https://uchidalink.notion.site/ReactNativeBasic-70c5065ebc2d4237980fe568fc792065

■ Expoドキュメント
https://docs.expo.dev/versions/latest/sdk/sqlite/

■日記テンプレート
https://docs.google.com/document/d/1MUIIvxelnd1Tjt65r8Qfi1Ap2HReMlvnbpTkYzlRWYw/edit

■ ReactNativePaperドキュメント
https://callstack.github.io/react-native-paper/button.html

■ Stable Diffusion (AIイラスト作成サービス）
https://stablediffusionweb.com/#demo

■ 目次
00:00:00 この動画で作れるアプリ
00:16:18 Expoアカウントの作成
00:17:19 Windowsの開発環境構築
00:23:37 Macの開発環境構築
00:28:24 SQLiteの準備
00:45:22 TypeScriptとは？
00:49:13 Diariesテーブルの設計
00:52:12 Diariesテーブルの作成
00:55:59 firebaseの準備
00:59:40 絵文字とテンプレートのコレクションを作成
01:06:39 firebaseから絵文字を取得
01:19:14 絵文字を表示する
01:27:38 日記本文入力フォームを作成
01:32:16 日記本文を入力できるようにする
01:36:52 テンプレートをfirestoreに登録
01:39:56 絵文字をタップした際の動きを作る
01:48:20 テンプレートをタップした際の動きを作る
01:51:09 インサート文の解説
01:57:58 SQLiteに日記内容を保存する
02:09:27 ReactNavigationの全体像
02:13:35 タブの名前とアイコンを変更
02:23:13 共通ヘッダーの開発
02:28:28 Home画面の開発 Viewで枠組みを作る
02:35:13 useEffectで日記一覧を取得
02:50:18 日記一覧を表示
03:02:21 日記作画面に移動するボタンを設置
03:10:28 日記作成完了後、ホーム画面に戻す
03:15:53 引っ張って更新を実装
03:22:14 時刻関係の機能を実装
03:23:22 Webviewを実装
03:49:38 ダークモード対応 カラー定義を変更
03:57:24 Appbarのカラーを変更
04:07:01 共通CSSの作成
04:13:28 ホーム画面のデザインを整えよう 背景イラストをAIに作ってもらう
04:19:57 Welcomeパネルを整える
04:33:45 日記一覧を整える
04:41:18 Tipsを整える
04:53:07 日記作成画面のデザインを整える 絵文字を整える
04:59:12 テンプレートを整える
05:12:22 最後の仕上げ

■独学でwebアプリを開発する流れはこちら
https://www.youtube.com/watch?v=M_7_EuTroZg

■初心者が絶対に抑えておくべきデータベースの基礎
https://www.youtube.com/watch?v=kuXSgJw5uOw

チャンネル登録はこちらから！
http://www.youtube.com/channel/UCaCyTT6rvhCyqU6-tMhpP0A?sub_confirmation=1

Twitterはこちら！
https://twitter.com/UchidaYuma​​
★
[BGM]
ナイトパレード
騒音のない世界様より
https://noiselessworld.net/​​
★

#プログラミング初心者
#プログラミング
#プログラミング勉強
#プログラミング学習
#reactnative
#reactnative入門
#個人開発
#アプリ開発​