ReHacked (September 14, 2016): Going Native with React

By ReactJS Tampa Bay

Welcome to ReHacked: Going Native with React! In this lab we will build an iOS application with simple authorization and navigation. We will use the same node API as we did for our last lab on Redux basics.

Apple only allows us to develop for iOS on a Mac, so this lab will focus on OS X.

By the end of this lab, you will have:

• Installed all required React Native dependencies
• Installed React Native command line interface
• Initialized a new React Native Project
• Run and Debug an iOS App
• Wired up simple authentication against a node API
• Wired up basic navigation
• Connected a React Native application to Redux
• Implemented the Native Camera
• Implemented a Vector Icons Library

This master branch represents a completed solution set for the lab. We have separated the lab into logical "breakpoints" by use of branches. Please see below to get started.

Dependencies and Suggested Tools

Mac + iOS

• Xcode
• Node Version Manager
  • We recommend using nvm, but you can also install node with Homebrew
• Node 4.5.0 (using nvm install 4.5.0)
• Homebrew
  • /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"

JavaScript

• Atom, WebStorm, or IntelliJ
  • terminal-plus for Atom

ReHacked

We have broken up this lab into stepped branches with their own README.md's that describe what to accomplish.

Please follow the branches in the order listed below

Start Here

1. Step 1 Solution Set: Install React Native, Initialize Project, and Run iOS
2. Step 2 Solution Set: Build a StartScreen component, Add Navigation, and Introduce Dev Menu
3. Step 3 Solution Set: Enhance the StartScreen component, Add an Icons library, and Add a Login component
4. Step 4 Solution Set: All about Redux
5. Step 5 Solution Set: Convert the StartScreen component and Add a Dashboard component with TabBar
6. Step 6 Solution Set: Let's add a Camera