React Native

in collaboration with Udacity
  • 94 Lessons
  • 235 Minutes
  • Updated 2 months ago
You already use React to build your web apps. Now, using React Native, you’ll be able to develop React applications that run on both iOS and Android devices.

Pre-Requisites

Though this course focuses on React Native, you'll want to be familiar with React, ES2015+, and Redux before starting. If you're not, I recommend our React Fundamentals, Modern JavaScript, and Redux courses. If you're a developer with loads of experience without those pre-reqs, you'll probably be fine, though you may have to do some extra research along the way.
Sign Up

What you'll learn

  • React Native API

    ScrollView
    ListView
    ActivityIndicator
    Images
    Touchable Components
    Footer Tabs (iOS)
    Drawer Tabs (Android)
    Infinite Scrolling
    RefreshControl
    TextInput
  • Routing

    React Navigation
    TabNavigator
    StackNavigator
    DrawerNavigator
  • Web vs Native UI

  • Animations in React Native

  • Redux

  • Styling and Layout

    React Native Flexbox Implementation
    Styled Components
    CSS in JS
    Android specific styles
    iOS specific styles
  • Fun stuff

    Geolocation
    Photo Gallery
    Animations
    Local Notifications
    App Store Prep

Who is this course for?

  • Developers who are experienced with React and want to use that knowledge to build native iOS or Android applications.
  • Mid-Sr native developers who want a more declarative approach to building UIs and are willing to research some fundamental details about React or JavaScript they may be missing.
  • React developers who want the smoothest road possible in adding the additional knowledge they need to build a native app.
  • Developers who know React or have taken our React fundamentals course and want to learn how to build native iOS and Android applications.
  • React developers who are frustrated with the current resources for learning React Native and want a more complete resource.
Sign Up

Course Outline

  • Introduction

    Course Intro
    Course Map
    In-class project
  • What is React Native?

    What is React Native?
    React Native under the hood
    Summary & Further Research
  • Dev Environment Setup

    Create React Native App
    Installing CRNA
    Why Expo?
    Simulators
    Hello World
    The Environment
    App Setup
    Summary & Further Research
  • Using the Debugger

    How to debug
    How to Refresh
    Summary & Further Research
  • Web vs Native

    Intro
    Routing and Animation Differences
    Android vs iOS
    Summary & Further Research
  • Common React Native Components

    React Native Components
    View and Text
    App Walkthrough
    Icons
    Rendering Icons
    AddEntry-methods
    AddEntry-render
    AddEntry-DateHeader
    Touchables
    Handling Touches
    AddEntry-SubmitBtn
    Slider
    AddEntry-Sliders
    AddEntry-Steppers
    AddEntry-Sliders
    AddEntry-TextButton
    Lists
    ScrollView and FlatList
    Forms in React Native
    Form Components
    Other Helpful Components
    Summary & Further Research
  • AsyncStorage

    LocalStorage Info
    LocalStorage Example
    LocalStorage with React Native
    AsyncStorage Documentation
    api.js
    Summary & Further Research
  • Redux and React Native

    Redux in React Native
    Adding Redux
    Building out the Actions
    Building out the Reducer
    Creating a Store
    Connecting AddEntry.js
    Summary & Further Research
  • CSS in JS

    CSS in JS
    CSS in JS Explanation
    Style Progression
    CSS in JS Libraries
    Summary & Further Research
  • Flexbox Guide

    Axes
    Flex Direction
    Justify Content
    Align Items
    Centering Content
    Align Self
    Flex Grow
  • Layout in React Native

    Flexbox Implementation
    RN's Flexbox Implementation
    Other Differences
    Platform API
    Platform Specific Styling
    Style AddEntry
    Style Steppers
    Dimensions API
    Calendar
    App Loading
  • Professional Styling

    Intro
    Stylesheet vs Inline
    Media Queries
    CSS in JS Libraries
    Styled Components Preview
  • Routing - TabNavigator

    TabNavigator Intro
    TabNavigator
    Adding TabNavigator
    StatusBar
  • Routing - StackNavigator

    StackNavigator
    Adding StackNavigator
    navigationOptions
    Connect EntryDetail
    EntryDetail Reset
    Finish Navigation
  • Routing - DrawerNavigator

    DrawerNavigator Intro
    DrawerNavigator
  • Geolocation

    Intro
    Geolocation
    Handling Denied Location
    Handling Undetetermined Location
    Setting the Location
    Asking Permission
  • Animations

    Intro
    Animations
    Animated Library
  • Local Notifications

    Local Notifications
    iOS Notifications
    setLocalNotifications
    Scheduling Notifications
  • Handling Photos

    Handling Photos
    Taking Photos and the Camera Roll
    Playing with Photos
  • App Store Prep

    App Store Prep Checklist
    Locking the orientation
    Generating .apk and .ipa files

TylerMcGinnis.com - The best courses I've ever seen.

Taras Protchenko
Sign Up

The Socials

The Newsletter