Mô tả

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.

Bạn sẽ học được gì

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

Yêu cầu

  • All you need is basic understanding of Javascript

Nội dung khoá học

18 sections

Getting Started

10 lectures
How to Get Help
00:52
Course Resources
00:38
Join Our Community!
00:07
Course Overview
03:19
Installing Node.js and Prerequisite Info
00:27
Boilerplate Download and Startup
00:48
App Setup
07:02
Making Changes
04:09
Expo for Web Browser - Do Not Skip
00:20
Using iOS and Android Simulators
03:38

Working with Content

7 lectures
Overview of React Components
08:50
Showing a Custom Component
04:08
Common Questions and Answers
07:08
Rules of JSX
05:50
One Common Error
01:45
JSX Exercise Overview
01:46
JSX Solution
02:40

List Building - With Style!

8 lectures
Building Lists
02:24
The FlatList Element
02:24
Rendering a FlatList
05:12
Why a Key Property?
04:11
Solving the Key Issue
05:18
A Few Props Around FlatList
04:57
Exercise Overview
00:53
Exercise Solution
02:14

Navigating Users Between Screens

5 lectures
Button Types
03:44
Buttons in Action
05:20
Touchable Opacity in Action
04:18
Navigating with React Navigation
06:46
Destructuring Props
04:03

Building Reusable Components

9 lectures
Component Reuse with Props
03:35
Exercise Solution
01:49
Parent-Child Relationships
05:07
Communicating from Parent to Child
05:44
Images Download
00:04
Showing Images
04:07
Passing Images as Props
04:14
Exercise Outline
00:47
Exercise Solution
02:26

State Management in React Components

29 lectures
State in Components
05:35
Screen Boilerplate
03:14
State in Action
09:45
Notes on State
06:59
App Overview
05:06
Generating Random Colors
04:27
Adding Random Colors
04:48
Showing Colors with a FlatList
03:33
App Overview
04:43
Reusable Color Adjusters
06:14
Coordinating State
05:31
Passing Callbacks to Children
06:21
Tying State Values Together
07:16
Validating State Changes
07:56
Reusable State Updates
07:34
Introduction to Reducers
08:39
Creating a Reducer
15:00
Applying State with a Reducer
08:55
Restoring Validation
07:00
Community Convention in Reducers
06:49
Exercise Outline
01:16
Exercise Solution
10:56
Handling Text Input
03:22
Showing a Text Input
03:28
Two Important Props
04:16
Weird Things with Text and State
06:11
Updating State
04:52
Exercise Outline
02:28
Exercise Solution
02:34

How to Handle Screen Layout

13 lectures
Layout with React Native
03:49
Basics of Box Object Model
05:55
AlignItems with Flex
04:34
Flex Direction
03:47
Justify Content
02:56
Flex Values
05:08
Align Self on Children
02:24
The Position Property
02:33
Top, Bottom, Left, Right
03:01
Absolute Fill Objects
02:46
Applying Layout Systems
01:52
Exercise Overview
01:13
Exercise Solution
06:18

Putting It All Together - Restaurant Search App

16 lectures
App Overview
01:36
Important Note About Project Generation
00:08
Project Generation
02:40
Yelp API Info and Workarounds
01:07
Yelp Signup
04:40
Yelp Walkthrough
04:16
React Navigation
03:06
Required React Navigation Installation Update
01:22
Assembling a Navigator
06:58
Architecture Approach
02:47
Starting the SearchBar
04:11
Displaying Icons
05:48
Search Bar Styling
04:08
A Touch More Styling
03:52
Managing State
06:42
Detecting Editing Completion
04:04

Using Outside API's

4 lectures
Configuring Axios
06:58
Making the Request
10:37
Error Handling
07:30
Running an Initial Search
06:18

Making Hooks Reusable

5 lectures
The useEffect Hook
04:13
Extracting Hook Logic
07:34
Showing Search Results
05:57
Grouping Results
07:10
FlatList Rendering
03:58

Navigation with Parameters

15 lectures
Showing a Single Result
04:26
Showing Additional Info
05:42
A Few More Styling Issues
07:00
Hiding Scroll Bars
02:38
Constraining View Elements
02:57
Empty Elements
02:38
Spacing on the Search Bar
01:40
Reminder on Navigation
04:48
Navigating from a Child Component
03:18
The WithNavigation Helper
03:24
Communicating Between Screens
03:44
Fetching a Single Restaurant
05:54
Showing a List of Images
04:12
One Last Fix
02:21
Upgrading the Restaurant app to use React Navigation v6
02:08

Advanced State Management with Context

38 lectures
Important Note About Project Generation
00:08
App Overview
03:09
Issues with Data
05:45
Required React Navigation Installation Update
00:43
Initial Setup
05:19
Wrapping the Navigator
02:41
Introduction to Context
02:19
Adding Context
05:59
Moving Data with Context
06:04
Rendering a List of Posts
03:55
Adding State in Context
07:54
It Works!
04:05
Opportunity for Improvement
02:11
Updating with UseReducer
09:32
Automating Context Creation
12:12
More Automatic Context Creation
09:12
A Bit of Styling
07:17
Deleting Posts
03:46
Updating the Reducer
05:52
Navigation on Tap
05:00
Retrieving Single Posts
05:00
Adding a Creation Screen
02:15
headerRight Deprecation in 'navigationOptions'
00:09
Header Navigation
04:57
Displaying a Form
06:51
Saving a New Post
04:41
Navigation on Save
06:19
headerRight Deprecation in 'navigationOptions'
00:09
The Edit Icon Link
04:49
Communicating Info to Edit
06:15
Initializing State from Context
05:38
Extracting Form Logic
09:05
Customizing OnSubmit
04:24
Initial Form Values
04:59
Default Props
02:28
Editing Action Function
04:58
Editing in a Reducer
03:38
Navigating Backwards
04:15

Data API Sync

13 lectures
Outside Data API
02:09
Issues with Servers + React Native
03:12
Important - Required Ngrok Setup Steps
00:51
JSON Server and Ngrok Setup
06:43
JSON Server REST Conventions
03:48
Making a Request
10:16
Remote Fetch of Posts
05:55
Creating Posts with Post Requests
03:53
Refetching on Navigate
05:59
Deleting a Post
02:33
Editing Posts
01:38
App Wrapup
03:21
Upgrading the Blog app to use React Navigation v6
03:17

Building a Custom Express API

22 lectures
App Overview
04:30
Dependencies Setup
02:06
The Basics of Express
03:44
MongoDB Setup
03:37
Connecting to MongoDB
06:36
Nodemon for Automatic Restarts
01:18
Understanding the Signup Process
05:31
Using Postman
02:46
Handling JSON Data
05:25
Defining a User Schema
07:09
Creating and Saving a User
04:37
Error Handling
05:43
JSON Web Tokens
07:12
Creating a JWT
02:48
Wiring Up JSON Web Tokens
13:00
Understanding Password Hashing
08:18
Salting and Hashing
08:35
The Signin Route
06:42
Testing Signup and Signin
03:23
Defining Tracks
06:59
Listing Tracks
07:47
Creating Tracks
10:00

In-App Authentication

80 lectures
Server Code
00:11
Server Setup
08:25
Important Note About Project Generation
00:08
Navigation Design
11:14
Required React Navigation Installation Update
01:10
A LOT of Boilerplate
07:24
Navigator Hookup
07:44
Testing the Navigation Flow
06:28
React Native Elements
05:19
Helper Styling Components
08:58
navigationOptions Deprecation Warning
00:08
Styling Odds and Ends
06:39
Input Props
04:39
The Auth Context
10:43
What's the Context Doing?
07:36
Axios Setup
05:31
Making an API Request
09:44
Handling Errored Requests
07:43
Async Storage
04:22
Async Storage Update
00:14
Storing the Token
06:31
Navigation From Outside of React
13:09
Oops, Typo
00:50
Navigation to Signin
03:37
Extracting Form Logic
09:45
Last Bit of Extracting
04:31
Creating a NavLink
06:56
navigationOptions Deprecation
00:13
Real Component Reuse!
05:08
Wiring Up Signin
08:02
onWillFocus vs onWillBlur Update
00:16
Clearing Error Messages
11:04
Automatic Signin
05:36
Empty Screens While Resolving Auth
07:22
Signing Out a User
07:01
Safe Area Views
02:10
Working on Track Create
05:03
Installing React Native Maps
00:12
Showing a Map
04:58
Drawing a Series of Points
04:37
Notes on Location
04:12
Fix for Missing Location Request Error
00:18
"requestPermissionsAsync" is now deprecated in Expo SDK 41+
00:14
Requesting Location Permissions
06:39
Resetting Permissions
04:22
How to Test Location?
03:45
Faking the Users Location
06:08
Reading a Location
04:05
Bugginess with Location
03:19
Location Architecture
03:52
Location Context
04:20
Live Location Updates
13:47
Fix for Indicator not Tracking Map
00:45
Drawing a Position Indicator
04:08
Extracting Logic to a Hook
08:27
Disabling Location Tracking
04:18
Automatic Disables
08:29
Building a Track Form
03:49
Updates to Location Context
08:41
Track Form Wire Up
05:49
Buggy UseEffects
08:30
Understanding Stale References
12:42
Some Errors You May See
00:13
Kind of Fixed
06:57
The UseCallback Hook
07:06
Cleaning Up After Ourselves
06:04
Avoiding Stale References
07:15
Tracking While Recording
02:18
Bring Back the Polyline
03:38
What Manages Tracks
07:54
Coordination Between Contexts
07:42
Async Storage Update
00:14
Automatic Authentication
10:26
Form Reset and Navigation
07:24
Fetching Created Tracks
02:06
ListItem Update
00:20
Listing All Tracks
07:25
Navigating to a Saved Track
05:09
Showing Track Details
05:21
Fixing Odds and Ends
08:47

Important - OLD VERSION OF COURSE - Do Not Skip

1 lectures
Note on the Following Section
00:33

Working with Old Versions of React Native

159 lectures
Important - Do Not Skip
00:07
Finished Code Repository
00:02
OSX Installation
06:02
More on OSX Installation
05:25
Running in the Simulator
02:12
Windows Setup of React Native
06:31
Android Studio and React Native CLI Installation
05:12
Emulator Creation and System Variables
14:56
ESLint Setup with VSCode
03:37
Troubleshooting React Native Installs
00:21
Project Directory Walkthrough
02:16
Getting Content on the Screen
03:17
React vs React Native
03:11
Creating a Component with JSX
06:16
Registering a Component
03:45
Destructuring Imports
05:25
Application Outline
04:47
The Header Component
08:29
Consuming File Exports
06:50
Styling with React Native
04:33
More on Styling Components
04:51
Introduction to Flexbox
05:24
Header Styling
04:23
Making the Header Reusable
07:18
Sourcing Album Data
04:51
List Component Boilerplate
06:07
Class Based Components
07:26
Lifecycle Methods
06:40
Quick Note On Axios
00:10
Network Requests
08:11
Component Level State
08:57
More on Component Level State
06:53
Rendering a List of Components
05:55
Displaying Individual Albums
09:30
Fantastic Reusable Components - The Card
05:25
Styling a Card
06:05
Passing Components as Props
04:12
Dividing Cards into Sections
08:23
Mastering Layout with Flexbox
05:12
Positioning of Elements on Mobile
05:20
More on Styling
04:27
Images with React Native
07:35
Displaying Album Artwork
08:40
Making Content Scrollable
04:30
Handling User Input with Buttons
07:50
Styling of Buttons with UX Considerations
05:28
Responding to User Input
07:18
Linking Between Mobile Apps
04:20
Setting Button Text by Props
02:29
App Wrapup
03:07
Auth App Introduction
04:45
A Common Root Component
04:27
Copying Reusable Components
11:21
What is Firebase?
05:17
Firebase Client Setup
04:47
Login Form Scaffolding
06:10
Handling User Inputs
03:20
More on Handling User Inputs
03:18
How to Create Controlled Components
04:30
Making Text Inputs From Scratch
04:14
A Focus on Passing Props
05:01
Making the Input Pretty
06:00
Wrapping up Inputs
07:15
Password Inputs
08:35
Logging a User In
05:35
Error Handling
07:18
More on Authentication Flow
07:30
Creating an Activity Spinner
04:59
Conditional Rendering of JSX
06:40
Clearing the Form Spinner
08:28
Handling Authentication Events
06:09
More on Conditional Rendering
07:19
Logging a User Out and Wrapup
05:30
App Mockup and Approach
03:55
The Basics of Redux
08:30
More on Redux
07:37
Redux is Hard!
11:39
Application Boilerplate
02:35
More on Redux Boilerplate
08:14
Rendering the Header
05:31
Reducer and State Design
06:45
Library List of Data
07:31
JSON CopyPaste
01:18
The Connect Function
10:06
MapStateToProps with Connect
07:31
A Quick Review and Breather
05:34
The Theory of ListView
07:11
ListView in Practice
03:36
Rendering a Single Row
01:59
Styling the List
06:31
Creating the Selection Reducer
04:42
Introducing Action Creators
05:47
Calling Action Creators
08:56
Adding a Touchable
06:56
Rules of Reducers
05:16
Expanding a Row
05:12
Moving Logic Out of Components
06:23
Animations
07:02
Wrapup
05:06
Overview of Our Next App
04:40
App Challenges
05:08
Quick Note
00:10
Just a Touch More Setup
06:22
More on Boilerplate Setup
07:02
Login Form in a Redux World
07:00
Rebuilding the Login Form
06:19
Handling Form Updates with Action Creators
08:42
Wiring up Action Creators
08:01
Typed Actions
08:47
Immutable State
08:39
Creating Immutable State
07:08
More on Creating Immutable State
07:45
Synchronous vs Asynchronous Action Creators
08:01
Introduction to Redux Thunk
06:29
Redux Thunk in Practice
05:38
Redux Thunk in Practice Continued
07:49
Making LoginUser More Robust
03:27
Creating User Accounts
07:23
Showing Error Messages
06:45
A Firebase Gotcha
06:45
Showing a Spinner on Loading
11:57
Dealing with Navigation
08:19
Navigation in the Router
04:53
Addressing Styling Issues
04:41
Displaying Multiple Scenes
05:41
Navigating Between Routes
03:40
Grouping Scenes with Buckets
07:19
Navigation Bar Buttons
03:17
Navigating to the Employee Creation Form
06:01
Building the Employee Creation Form
05:14
Employee Form Actions
07:00
Handling Form Updates at the Reducer Level
06:14
Dynamic Property Updates
08:48
The Picker Component
07:42
Pickers and Style Overrides
07:00
Firebase JSON Schema
06:36
Data Security in Firebase
05:54
Creating Records with Firebase
05:43
Default Form Values
05:48
Successful Data Save to Firebase
07:49
Resetting Form Properties
09:48
Fetching Data from Firebase
08:16
Storing Data by ID
08:58
Dynamic DataSource Building
08:01
Transforming Objects to Arrays
07:07
List Building in Employee List
06:25
Reusing the Employee Form
06:56
Create vs Edit Forms
06:53
Reusable Forms
09:06
A Standalone Employee Edit Form
03:27
Initializing Forms from State
09:13
Updating Firebase Records
07:15
Clearing Form Attributes
05:17
Texting Employees
04:42
Modals as a Reusable Component
07:14
The Modal Component Continued
08:11
Styling the Modal
09:26
Employee Delete Action Creator
08:30
Wiring up Employee Delete
04:19

Extras

1 lectures
Bonus!
00:36

Đánh giá của học viên

Chưa có đánh giá
Course Rating
5
0%
4
0%
3
0%
2
0%
1
0%

Bình luận khách hàng

Viết Bình Luận

Bạn đánh giá khoá học này thế nào?

image

Đăng ký get khoá học Udemy - Unica - Gitiho giá chỉ 50k!

Get khoá học giá rẻ ngay trước khi bị fix.