Your First Component | Learn to Build a Mobile App in 30 days

Autoplay
Autocomplete

Previous Lesson Complete and Continue

(Day 4-12) React Native Part 1: The Basics

Reactive Design Paradigm

XML UI Introduction (4:46)
Chrome Demo HTML UI (2:50)
React Web Hello World Introduction To JSX (4:02)
React Web Hello World Snippet

JSX and Virtual DOM

JSX Embedding Lecture Part 1 (6:47)
JSX Expression Embedding Code
Lecture Treating JSX Like A Variable (5:50)
JSX Can Treated Like Variables
Virtual Dom Lecture (8:17)
Virtual Dom Demo

Class Based Components

Your First Component (2:57)
Your First Component
Video on Properties (3:44)
Properties Code Example

React Native

First Lecture of React Native (1:14)
Expo Introduction Video
Expo Architecture Explained (3:35)
Setting Up Your Development Environment (5:31)
Instructions for installing Expo CLI
Building An Expo React Native App (5:12)
Broken Clock App
React Native Life Cycle Methods (6:58)
Manually Forcing Render (7:49)
Working Clock - Bad State Management
Working Clock App - Bad Component Architecture
Working Clock- Good Component Architecture

Your First Native App

Joke HW Instructions
Lab Solutions Video Lecture (16:40)
Solution To Joke Lab

CSS layout & Flexboxes

Introduction To CSS Box Model (3:58)
Introduction to Sketch (2:50)
Download Sketch or Figma
Flex Box Layouts Explained (3:39)
Live Coding With Flex Boxes (11:58)
Flex View Snack
Flex Froggy Lab Instructions
Flex Froggy Lab Interaction

Build Screens Part 1

Download Sketch Files
Implement Your First Screen Linear Gradient (14:08)
Linear Gradient Snack
Screen Number 2 Part 1 (40:45)

Lab 0 Layout Lab

Layout Lab Instructions
Layout Lab Snack

Building Screen Part 2

Powering Screens with Data (21:04)
Scroll View Snack
Implementing the Pod Cast Scroll View (15:33)

Scroll Lab

Scroll Lab
Scroll Lab Solution
Scroll Lab Solution Full

Debugging

Debuggging React Native Expo (15:02)
Configuring Android Emulator (Optional) (2:46)

React Navigation

Stack Navigation Lecture (29:04)
Stack Navigation Snack 5.x
Stack Navigation Snack 4.x
Tab Navigator Lecture (25:10)
Tab Navigator 5.X
Tab Navigator Snack 4.X
Tab Navigator With Icon 5.x
Tab Navigator With Icons 4.x
Draw Navigator 5.x (Popular)
Styling Navigator

Enabling Facebook Loggin

OATH Overview (10:25)
Get a Facebook Developer Account
Facebook Login Lecture (18:53)
Facebook LogIn Snack
Secure Storage Lecture (7:43)
Secure Storage
React Navigation and Secure Storage Flow (13:08)
React Navigation Authentication flow

Navigation Lab

Navigation Lab
Solution for Navigation Lab

Teach online with

Your First Component

If the code doesn't load refresh the page

Complete and Continue