Course Overview
If you're tired of spinning your wheels learning Swift or Android, this is the course for you.
Authentication? You will learn it. Hooks? Included. Navigation? Of course!
This course will get you up and running with React Native quickly, and teach you the core knowledge you need to deeply understand and build React components for mobile devices.
Both OSX and Windows supported - develop iOS or Android!
This course includes content on both v0.62.2 and the legacy v0.30.x, which is widely used in industry.
We'll start by mastering the fundamentals of React, including JSX, “props", “state", and event handling. Source code is provided for each lecture, so you will always stay up-to-date with the course pacing. Special attention has been paid to creating reusable components that you'll be able to make use of on your own fantastic projects.
React Native is an excellent solution for developing apps on mobile in a fraction of the time it takes to make an equivalent iOS or Swift app. You'll love seeing your changes instantly appear on your own device, rather than waiting for Swift/Java code to recompile! This quick feedback loop, along with excellent cross platform support, is what has catapulted React Native to the top must-have skill for Javascript engineers.
If you are new to React, or if you've been working to learn it but sometimes feel like you still don't quite 'get it', this is the React course for you! To learn React you have to understand it.
Learn how to use React's custom markup language, JSX, to clean up your Javascript code
Master the process of breaking down a complex component into many smaller, interchangeable components
Grasp the difference between “props" and “state" and when to use each
Render interactive, media-rich components in beautifully styled apps
Develop apps that are unique, fun, and responsive
Build on both Android and iOS platforms
Master integration with Firebase for user authentication
Learn the core principles of navigation with React Native
I've built the course that I would have wanted to take when I was learning React Native. A course that explains the concepts and how they're implemented in the best order for you to learn and deeply understand them.
FAQ
FAQ area empty
Course curriculum
-
State in Components
335 -
Screen Boilerplate
194 -
State in Action
585 -
Notes on State
419 -
App Overview
306 -
Generating Random Colors
267 -
Adding Random Colors
288 -
Showing Colors with a FlatList
213 -
App Overview
283 -
Reusable Color Adjusters
374 -
Coordinating State
331 -
Passing Callbacks to Children
381 -
Tying State Values Together
436 -
Validating State Changes
476 -
Reusable State Updates
454 -
Introduction to Reducers
519 -
Creating a Reducer
900 -
Applying State with a Reducer
535 -
Restoring Validation
420 -
Community Convention in Reducers
409 -
Exercise Outline
76 -
Exercise Solution
656 -
Handling Text Input
202 -
Showing a Text Input
208 -
Two Important Props
256 -
Weird Things with Text and State
371 -
Updating State
292 -
Exercise Outline
148 -
Exercise Solution
154
-
Layout with React Native
229 -
Basics of Box Object Model
355 -
AlignItems with Flex
274 -
Flex Direction
227 -
Justify Content
176 -
Flex Values
308 -
Align Self on Children
144 -
The Position Property
153 -
Top, Bottom, Left, Right
181 -
Absolute Fill Objects
166 -
Applying Layout Systems
112 -
Exercise Overview
73 -
Exercise Solution
378
-
Starter Files Download, Installation and Startup
-
App Overview
96 -
Yelp API Info and Workarounds
-
Yelp Signup
280 -
Yelp Walkthrough
256 -
React Navigation
186 -
Assembling a Navigator
412 -
Architecture Approach
167 -
Starting the SearchBar
251 -
Displaying Icons
348 -
Search Bar Styling
248 -
A Touch More Styling
232 -
Managing State
402 -
Detecting Editing Completion
244
-
Showing a Single Result
266 -
Showing Additional Info
342 -
A Few More Styling Issues
420 -
Hiding Scroll Bars
158 -
Constraining View Elements
177 -
Empty Elements
158 -
Spacing on the Search Bar
100 -
Reminder on Navigation
288 -
Navigating from a Child Component
198 -
The WithNavigation Helper
204 -
Communicating Between Screens
224 -
Fetching a Single Restaurant
354 -
Showing a List of Images
252 -
One Last Fix
141 -
Upgrading the Restaurant app to use React Navigation v6
-
Starter Files Download, Installation and Startup
-
App Overview
145 -
Issues with Data
278 -
Initial Setup
319 -
Wrapping the Navigator
161 -
Introduction to Context
139 -
Adding Context
359 -
Moving Data with Context
364 -
Rendering a List of Posts
235 -
Adding State in Context
474 -
It Works!
245 -
Opportunity for Improvement
131 -
Updating with UseReducer
572 -
Automating Context Creation
732 -
More Automatic Context Creation
552 -
A Bit of Styling
437 -
Deleting Posts
226 -
Updating the Reducer
352 -
Navigation on Tap
300 -
Retrieving Single Posts
300 -
Adding a Creation Screen
135 -
HeaderRight Deprecation in 'navigationOptions'
-
Header Navigation
297 -
Displaying a Form
411 -
Saving a New Post
281 -
Navigation on Save
379 -
HeaderRight Deprecation in 'navigationOptions'
-
The Edit Icon Link
289 -
Communicating Info to Edit
375 -
Initializing State from Context
338 -
Extracting Form Logic
545 -
Customizing OnSubmit
264 -
Initial Form Values
299 -
Support for defaultProps Will be Removed
-
Default Props
148 -
Editing Action Function
298 -
Editing in a Reducer
218 -
Navigating Backwards
255
-
Outside Data API
129 -
Issues with Servers + React Native
192 -
Important - Required Ngrok Setup Steps
-
JSON Server and Ngrok Setup
403 -
JSON Server REST Conventions
188 -
Making a Request
616 -
Remote Fetch of Posts
355 -
Creating Posts with Post Requests
233 -
Refetching on Navigate
359 -
Deleting a Post
153 -
Editing Posts
98 -
App Wrapup
201 -
Upgrading the Blog app to use React Navigation v6
-
App Overview
270 -
Dependencies Setup
126 -
The Basics of Express
224 -
MongoDB Setup
217 -
Connecting to MongoDB
396 -
Nodemon for Automatic Restarts
78 -
Understanding the Signup Process
331 -
Using Postman
166 -
Handling JSON Data
325 -
Defining a User Schema
429 -
Creating and Saving a User
277 -
Error Handling
343 -
JSON Web Tokens
432 -
Creating a JWT
168 -
Wiring Up JSON Web Tokens
780 -
Understanding Password Hashing
498 -
Salting and Hashing
515 -
The Signin Route
402 -
Testing Signup and Signin
203 -
Defining Tracks
419 -
Listing Tracks
467 -
Creating Tracks
600
-
Server Code
-
Server Setup
505 -
Starter Files Download, Installation and Startup
-
Navigation Design
607 -
A Lot of Boilerplate
405 -
Navigator Hookup
464 -
Testing the Navigation Flow
388 -
React Native Elements
274 -
Helper Styling Components
538 -
NavigationOptions Deprecation Warning
-
Styling Odds and Ends
399 -
Input Props
279 -
The Auth Context
643 -
What's the Context Doing?
456 -
Axios Setup
312 -
Making an API Request
584 -
Handling Errored Requests
463 -
Async Storage
262 -
Async Storage Update
-
Storing the Token
391 -
Navigation From Outside of React
789 -
Oops, Typo
50 -
Navigation to Signin
217 -
Extracting Form Logic
585 -
Last Bit of Extracting
271 -
Creating a NavLink
416 -
NavigationOptions Deprecation
-
Real Component Reuse!
308 -
Wiring Up Signin
482 -
OnWillFocus vs onWillBlur Update
-
Clearing Error Messages
664 -
Automatic Signin
336 -
Empty Screens While Resolving Auth
442 -
Signing Out a User
421 -
Safe Area Views
130 -
Working on Track Create
303 -
Showing a Map
298 -
Drawing a Series of Points
277 -
Notes on Location
207 -
Fix for Missing Location Request Error
-
"requestPermissionsAsync" is now deprecated in Expo SDK 41+
-
Requesting Location Permissions
399 -
Resetting Permissions
262 -
How to Test Location?
225 -
Faking the Users Location
368 -
Reading a Location
245 -
Bugginess with Location
199 -
Location Architecture
232 -
Location Context
260 -
Live Location Updates
827 -
Fix for Indicator not Tracking Map
-
Drawing a Position Indicator
248 -
Extracting Logic to a Hook
507 -
Disabling Location Tracking
258 -
Automatic Disables
509 -
Building a Track Form
229 -
Updates to Location Context
521 -
Track Form Wire Up
349 -
Buggy UseEffects
510 -
Understanding Stale References
762 -
Some Errors You May See
-
Kind of Fixed
417 -
The UseCallback Hook
426 -
Cleaning Up After Ourselves
364 -
Avoiding Stale References
435 -
Tracking While Recording
138 -
Bring Back the Polyline
218 -
What Manages Tracks
474 -
Coordination Between Contexts
462 -
Async Storage Update
-
Automatic Authentication
626 -
Form Reset and Navigation
444 -
Fetching Created Tracks
126 -
ListItem Update
-
Listing All Tracks
445 -
Navigating to a Saved Track
309 -
Showing Track Details
321 -
Fixing Odds and Ends
527
-
Important - Do Not Skip
-
Finished Code Repository
-
OSX Installation
362 -
More on OSX Installation
325 -
Running in the Simulator
132 -
Windows Setup of React Native
391 -
Android Studio and React Native CLI Installation
312 -
Emulator Creation and System Variables
896 -
ESLint Setup with VSCode
217 -
Troubleshooting React Native Installs
-
Project Directory Walkthrough
136 -
Getting Content on the Screen
197 -
React vs React Native
191 -
Creating a Component with JSX
376 -
Registering a Component
225 -
Destructuring Imports
325 -
Application Outline
287 -
The Header Component
509 -
Consuming File Exports
410 -
Styling with React Native
273 -
More on Styling Components
291 -
Introduction to Flexbox
324 -
Header Styling
263 -
Making the Header Reusable
438 -
Sourcing Album Data
291 -
List Component Boilerplate
367 -
Class Based Components
446 -
Lifecycle Methods
400 -
Quick Note On Axios
-
Network Requests
491 -
Component Level State
537 -
More on Component Level State
413 -
Rendering a List of Components
355 -
Displaying Individual Albums
570 -
Fantastic Reusable Components - The Card
325 -
Styling a Card
365 -
Passing Components as Props
252 -
Dividing Cards into Sections
503 -
Mastering Layout with Flexbox
312 -
Positioning of Elements on Mobile
320 -
More on Styling
267 -
Images with React Native
455 -
Displaying Album Artwork
520 -
Making Content Scrollable
270 -
Handling User Input with Buttons
470 -
Styling of Buttons with UX Considerations
328 -
Responding to User Input
438 -
Linking Between Mobile Apps
260 -
Setting Button Text by Props
149 -
App Wrapup
187 -
Auth App Introduction
285 -
A Common Root Component
267 -
Copying Reusable Components
681 -
What is Firebase?
317 -
Firebase Client Setup
287 -
Login Form Scaffolding
370 -
Handling User Inputs
200 -
More on Handling User Inputs
198 -
How to Create Controlled Components
270 -
Making Text Inputs From Scratch
254 -
A Focus on Passing Props
301 -
Making the Input Pretty
360 -
Wrapping up Inputs
435 -
Password Inputs
515 -
Logging a User In
335 -
Error Handling
438 -
More on Authentication Flow
450 -
Creating an Activity Spinner
299 -
Conditional Rendering of JSX
400 -
Clearing the Form Spinner
508 -
Handling Authentication Events
369 -
More on Conditional Rendering
439 -
Logging a User Out and Wrapup
330 -
App Mockup and Approach
235 -
The Basics of Redux
510 -
More on Redux
457 -
Redux is Hard!
699 -
Application Boilerplate
155 -
More on Redux Boilerplate
494 -
Rendering the Header
331 -
Reducer and State Design
405 -
Library List of Data
451 -
JSON CopyPaste
-
The Connect Function
606 -
MapStateToProps with Connect
451 -
A Quick Review and Breather
334 -
The Theory of ListView
431 -
ListView in Practice
216 -
Rendering a Single Row
119 -
Styling the List
391 -
Creating the Selection Reducer
282 -
Introducing Action Creators
347 -
Calling Action Creators
536 -
Adding a Touchable
416 -
Rules of Reducers
316 -
Expanding a Row
312 -
Moving Logic Out of Components
383 -
Animations
422 -
Wrapup
306 -
Overview of Our Next App
280 -
App Challenges
308 -
Quick Note
-
Just a Touch More Setup
382 -
More on Boilerplate Setup
422 -
Login Form in a Redux World
420 -
Rebuilding the Login Form
379 -
Handling Form Updates with Action Creators
522 -
Wiring up Action Creators
481 -
Typed Actions
527 -
Immutable State
519 -
Creating Immutable State
428 -
More on Creating Immutable State
465 -
Synchronous vs Asynchronous Action Creators
481 -
Introduction to Redux Thunk
389 -
Redux Thunk in Practice
338 -
Redux Thunk in Practice Continued
469 -
Making LoginUser More Robust
207 -
Creating User Accounts
443 -
Showing Error Messages
405 -
A Firebase Gotcha
405 -
Showing a Spinner on Loading
717 -
Dealing with Navigation
499 -
Navigation in the Router
293 -
Addressing Styling Issues
281 -
Displaying Multiple Scenes
341 -
Navigating Between Routes
220 -
Grouping Scenes with Buckets
439 -
Navigation Bar Buttons
197 -
Navigating to the Employee Creation Form
361 -
Building the Employee Creation Form
314 -
Employee Form Actions
420 -
Handling Form Updates at the Reducer Level
374 -
Dynamic Property Updates
528 -
The Picker Component
462 -
Pickers and Style Overrides
420 -
Firebase JSON Schema
396 -
Data Security in Firebase
354 -
Creating Records with Firebase
343 -
Default Form Values
348 -
Successful Data Save to Firebase
469 -
Resetting Form Properties
588 -
Fetching Data from Firebase
496 -
Storing Data by ID
538 -
Dynamic DataSource Building
481 -
Transforming Objects to Arrays
427 -
List Building in Employee List
385 -
Reusing the Employee Form
416 -
Create vs Edit Forms
413 -
Reusable Forms
546 -
A Standalone Employee Edit Form
207 -
Initializing Forms from State
553 -
Updating Firebase Records
435 -
Clearing Form Attributes
317 -
Texting Employees
282 -
Modals as a Reusable Component
434 -
The Modal Component Continued
491 -
Styling the Modal
566 -
Employee Delete Action Creator
510 -
Wiring up Employee Delete
259
Requirment
-
All you need is basic understanding of Javascript
Outcomes
-
Create real-world native apps using React Native
-
Make truly reusable components that look great
-
Understand the terminology and concepts of Redux
-
Prototype and deploy your own applications to the Apple and Google Play Stores
-
Get up to speed with React design principles and methodologies
-
Discover mobile design patterns used by experienced engineers
0 Student
2 Courses
0 review