O'Reilly logo
live online training icon Live Online training

Learning React Native

Build iOS and Android Apps with React Native

Bonnie Eisenman

Join expert Bonnie Eisenman for a hands-on, in-depth exploration of React Native. In this course, you'll learn how to build cross-platform mobile applications for iOS and Android from scratch.

Forget siloed development; with React Native, your web, iOS, and Android teams can work from the same codebase, developing rapidly without compromising on quality. Companies such as Facebook, Airbnb, and Walmart report achieving between 80-95% code reuse across projects.

What you'll learn-and how you can apply it

By the end of this live, online course, you’ll understand:

  • Understand how to use React Native to build production-quality, cross-platform applications
  • Examine how the framework uses native components, in lieu of HTML elements, and learn how to style them using the Flexbox-based styling API
  • Learn how to use platform APIs to make network requests, work with geolocation, and render images from the camera roll
  • Learn how to debug and test your applications using Jest and the built-in developer tools
  • Use the navigation API to manage different screens in your application
  • Use the popular state-management framework, Redux, to handle state changes in complex applications
  • Put it all together with multiple realistic examples, including a weather forecast app and a flashcard app

This training course is for you because...

  • You’re a frontend developer with web-based React experience, and you need to learn to build mobile applications.
  • You’re a mobile developer with iOS and/or Android experience, and you need to learn to build cross-platform mobile applications

Prerequisites

  • Fluency in ES6-style JavaScript
  • Experience with ReactJS, including an understanding of JSX and the component lifecycle

Materials or Downloads needed in Advance:

  • Working development environment for iOS and Android development, as well as a working npm installation with React Native installed. Follow these installation instructions
  • Make sure that you can successfully run react native init MyProject before starting the class.
  • The instructor will be demonstrating React Native development from OSX.
  • While you can also develop on Windows or Linux, Mac OSX is a requirement in order to develop iOS applications.
  • Access will be provided to download the github repository containing starter code

Recommended preparation:

New to React? React tutorial: https://egghead.io/courses/react-fundamentals (Video)

React and React Native (Book)

Learning Path: React And React Native (Video)

React Native Projects (Video)

Recommended follow-up:

Learning React Native (Book)

About your instructor

  • Bonnie Eisenman is a software engineer at Twitter and a member of the hackerspace NYC Resistor, with previous experience at Codecademy, Fog Creek Software, and Google. She is the author of Learning React Native, a book on building native iOS and Android applications with Javascript, published with O’Reilly Media. In her spare time, she enjoys learning languages, tinkering with hardware projects, and knitting. Her projects are posted at http://bonnieeisenman.com. Find her on Twitter as @brindelle.

Schedule

The timeframes are only estimates and may vary according to how the class is progressing

Getting Started With React Native (35 minutes)

  • Instructor will introduce students to the concepts behind React Native, then we'll jump into coding. We'll cover how mobile components work and how they relate to their HTML element analogues when working with React for the web. We'll also deal with the basics of styling, layout, and taking user input, and make time for Q&A throughout.
  • Participants will generate their first React Native project and run it in the iOS and Android emulators. Students will then follow along with the livecoding session to write their first app - a simple mock weather app.
  • Assignment: Mock Weather
  • Description: A simple application that takes user input and then displays a fake weather forecast.
  • Link to starter code: TBD

Styling Practice with React Native's Layout API (15 minutes)

  • Instructor will dive into React Native's layout API
  • Assignment: Mondrian
  • Description: Starting with a component hierarchy, students will add styles to their app until it looks like the finished screenshot provided.
  • Link to starter code: TBD

10 minute break.

Working with Platform APIs in React Native (50 minutes)

  • Instructor will walk through live-coding examples of using platform APIs in React Native. We'll cover how to use the promise-based Fetch API for network requests; async storage; geolocation; and the user's camera roll. We'll also walk through how to debug location data in the simulator.
  • Participants will incorporate these APIs into their weather app in order to add in real functionality.
  • Assignment: Weather Project v2
  • Description: This version of the weather project will gradually incorporate more features, including adding an API call to fetch the real forecast based on zip code; getting the user's geolocation; storing the last set of coordinates; and changing the background image.
  • Link to starter code: TBD

10 minute break.

Tackling Bigger Projects: Navigation in React Native (30 minutes)

  • Instructor will demonstrate common organizational components and navigation approaches used in larger applications. We'll also discuss common design patterns.
  • Participants will start with a partially-implemented flash card application and add navigation, to make it a functioning application.
  • Assignment: Flash Cards, v1
  • Description: The Flash Cards app starts out with some very basic rendering logic. Participants will wire it up with navigation components to make it a functioning application.
  • Link to starter code: TBD

Tackling Bigger Projects: State Management with Redux (30 minutes)

  • Instructor will walk through the conceptual underpinnings of Redux, a popular state-management library for React. Redux works just as well with React Native as it does with React! See how to add Redux to an existing app.
  • Participants will add Redux to the Flash Cards application.
  • Assignment: Flash Cards, v2
  • Description: Participants will update the Flash Cards application to use Redux for state management. This will simplify the component structure and make it more extensible.
  • Link to starter code: TBD