React Native入門した

4月から新しい会社でReact Native使う予定なので、今日の3-4時間ほどで入門してみました。

まず「React Native」で検索して、パット見て全体の軽い紹介してそうな記事を1つか2つ読んだあとは、公式ドキュメントを読みました。その後、React Native CLI で開発環境を構築して、簡単なアプリを作ってみました。

https://reactnative.dev/

今日、入門するにあたって見たもの

公式ドキュメント
- Introduction
- Core Components and Native Components
- Setting up the development environment
- あとはドキュメントの目次さらっと見たり、大事そうなページをさらっと見た
チュートリアル
- https://reactnative.dev/docs/tutorial
React Native導入ガイド - 環境構築からクロスプラットフォーム開発のメリットまでを理解する https://eh-career.com/engineerhub/entry/2020/02/06/103000

React Nativeについて

これまではReactでネイティブアプリ作れるクロスプラットフォームのライブラリくらいの認識だったけど、もう少しだけ解像度が上がって、ネイティブ部分とReact(JS)の間でUIライブラリやミドルウェアを提供してるイメージを持てた。

どっかにランタイムでReact NativeはネイティブのViewを作成するって書いてあったけど、ビルドした結果どういう出力になるのかを見ないとちゃんとイメージできないので、どっかで調べたい。

あとは、ネイティブモジュール？という仕組みで自分でネイティブコード書いて拡張したり、自作のUIコンポーネント作ったりできる。

普段の開発では、React Nativeには標準で提供してるネイティブコンポーネントがあるので、それを読み込むイメージ。

他には、コミュニティのいろんなコンポーネントがある。

reactnative.directory

Hooksは React Native 0.59 で導入されたっぽい。

ブラウザのAPIも提供してるけど、どこまでできるんだろう。

開発環境

React Native には、次の２つの開発ツールが用意されてるので最初に選ぶ

React Native CLI
Expo CLI

自分はプレーンなものを知りたかったので、React Native CLIからはじめた。

npx react-native init MyTestApp

プロジェクト名はハイフンとかだめで英数字だけ

iOS開発

今日はAndroidまで試すのが面倒だったので、iOSだけやりました。

iOSライブラリ管理ツール「CocoaPods」がいる
iOS周りの依存インストール
- iosにcdしてpod install

プロジェクト作成

プロジェクト作成については以下のドキュメント読んだら分かりました。まずこれちゃんと読んだほうが良さそう

https://reactnative.dev/docs/environment-setup

最初に自分のMacにXCode入れ忘れてハマりました
- あとはXCodeのインストール終わらなくてハマった
  - https://blog.kubou.net/archives/233/
その次はビルドしたら、BUILD FAILEDってなったので、v0.62にしたら直った
- 完全に以下の内容と同じ
- https://stackoverflow.com/questions/66062663/react-native-npx-react-native-run-ios-doesnt-work-after-initializing-the-proj

結構ネイティブ開発の知識必要そうだなーという印象。

アプリの起動

npx react-native start
- Metroというバンドラーを起動
npx react-native run-ios
- ビルドしてシミュレーターでアプリ起動
どっちも起動しないとシミュレーターで開発はできない

コンポーネント

以下の記事でリストで色々紹介されてたのでさらっとみた。

https://reactnative.dev/docs/intro-react-native-components

https://eh-career.com/engineerhub/entry/2020/02/06/103000

とにかくViewとTextはめちゃ使う。文字はTextに入れないとだめらしい。Webとはそこらへん全然違うな。

スタイル

StyleSheetを使うCSS-in-JSスタイルが基本。基本的にCSSだけど、使えないものもあるっぽい。

使えるプロパティはドキュメントを見る

Text · React Native

よく分かってないところ

まだ触りだけなので、ある程度のアプリを作るためのお作法とか、使うAPIとか設計とかは全く分かってない。あとはネイティブ部分は全く知見ないので、これから勉強しようと思いました。

あとはCSSはStyleSheet モジュール使ったけど、普通にライブラリ使ったりするのかとかも気になる。

とりあえず次はREST API叩いたり、ページ遷移するようなアプリ作ってみようと思います。

感想

WebでReact触っていたので、その延長線上で分かることが多かったです。アプリケーションを作るために新しく必要になる考え方はあまりなく、React Nativeの少しの違いや使うコンポーネントやAPIだけある程度覚えればやっていけそう。

公式チュートリアルがとても薄かったので、このチュートリアルやれば基本的なところ抑えれるよ。みたいなのが無かった。このあたりは他のライブラリだとだいたい用意されているので、気になった。ここらへんはReact分かってたら、あとはドキュメント見たらいいよ。くらいの温度感なんだろうか。

toshi-toma blog

主にフロントエンド、作業ログあとは色々なメモ ✍️ 🍅

React Nativeに入門した日