React Native Learning Plan

Note: This plan is WIP

Start an Ultralearning Project:

1. Make a metalearning map
2. Design drills
3. Overlearn

Choose an Ultralearning project:

I want to do:

Mobile App Designing using React Native

1. Make an metalearning map

• Concepts
• Facts
• Procedures

What concepts do I need to understand?

Learn ReactNative

• Styling
  • Flexbox
  • https://reactnative.dev/docs/flexbox
  • https://css-tricks.com/snippets/css/a-guide-to-flexbox/
  • https://medium.com/wix-engineering/the-full-react-native-layout-cheat-sheet-a4147802405c
• Creating Functional Component
• Passing Props
• Core Components and APIs
  • Views
  • Text
  • TextInput
  • Picker (https://github.com/react-native-picker/react-native-picker)
  • DateTimePicker (https://github.com/react-native-datetimepicker/datetimepicker)
  • Switch
  • Button
  • TouchableHighlight
  • TouchableOpacity
  • Image
  • ImageBackground
  • FlatList
  • Core Modal (https://github.com/react-native-modal/react-native-modal)
  • Alert
  • Statusbar
  • Dimension
  • Animated
  • Activity Indicator
• Custom Components
  • Divider
  • Check Box
  • Table
  • Custom Modal (https://github.com/react-native-modal/react-native-modal)
  • Dropdown List
    • (react-native-material-dropdown --save)
    • https://medium.com/swlh/how-to-add-a-dropdown-list-to-react-native-2441d6fe40c2
• Hooks
  • useState
  • useEffect
  • useContext
  • useRef
  • useCallback
• Reading JSON Data from API (https://jsonplaceholder.typicode.com/users)
• Using Key
• Using Refs
  • https://reactjs.org/docs/refs-and-the-dom.html
  • https://medium.com/@rossbulat/how-to-use-react-refs-4541a7501663
• High Order Components
  • https://medium.com/@rossbulat/how-to-use-react-higher-order-components-c0be6821eb6c
• Context API
• WebView
• Redux (https://egghead.io/courses/getting-started-with-redux)
• Animations
• Using persistent storage (for example, AsyncStorage)
• How to manage app state with event listeners and React hooks
  • https://medium.com/@rossbulat/working-with-app-state-and-event-listeners-in-react-native-ffa9bba8f6b7
• Explore packages
  • Modal: https://github.com/react-native-modal/react-native-modal
  • Styling: https://www.npmjs.com/package/@emotion/native
  • Styling: https://www.npmjs.com/package/design-units
  • Elements: https://reactnativeelements.com/

Component Design

• Video Player
• PDF Viewer
• Carousels

Learn: How to

• Building a custom button: https://medium.com/@ralph1786/building-a-custom-button-in-react-native-ca9bf898d93c
• React Navigation
  • Stack
  • https://reactnavigation.org/docs/hello-react-navigation
  • https://github.com/arkhangelsk/RN-StackNavigation-BoilerPlate (Practice Drill)
  • Tab
  • https://reactnavigation.org/docs/tab-based-navigation
  • https://github.com/arkhangelsk/RN-TabNavigation-BoilerPlate (Practice Drill)
  • Drawer
  • https://reactnavigation.org/docs/drawer-based-navigation
  • https://github.com/arkhangelsk/RN-DrawerNavigation-BoilerPlate (Practice Drill)
• Display Videos from a source
  • https://github.com/arkhangelsk/app-maximize-learning (Practice Drill)
• Display YouTube Videos
  • https://github.com/arkhangelsk/YouTubeVidepAppV1 (Practice Drill)
• Full Screen Mode
• Display PDFs
  • https://github.com/arkhangelsk/RN-PDFViewer-BoilerPlate (Practie Drill)
• Play Sound (https://www.npmjs.com/package/react-native-sound)
• How to share content
• How to create custom icons?
• How to set splash screen
• How to save state in memory
• Handling safe area (https://reactnavigation.org/docs/handling-safe-area/)
• Handling device orientation
• Authentication Flow: https://reactnavigation.org/docs/auth-flow/
  • Create Account
  • Login using Facebook
  • Login using Google
• How to create iOS Builds?
• How to create Android Builds?
  • https://stackoverflow.com/questions/35935060/how-can-i-generate-an-apk-that-can-run-without-server-with-react-native
  • https://medium.com/codingtown/how-to-generate-apk-file-from-react-native-f4fbc923bfdb
  • How to Create a Publishable APK File for Your Android App
• How to Use Styled Components in React Native
• Deep Linking in React Native with Universal Links and URL Schemes
• React Native: Carousels with Horizontal Scroll Views
• Apple Push Notifications with React Native and Node.js

What facts do I need to memorize?

What procedures do I need to practice?

• Learn how to upload an app on Play Store.
• Learn how to upload an app on Google Play.

2. Design Drills

• Drill: 1 Color Picker
• Drill: 2 React Navigation - Tab, Drawer and Stack navigators
• Drill: 3 Data Flows - FlatList
• Drill: 4 React Native Canvas
• Drill: 5 React Native Persistence
  • Local data persistence
  • Redux
• Drill: 6 Firebase
• Drill: 7 Authentication
  • Authentication module in Firebase
  • Basics of securing your database
  • Add authentication to app
• Drill: 8 Video App
• Drill: 9 PDF Viewer
• Drill: 10 ECommerce App
• Drill: Podcast App

3. Overlearning

Checkout:

• First Principles of Interaction Design
• Apple Human Interface Guidelines
• Material Design
• Material Design Components

At the end of my ultralearning project

• Design an app and upload on Google Play Store & Apple App Store

Learning Resources:

• Build Mobile Apps with React Native
• React Native Fundamentals Workshop
• 12 Exercises to Learn React Native
• React Native School
• https://medium.com/differential/blueprint-to-becoming-a-react-native-developer-6cad2b894887

CheatSheet:

• https://rationalappdev.com/react-native-cheat-sheet/

Tutorials:

• https://school.shoutem.com/lectures/build-react-native-mobile-app-tutorial/
• https://www.raywenderlich.com/485-react-native-tutorial-building-ios-apps-with-javascript
• https://www.positronx.io/react-native/

Roadmap:

• https://alligator.io/react/roadmap-react-native-developer/

React:

• https://egghead.io/courses/the-beginner-s-guide-to-reactjs

• Crash Course by wix: https://github.com/SoftwareTestingTrends/react-native-crash-course