React Native/Expoを学ぶロードマップ
React Native/Expoに関する動画が多く再生されてを伸ばしています。
そこで、React Native/Expoの学習ロードマップを紹介します。
REST APIとExpo Routerを使って、スマートフォンのTODOアプリを作る
React Nativeを使ってスマートフォンのTODOアプリを作っています。
アプリで扱うデータは、REST APIを使って管理します。
現在、React Nativeでの開発ではExpoというフレームワークが使われています。
そして、ExpoにはNext.jsのApp Routerのような、Expo Routerという機能があります。
Next.jsのApp Routerを使っているので、Expo Routerを使っていきます。
また、NativeWindを使って、Tailwind CSSを導入します。
Expo SQLiteとExpo Routerを使って、スマートフォンのTODOアプリを作る
SQLiteを使って、スマートフォンのTODOアプリを作っていきます。
実は、TODOアプリを作るのは2回目なのですが、前回は外部APIを使ってデータを管理しました。
前回と違いは、SQLiteを使ってデータを管理することです。
APIとSQLiteの大きな違いは、APIに接続する場合はネット環境が必須ですが、SQLiteを使えばローカル環境でも使えます。
現在、React Nativeでの開発では、Expoというフレームワークが使われています。
そして、Expoには、Expo SQLiteというAPIが用意されています。
今回は、こちらを使って、使い方を見て行きます。
また、Expoには、Next.jsのApp Routerのような、Expo Routerという機能があります。
Next.jsのApp Routerを使っているので、Expo Routerを使っていきます。
そして、ExpoがBunに対応しているので、Bunを使って開発します。
Bunは、Node.jsと比べてパッケージのインストールが速く、4倍速く起動できるので開発環境が改善されます。
Expo RouterのTabs layoutを使ってみる
今回はExpo Routerを使ったタブレイアウトの使い方を見ていきます。
以前、React Nativeを使ってスマートフォンのTODOアプリを作りました。
そこでは、Expo Routerという機能を使いました。
その中の機能で、タブレイアウトという機能があります。
これは、スマートフォンアプリの下部にある、メニューのようなものです。
よく使われているので、タブレイアウトを見ていきたいと思います。
Discussion