Navigation - Lecture 6 - CS50's Mobile App Development with React Native 2018
Skills:
UI Design80%
00:00:00 - Introduction
00:01:30 - What Is Navigation?
00:05:09 - React Navigation and Alternatives
00:06:47 - Install React Navigation
00:07:47 - Navigators, Routes, and Screen Components
00:09:56 - Switch Navigator
00:10:43 - Creating a Navigator
00:11:01 - Rendering a Navigator
00:11:29 - Higher Order Components
00:12:31 - Navigating to Another Route
00:13:01 - The Navigation Prop
00:13:36 - Switch Navigator Example
00:27:48 - screenProps
00:30:44 - Stack Navigator
00:33:17 - Creating a StackNavigator
00:33:37 - Returning to the Previously Active Route
00:33:55 - StackNavigator Example
00:35:36 - Configuring navigationOptions
00:38:18 - Passing Around State
00:48:24 - Using the StackNavigator
00:51:19 - Adding a Button
01:05:55 - push
01:06:40 - Stack-specific Navigation Options
01:07:07 - Composing Navigators
01:13:09 - Tab Navigators
This course picks up where Harvard University's CS50 leaves off, transitioning from web development to mobile app development with React Native, a popular open-source framework maintained by Facebook that enables cross-platform native apps using JavaScript without Java or Swift. The course introduces students to modern JavaScript (including ES6 and ES7) as well as to JSX, a JavaScript extension. Through hands-on projects, students gain experience with React and its paradigms, app architecture, and user interfaces. The course culminates in a final project for which students implement an app entirely of their own design.
https://www.youtube.com/playlist?list=PLhQjrBD2T382gdfveyad09Ierl_3Jh_wR
***
This is CS50, Harvard University's introduction to the intellectual enterprises of computer science and the art of programming.
***
HOW TO SUBSCRIBE
http://www.youtube.com/subscription_center?add_user=cs50tv
HOW TO TAKE CS50
edX: https://cs50.edx.org/
Harvard Extension School: https://cs50.harvard.edu/extension
Harvard Summer School: https://cs50.harvard.edu/summer
OpenCourseWare: https://cs50.harvard.edu/x
HOW TO JOIN CS50 COMMUNI
Watch on YouTube ↗
(saves to browser)
Sign in to unlock AI tutor explanation · ⚡30
Playlist
Uploads from CS50 · CS50 · 0 of 60
← Previous
Next →
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
Hello, World: Hadi Partovi
CS50
Content Distribution and Archival in a Digital Age
CS50
CS50 2014 - Week 1
CS50
CS50 2014 - Week 3
CS50
CS50 2014 - Week 0, continued
CS50
CS50 2014 - Week 4
CS50
Week 3, continued
CS50
Quiz 0 Review
CS50
CS50 2014 - Week 3, continued
CS50
CS50 2014 - Week 7
CS50
CS50 2014 - Week 7, continued
CS50
Breaking Through The (Google) Glass Ceiling by Christopher Bartholomew
CS50
Introduction to Amazon Web Services by Leo Zhadanovsky
CS50
CS50 2014 - Week 9
CS50
How to Build Innovative Technologies by Abby Fichtner
CS50
Light Your World (with Hue Bulbs) by Dan Bradley
CS50
Building Dynamic Web Apps with Laravel by Eric Ouyang
CS50
CS50 2014 - CS50 Lecture by Steve Ballmer
CS50
CS50 2014 - Week 10
CS50
This is CS50 with Steve Ballmer?
CS50
Meteor: a better way to build apps by Roger Zurawicki
CS50
Data Analysis in R by Dustin Tran
CS50
Data Visualization and D3 by David Chouinard
CS50
CS50 2014 - Week 6
CS50
Build Tomorrow's Library by Jeffrey Licht
CS50
CS50 2014 - Week 9, continued
CS50
Essential Scale-Out Computing by James Cuff
CS50
iOS App Development with Swift by Dan Armendariz
CS50
Sam Clark Leads Yale Students on Tour to CS50 at Harvard
CS50
3D Modeling and Manufacture by Ansel Duff
CS50
CS50 2014 - Week 5, continued
CS50
hello, world
CS50
CS50 2014 - Deep Thoughts - Hash Table
CS50
CS50 2014 - Deep Thoughts - Binary Tree
CS50
CS50 2014 - Deep Thoughts - Scratch
CS50
CS50 2014 - Deep Thoughts - MySQL
CS50
LaunchCode Visits CS50
CS50
CS50 Live, Episode 100
CS50
CS50 Field Trip to Google
CS50
This is CS50 AP
CS50
Week 4: Monday - CS50 2011 - Harvard University
CS50
Week 2: Wednesday - CS50 2011 - Harvard University
CS50
Week 1: Wednesday - CS50 2011 - Harvard University
CS50
Week 11: Monday - CS50 2011 - Harvard University
CS50
Week 3: Wednesday - CS50 2011 - Harvard University
CS50
Week 12: Monday - CS50 2011 - Harvard University
CS50
Week 1: Friday - CS50 2011 - Harvard University
CS50
Week 3: Monday - CS50 2011 - Harvard University
CS50
Week 10: Wednesday - CS50 2011 - Harvard University
CS50
Week 2: Monday - CS50 2011 - Harvard University
CS50
Week 9: Monday - CS50 2011 - Harvard University
CS50
Week 7: Monday - CS50 2011 - Harvard University
CS50
Week 5: Monday - CS50 2011 - Harvard University
CS50
Week 5: Wednesday - CS50 2011 - Harvard University
CS50
Week 7: Wednesday - CS50 2011 - Harvard University
CS50
Week 8: Monday - CS50 2011 - Harvard University
CS50
Week 9: Wednesday - CS50 2011 - Harvard University
CS50
Week 8: Wednesday - CS50 2011 - Harvard University
CS50
Week 10: Monday - CS50 2011 - Harvard University
CS50
Week 2: Wednesday - CS50 2010 - Harvard University
CS50
More on: UI Design
View skill →Related AI Lessons
⚡
⚡
⚡
⚡
How to Build a Next.js App in 30 Languages (Without Losing Your Mind)
Dev.to · Iurii Rogulia
Building True Vector PDF Export in the Browser with fabric.js
Dev.to · morestrive
Day 0 — visual concept for a small cloud platform
Dev.to · Danilo Eduardo Lopez Corozo
Part I: Don't Wait for Data. Render What You Know.
Dev.to · Pratik Goswami
Chapters (25)
Introduction
1:30
What Is Navigation?
5:09
React Navigation and Alternatives
6:47
Install React Navigation
7:47
Navigators, Routes, and Screen Components
9:56
Switch Navigator
10:43
Creating a Navigator
11:01
Rendering a Navigator
11:29
Higher Order Components
12:31
Navigating to Another Route
13:01
The Navigation Prop
13:36
Switch Navigator Example
27:48
screenProps
30:44
Stack Navigator
33:17
Creating a StackNavigator
33:37
Returning to the Previously Active Route
33:55
StackNavigator Example
35:36
Configuring navigationOptions
38:18
Passing Around State
48:24
Using the StackNavigator
51:19
Adding a Button
1:05:55
push
1:06:40
Stack-specific Navigation Options
1:07:07
Composing Navigators
1:13:09
Tab Navigators
🎓
Tutor Explanation
DeepCamp AI