7877  Reviews star_rate star_rate star_rate star_rate star_half

React Native

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...

Read More
$2,495 USD
Course Code TP3058
Duration 4 days
Available Formats Classroom

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.

Course Details

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