React Native – The Practical Guide [2021 Edition]

React Native – The Practical Guide [2021 Edition]

English | MP4 | AVC 1280×720 | AAC 48KHz 2ch | 32h 45m | 17.0 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 How React Native Works
4 Expo vs React Native CLI
5 Creating Our First React Native App
6 Working on Our First App
7 React Native Apps Are Hard Work!
8 React Native Alternatives
9 Course Requirements
10 Running the App on an Android Emulator
11 Running the App on an iOS Simulator
12 Course Outline
13 How to get the Most out of This Course
14 Course Requirement Refreshers
15 Join our Online Learning Community
16 Node.js Download
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 Handling Error Messages
45 Understanding Code Flow with console.log()
46 Using the Remote Debugger & Breakpoints
47 Working with the Device DevTools Overlay
48 Debugging the UI & Using React Native Debugger
49 Wrap Up
50 Running the App on a Real Device & Debugging
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 Extracting a Card Component (Presentational Component)
59 Color Theming with Constants
60 Configuring & Styling a TextInput
61 Cleaning User Input & Controlling the Soft Keyboard
62 Resetting & Confirming User Input
63 Showing an Alert
64 Time to Finish the Confirmation Box
65 Adding Random Number Generation
66 Switching Between Multiple Screens
67 Adding Game Features Hints & Validation
68 Checking the Win Condition with useEffect()
69 Finishing the Game Logic
70 Adding Custom Fonts
71 A Synthetic Style Cascade Custom Wrapper Components & Global Styles
72 Adding Local Images
73 Styling Images
74 Working with Network (Web) Images
75 A Closer Look at the Text Component (and what you can do with it)
76 Building a Custom Button Component
77 Adding Icons
78 Exploring UI Libraries
79 Managing Past Guesses as a List
80 Styling List Items & Lists
81 ScrollView & Flexbox (Yes, that works!)
82 Using FlatList Instead of ScrollView
83 Wrap Up
84 Adding AppLoading
85 Installing expo-font
86 React Native Styling vs CSS Styling
87 Useful Resources & Links
88 View vs Text – A Summary

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 Expo’s ScreenOrientation API
101 Introducing the Platform API
102 Working with and Platform in if Checks
103 Using Platform-specific Code Files
104 Using the SafeAreaView
105 Wrap Up
106 Updating All Code to Update Dynamically
107 Useful Resources & Links

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

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

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

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

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

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

Native Device Features (Camera, Maps, Location, SQLite, …) [GREAT PLACES APP]
232 Module Introduction
233 Planning the App
234 Screen & Navigation Setup
235 Getting Started with the Form
236 Redux & Adding Places
237 Outputting a List of Places
238 Accessing the Device Camera
239 Configuring the Camera Access
240 Using the Picked Image
241 Storing the Image on the Filesystem
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 Displaying an Interactive Map
248 Adding a Marker
249 Making the Picked Location Saveable
250 Storing Picked Places
251 Updating the Location Screen When the Location Changes
252 Storing the Address
253 Displaying the Details Screen
254 Finishing the Map Screen
255 Running the App on iOS
256 Running the App on Android
257 Wrap Up
258 Changed SQLite Import
259 More on Environment Variables
260 Navigation Setup in Next Lecture
261 Useful Resources & Links

Building Apps Without Expo
262 Module Introduction
263 Alternatives to Expo
264 Building Apps with Just the React Native CLI
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 Important Using React Native Image Picker
270 Live Reload and RN CLI Apps
271 Useful Resources & Links

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

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

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

Course Roundup & Next Steps
316 Roundup & Next Steps

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

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

346 Bonus More Content!