React Nativeでtwitterアプリを作ってみよう！#1 React Nativeを触ってみよう

Transcript

1. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 by @kousaku_maron
2. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 React Native（リアクト・ネイテイヴ）は、 Facebookが作成したオープンソースのモバイルアプリケーションフレームワークである。 開発者がネイティブプラットフォーム機能とともにReactを使⽤できるようにすることで、 Android、iOS、WebおよびUWPアプリケーションを開発するために使⽤される。 React Native Wikipedia より
3. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 React Native（リアクト・ネイテイヴ）は、 Facebookが作成したオープンソースのモバイルアプリケーションフレームワークである。 開発者がネイティブプラットフォーム機能とともにReactを使⽤できるようにすることで、 Android、iOS、WebおよびUWPアプリケーションを開発するために使⽤される。 React Native Wikipedia より Reactの書き⽅で IOSやAndroidアプリを作れる
4. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 使うもの <View> <Text> <TouchableOpacity> <ScrollView> useCallback useEffect useState html のタグみたいなやつ かっこいい API
5. ハンズオンの流れ レッスン 0 エミュレーターでアプリを起動してみよう レッスン 1 表⽰している⽂字を変えてみよう レッスン 2 ホームスタックで表⽰する画⾯を変えよう レッスン 3 ツイートする内容を⼊⼒できるようにしよう レッスン 4 ツイート内容をログに表⽰させてみよう React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1
6. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 ※linux,windows の⽅は、 android エミュレーターで動かしてみましょう。 レッスン 0 IOS エミュレーターでアプリを起動してみよう $ git clone https://github.com/kousaku-maron/expo-hands-on.git $ cd expo-hands-on $ yarn $ yarn start 3 minutes
7. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 レッスン 1 表⽰している⽂字を変えてみよう 2 minutes
8. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 レッスン 2 ホームスタックで表⽰する画⾯を変えてみよう 3 minutes 複数のスクリーンを ”Stack” で束ねる 複数の ”Stack” を ”TabNavigator” や ”SwitchNavigator” で束ねる
9. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 レッスン 3 ツイートする内容を⼊⼒できるようにしよう 5 minutes
10. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 レッスン 4 ツイート内容をログに表⽰させてみよう 5 minutes
11. React Native を触ってみよう React Native で twitter アプリを作ってみよう！ #1 “ ツイートする ” ボタン押すと、 Firestore に値を保存するようにしてみよう！  宿題 次回まで