Loading...
「ツール」は右上に移動しました。
利用したサーバー: natural-voltaic-titanium
942いいね 58213回再生

Learn React Native Expo in 47 Minutes

Learn everything you need to know to be a React Native developer in 47 minutes. The goal of this tutorial is to teach everything you need to know to be a React Native developer in the shortest amount of time.

Use this command to install the npm packages used in this video:
npx expo install @react-navigation/native @react-navigation/native-stack expo-constants expo-device expo-notifications native-notify react-native-safe-area-context react-native-screens react-native-vector-icons

GitHub Code in this video: github.com/NativeNotify/react-native-to-do-list

-- Chapters of this video ------------------------
00:00 - Intro
00:28 - Node.js LTS Installation
00:41 - Create React Native App
01:43 - Open App in Visual Studio
02:04 - File Structure
02:55 - Install Dependencies
03:46 - App.js Setup
06:07 - Push Notifications
07:17 - React Hooks & Global State Management
10:21 - React Navigation
13:47 - Components
17:38 - useEffect
19:36 - Creating Functions in Hooks
21:28 - Styling
25:11 - How to See Your App & More Styling
28:22 - Build ChosenTask Screen
29:43 - Header, Footer, Constants, Box Shadow Generator, Vector Icons
36:43 - FlatList
41:26 - TextInput
43:06 - TouchableOpacity (Buttons)
44:54 - Test Push Notifications
45:41 - EAS Build (Create your Android and/or iOS app)
48:06 - Outro

-- Links used in this video ----------------------
Node.js LTS Download Link: nodejs.org/en/download/
Create a React Native App Instructions: reactnative.dev/docs/environment-setup
React Navigation Documentation: reactnavigation.org/docs/getting-started/
TextInput Documentation: reactnative.dev/docs/textinput#onchangetext
TouchableOpacity Documentation: reactnative.dev/docs/touchableopacity
BoxShadow Creator: ethercreative.github.io/react-native-shadow-genera…
FlatList Documentation: reactnative.dev/docs/flatlist
Expo Constants: docs.expo.dev/versions/latest/sdk/constants/
Native Notify: nativenotify.com/
React Native Vector Icons npm package: www.npmjs.com/package/react-native-vector-icons
React Native Vector Icons Directory: oblador.github.io/react-native-vector-icons/
Android Studio download link: developer.android.com/studio
Expo Go app download link: expo.dev/client
EAS Build Documentation: docs.expo.dev/build/setup/
Apple Developer Account Enrollment: developer.apple.com/programs/enroll/
Google Play Store Developer Account Enrollment: play.google.com/console/u/0/signup

-- React Native Expo videos -------------------------
React Native Push Notifications in 2:15 Minutes:    • React Native Push Notifications | Expo man...  
Expo Push Notifications (2022):    • Expo Push Notifications | React Native  
Expo Notifications for iOS + EAS Build iOS:    • Expo Notifications for iOS + EAS Build iOS...  
Expo Notifications for Android +: EAS Build iOS:    • Expo Notifications Android + EAS Build And...  
Expo Push Notification in 1 Minute?:    • Expo Push Notifications in 1 Minute? | Rea...  
React Native Tutorial for Beginners (2022):    • React Native Tutorial for Beginners 2022  
Expo Push Notifications React Native (2022):    • Expo Push Notifications | React Native  
Indie Push Notifications | Expo | React Native:    • Indie Push Notifications | Expo | React Na...  
Expo Analytics:    • Expo Analytics | React Native | Native Notify  
React Native Tutorial for Beginners (2021):    • React Native Tutorial  - Navigation, Notif...  

-- Flutter videos -----------------------------------------
Flutter Push Notifications without Firebase:    • Video  
Flutter Push Notifications + Firebase:    • Video  
Flutter Push Notification Big Pictures:    • Video  
Flutter Crash Course:    • Video  
Installing Flutter Packages:    • Video  

-- FingoBox videos ------------------------------------
React Native Expo Database (Serverless) | SQL Alternative:    • React Native Expo Database (Serverless) | ...  
FingoBox.com | A New Kind of Database:    • FingoBox | API Database Management  

#reactnative #expo #reactnavigation #pushnotifications

コメント