Back to Browse

Learn React Native Expo in 47 Minutes

58.7K views
Sep 30, 2022
49:20

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: https://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: https://nodejs.org/en/download/ Create a React Native App Instructions: https://reactnative.dev/docs/environment-setup React Navigation Documentation: https://reactnavigation.org/docs/getting-started/ TextInput Documentation: https://reactnative.dev/docs/textinput#onchangetext TouchableOpacity Documentation: https://reactnative.dev/docs/touchableopacity BoxShadow Creator: https://ethercreative.github.io/react-native-shadow-generator/ FlatList Documentation: https://reactnative.dev/docs/flatlist Expo Constants: https://docs.expo.dev/versions/latest/sdk/constants/ Native Notify: https://nativenotify.com React Native Vector Icons npm package: https://www.npmjs.com/package/react-native-vector-icons React Native Vector Icons Directory: https://oblador.github.io/react-native-vector-icons/ Android Studio download link: https://developer.android.com/studio Expo Go app download link: https://expo.dev/client EAS Build Documentation: https://docs.expo.dev/build/setup/ Apple Developer Account Enrollment: https://developer.apple.com/programs/enroll/ Google Play Store Developer Account Enrollment: https://play.google.com/console/u/0/signup --- React Native Expo videos -------------------------- React Native Push Notifications in 2:15 Minutes: https://youtu.be/Qq_BHUN7rBs Expo Push Notifications (2022): https://youtu.be/fh0l0nEiveM Expo Notifications for iOS + EAS Build iOS: https://youtu.be/7jXRDQ89rFk Expo Notifications for Android +: EAS Build iOS: https://youtu.be/dgXwABsAFxI Expo Push Notification in 1 Minute?: https://youtu.be/1GNxI8ipRoM React Native Tutorial for Beginners (2022): https://youtu.be/riI3CPyWsb8 Expo Push Notifications React Native (2022): https://youtu.be/fh0l0nEiveM Indie Push Notifications | Expo | React Native: https://youtu.be/A21zZlyegBk Expo Analytics: https://youtu.be/zHJlu86A7GA React Native Tutorial for Beginners (2021): https://youtu.be/UUrHtN8e4Dc --- Flutter videos ------------------------------------------ Flutter Push Notifications without Firebase: https://youtu.be/f81DHuP3pqY Flutter Push Notifications + Firebase: https://youtu.be/jhQ3wHUstH4 Flutter Push Notification Big Pictures: https://youtu.be/KUT9E3vovWg Flutter Crash Course: https://youtu.be/jhak1BCbK2k Installing Flutter Packages: https://youtu.be/ouQTTTFM0eo --- FingoBox videos ------------------------------------- React Native Expo Database (Serverless) | SQL Alternative: https://youtu.be/de3BBWOi_jQ FingoBox.com | A New Kind of Database: https://youtu.be/MlrVMleqSK0 #reactnative #expo #reactnavigation #pushnotifications

Download

1 formats

Video Formats

360pmp486.8 MB

Right-click 'Download' and select 'Save Link As' if the file opens in a new tab.

Learn React Native Expo in 47 Minutes | NatokHD