Mô tả

This course was updated (completely re-recorded) in April 2022 - you learn the latest version of React Native with this course!

---

Mobile apps are one of the best ways to engage with users - no wonder everyone wants to build one!

Wouldn't it be great if you could use your web development knowledge, combined with your React knowledge, to build mobile apps with that?

That's exactly what React Native allows you to do!

No need to learn Java, Android, Swift, ObjectiveC or anything of that - React and JavaScript is all you need to create awesome native mobile apps that work on both Android and iOS. That's probably the reason why Instagram, AirBnB, Skype and many other global companies are using it to build their mobile apps!

With this course, you can join this league. I'll teach you all you need to create your own React Native apps, publish them to the Google Play Store and Apple App Store and dive really deep into the React Native ecosystem.

You'll learn all about the theory behind React Native, its core concepts, how to build responsive designs that work on different device sizes, how to navigate around, use maps and the camera and so much more!

And which better way to learn than by building a real app? We'll build the "Favorite Places" app in this course, an app where users can share amazing pictures and the location where they took them. This app will allow you to see things like using maps, the camera, user authentication, connecting to a server and much more in action.

By the end of the course, we'll of course also go through all steps required to get it into an app store.

Here's a detailed look at what you'll get:

  • The core concepts and theory

  • How to use React, JavaScript and native components

  • Understand how to navigate in React Native apps

  • A closer look at styling and animating React Native apps

  • Instructions on how to use third-party libraries in your React Native app

  • Detailed examples on how to use maps or an image picker

  • A full user authentication flow

  • How to connect to a backend server from your app

  • Debugging instructions

  • And so much more!

What will you need to succeed in this course?

  • NO Android, Java, Swift or ObjectiveC knowledge is required!

  • JavaScript and React (for the web) knowledge is required though - you don't need to be an expert but the basics need to be set (though there are refresher sections in this course!)

I'd be very happy to welcome you in the course!

Max

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

Learn how to use ReactJS to build real native mobile apps for iOS and Android

Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android

Explore React Native basics and advanced features!

Learn how to use key mobile app features like Google maps or the device camera

Yêu cầu

  • React knowledge is a must (but you absolutely DON'T have to be an expert)
  • JavaScript knowledge is a must, next-gen JavaScript knowledge (i.e. ES6+) is recommended
  • NO Android/ Java or iOS (Swift, ObjectiveC) development experience is required

Nội dung khoá học

19 sections

Getting Started

11 lectures
Welcome To This Course & What To Expect!
01:05
What Is React Native?
03:27
Join our Online Learning Community
00:23
A Glance Under The Hood Of React Native
05:05
Creating React Native Projects: Expo CLI vs React Native CLI
06:26
Creating a New React Native Project
04:39
Analyzing The Created Project
05:15
Running Our First App On A Real Device!
04:20
Setting Up A Local Development Environment
09:26
About This Course
06:54
Course Resources, Code Snapshots & How To Use
00:19

React Native Basics [COURSE GOALS APP]

29 lectures
Module Introduction
01:44
Exploring Core Components & Component Styling
07:52
Working With Core Components
07:00
Styling React Native Apps
10:13
React Native: Core Components, Styling & Colors - More Information
00:34
Exploring Layouts & Flexbox
03:19
React Native & Flexbox
02:31
Using Flexbox To Create Layouts
05:08
Flexbox - A Deep Dive
12:19
Components, Styles, Layouts
8 questions
Improving The Layout
07:12
Handling Events
07:29
Managing A List Of Course Goals (in our Demo App)
07:10
iOS & Android Styling Differences
08:50
Making Content Scrollable with ScrollView
06:15
Optimizing Lists with FlatList
13:41
More Components & Lists
3 questions
Splitting Components Into Smaller Components
05:11
Utilizing Props
02:33
Working on the "Goal Input" Component
09:40
Handling Taps with the Pressable Component
03:34
Making Items Deletable & Using IDs
05:17
Adding an Android Ripple Effect & an iOS Alternative
04:52
Adding a Modal Screen
06:57
Styling the Modal Overlay
05:41
Opening & Closing the Modal
02:30
Working with Images & Changing Colors
06:04
App Finishing Touches
07:15
Module Summary
03:32

Debugging React Native Apps (Introduction)

6 lectures
Module Introduction
01:17
Handling Errors
04:37
Logging to the Console
01:52
Debugging JavaScript Remotely
03:05
Using the React DevTools
03:27
Using the Documentation
00:34

Diving Deeper into Components, Layouts & Styling - Building a Mini-Game App

34 lectures
Module Introduction & What We'll Build
02:06
Starting Setup & Analyzing the Target App
03:03
Setting Up our Screen Components
05:39
Creating Custom Buttons
06:58
Styling for Android & iOS
11:16
Styling the "Number Input" Element
06:52
Configuring the TextInput Field
03:21
Adding Visual Feedback to the Buttons
15:46
Improving the Buttons
07:38
Coloring the Components & The Overall App
03:19
Adding a Linear Gradient
04:02
Adding a Background Image
07:03
Getting Started with the Game Logic
07:10
Handling User Input & Showing an Alert Dialog
07:30
Switching Screens Programmatically
07:11
Starting Work on the Game Screen
04:45
Respecting Device Screen Restrictions with the SafeAreaView
03:06
Creating a Title Component
04:37
Managing Colors Globally
06:53
Creating, Using & Displaying Random Numbers
12:43
Adding Game Control Buttons ("+" & "-") to the App
15:27
Checking for "Game Over"
11:12
Improving the Game Screen Visuals
11:40
Using "Cascading Styles"
05:45
Working with Icons (Button Icons)
04:08
Adding & Using Custom Fonts with React Native Apps
07:03
Adding a (Foreground) Image
09:01
Using & Styling Nested Text
04:52
Adding Logic to (Re-)Start Games & Displaying a Summary Screen
06:58
Logging Game Rounds
05:51
Outputting Log Data with FlatList
02:49
Styling the Game Round Logs
08:10
Finishing Touches
04:33
Module Summary
02:56

Building Adaptive User Interfaces (Adapt to Platform & Device Sizes)

12 lectures
Module Introduction
04:05
Setting Dynamic Widths
04:29
Introducing the Dimensions API
06:39
Adjusting Image Sizes with the Dimensions API
04:04
Understanding Screen Orientation Problems
03:16
Setting Sizes Dynamically (for different Orientations)
07:55
Managing Screen Content with KeyboardAvoidingView
05:49
Improving the Landscape Mode UI
07:54
The Dimensions API & Responsive UIs
3 questions
Further Improvements with useWindowDimensions
04:35
Writing Platform-specific Code with the Platform API
08:59
Styling the Status Bar
02:08

React Native Navigation with React Navigation [MEALS APP]

24 lectures
Module Introduction
01:28
What Is Navigation?
04:21
Getting Started with the App & Outputting Meal Categories
09:31
Displaying Items in a Grid
14:28
Getting Started with the React Navigation Package
09:44
Implementing Navigation Between Two Screens
08:30
Setting the Default Screen
00:33
Understanding the useNavigation Hook
03:38
Working with Route Parameters To Pass Data Between Screens
06:36
Displaying Meals
07:51
Adding Images & Styling
17:11
Styling Screen Headers & Backgrounds
07:59
Setting Navigation Options Dynamically
09:04
Adding & Configuring the Meal Details Screen
08:57
Outputting Content in the Meal Detail Screen
09:23
Finishing the Meal Detail Screen
18:57
Adding Header Buttons
06:55
Adding an Icon Button to a Header
04:50
Adding Drawer Navigation & Creating a Drawer
09:31
Configuring the Drawer Navigator & The Drawer
10:09
Adding, Configuring & Using Bottom Tabs
06:29
Nesting Navigators
13:04
App Finishing Touches
03:52
Module Summary
02:43

App-wide State Management with Redux & Context API

10 lectures
Module Introduction
03:04
Getting Started with React's Context API
05:22
Managing App-wide State with Context
04:59
Using the Created Context with useContext
05:11
Managing Favorite Meals with the Context API
09:39
Getting Started with Redux & Redux Toolkit
04:45
Working with Redux Slices
07:02
Managing Redux State & Dispatching Actions
05:13
Using Redux State in Components
01:45
Module Summary
01:15

Time To Practice - The Expense Tracker App

22 lectures
Module Introduction & What We'll Build
02:21
The Starting Setup
06:17
Adding Navigation (with React Navigation) & Configuring Navigation
08:28
Adding Global Colors & Editing Navigation Configuration
10:03
Creating Key App Components to Display Expenses
06:17
Continuing Work on the Expense-related Components
06:48
Adding Dummy Expense Data
05:37
Outputting a List of Expenses
04:44
Improving App Layout & Styling
07:50
Working on Expense List Items
13:24
Formatting Dates
04:41
Adding a Header Button & Making Expense Items Tappable
11:32
Navigating Programmatically Between Screens
05:16
Styling The Expense Management Screen
03:06
Supporting Different Editing Modes & Using Route Parameters
07:00
Adding a "Delete" Button
05:34
Adding Custom Buttons
09:40
Closing A Modal Programmatically
03:21
Managing App-wide State With Context
18:17
Using Context From Inside Components
08:18
Deleting & Updating Expenses
06:32
Finishing Touches
04:25

Handling User Input

14 lectures
Module Introduction
01:26
Building a Custom Input Component
08:34
Creating an Overall Form
05:57
Configuring the Form Input Elements
04:08
Adding Styling
07:40
Setting the Form Layout
06:41
Handling User Input in a Generic Way
09:56
Managing Form State & Submission
04:54
Working with Entered Data
05:20
Setting & Using Default Values
07:08
Adding Validation
06:38
Providing Visual Validation Feedback
09:18
Adding Error Styling
04:54
Module Summary
01:41

Sending Http Requests

11 lectures
Module Introduction
02:22
Backend Setup (Firebase)
03:29
Installing Axios
02:12
Sending POST Http Requests
06:34
Fetching Backend Data (GET Requests)
09:25
Transforming & Using Fetched Data
08:19
Using Response Data from POST Requests
05:43
Updating & Deleting Backend Data (UPDATE & DELETE Requests)
07:50
Managing the Loading State
08:57
Handling Request Errors
12:02
Module Summary
00:58

User Authentication

17 lectures
Module Introduction
01:59
Demo App Walkthrough
03:56
How Does Authentication Work?
02:58
Backend Setup
05:35
Controlling Signup & Login Screens
04:39
Sending Authentication Requests to the Backend
05:19
Creating New Users
05:39
Logging Users In
06:30
Authentication Error Handling
03:49
Storing & Managing the User Authentication State (with Context)
07:13
Extracting the Authentication Token
04:16
Protecting Screens
06:57
Adding a Logout Functionality
03:38
Accessing Protected Resources
10:17
Storing Auth Tokens on the Device & Logging Users In Automatically
11:46
A Note About Token Expiration
01:34
Module Summary
02:12

Using Native Device Features (Camera, Location & More)

33 lectures
Module Introduction
02:37
Adding a "Favorite Places" List
08:54
Editing the Favorite Place Items
07:59
Adding an "Add Place" Screen + Navigation
06:34
Adding a Header Button
07:17
Global Colors & Styling
05:03
Getting Started with a Custom Form
05:59
Adding & Configuring the Camera Package (for Native Camera Access)
06:19
Taking Photos on Android
06:08
Taking Photos on iOS + Managing Permissions
08:28
Showing an Image Preview
06:41
Creating a Custom Button
06:00
Getting Started with the Location Picker
05:33
Locating Users
09:06
Adding a Location Preview Map
12:25
Adding an Interactive Map (Google Maps & Apple Maps)
08:32
Allowing Map Interaction & Adding Markers
05:10
Confirming Picked Locations
07:38
Previewing Picked Locations
09:15
Adding a Form Submit Button
04:44
Managing Location & Image State in the Form
09:30
Converting Picked Locations to Human-Readable Addresses
09:45
Passing Entered Data to the "AllPlaces" Screen
05:20
Outputting a List Of Places
04:39
Styling Place Items
06:29
SQLite: Getting Started & Initialization
16:11
Preparing Code to Insert Data into the SQLite Database
07:09
Inserting Places into the Database
03:17
Fetching Places from the Database
09:35
Adding the Place Details Screen
09:15
Fetching Place Detail Data from the Database
08:36
Showing a Readonly Map
09:09
Module Summary
02:28

Building React Native Apps Without Expo

10 lectures
Module Introduction
01:30
How Exactly Does Expo Work?
04:20
Expo Alternatives
05:33
Setting Up Our System
04:43
Using Expo's Bare Workflow
07:48
Using Native Device Features with the Bare Workflow
07:26
Ejecting To The Bare Workflow
05:41
Creating Projects with the React Native CLI (no Expo)
07:11
Non-Expo Apps & Native Device Features
03:27
Module Summary
01:50

Publishing React Native Apps

11 lectures
Module Introduction
01:36
Publishing Apps: An Overview
04:05
Key Configuration Items & Considerations
02:30
Configuring App Names & Versions
08:16
A Quick Note About Environment Variables
01:51
Adding Icons & A Splash Screen
03:40
Building Expo Apps with EAS
14:31
EAS for iOS (even on Windows Devices)
16:46
Building for iOS Without Expo
10:23
Building for Android Without Expo
07:21
Configuring Android Apps
00:24

Push Notifications

14 lectures
Module Introduction
01:02
What are (Local) Notifications?
02:08
Adding the Expo Notification Package
06:11
Scheduling Notifications
06:05
Configuring Scheduled Notifications
00:38
Handling Incoming Notifications
05:22
Local Notifications - Permissions
00:32
Reacting To Incoming Notifications
07:10
Reacting To User Interaction With Incoming Notifications
04:51
Understanding Push Notifications
06:40
Push Notifications Setup
05:12
Using the Push Token
08:54
Sending Push Notifications
08:42
Module Summary
02:24

Course Roundup

1 lectures
Course Roundup
00:55

Bonus: JavaScript Refresher

14 lectures
Module Introduction
01:36
JavaScript - A Summary
02:35
Project Setup
00:07
Core Syntax Refresher
04:34
let & const
02:27
Arrow Functions
05:17
Objects: Properties & Methods
03:19
Arrays & Array Methods
04:16
Arrays, Objects & Reference Types
02:13
Spread Operator & Rest Parameters
06:40
Destructuring
05:37
Async Code & Promises
10:28
Wrap Up
00:50
Module Resources
00:02

Bonus: React.js Refresher

15 lectures
Module Introduction
01:12
What is React
03:13
A Starting Project
04:03
Understanding JSX
05:31
Understanding Components
02:50
Working with Multiple Components
07:04
Working with Props
06:52
Rendering Lists of Data
04:30
Handling Events
07:24
Parent-Child Communication
04:38
Managing State
05:54
More on State
04:20
User Input & Two-Way Binding
05:52
Wrap Up
02:11
Module Resources
00:02

Bonus

4 lectures
Legacy Course Content
00:29
This Course Was Updated | Update Information
07:16
Course Update Information & FAQs
01:57
Bonus: More Content!
00:21

Đá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.