Oreilly - React Native - The Practical Guide
by Maximilian Schwarzmüller | Publisher: Packt Publishing | Release Date: April 2018 | ISBN: 9781789139747
Use React Native and your React knowledge and take your web development skills to build native iOS and Android AppsAbout This VideoThe core concepts and theoryHow to use React, JavaScript and native componentsUnderstand how to navigate in React Native appsA closer look at styling and animating React Native appsInstructions on how to use third-party libraries in your React Native appDetailed examples on how to use maps or an image pickerA full user authentication flowHow to connect to a backend server from your appDebugging instructionsIn DetailMobile applications 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 like 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! 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 what 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 the steps required to get it into an app store.Downloading the example code for this course: You can download the example code files for all Packt video courses you have purchased from your account at http://www.PacktPub.com. If you purchased this course elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
- Chapter 1 : Getting Started
- Welcome! 00:01:58
- What is React Native? 00:04:14
- A Closer Look 00:03:01
- What Happens to JavaScript? 00:01:28
- Creating Our First React Native App 00:07:38
- Dealing with Limitations of React Native 00:05:34
- What a Good Course Offers 00:01:45
- Course Requirements 00:03:04
- Course Outline 00:02:44
- How to get the Most out of This Course 00:01:20
- Chapter 2 : Diving into the Basics
- Module Introduction 00:01:24
- Creating a New Project 00:04:01
- JSX Elements you can and can't Use 00:05:46
- Ejecting from Create React Native App 00:02:31
- Running the App on an Android Simulator (+ Setup) 00:09:49
- Running our App on a Real Android Device 00:01:04
- Running our App on an iOS Simulator 00:02:16
- Running our App on an iOS Device 00:03:54
- A Good Development Setup 00:03:53
- Working on the App: Adding a Textinput 00:08:26
- Styling - Understanding the Basics 00:10:16
- Positioning Elements with Flexbox 00:08:29
- Adding a Button and Managing State 00:06:27
- Creating a Custom Component 00:08:37
- Listening to Touch Events 00:08:31
- Reacting to Press Events 00:05:02
- Using a ScrollView 00:03:02
- Rendering Lists Correctly 00:08:15
- Adding Static Images 00:09:50
- Using Network Images 00:03:23
- Adding a Modal 00:17:43
- React vs React Native 00:02:07
- JavaScript - Supported Features 00:03:49
- Wrap Up 00:01:33
- Chapter 3 : Using Redux with React Native
- Module Introduction 00:00:52
- A Brief Redux Refresher 00:03:43
- Installing Redux and Creating a Basic Setup 00:05:29
- Setting up Actions 00:07:22
- Setting up the Reducer 00:06:31
- Creating the Store 00:07:10
- Connecting React Native to Redux 00:09:25
- Wrap Up 00:00:45
- Chapter 4 : Debugging React Native Apps
- Module Introduction 00:00:52
- Using the Remote JavaScript Debugging console.log 00:04:12
- Debugging with Breakpoints 00:01:58
- Debugging+++ with React Native Debugger 00:04:04
- Debugging Redux 00:05:21
- Wrap Up 00:00:57
- Chapter 5 : Linking and Using Third Party Libraries
- Module Introduction 00:01:25
- Installing Libraries 00:02:51
- Linking Libraries on iOS 00:04:12
- Linking Libraries on Android 00:04:03
- Using Library Features: Adding Icons 00:05:25
- Wrap Up 00:00:45
- Chapter 6 : Navigation in React Native Apps
- Module Introduction 00:01:08
- Navigation in Web Apps vs Native Apps 00:01:13
- Exploring Native Navigation Solutions 00:02:31
- Adding React Native Navigation to iOS 00:04:05
- Adding React Native Navigation to Android 00:05:18
- Finishing the Library Setup 00:01:56
- Registering and Rendering a Screen 00:09:57
- Adding a Tabs Screen (Tabs Navigation) 00:09:32
- Adding Icons to Tabs 00:05:58
- Connecting Screens to Redux 00:03:13
- Updating Redux 00:09:44
- Pushing Pages (Navigating "Forwards") 00:09:14
- Popping Pages (Navigating "Backwards") 00:07:46
- More Navigator Methods 00:01:00
- Adding a Side Drawer 00:07:46
- Using Navigation Events & Toggling the Drawer 00:07:44
- Finishing the Drawer 00:03:05
- Wrap Up 00:01:00
- Chapter 7 : Styling & Animating React Native Apps (Correctly)
- Module Introduction 00:02:10
- Using StyleSheet vs Normal JS Objects 00:01:56
- Vanilla CS vs React Native Styles 00:04:44
- Flexbox in Action 00:09:25
- Styling with Relative Units 00:04:17
- "Global Styles" with Custom Components 00:05:24
- Synthetic Cascading of Styles 00:03:53
- Styling Text 00:05:17
- Cascading Text Styles 00:04:16
- Adding a Background Image 00:06:23
- Creating a Re-Usable Custom Button 00:07:10
- Editing the "Share Place" Screen 00:14:45
- Styling & Splitting the "Share Place" Screen 00:10:50
- Finishing the "Share Place" Screen 00:04:38
- You’re Challenge! 00:01:10
- Styling the Side Drawer 00:05:10
- Quick Bug Fix: PlaceInput Component 00:00:42
- Intro: Cross Platform Styles & Responsiveness 00:02:03
- Cross-Platform Styling Made Easy! 00:02:16
- Using the Platform API 00:04:52
- Loading Different Icons for Different Platforms 00:05:55
- Using Different Entry Points (into the App) 00:01:17
- Cross-Platform UI Libraries 00:02:47
- The "Responsive Styling" Problem 00:02:06
- Responsive Design Solutions 00:02:20
- Using the Dimensions API 00:07:16
- Adjusting Styles Dynamically (to changing Width / Height) 00:08:13
- A Better Responsive Solution 00:05:17
- Bug Fix: Centering with Margins 00:00:57
- Cleaning Up Dimensions Listeners 00:02:41
- Styling Navigation Items (react-native-navigation) 00:04:07
- Preparing the App for Animations 00:08:50
- Using the Animated API 00:09:46
- Animations Summary 00:01:22
- Wrap Up 00:01:12
- Chapter 8 : Handling User Input
- Module Introduction 00:00:56
- Managing Input/ Control State 00:11:22
- Adding Custom Validation Logic 00:20:45
- Using the Validation State 00:08:47
- Dispatching an Auth Action 00:05:23
- Switching Form (Auth) Modes 00:06:55
- Configuring Text Input Components 00:04:40
- Handling the Soft Keyboard 00:04:46
- Wrap Up 00:01:08
- Chapter 9 : Using Native Device Features - Maps, Camera & Image Gallery
- Module Introduction 00:01:14
- Installing react-native-maps 00:08:54
- Rendering a Map 00:11:12
- Picking a Location on the Map 00:04:56
- Adding a Map Marker 00:03:21
- Animating Map Movement 00:03:50
- Locating the User 00:08:31
- Storing the Picked Location with Redux 00:07:23
- Installing react-native-image-picker 00:06:38
- Using the Image Picker 00:05:37
- Storing the Picked Images 00:06:07
- Image Picker and the Data it Returns 00:01:56
- Wrap Up 00:01:13
- Chapter 10 : Networking - Sending Http Requests
- Module Introduction 00:01:14
- Sending Http Requests – Theory 00:01:29
- Creating the Server 00:02:51
- Using the Fetch-API 00:02:59
- Storing Data in Firebase 00:10:24
- Storing Images 00:19:26
- Finishing the Image Upload Function 00:10:17
- Storing the Remaining Data 00:03:38
- Adding the Activity Indicator 00:10:24
- Handling Errors 00:01:33
- Getting Data from the Server 00:12:55
- Fixing an Error 00:01:39
- Wrap Up 00:00:59
- Chapter 11 : Authentication in React Native Apps
- Module Introduction 00:01:15
- How Authentication Works in React Native Apps 00:03:03
- Enabling Firebase Authentication 00:02:09
- Signing Users Up 00:08:30
- Using the Authentication Result (Response) 00:07:09
- Supporting Signup and Login 00:02:49
- Adding User Login 00:05:07
- Protecting Routes on Firebase 00:02:40
- Storing the Auth Token in Redux 00:06:09
- Using the Auth Token 00:03:53
- Fetching the Token in a Re-Usable Way 00:07:17
- Protecting the Firebase Cloudfunction 00:07:20
- Adding Places (Authenticated) 00:04:41
- Storing the Token in AsyncStorage 00:07:05
- Adding an Auto-Signin Functionality 00:05:17
- Managing the Token Expiration 00:10:51
- Clearing the Auth Storage (AsyncStorage) 00:02:38
- Refreshing the Token 00:14:55
- Adding User Logout 00:08:17
- Refreshing the Token without App Reloads 00:06:51
- Wrap Up 00:00:58
- Chapter 12 : Polishing the App
- Module Introduction 00:00:44
- Identifying "Improvement Potential" 00:02:37
- Shrinking Image Sizes 00:02:17
- Resetting the "Share Place" Screen 00:07:57
- Redirecting to another Tab 00:10:59
- Loading Places All the Time! 00:03:05
- Improving Http Error Handling 00:03:26
- Cleaning Stored Images (on Firebase) 00:08:50
- Wrap Up 00:00:28
- Chapter 13 : Publishing the App
- Module Introduction 00:00:56
- Adding Launcher Icons 00:05:13
- Adding a Splash Screen 00:08:17
- Configuring & Building the App 00:07:51
- Publishing to Google Play Store (Android) 00:02:43
- Publishing to the App Store (iOS) 00:06:35
- Chapter 14 : Round Up
Coktum |
