This course teaches the fundamentals of cross-platform mobile application development with a focus on the React Native framework (RN). The goal is to help students develop best practices in creating apps for both iOS and Android by using Javascript and existing web + mobile development paradigms. Students will explore the unique aspects that made RN a primary tool for mobile development within Facebook, Instagram, Airbnb, Walmart, Tesla, and UberEats.

Course logistics

Application The course is limited to 20 students, who will be selected by application. The application is currently closed.
Date/Time T/Th 1:30PM - 2:50PM
Location Econ 139
Units 2 Pass/Fail
Instructors Santiago Gutierrez (santig@stanford.edu)
Abdallah Abuhashem (aabuhash@stanford.edu)
Faculty Sponsor James Landay (landay@stanford.edu)
Staff email cs47si-win1718-staff@lists.stanford.edu
Office hours Abdallah: Mon 12:00PM - 2:00PM at Forbes Cafe
Santiago: Thu 04:30PM - 06:30PM in Lathrop Library (Learning Hub / Tech Desk)
Prerequisites At least one of the following: CS142, CS193P, CS193A (or equivalent Web/Mobile development experience)
Explore courses CS47SI


Week 1 (1/09 - 1/11)

1.1 Introduction to React and React Native

Course logistics and basic overview of React Native.

1.2 Getting Started

Introduction to Javascript (ES6), JSX and Babel. We will be exploring the structure of a React Native app and creating an application from scratch.

Warmup Assignment: Setup

Week 2 (1/16 - 1/18)

2.1 Basic React Components

Creating and styling interfaces using basic components. StyleSheet + Flexbox.

2.2 Controlling Components

Creating and controlling components using State and Props.

Assignment 2: A Tender Attempt with RN

Week 3 (1/23 - 1/25)

3.1 Interactive Components

We will be modifying our code from last class and introducing new components. ScrollView, TextInput, and Lists.

This class is divided into two parts! We will use and "break" third party components.

Assignment 3: New York Times

Week 4 (1/30 - 2/1)

4.1 Data Persistence

Overview of JS promises. Persistence of data using AsyncStorage and SQLite.

4.2 Intro to Navigation

Different navigtors (Stack, Tab, Drawer) using React Navigation.

Week 5 (2/6 - 2/8)

Topics: history and development of RN, internal uses (Instagram), and state management via Redux.

Assignment 4: New York Times 2.0
5.2 Passing Data with Navigation

We will be putting some navigation concepts to practice.

Week 6 (2/13 - 2/15)

6.1 Nested Navigation

Building a navigator for the Unsplash API.

6.2 Navigation Wrap-up

Continuation from last lecture!

Week 7 (2/20 - 2/22)

We will use Firebase to build a chat room application. Part of advanced topics.

7.2 Vanilla React Native

Discussion about React Native projects with Native code. Native modules.

Week 8 (2/27 - 3/1)

8.1 Final Project Office Hours

Final Project
8.2 Realm and Animations

Demo of Realm (local storage database) and animations.

Week 9 (3/6 - 3/8)

9.1 Firebase Authentication

Demo of Realm (local storage database) and animations.

Charlie Cheever (CEO) talks about Expo+RN now and in the future.

Week 10 (3/13 - 3/15)

Final Project Presentations

Live-demo + Q&A.


CS47SI Syllabus
Official React Native Documentation
React Native Express
Expo SDK API Reference
JavaScript Style Guide
RN Styling Cheat Sheet
React Navigation Documentation

NOTE: you might need to be logged in to your Stanford account to access some content.

Website template powered by Stanford's CS 42