React Native - The Practical Guide [2024 Edition]

28h 33m 46s
English
Paid

Course description

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?

Read more about the course

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 animate React Native apps, 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 "Awesome 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

Requirements:
  • 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
Who this course is for:
  • Anyone who wants to use React to build native mobile apps
  • Every mobile developer who wishes to learn only one language to write cross-platform mobile apps
  • Every mobile or web developer who's interested in writing high-performance native apps with JavaScript

What you'll learn:

  • Build native mobile apps with JavaScript and React
  • Dive deeper into React Native
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, ObjectiveC or Java/ Android

Watch Online

Join premium to watch
Go to premium
# Title Duration
1 Welcome To This Course & What To Expect! 01:06
2 What Is React Native? 03:28
3 A Glance Under The Hood Of React Native 05:06
4 Creating React Native Projects: Expo CLI vs React Native CLI 06:27
5 Creating a New React Native Project 04:40
6 Analyzing The Created Project 05:17
7 Running Our First App On A Real Device! 04:21
8 Setting Up A Local Development Environment 09:27
9 About This Course 06:55
10 Module Introduction 01:45
11 Exploring Core Components & Component Styling 07:53
12 Working With Core Components 07:01
13 Styling React Native Apps 10:14
14 Exploring Layouts & Flexbox 03:20
15 React Native & Flexbox 02:32
16 Using Flexbox To Create Layouts 05:09
17 Flexbox - A Deep Dive 12:20
18 Improving The Layout 07:13
19 Handling Events 07:30
20 Managing A List Of Course Goals (in our Demo App) 07:11
21 iOS & Android Styling Differences 08:51
22 Making Content Scrollable with ScrollView 06:16
23 Optimizing Lists with FlatList 13:42
24 Splitting Components Into Smaller Components 05:12
25 Utilizing Props 02:34
26 Working on the "Goal Input" Component 09:41
27 Handling Taps with the Pressable Component 03:35
28 Making Items Deletable & Using IDs 05:18
29 Adding an Android Ripple Effect & an iOS Alternative 04:53
30 Adding a Modal Screen 06:58
31 Styling the Modal Overlay 05:42
32 Opening & Closing the Modal 02:31
33 Working with Images & Changing Colors 06:05
34 App Finishing Touches 07:16
35 Module Summary 03:33
36 Module Introduction 01:18
37 Handling Errors 04:38
38 Logging to the Console 01:53
39 Debugging JavaScript Remotely 03:06
40 Using the React DevTools 03:28
41 Using the Documentation 00:35
42 Module Introduction & What We'll Build 02:07
43 Starting Setup & Analyzing the Target App 03:04
44 Setting Up our Screen Components 05:41
45 Creating Custom Buttons 06:59
46 Styling for Android & iOS 11:17
47 Styling the "Number Input" Element 06:53
48 Configuring the TextInput Field 03:22
49 Adding Visual Feedback to the Buttons 15:47
50 Improving the Buttons 07:39
51 Coloring the Components & The Overall App 03:20
52 Adding a Linear Gradient 04:03
53 Adding a Background Image 07:04
54 Getting Started with the Game Logic 07:11
55 Handling User Input & Showing an Alert Dialog 07:31
56 Switching Screens Programmatically 07:12
57 Starting Work on the Game Screen 04:46
58 Respecting Device Screen Restrictions with the SafeAreaView 03:07
59 Creating a Title Component 04:38
60 Managing Colors Globally 06:54
61 Creating, Using & Displaying Random Numbers 12:44
62 Adding Game Control Buttons ("+" & "-") to the App 15:28
63 Checking for "Game Over" 11:13
64 Improving the Game Screen Visuals 11:41
65 Using "Cascading Styles" 05:46
66 Working with Icons (Button Icons) 04:09
67 Adding & Using Custom Fonts with React Native Apps 07:04
68 Adding a (Foreground) Image 09:02
69 Using & Styling Nested Text 04:53
70 Adding Logic to (Re-)Start Games & Displaying a Summary Screen 06:59
71 Logging Game Rounds 05:52
72 Outputting Log Data with FlatList 02:51
73 Styling the Game Round Logs 08:11
74 Finishing Touches 04:34
75 Module Summary 02:57
76 Module Introduction 04:06
77 Setting Dynamic Widths 04:30
78 Introducing the Dimensions API 06:40
79 Adjusting Image Sizes with the Dimensions API 04:05
80 Understanding Screen Orientation Problems 03:17
81 Setting Sizes Dynamically (for different Orientations) 07:57
82 Managing Screen Content with KeyboardAvoidingView 05:50
83 Improving the Landscape Mode UI 07:55
84 Further Improvements with useWindowDimensions 04:36
85 Writing Platform-specific Code with the Platform API 09:00
86 Styling the Status Bar 02:09
87 Module Introduction 01:29
88 What Is Navigation? 04:22
89 Getting Started with the App & Outputting Meal Categories 09:32
90 Displaying Items in a Grid 14:29
91 Getting Started with the React Navigation Package 09:45
92 Implementing Navigation Between Two Screens 08:31
93 Understanding the useNavigation Hook 03:39
94 Working with Route Parameters To Pass Data Between Screens 06:37
95 Displaying Meals 07:52
96 Adding Images & Styling 17:12
97 Styling Screen Headers & Backgrounds 08:00
98 Setting Navigation Options Dynamically 09:05
99 Adding & Configuring the Meal Details Screen 08:58
100 Outputting Content in the Meal Detail Screen 09:25
101 Finishing the Meal Detail Screen 18:58
102 Adding Header Buttons 06:56
103 Adding an Icon Button to a Header 04:51
104 Adding Drawer Navigation & Creating a Drawer 09:33
105 Configuring the Drawer Navigator & The Drawer 10:10
106 Adding, Configuring & Using Bottom Tabs 06:31
107 Nesting Navigators 13:05
108 App Finishing Touches 03:53
109 Module Summary 02:44
110 Module Introduction 03:05
111 Getting Started with React's Context API 05:23
112 Managing App-wide State with Context 05:00
113 Using the Created Context with useContext 05:12
114 Managing Favorite Meals with the Context API 09:40
115 Getting Started with Redux & Redux Toolkit 04:46
116 Working with Redux Slices 07:03
117 Managing Redux State & Dispatching Actions 05:14
118 Using Redux State in Components 01:46
119 Module Summary 01:17
120 Module Introduction & What We'll Build 02:22
121 The Starting Setup 06:18
122 Adding Navigation (with React Navigation) & Configuring Navigation 08:29
123 Adding Global Colors & Editing Navigation Configuration 10:04
124 Creating Key App Components to Display Expenses 06:18
125 Continuing Work on the Expense-related Components 06:49
126 Adding Dummy Expense Data 05:38
127 Outputting a List of Expenses 04:46
128 Improving App Layout & Styling 07:51
129 Working on Expense List Items 13:25
130 Formatting Dates 04:42
131 Adding a Header Button & Making Expense Items Tappable 11:33
132 Navigating Programmatically Between Screens 05:17
133 Styling The Expense Management Screen 03:07
134 Supporting Different Editing Modes & Using Route Parameters 07:01
135 Adding a "Delete" Button 05:35
136 Adding Custom Buttons 09:41
137 Closing A Modal Programmatically 03:22
138 Managing App-wide State With Context 18:18
139 Using Context From Inside Components 08:20
140 Deleting & Updating Expenses 06:33
141 Finishing Touches 04:26
142 Module Introduction 01:27
143 Building a Custom Input Component 08:35
144 Creating an Overall Form 05:58
145 Configuring the Form Input Elements 04:10
146 Adding Styling 07:41
147 Setting the Form Layout 06:42
148 Handling User Input in a Generic Way 09:57
149 Managing Form State & Submission 04:55
150 Working with Entered Data 05:21
151 Setting & Using Default Values 07:09
152 Adding Validation 06:39
153 Providing Visual Validation Feedback 09:19
154 Adding Error Styling 04:55
155 Module Summary 01:42
156 Module Introduction 02:23
157 Backend Setup (Firebase) 03:30
158 Installing Axios 02:13
159 Sending POST Http Requests 06:35
160 Fetching Backend Data (GET Requests) 09:26
161 Transforming & Using Fetched Data 08:20
162 Using Response Data from POST Requests 05:44
163 Updating & Deleting Backend Data (UPDATE & DELETE Requests) 07:51
164 Managing the Loading State 08:58
165 Handling Request Errors 12:03
166 Module Summary 00:59
167 Module Introduction 02:00
168 Demo App Walkthrough 03:57
169 How Does Authentication Work? 02:59
170 Backend Setup 05:36
171 Controlling Signup & Login Screens 04:40
172 Sending Authentication Requests to the Backend 05:20
173 Creating New Users 05:40
174 Logging Users In 06:32
175 Authentication Error Handling 03:50
176 Storing & Managing the User Authentication State (with Context) 07:14
177 Extracting the Authentication Token 04:17
178 Protecting Screens 06:58
179 Adding a Logout Functionality 03:39
180 Accessing Protected Resources 10:18
181 Storing Auth Tokens on the Device & Logging Users In Automatically 11:47
182 Module Summary 02:14
183 Module Introduction 02:38
184 Adding a "Favorite Places" List 08:55
185 Editing the Favorite Place Items 08:00
186 Adding an "Add Place" Screen + Navigation 06:35
187 Adding a Header Button 07:18
188 Global Colors & Styling 05:04
189 Getting Started with a Custom Form 06:00
190 Adding & Configuring the Camera Package (for Native Camera Access) 06:20
191 Taking Photos on Android 06:09
192 Taking Photos on iOS + Managing Permissions 08:29
193 Showing an Image Preview 06:42
194 Creating a Custom Button 06:02
195 Getting Started with the Location Picker 05:34
196 Locating Users 09:07
197 Adding a Location Preview Map 12:26
198 Adding an Interactive Map (Google Maps & Apple Maps) 08:33
199 Allowing Map Interaction & Adding Markers 05:11
200 Confirming Picked Locations 07:40
201 Previewing Picked Locations 09:16
202 Adding a Form Submit Button 04:45
203 Managing Location & Image State in the Form 09:31
204 Converting Picked Locations to Human-Readable Addresses 09:46
205 Passing Entered Data to the "AllPlaces" Screen 05:21
206 Outputting a List Of Places 04:40
207 Styling Place Items 06:30
208 SQLite: Getting Started & Initialization 16:12
209 Preparing Code to Insert Data into the SQLite Database 07:10
210 Inserting Places into the Database 03:18
211 Fetching Places from the Database 09:36
212 Adding the Place Details Screen 09:16
213 Fetching Place Detail Data from the Database 08:37
214 Showing a Readonly Map 09:10
215 Module Summary 02:29
216 Module Introduction 01:31
217 How Exactly Does Expo Work? 04:21
218 Expo Alternatives 05:35
219 Setting Up Our System 04:44
220 Using Expo's Bare Workflow 07:49
221 Using Native Device Features with the Bare Workflow 07:27
222 Ejecting To The Bare Workflow 05:42
223 Creating Projects with the React Native CLI (no Expo) 07:12
224 Non-Expo Apps & Native Device Features 03:28
225 Module Summary 01:52
226 Module Introduction 01:37
227 Publishing Apps: An Overview 04:06
228 Key Configuration Items & Considerations 02:31
229 Configuring App Names & Versions 08:17
230 A Quick Note About Environment Variables 01:52
231 Adding Icons & A Splash Screen 03:41
232 Building Expo Apps with EAS 14:32
233 EAS for iOS (even on Windows Devices) 16:47
234 Building for iOS Without Expo 10:24
235 Building for Android Without Expo 07:22
236 Module Introduction 01:03
237 What are (Local) Notifications? 02:09
238 Adding the Expo Notification Package 06:12
239 Scheduling Notifications 06:06
240 Handling Incoming Notifications 05:23
241 Reacting To Incoming Notifications 07:11
242 Reacting To User Interaction With Incoming Notifications 04:52
243 Understanding Push Notifications 06:41
244 Push Notifications Setup 05:14
245 Using the Push Token 08:55
246 Sending Push Notifications 08:43
247 Module Summary 02:25
248 Course Roundup 00:56
249 Module Introduction 01:37
250 JavaScript - A Summary 02:36
251 Core Syntax Refresher 04:35
252 let & const 02:29
253 Arrow Functions 05:18
254 Objects: Properties & Methods 03:20
255 Arrays & Array Methods 04:17
256 Arrays, Objects & Reference Types 02:14
257 Spread Operator & Rest Parameters 06:42
258 Destructuring 05:38
259 Async Code & Promises 10:29
260 Wrap Up 00:51
261 Module Introduction 01:13
262 What is React 03:14
263 A Starting Project 04:04
264 Understanding JSX 05:32
265 Understanding Components 02:51
266 Working with Multiple Components 07:05
267 Working with Props 06:53
268 Rendering Lists of Data 04:31
269 Handling Events 07:25
270 Parent-Child Communication 04:39
271 Managing State 05:55
272 More on State 04:21
273 User Input & Two-Way Binding 05:53
274 Wrap Up 02:12
275 This Course Was Updated | Update Information 07:17

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Universal Apps with Tamagui

Universal Apps with Tamagui

Sources: Simon Grimm
Create a universal app with React Native and Tamagui. Learn how to use the same codebase for iOS, Android, and Web. Discover the power of Tamagui in bridging...
1 hour 35 minutes 34 seconds
Publish React Native Apps to the App Store

Publish React Native Apps to the App Store

Sources: Simon Grimm
Take the final step in your app development journey and bring your React Native app to the masses! In our course, “Publish React Native Apps to the App...
38 minutes 5 seconds
Build a React Native app with Claude AI

Build a React Native app with Claude AI

Sources: designcode.io
This comprehensive course is dedicated to integrating advanced AI tools into the workflow of development in React Native, which allows for a radical change in a
13 hours 53 minutes 10 seconds
React Native Expo Boilerplate | Ship Mobile Fast

React Native Expo Boilerplate | Ship Mobile Fast

Sources: shipmobilefast
Ship Mobile Fast is a template for developing mobile applications based on React Native and Expo, providing ready-to-use features such as...
State Management with Zustand

State Management with Zustand

Sources: Simon Grimm
Enter the world of efficient and intuitive state management with our in-depth course, “React Native State Management with Zustand.” Learn how to effortlessly...
56 minutes 13 seconds