Projects
Assignments
Overview
In this React Native training class, attendees learn how to use React Native to create cross-platform native apps quickly and easily. In addition, participants learn best practices to consume RESTful data from a NodeJS/Express server and present it to the user in a multi-screen, interactive app.
Objectives
At the end of React Native training course, participants will be able to
Prerequisites
All attendees must have a very strong grasp of React, Redux and advanced JavaScript.
Course Outline
Hello React Nativeedforce2021-06-25T17:54:56+05:30
- What is React Native?
- What does it do for us? Why choose it?
- Pros and cons
- Architecture
- Sharing with web projects
- What React Native code looks like
- Leveraging your React knowledge
The Development Processedforce2021-06-25T17:55:34+05:30
- Where do I even start?
- react-native vs. create-react-native-app
- Which is better for given situations
- The React Native team’s recommendations
- What is expo?
- Creating a new React Native app
- How to run it on a tethered device
- How to run it on a wireless device
- How to run it in an Android emulator
- How to run it on an iOS simulator
- Debugging in a browser window
- Logging, breakpoints, stepping through
- YellowBoxes and RedBoxes
Single-value Controlsedforce2021-06-25T17:55:56+05:30
- Components overview
- Categories of components
- Text
- Text props and events
- TextInput
- props and events and the event object
- Image
- Differences between HTML and React Native images
- Reserving space for them
- Local images vs remote images
- resizeMode
Platform-specific Developmentedforce2021-06-25T17:56:28+05:30
- How can we develop differently on the different platforms?
- Why would we ever do this?
- Technical roadblocks
- The DatePicker – iOS vs Android
- Using the Platform module
Layout Componentsedforce2021-06-25T17:56:51+05:30
- Components review
- View
- SafeAreaView
- ScrollView
- Pinch-to-zoom
- KeyboardAvoidingView
- How to create modal views
- Controlling the OS’s status bar
Flexbox for Native Layoutsedforce2021-06-25T17:57:11+05:30
- Why flexbox?
- Where it came from
- Flexbox on the web is NOT flexbox on native
- Containers and items
- flexDirection
- flexBasis vs width/height
- flexShrink, flexGrow
- The flex shorthand
- justifyContent and alignContent
- flexWrap
Styling React Native Appsedforce2021-06-25T17:57:33+05:30
- How React Native styles differ from CSS
- How to apply styles
- How to control style inheritance
- Style arrays
- Four methods of defining styles
- Common properties
- Cross-platform fonts
- Conditional and programmatic styles
Navigationedforce2021-06-25T17:57:53+05:30
- What is navigation, really?
- How to get React Navigation
- The three types of navigators
- StackNavigator
- Routing object
- Navigation config
- How to pass params when navigating
- TabNavigators
- Three types of TabNavigators
- How to set icons
- DrawerNavigator
- Examples and demos
Ajax in React Nativeedforce2021-06-25T17:58:18+05:30
- Why it must be different on a device
- The fetch API
- How to show a loading indicator
- How to make requests and populate affordances
- Security in a native environment
Touchables and Buttonsedforce2021-06-25T17:58:59+05:30
- The Button API
- Button events and props
- Why touchables?
- TouchableWithoutFeedback
- TouchableNativeFeedback
- TouchableOpacity
- TouchableHighlight
- How to disable a touchable
