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
コメント