Overview

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, Walmart, Tesla, UberEats, Coinbase, and SpaceX.

Course logistics

Date/Time Fri: 2:30 - 4:20 pm
Location 200-030
Enrollment Please apply here
Units 2 Credit/No Credit
Point of contact Ruslan AlJabari (rjabari@stanford.edu)
Instructors Ruslan AlJabari (rjabari@stanford.edu)
Alix Cui (acui@stanford.edu)
Sasha Moore (amoore5@stanford.edu)
Grace Alwan (galwan@stanford.edu)
Yousef AbuHashem (yousef24@stanford.edu)
Drew Silva (dsilva24@stanford.edu)
Karina Li (karinali@stanford.edu)
Hannah Lee (hhannah@stanford.edu)
Faculty Sponsor (do NOT email with class inquiries) James Landay (landay@stanford.edu)
Office hours (PST) On Ed in pinned post
Edstem here

Schedule

Week 1 (01/13)

1 Course Overview and intro to JSX & Hello World in RN

Course logistics, the appeal of cross-platform frameworks like React Native and building our first (super simple but super cool) app in Expo.

Assignment 1: Setup

Week 2 (01/20)

2 React Native, View Only Components and StyleSheets

Continued introduction to JSX, React Native, creating and styling interfaces using basic components. StyleSheet + Flexbox.

Assignment 2: Hinge-sorta

Week 3 (01/27)

3 Controlling, Creating Components & User-Interactive and 3rd Party Components

Creating and controlling components using States and Props. An overview of functional components and User-Interactive components provided by React Native.

Week 4 (02/03)

4 Navigation and Nested Navigation

Introduction to navigation solutions in React Native. Nesting navigation solutions of different types to create complex application flows

Assignment 3: Spotify

Week 5 (02/10)

5 Passing Data Between Screens & Fetching, Async/Await JS

Passing data between parent-child components through props + callback functions and basics of API calls and asynchronous functions in JavaScript.

Final Project Proposal

Week 6 (02/17)

6 Component Hooks and Lifecycle

React Native Introduction to lifecycle functions and hooks in React Native.

Assignment 4: Spotify 2.0

Week 7 (02/24)

7 Supabase

Using Supabase as a database solution

Week 8 (03/03)

8 End-To-End

Board-Certfied G.O.A.T CS47 staff Alix Cui builds a $16.5m startup in less than 2 hours

Week 9 (03/10)

9 More Advanced React Native and Where to go from here?

Misc. RN stuff

Week 10 (03/17)

10 Final Project Expo

Resources

View
Official React Native Documentation
View
React Native Express
View
Expo SDK API Reference
View
Expo Application Services (EAS)
View
JavaScript Style Guide
View
RN Styling Cheat Sheet
View
Replit (IDE in your browser!)

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


Website template powered by Stanford's CS 42