REACT NATIVE MOBILE APPLICATION DEVELOPMENT

COURSE DESCRIPTION

React Native is a framework for using JavaScript and React to create native mobile applications. It combines the intuitive, declarative structure of React with the performance, look, and feel of Native applications. React Native also has the potential to alter how developer teams are structured, allowing web, iOS, and Android teams to share knowledge, resources, and even code.

INTRODUCTION

In this section, we make a brief introduction to React Native. We set up machines for all the people that haven’t done that yet. By the end, attendees can create a new project, run it and understand tools available.

• Available platforms
• Available APIs
• Available components
• Bridge
• Prerequisites
• Installation review (show installation instructions)
• Create an app with `react-native init` (mention Expo and Create React Native App command)
• Use `react-native run-ios/android` to run the app
• Describe `react-native-packager`
• Demonstrate `Developer Menu`
• Small exercises to get people familiar

CORE COMPONENTS
In this section, we cover the basic components, like `<View />` & `<Touchable />`.
• Describe all core components and their `props`
• A couple of exercises based on default `init` template:
• Add few buttons and test out handlers (with `bind` preferably)
• Add a bunch of different `<View />`s

STYLING
In this section, we, describe `StyleSheet` API, how it implements flexbox and how’s that different from CSS.
• Describe StyleSheet, what are available values, how it works
• Demonstrate `Flexbox`
• Mention that there are UI kits, but we are not going to use them as it’s too advanced for now
• Mention that there are cross-platform styling techniques, like styled components one can use
• A bunch of exercises to get attendees more familiar with the styling, esp.:
• Flexbox and its properties – implement column/grid layout as presented on a slide
• <Text /> number of lines

NAVIGATION
In this section, we demonstrate basic concepts of navigation. We also brief attendees into how’s JS navigation different from fully native one. We list available alternatives as well what we will use throughout today.
• List available navigation solutions
• Brief readers into the one that was selected
• Make them aware of the API and how to think of the route hierarchy
• A couple of exercises working on current `init` template, e.g convert app to a stack, so we can push a new route

LISTS
In this section, we describe lists and why they are so important in React Native. We describe available alternatives and list how’s `<ScrollView />` different than `<FlatList /> (and <SectionList />)` and when to use each.
• List available scroll solutions
• Explain when to use each
• Describe performance optimizations
• Warn about common pitfalls / issues
• As a demo task, one can create a view that has a list of contacts and each of them can be tapped to move to a new screen (with details)

INTRODUCTION TO WATERMELON DB
In this section, we are looking at setting up Watermelon DB and react environment.
• Introduction to Watermelon DB
• Setting up Watermelon DB
• Working with React environment

USING WATERMELON DB FOR OFFLINE DATA SYNC
In this section, we will look at setting up offline data sync options for projects.
• Watermelon DB & React Native
• Working with offline Data
• Watermelon DB offline Data sync
• Hands on Labs

Please contact us for the full course outline, schedules and for booking a private class.

Inquire Now