RNワークショップ

React Native初心者向けワークショップ

概要

　プレゼン形式の資料: React Native概要

始める前に

　コーディングに入る前に環境設定を参考に環境設定してください。環境設定ができてない場合は、こちらの実行環境をご利用ください。

便利ツール

　最低限のVSCodeエクステンション（なくてもいいけどあれば便利）

• Prettier - Code formatter

参考

画像

https://github.com/katsumeshi/react-native-workshop-0922/tree/master/assets

Flexbox

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

クイックリフェレンス

https://github.com/katsumeshi/react-native-workshop-0922/blob/master/docs/quick_reference.md

目次

0. 今回のお題：おみくじApp

1. Expo、フォルダ、ファイルの役割

2. おみくじ引く画面の作成

   2-1. イメージとテキスト

   2-2. ボタン

   2-3. おみくじを引く

3. おみくじ結果一覧画面の作成

   3-1. ナビゲーション

   3-2. ナビゲーション間のデータ受け渡し

   3-3. フラットリスト

   3-4. ネットワーク通信

最後まで終わったら

• 結果一覧画面のfetch時のローディングスピナーの実装。

• おみくじ画面の左上に名前入力のナビゲーションを作成。名前入力のテキストボックスを作成し、デバイスのローカルストレージに名前を保存。 postリクエスト時にその名前を使用し、ハードコーディング部分をリプレイス。

アンケート

https://goo.gl/forms/rf7tiTTiaRW9QRTl1