The Complete React Native + Hooks Course [2020 Edition]

Getting Started
1 How to Get Help
2 Course Overview
3 Boilerplate Download
4 Trouble Installing
5 App Setup
6 Making Changes
7 Using iOS and Android Simulators
8 Official Course Repo

Working with Content
9 Overview of React Components
10 Showing a Custom Component
11 Common Questions and Answers
12 Rules of JSX
13 One Common Error
14 JSX Exercise Overview
15 JSX Solution

List Building – With Style!
16 Building Lists
17 The FlatList Element
18 Rendering a FlatList
19 Why a Key Property
20 Solving the Key Issue
21 A Few Props Around FlatList
22 Exercise Overview
23 Exercise Solution

Navigating Users Between Screens
24 Button Types
25 Buttons in Action
26 Touchable Opacity in Action
27 Navigating with React Navigation
28 Destructuring Props

Building Reusable Components
29 Component Reuse with Props
30 Exercise Solution
31 Parent-Child Relationships
32 Communicating from Parent to Child
33 Images Download
34 Showing Images
35 Passing Images as Props
36 Exercise Outline
37 Exercise Solution

State Management in React Components
38 State in Components
39 Reusable Color Adjusters
40 Coordinating State
41 Passing Callbacks to Children
42 Tying State Values Together
43 Validating State Changes
44 Reusable State Updates
45 Introduction to Reducers
46 Creating a Reducer
47 Applying State with a Reducer
48 Restoring Validation
49 Screen Boilerplate
50 Community Convention in Reducers
51 Exercise Outline
52 Exercise Solution
53 Handling Text Input
54 Showing a Text Input
55 Two Important Props
56 Weird Things with Text and State
57 Updating State
58 Exercise Outline
59 Exercise Solution
60 State in Action
61 Notes on State
62 App Overview
63 Generating Random Colors
64 Adding Random Colors
65 Showing Colors with a FlatList
66 App Overview

How to Handle Screen Layout
67 Layout with React Native
68 Absolute Fill Objects
69 Applying Layout Systems
70 Exercise Overview
71 Exercise Solution
72 Basics of Box Object Model
73 AlignItems with Flex
74 Flex Direction
75 Justify Content
76 Flex Values
77 Align Self on Children
78 The Position Property
79 Top, Bottom, Left, Right

Putting It All Together – Restaurant Search App
80 App Overview
81 Displaying Icons
82 Search Bar Styling
83 A Touch More Styling
84 Managing State
85 Detecting Editing Completion
86 Project Generation
87 Yelp Signup
88 Yelp Walkthrough
89 React Navigation
90 React Navigation Fix
91 Assembling a Navigator
92 Architecture Approach
93 Starting the SearchBar

Using Outside API’s
94 Configuring Axios
95 Making the Request
96 Error Handling
97 Running an Initial Search

Making Hooks Reusable
98 Incorrect Hook Name in Slide
99 The UseEffect Hook
100 Extracting Hook Logic
101 Showing Search Results
102 Grouping Results
103 FlatList Rendering

Navigation with Parameters
104 Showing a Single Result
105 The WithNavigation Helper
106 Communicating Between Screens
107 Fetching a Single Restaurant
108 Showing a List of Images
109 One Last Fix
110 Showing Additional Info
111 A Few More Styling Issues
112 Hiding Scroll Bars
113 Constraining View Elements
114 Empty Elements
115 Spacing on the Search Bar
116 Reminder on Navigation
117 Navigating from a Child Component

Advanced State Management with Context
118 App Overview
119 Adding State in Context
120 It Works!
121 Opportunity for Improvement
122 Updating with UseReducer
123 Automating Context Creation
124 More Automatic Context Creation
125 A Bit of Styling
126 Deleting Posts
127 Updating the Reducer
128 Navigation on Tap
129 Issues with Data
130 Retrieving Single Posts
131 Adding a Creation Screen
132 headerRight Deprecation in ‘navigationOptions’
133 Header Navigation
134 Displaying a Form
135 Saving a New Post
136 Navigation on Save
137 headerRight Deprecation in ‘navigationOptions’
138 The Edit Icon Link
139 Communicating Info to Edit
140 React Navigation Fix
141 Initializing State from Context
142 Extracting Form Logic
143 Customizing OnSubmit
144 Initial Form Values
145 Default Props
146 Editing Action Function
147 Editing in a Reducer
148 Navigating Backwards
149 Initial Setup
150 Wrapping the Navigator
151 Introduction to Context
152 Adding Context
153 Moving Data with Context
154 Rendering a List of Posts

Data API Sync
155 Outside Data API
156 Editing Posts
157 App Wrapup
158 Issues with Servers + React Native
159 JSON Server and Ngrok Setup
160 JSON Server REST Conventions
161 Making a Request
162 Remote Fetch of Posts
163 Creating Posts with Post Requests
164 Refetching on Navigate
165 Deleting a Post

Building a Custom Express API
166 App Overview
167 Defining a User Schema
168 Creating and Saving a User
169 Error Handling
170 JSON Web Tokens
171 Creating a JWT
172 Wiring Up JSON Web Tokens
173 Understanding Password Hashing
174 Salting and Hashing
175 The Signin Route
176 Testing Signup and Signin
177 Dependencies Setup
178 Defining Tracks
179 Listing Tracks
180 Creating Tracks
181 The Basics of Express
182 MongoDB Setup
183 Connecting to MongoDB
184 Nodemon for Automatic Restarts
185 Understanding the Signup Process
186 Using Postman
187 Handling JSON Data

In-App Authentication
188 Server Code
189 Styling Odds and Ends
190 Input Props
191 The Auth Context
192 What’s the Context Doing
193 Axios Setup
194 Making an API Request
195 Handling Errored Requests
196 Async Storage
197 Storing the Token
198 Navigation From Outside of React
199 Server Setup
200 Oops, Typo
201 Navigation to Signin
202 Extracting Form Logic
203 Last Bit of Extractin
204 Creating a NavLink
205 Real Component Reuse!
206 Wiring Up Signin
207 onWillFocus vs onWillBlur Update
208 Clearing Error Messages
209 Automatic Signin
210 Navigation Design
211 Empty Screens While Resolving Auth
212 Signing Out a User
213 Safe Area Views
214 Working on Track Create
215 React Native Maps Fix
216 Showing a Map
217 Drawing a Series of Points
218 Notes on Location
219 Requesting Location Permissions
220 Resetting Permissions
221 React Navigation Fix
222 How to Test Location
223 Faking the Users Location
224 Reading a Location
225 Bugginess with Location
226 Location Architecture
227 Location Context
228 Live Location Updates
229 Drawing a Position Indicator
230 Extracting Logic to a Hook
231 Disabling Location Tracking
232 A LOT of Boilerplate
233 Automatic Disables
234 Building a Track Form
235 Updates to Location Context
236 Track Form Wire Up
237 Buggy UseEffects
238 Understanding Stale References
239 Kind of Fixed
240 The UseCallback Hook
241 Cleaning Up After Ourselves
242 Avoiding Stale References
243 Navigator Hookup
244 Tracking While Recording
245 Bring Back the Polyline
246 What Manages Tracks
247 Coordination Between Contexts
248 Automatic Authentication
249 Form Reset and Navigation
250 Fetching Created Tracks
251 Listing All Tracks
252 Navigating to a Saved Track
253 Showing Track Details
254 Testing the Navigation Flow
255 Fixing Odds and Ends
256 React Native Elements
257 Helper Styling Components

Quick Note
258 Note on the Following Videos

MacOS Setup without Expo
259 OSX Installation
260 More on OSX Installation
261 Running in the Simulator

Windows Setup without Expo
262 Windows Setup of React Native
263 Android Studio and React Native CLI Installation
264 Emulator Creation and System Variables
265 ESLint Setup with VSCode

Onwards!
266 Troubleshooting React Native Installs
267 Consuming File Exports
268 Project Directory Walkthrough
269 Getting Content on the Screen
270 React vs React Native
271 Creating a Component with JSX
272 Registering a Component
273 Destructuring Imports
274 Application Outline
275 The Header Component

Making Great Looking Apps
276 Styling with React Native
277 More on Styling Components
278 Introduction to Flexbox
279 Header Styling
280 Making the Header Reusable

HTTP Requests with React Native
281 Sourcing Album Data
282 Displaying Individual Albums
283 Fantastic Reusable Components – The Card
284 Styling a Card
285 Passing Components as Props
286 Dividing Cards into Sections
287 List Component Boilerplate
288 Class Based Components
289 Lifecycle Methods
290 Quick Note On Axios
291 Network Requests
292 Component Level State
293 More on Component Level State
294 Rendering a List of Components

Handling Component Layout
295 Mastering Layout with Flexbox
296 Linking Between Mobile Apps
297 Setting Button Text by Props
298 App Wrapup
299 Positioning of Elements on Mobile
300 More on Styling
301 Images with React Native
302 Displaying Album Artwork
303 Making Content Scrollable
304 Handling User Input with Buttons
305 Styling of Buttons with UX Considerations
306 Responding to User Input

Authentication with Firebase
307 Auth App Introduction
308 Making Text Inputs From Scratch
309 A Focus on Passing Props
310 Making the Input Pretty
311 Wrapping up Inputs
312 Password Inputs
313 A Common Root Component
314 Copying Reusable Components
315 What is Firebase
316 Firebase Client Setup
317 Login Form Scaffolding
318 Handling User Inputs
319 More on Handling User Inputs
320 How to Create Controlled Components

Processing Authentication Credentials
321 Logging a User In
322 Error Handling
323 More on Authentication Flow
324 Creating an Activity Spinner
325 Conditional Rendering of JSX
326 Clearing the Form Spinner
327 Handling Authentication Events
328 More on Conditional Rendering
329 Logging a User Out and Wrapup

Digging Deeper with Redux
330 App Mockup and Approach
331 The Basics of Redux
332 More on Redux
333 Redux is Hard!
334 Application Boilerplate
335 More on Redux Boilerplate

Back to React
336 Rendering the Header
337 Reducer and State Design
338 Library List of Data
339 JSON CopyPaste
340 The Connect Function
341 MapStateToProps with Connect
342 A Quick Review and Breather

Rendering Lists the Right Way
343 The Theory of ListView
344 Expanding a Row
345 Moving Logic Out of Components
346 Animations
347 Wrapup
348 ListView in Practice
349 Rendering a Single Row
350 Styling the List
351 Creating the Selection Reducer
352 Introducing Action Creators
353 Calling Action Creators
354 Adding a Touchable
355 Rules of Reducers

Not Done Yet
356 Overview of Our Next App
357 App Challenges
358 Quick Note
359 Just a Touch More Setup
360 More on Boilerplate Setup

Handling Data in React vs Redux
361 Login Form in a Redux World
362 Rebuilding the Login Form
363 Handling Form Updates with Action Creators
364 Wiring up Action Creators
365 Typed Actions

Don’t Mutate that State
366 Immutable State
367 Showing Error Messages
368 A Firebase Gotcha
369 Showing a Spinner on Loading
370 Creating Immutable State
371 More on Creating Immutable State
372 Synchronous vs Asynchronous Action Creators
373 Introduction to Redux Thunk
374 Redux Thunk in Practice
375 Redux Thunk in Practice Continued
376 Making LoginUser More Robust
377 Creating User Accounts

Navigating Users Around
378 Dealing with Navigation
379 Employee Form Actions
380 Handling Form Updates at the Reducer Level
381 Dynamic Property Updates
382 The Picker Component
383 Pickers and Style Overrides
384 Navigation in the Router
385 Addressing Styling Issues
386 Displaying Multiple Scenes
387 Navigating Between Routes
388 Grouping Scenes with Buckets
389 Navigation Bar Buttons
390 Navigating to the Employee Creation Form
391 Building the Employee Creation Form

Firebase as a Data Store
392 Firebase JSON Schema
393 Transforming Objects to Arrays
394 List Building in Employee List
395 Data Security in Firebase
396 Creating Records with Firebase
397 Default Form Values
398 Successful Data Save to Firebase
399 Resetting Form Properties
400 Fetching Data from Firebase
401 Storing Data by ID
402 Dynamic DataSource Building

Code Reuse – Edit vs Create
403 Reusing the Employee Form
404 The Modal Component Continued
405 Styling the Modal
406 Employee Delete Action Creator
407 Wiring up Employee Delete
408 Create vs Edit Forms
409 Reusable Forms
410 A Standalone Employee Edit Form
411 Initializing Forms from State
412 Updating Firebase Records
413 Clearing Form Attributes
414 Texting Employees
415 Modals as a Reusable Component

Extras
416 Bonus!