https://github.com/crispengari/demo

React Native Talk 2022
https://github.com/crispengari/demo

javascript react-native reactjs typescript

Last synced: 3 months ago
JSON representation

React Native Talk 2022

• Host: GitHub
• URL: https://github.com/crispengari/demo
• Owner: CrispenGari
• Created: 2022-10-19T06:00:42.000Z (almost 4 years ago)
• Default Branch: main
• Last Pushed: 2022-11-12T21:57:36.000Z (over 3 years ago)
• Last Synced: 2026-01-03T16:21:18.066Z (7 months ago)
• Topics: javascript, react-native, reactjs, typescript
• Language: TypeScript
• Homepage:
• Size: 1.75 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
### Demo

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

### Languages

The following languages are used in this repository.

```shell

- 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**](https://github.com/CrispenGari/initialiseur).

   - social handles

     - [github: **CrispenGari**](https://github.com/CrispenGari)

     - [website: **crispen-gari**](https://crispen-gari.web.app/#/home)

     - [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:

    ```shell

    - 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](https://reactnavigation.org/)

2. [expo](https://expo.dev/)

3. [reactnative](https://reactnative.dev/)