Comprehensive React Native

22 Ratings

Course Number: RCT-102

Duration: 4 days (26 hours)

Format: Live, hands-on

React Native Training Overview

React Native is used by organizations worldwide to create cross-platform phone/tablet apps with one codebase. This means that you can write code easily that will run on iPhones, iPads, and Android phones and tablets without having to rewrite it in two or more languages - just one. And that one language is easy to learn if you know React and JavaScript because it is React and JavaScript! Furthermore, these apps run natively and can be deployed to the Apple AppStore or the Google Play store, not web apps that run in some adapter or translator, making them faster and more reliable.

In this React Native training class, attendees learn how to use React Native to create cross-platform native apps quickly and easily. Students start from scratch and build up to a comprehensive app that uses modern techniques. 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.

Location and Pricing

Accelebrate offers instructor-led enterprise training for groups of 3 or more online or at your site. Most Accelebrate classes can be flexibly scheduled for your group, including delivery in half-day segments across a week or set of weeks. To receive a customized proposal and price quote for private corporate training on-site or online, please contact us.

In addition, some Web Development courses are available as live, online classes for individuals.

Objectives

  • 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

Prerequisites

All attendees must have a very strong grasp of React, Redux and advanced JavaScript. If your group doesn’t yet have this experience, we could readily add one or two days to the beginning of your course to appropriately prepare them.

Outline

Expand All | Collapse All

Course Overview
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
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
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
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
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
Layout Components
  • Components review
  • View
  • SafeAreaView
  • ScrollView
  • Pinch-to-zoom
  • KeyboardAvoidingView
  • How to create modal views
  • Controlling the OS's status bar
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
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
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
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
List Components
  • Components review
  • Pickers
  • FlatList
  • SectionList
Touchables and Buttons
  • The Button API
  • Button events and props
  • Why touchables?
  • TouchableWithoutFeedback
  • TouchableNativeFeedback
  • TouchableOpacity
  • TouchableHighlight
  • How to disable a touchable
Conclusion

Training Materials:

All React Native training attendees receive comprehensive courseware.

Software Requirements:

  • Every attendee must have a Mac computer, with a current version of macOS
  • Xcode (needed for the iOS emulator)
  • Android Studio (needed for the Android Virtual Device)
  • Node.js (which includes npm), and the ability to install npm modules
  • Web browsers that you want to test
  • A text editor, such as Visual Studio Code
  • Other free software and lab files that Accelebrate will specify


Learn faster

Our live, instructor-led lectures are far more effective than pre-recorded classes

Satisfaction guarantee

If your team is not 100% satisfied with your training, we do what's necessary to make it right

Learn online from anywhere

Whether you are at home or in the office, we make learning interactive and engaging

Multiple Payment Options

We accept check, ACH/EFT, major credit cards, and most purchase orders



Recent Training Locations

Alabama

Birmingham

Huntsville

Montgomery

Alaska

Anchorage

Arizona

Phoenix

Tucson

Arkansas

Fayetteville

Little Rock

California

Los Angeles

Oakland

Orange County

Sacramento

San Diego

San Francisco

San Jose

Colorado

Boulder

Colorado Springs

Denver

Connecticut

Hartford

DC

Washington

Florida

Fort Lauderdale

Jacksonville

Miami

Orlando

Tampa

Georgia

Atlanta

Augusta

Savannah

Hawaii

Honolulu

Idaho

Boise

Illinois

Chicago

Indiana

Indianapolis

Iowa

Cedar Rapids

Des Moines

Kansas

Wichita

Kentucky

Lexington

Louisville

Louisiana

New Orleans

Maine

Portland

Maryland

Annapolis

Baltimore

Frederick

Hagerstown

Massachusetts

Boston

Cambridge

Springfield

Michigan

Ann Arbor

Detroit

Grand Rapids

Minnesota

Minneapolis

Saint Paul

Mississippi

Jackson

Missouri

Kansas City

St. Louis

Nebraska

Lincoln

Omaha

Nevada

Las Vegas

Reno

New Jersey

Princeton

New Mexico

Albuquerque

New York

Albany

Buffalo

New York City

White Plains

North Carolina

Charlotte

Durham

Raleigh

Ohio

Akron

Canton

Cincinnati

Cleveland

Columbus

Dayton

Oklahoma

Oklahoma City

Tulsa

Oregon

Portland

Pennsylvania

Philadelphia

Pittsburgh

Rhode Island

Providence

South Carolina

Charleston

Columbia

Greenville

Tennessee

Knoxville

Memphis

Nashville

Texas

Austin

Dallas

El Paso

Houston

San Antonio

Utah

Salt Lake City

Virginia

Alexandria

Arlington

Norfolk

Richmond

Washington

Seattle

Tacoma

West Virginia

Charleston

Wisconsin

Madison

Milwaukee

Alberta

Calgary

Edmonton

British Columbia

Vancouver

Manitoba

Winnipeg

Nova Scotia

Halifax

Ontario

Ottawa

Toronto

Quebec

Montreal

Puerto Rico

San Juan