React Native – The Practical Guide [2021 Edition]

React Native – The Practical Guide [2021 Edition]

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 32.5 Hours | 17.1 GB

Use React Native and your React knowledge to build native iOS and Android Apps – incl. Push Notifications, Hooks, Redux

This course was completely updated and now does not only cover the latest version of React Native but also includes refreshers on JavaScript & React.js!

In addition, a whole section on “Push Notifications” was added.

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 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 (though there are refresher sections in this course!)

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

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
Table of Contents

Getting Started
1 Welcome!
2 What is React Native
3 Join our Online Learning Community
4 How React Native Works
5 Expo vs React Native CLI
6 Node.js Download
7 Creating Our First React Native App
8 Working on Our First App
9 React Native Apps Are Hard Work!
10 React Native Alternatives
11 Course Requirements
12 Course Requirement Refreshers
13 Running the App on an Android Emulator
14 Running the App on an iOS Simulator
15 Course Outline
16 How to get the Most out of This Course
17 Useful Resources & Links

Diving into the Basics [COURSE GOALS APP]
18 Module Introduction
19 How to work with React Native Components
20 Setting Up A New Project
21 Planning the App
22 Working with Core Components
23 Getting Started with Styles
24 Flexbox & Layouts (Intro)
25 React Native Flexbox Deep Dive
26 Inline Styles & StyleSheet Objects
27 Working with State & Events
28 Outputting a List of Items
29 Styling List Items
30 Making it Scrollable with ScrollView!
31 A Better List FlatList
32 Splitting the App Into Components
33 Passing Data Between Components
34 Working with Touchable Components
35 Deleting Items
36 Adding a Modal Overlay
37 More Flexbox Styling
38 Closing the Modal & Clearing Input
39 Finishing the Modal Styling
40 Wrap Up
41 Useful Resources & Links

Debugging React Native Apps
42 Module Introduction
43 What To Debug & How To Debug
44 Running the App on a Real Device & Debugging
45 Handling Error Messages
46 Understanding Code Flow with console.log()
47 Using the Remote Debugger & Breakpoints
48 Working with the Device DevTools Overlay
49 Debugging the UI & Using React Native Debugger
50 Wrap Up
51 Useful Resources & Links

Components, Styling, Layouts – Building Real Apps [GUESS A NUMBER APP]
52 Module Introduction
53 Setup & App Planning
54 Adding a Custom Header Component
55 Adding a Screen Component
56 Working on the Layout
57 Styling a View as a Card Container (with Drop Shadows & Rounded Corners)
58 React Native Styling vs CSS Styling
59 Extracting a Card Component (Presentational Component)
60 Color Theming with Constants
61 Configuring & Styling a TextInput
62 Cleaning User Input & Controlling the Soft Keyboard
63 Resetting & Confirming User Input
64 Showing an Alert
65 Time to Finish the Confirmation Box
66 Adding Random Number Generation
67 Switching Between Multiple Screens
68 Adding Game Features Hints & Validation
69 Checking the Win Condition with useEffect()
70 Finishing the Game Logic
71 Adding AppLoading
72 Adding Custom Fonts
73 Installing expo-font
74 A Synthetic Style Cascade Custom Wrapper Components & Global Styles
75 Adding Local Images
76 Styling Images
77 Working with Network (Web) Images
78 A Closer Look at the Text Component (and what you can do with it)
79 View vs Text – A Summary
80 Building a Custom Button Component
81 Adding Icons
82 Exploring UI Libraries
83 Managing Past Guesses as a List
84 Styling List Items & Lists
85 ScrollView & Flexbox (Yes, that works!)
86 Using FlatList Instead of ScrollView
87 Wrap Up
88 Useful Resources & Links

Responsive & Adaptive User Interfaces and Apps
89 Module Introduction
90 Finding Improvement Opportunities
91 Working with More Flexible Styling Rules
92 Introducing the Dimensions API
93 Using Dimensions in if Checks
94 Calculating Sizes Dynamically
95 Problems with Different Device Orientations
96 Controlling Orientation & Using the KeyboardAvoidingView
97 Listening to Orientation Changes
98 Rendering Different Layouts
99 Fixing the GameOver Screen
100 Updating All Code to Update Dynamically
101 Expo’s ScreenOrientation API
102 Introducing the Platform API
103 Working with and Platform in if Checks
104 Using Platform-specific Code Files
105 Using the SafeAreaView
106 Wrap Up
107 Useful Resources & Links

Navigation with React Navigation [THE MEALS APP]
108 Module Introduction
109 Planning the App
110 Adding Screens
111 Adding AppLoading
112 Adding Fonts
113 React Navigation Docs
114 Installing React Navigation & Adding Navigation to the App
115 MUST READ Installing Different Navigators
116 Creating a StackNavigator
117 React Navigation & Code Attachments
118 Navigating Between Screens
119 Alternative Navigation Syntax
120 Navigation to the Meal Details Screen
121 Pushing, Popping & Replacing
122 Outputting a Grid of Categories
123 Configuring the Header with Navigation Options
124 Passing & Reading Params Upon Navigation
125 Setting Dynamic Navigation Options
126 Default Navigation Options & Config
127 Grid Styling & Some Refactoring
128 Adding Meal Models & Data
129 Loading Meals for Categories
130 Rendering a Meals List
131 Passing Data to the Meal Detail Screen
132 Adding Header Buttons
133 Fixing the Shadows
134 Adding Tabs-based Navigation
135 Setting Icons and Configuring Tabs
136 navigationOptions inside of a Navigator
137 Adding MaterialBottomTabs
138 Adding a Favorites Stack
139 Adding a Menu Button & Drawer Navigation
140 Configuring the Drawer
141 More Navigation Config & Styling
142 Adding a DefaultText Component
143 Adding the MealDetail Screen Content
144 Time for the Filters Screen Content!
145 Passing Data Between Component & Navigation Options (Header)
146 [React Refresher] useEffect() & useCallback()
147 Wrap Up
148 Useful Resources & Links

State Management & Redux
149 Module Introduction
150 What is State & What is Redux
151 Redux & Store Setup
152 Selecting State Slices
153 Redux Data & Navigation Options
154 Dispatching Actions & Reducer Logic
155 Switching the Favorites Icon
156 Rendering a Fallback Text
157 Adding Filtering Logic
158 Dispatching Filter Actions
159 Debugging Redux in React Native Apps
160 Wrap Up
161 Useful Resources & Links

Time to Practice – THE SHOP APP
162 Module Introduction
163 Planning the App
164 Creating the Basic Project Setup
165 The Products Overview Screen
166 Setting Up a Navigator
167 Styling the Product Items
168 Adding Touchable Components
169 Working on the Product Details Screen
170 Using Custom Fonts
171 Adding Items to the Cart
172 Implementing Header Buttons
173 Outputting Cart Items
174 Adding Logic to Delete Items
175 Adding Redux Logic for Orders
176 SideDrawer & The Orders Screen
177 Clearing the Cart
178 Styling Order Items
179 Making the Show Details Button Work
180 Building the User Products Screen
181 Reorganizing the ProductItem Component
182 Deleting Items
183 Adding Basic Editing & Navigation Logic
184 Handling User Input
185 Using Params to Submit User Input
186 Dispatching Actions for Creating & Updating
187 Time to Improve the App!
188 Wrap Up
189 Useful Resources & Links

Handling User Input
190 Module Introduction
191 Configuring TextInputs
192 Adding Basic Validation
193 Getting Started with useReducer()
194 Finishing the Merged Form & Input Management
195 Moving Input Logic Into A Separate Component
196 Connecting Input Component & Form
197 Tweaking Styles & Handling the Soft Keyboard
198 Alternatives & Wrap Up
199 Useful Resources & Links

Http Requests & Adding a Web Server + Database
200 Module Introduction
201 Setup & How To Send Requests
202 Installing Redux Thunk
203 Storing Products on a Server
204 Fetching Products from the Server
205 Displaying a Loading Spinner & Handling Errors
206 Setting Up a Navigation Listener
207 Updating & Deleting Products
208 Handling Additional Errors
209 Storing Orders
210 Displaying an ActivityIndicator
211 Fetching Stored Orders
212 Adding Pull to Refresh
213 Wrap Up
214 Useful Resources & Links

User Authentication
215 Module Introduction
216 How Authentication Works
217 Implementing a Basic Login Screen
218 Adding User Signup
219 Logging Users In
220 Managing the Loading State & Errors
221 Using the Token
222 Mapping Orders to Users
223 Improved Mapping (Scoping)
224 Implementing Auto Login
225 Adding Logout
226 Implementing Auto Logout
227 Auto-Logout & Android (Warning)
228 Wrap Up
229 Useful Resources & Links

Native Device Features (Camera, Maps, Location, SQLite, …) [GREAT PLACES APP]
230 Module Introduction
231 Planning the App
232 Navigation Setup in Next Lecture
233 Screen & Navigation Setup
234 Getting Started with the Form
235 Redux & Adding Places
236 Outputting a List of Places
237 Accessing the Device Camera
238 Configuring the Camera Access
239 Using the Picked Image
240 Storing the Image on the Filesystem
241 Changed SQLite Import
242 Diving into SQLite for Permanent Data Storage
243 Storing Data in the Local Database
244 Fetching Data from the Local Database
245 Getting the User Location
246 Showing a Map Preview of the Location
247 More on Environment Variables
248 Displaying an Interactive Map
249 Adding a Marker
250 Making the Picked Location Saveable
251 Storing Picked Places
252 Updating the Location Screen When the Location Changes
253 Storing the Address
254 Displaying the Details Screen
255 Finishing the Map Screen
256 Running the App on iOS
257 Running the App on Android
258 Wrap Up
259 Useful Resources & Links

Building Apps Without Expo
260 Module Introduction
261 Alternatives to Expo
262 Building Apps with Just the React Native CLI
263 Live Reload and RN CLI Apps
264 Important Using React Native Image Picker
265 Adding Native Modules to Non-Expo Apps
266 Understanding Expo’s Bare Workflow
267 Ejecting from Expo’s Managed Workflow
268 When To Use Which
269 Useful Resources & Links

Publishing React Native Apps
270 Module Introduction
271 Deployment Steps
272 Configuring the App & Publishing
273 Configuring Icons & The Splash Screen
274 Working with Offline Asset Bundles
275 Using Over the Air Updates (OTA Updates)
276 Building the Apps for Deployment (iOS & Android)
277 Publishing iOS Apps without Expo
278 Publishing Android Apps without Expo
279 Configuring Android Apps
280 Useful Resources & Links

Updating to React Navigation 5+
281 Module Introduction
282 What Changed
283 Preparing the Project
284 More Information & Updating the Project Dependencies
285 Moving from the Registry-like to the Component-based Navigation Config
286 First Migration Steps
287 Converting More Stack Navigators to the New Config
288 Migrating the Drawer Navigation
289 Replacing the Switch Navigator & Auth Flow
290 Logout & Further Fixes Adjustments
291 Extracting Screen Params
292 Setting Screen Options Dynamically
293 Remaining Migration Steps & Roundup
294 A Summary Of All Important Changes
295 Useful Resources & Links

Push Notifications
296 Module Introduction
297 Understanding Notifications
298 Sending Local Notifications
299 Getting Permissions
300 Controlling How Notifications Are Displayed
301 Reacting to Foreground Notifications
302 Reacting to Background Notifications
303 How Push Notifications Work
304 Expo & Push Notifications
305 Getting a Push Token
306 Sending Push Notifications
307 Using Expo’s Push Server
308 More on Push Tokens
309 Adding Push Notifications to the Shop App (1 3)
310 Adding Push Notifications to the Shop App (2 3)
311 Adding Push Notifications to the Shop App (3 3)
312 Push Notifications in non-Expo Managed Apps
313 Module Resources

Course Roundup & Next Steps
314 Roundup & Next Steps

Bonus JavaScript Refresher
315 Module Introduction
316 JavaScript – A Summary
317 Project Setup
318 Core Syntax Refresher
319 let & const
320 Arrow Functions
321 Objects Properties & Methods
322 Arrays & Array Methods
323 Arrays, Objects & Reference Types
324 Spread Operator & Rest Parameters
325 Destructuring
326 Async Code & Promises
327 Wrap Up
328 Module Resources

Bonus React.js Refresher
329 Module Introduction
330 What is React
331 A Starting Project
332 Understanding JSX
333 Understanding Components
334 Working with Multiple Components
335 Working with Props
336 Rendering Lists of Data
337 Handling Events
338 Parent-Child Communication
339 Managing State
340 More on State
341 User Input & Two-Way Binding
342 Wrap Up
343 Module Resources

344 Bonus More Content!