Demo

This repository contain react native code applications for react native talk 2022.

Languages

The following languages are used in this repository.

- typescript
- javascript

Talk

Linking react native application with serverless platform. A quick walk through how we can link react native expo applications with sqlite-3 database.

React Native and Serverless 2022 Talk Summary.

In this talk I'm going to walk you through mobile development with react native with serverless services. We are going to learn the major topics and core components that you need to start working with react native.

Why React Native.

• Learn once, write anywhere.

Why serverless.

Use my app no internet required (offline).

1. Introduction (a quick introduction about myself)

   • I'm a Software Developer and an AI enthusiast.
   • Worked with successful Deep Learning API's using supervised learning for both computer vision, audio processing and natural language processing. I enjoy working with graphql.
   • I code in:
     • python
     • java
     • javascript/typescript
     • C++
   • creator of initialiseur.
   • social handles
     • github: CrispenGari
     • website: crispen-gari
     • twitter: crispengari_
   • I'm currently working on a startup called cakesday using nextjs, nodejs, express, mysql, graphql and electron.

2. What is React JS React Native?

   • React is a free and open-source front-end JavaScript library for building user interfaces based on UI components.
   • React Native is an open-source UI software framework created by Meta Platforms, Inc. It is used to develop applications for Android, Android TV, iOS, macOS, tvOS, Web, Windows and UWP by enabling developers to use the React framework along with native platform capabilities.
   • react rendering engine JSX and it's syntax.

3. Setting up environment for React Native.

   • installing nodejs

   • package managers

     • node package manager npm
     • yarn package manager.
     • pnpm package manager
     • Why yarn over npm?
       • setting up yarn package manager.

   • installing Expo or RN CLI or make use of the node package executer npx.

4. Hello world app.

   • a simple counter app.

5. Introduction to React Native components.

   • walking through the documentation of react native and see all native supported elements/components
   • Learn how to style components in react native.

6. Functional Based Components vrs Class Based Components.

   • Why CBC or FBC?
   • Creating both FBC and CBC in example.

7. React Hooks

   • Learn most used React hooks like:
     • useState
     • useEffect
     • useRef
     • useLayoutEffect
     • etc.
   • Creating custom hooks
     • an congregate example of creating a custom hook.

8. Props

   • passing props from parent to child
   • passing props from child to parent
   • concept of prop drilling
   • introduction to state management system
     • React Context API
     • Redux and React Redux

9. TypeScript vrs JavaScript in mobile app development using expo.

10. React Native navigation

    • Stack Navigation
    • Drawer Navigation
    • Native Stack
    • Tabs Navigation
      • Bottom Tabs
      • Material Bottom Tabs
      • Material Top Tabs

11. Introduction to serverless services

12. Storing data offline on a RN App

    • expo-sqlite
    • react-native-async-storage/async-storage

13. Creating a Demo Todo app.

    • using expo-sqlite or react-native-async-storage/async-storage
    • programing languages:

    - javascript
    - typescript

    • application with authentication
    • CRUD operations on todos with serverless.
    • using redux as a state management system.

14. Application design with Figma for different devices.

15. Conclusion

Refs and Resources

1. reactnavigation
2. expo
3. reactnative