React

ゆっくり始めるReact Native① ~環境構築①~

いつもご利用ありがとうございます。このブログは、広告費によって運営されています。

オススメ本
Web技術を勉強するなら、かなりオススメの雑誌です。毎月新しい発見があります。ついに最終号・・・、みなさん買いましょう!!
読んで損することはない名著。命名で悩むことが多い人はこの本がオススメです。

先週、3日ほど掛けて簡単な英単語アプリを ReactNative で作成しました。

ざっくり環境を説明すれば expoCLI +スマホの内部ストレージ(AsyncStorage)でほぼ Udemy 教材の写経しました。

僕が今回教材として選んだのは、

オススメの ReactNative 教材

めちゃくちゃ良い教材で、かなりオススメできます。

理由は

  1. プロのデバッグが見れる
  2. プロのコーディングが見れる
  3. 公式のドキュメントからコードを引っ張ってくる

等の生の操作が見られることです。

最終的には自分が必要な処理を公式のドキュメントから探さないといけないけど、「入り口として最強」だと思います。

完成品

ReactNative初アプリ画像

初マイアプリ・・・嬉しい。

実機にインストールして実際に使うこともできるので感動します。

ってことで環境構築いってみましょう。

環境構築

最初に、僕が書く記事は初学者として、「こう捉えた」という、感想みたいな部分がありますので、気になった部分は調べてみてください。

1 Node.js のインストール

公式サイトから「Node.js」のダウンロードしてインストールしてください。

https://nodejs.org/ja/download/

ダウンロードするのは安定している方のバージョン(LTS)がオススメみたいです。

環境

$ node -v

v12.4.0

2 ReactNative のひな形(expo)をインストール

expo cli のインストール

$ npm install -g expo-cli
$ expo --version

3.4.1

expo は ReactNative の開発やビルドを支援してくれるサービスです。

https://expo.io/

expo で作るときは、expo で検索してみると良いことがある

最初困惑したのですが、React-native-cli と、expo では実装方法が違う可能性があります。

特にパッケージの話で、基本的な React の書き方はそのままでできます。

ですので、その点に注意しながら進めれば良いと思います。

写経なので1日で終わると思っていたら3日かかりました!

まとめ

以上です。

ドキュメントは友達。

感想・苦情は TwitterDM にご連絡ください。

【React Native】expo start で起動しなくなったらやること。

【ReactNative+CloudVision】「怒り顔採点アプリ」を作った