In this React Native Training course you'll learn to use React Native to create cross-platform native apps quickly and easily with a 50/50 mix of lecture and real-world labs. You'll start from scratch and build up to a comprehensive app which uses modern techniques and best practices to consume RESTful data from a NodeJS/Express server and present it to the user in a multi-screen, interactive app.
Skills Gained
Upon completion of this React Native Training course, the student should be able to:
- Create cross-platform iOS and Android apps
- Set up a device emulator on your laptop and deploy apps to it
- Use expo to create and run iOS and Android apps
- Explain the architecture of a device app
- Apply the most useful React Native components
- Write app code that works differently on the different platforms
- Use flexbox on devices to control the layout of your apps
- Style your app efficiently using best practices
- Use stack navigators, drawer navigators and tab navigators to change app scenes
- Consume RESTful data in a handheld device and present it to the user
Who Can Benefit
Seasoned developers who want to create iOS and Android apps.
Prerequisites
A very strong grasp of React, Redux and advanced JavaScript.
Outline
Chapter 1. Course Overview
Chapter 2. Hello React Native
- 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
Chapter 3. React and Redux reviews (when needed)
- Redux reminder
- Reducers, actions, state, store, and middleware
- React reminder
- SFCs vs class-based components
- Composition
- JSX structure and rules
- props
- state
- Controlled and uncontrolled components
- Virtual DOM vs the real DOM
Chapter 4. The Development Process
- 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
Chapter 5. Single-value Controls
- 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
Chapter 6. Platform-specific Development
- 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
Chapter 7. Layout Components
- Components review
- View
- SafeAreaView
- ScrollView
- Pinch-to-zoom
- KeyboardAvoidingView
- How to create modal views
- Controlling the OS's status bar
Chapter 8. Flexbox for Native Layouts
- 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
Chapter 9. Styling React Native Apps
- 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
Chapter 10. Navigation
- 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
Chapter 11. Ajax in React Native
- 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
Chapter 12. Pressables and Buttons
- The Button API
- Button events and props
- Why touchables?
- Pressables
- Why work with Pressables
- How to work with Pressables
Chapter 13. List Components
- Components review
- Pickers
- FlatList
- SectionList