React Native Basics

Let’s meet on a weekly basis and go over the basics of React Native!

What will we do

During the meeting I will go over the basics of React Native. It’s going to be an interactive lesson: no slides or presentation but I’ll ask you all some questions about your experience and share some information based on that. I would advise everyone to spend a little time on a pet project to put the lesson into practice, but we’ll also talk about that in the first meeting.

What can you prepare

To get up to speed quickly, you can go ahead and set up Expo on your local machine. See https://expo.io for instructions. Meanwhile, think of a (small scope) project to work on individually. For example: an app to keep score during a game or to consume a public API. Don’t make it too technically complex (no AI, no custom backend dependency etc).

Lesson one (2021-06-08)

Topics:

• History of React Native.
• React Native architecture in a nutshell.
• Pros and cons of using React Native.
• Thinking in components.
• Using components.
• Writing your own components.
• React Native and TypeScript.
• Using style objects and StyleSheets.
• Composing styles.
• Using state to add interactivity.
• The pet project ideas.

Lesson two (2021-06-15)

Topics:

• Creating a custom Button component.
• Fixing a text input to the top of your app.
• React Native for web.
• The React component lifecycle.
• React Hooks (useState, useEffect).
• Persistant data (storing data between app uses) using AsyncStorage.

Lesson three (2021-06-22)

Topics:

• Navigation.
• External data (using an api).
• Writing tests.

Lesson four (2021-06-29)

• The different types of tests.
• What do you cover, and with which test type.
• Triggering actions across the app.
• App state management (Redux, Mobx, etc.).
• React Context.

Lesson five

• Apollo (GraphQL)
• Polling and subscribing to data
• Querying for data from within a list item (and caching)
• Pagination in flatlists

Lesson six

• Flatlist optimisation (revisited)
• Complex state dependencies
• Using reducers

Lesson seven

Recap and solidify what we learned so far See https://github.com/isilher/react-native-blackjack

Lesson eight

Continuation of the blackjack app and basics recap

Lesson nine

Continuation of the blackjack app and basics recap

• Horizontal FlatList
• Calculating scores
• Adding a house

Lesson ten

Continuation of the blackjack app and basics recap

• Cleaning up the game logic with a reducer (untangle our states)

Lesson eleven

• Finishing the blackjack app and basics recap
• Using native libraries
• Bridging native SDKs (iOS)

Lesson twelve

• Push notifications
• Analytics

Future

• Bridging native SDKs (android)
• Background actions
• Releasing the app
• Handling secrets