React Native/Expoを学ぶロードマップ

2024/09/02に公開

React Native/Expoに関する動画が多く再生されてを伸ばしています。
そこで、React Native/Expoの学習ロードマップを紹介します。

REST APIとExpo Routerを使って、スマートフォンのTODOアプリを作る

https://www.youtube.com/watch?v=RXN-JLfm77s

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アプリを作る

https://www.youtube.com/watch?v=6A2uFuJHZGE

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を使ってみる

https://www.youtube.com/watch?v=lmzd1eUpv2w

今回はExpo Routerを使ったタブレイアウトの使い方を見ていきます。
以前、React Nativeを使ってスマートフォンのTODOアプリを作りました。
そこでは、Expo Routerという機能を使いました。
その中の機能で、タブレイアウトという機能があります。
これは、スマートフォンアプリの下部にある、メニューのようなものです。
よく使われているので、タブレイアウトを見ていきたいと思います。

GitHubで編集を提案

Discussion