React Native: Learn By Doing [2021]
- Description
- Curriculum
- FAQ
- Reviews
React Native is growing at a fast pace, while more and more companies of any size are adopting it to build cross platform applications with a single code base.
In this course we aim to teach React Native flow and its secrets by building a real world project where we aim to have a solid foundation into React Native framework as well React Hooks and Functional Components.
You will build a mobile application targeted for both iOS and Android environment while you learn the responsiveness of the style, navigation between screens and get and manage data from an external API.
In this course you will learn:
– Set up your machine environment for React Native CLI development
– Build cross platform applications with React Native CLI
– Navigate between screens
– Navigate to screens dynamically
– Use of The Movie Database API
– Add custom styles
– Component base development
– React Hooks
– Functional Components
– Get Movies by genre
– Lists
– Search Movie Method
– Image Galleries
– Video Player and its commands
After this course you will be able to:
– Set up the system correctly
– Manage Errors a Debug React Native CLI applications
– Build applications from scratch
– Understand good architecture flow for an application
– Get data from the server using Axios
– Handle Data
– Display and render custom Lists
– Implement search methods
– Add external packages
– Tap in the native code of a iOS and Android application
We can’t wait to have you in board with us.
See you there!
-
1
Introduction -
2
Course Requirements
Requirements to make the most of this course.
-
3
How to Use this CourseHow to make the most of this course
-
4
If you get stuck and Errors
-
5
What is React Native?
Explanation and Overview of React Native Framework.
-
6
Expo CLI or React Native CLI?
Brief explanation about React Native CLI and Expo, and what is better for use cases.
-
7
Installing Node - Version 14 and Above
Installation of Nodejs Runtime package from version 12 and above
-
8
Setting Up the Development Environment
Explanation of what we need to do to setup our environment for React Native development
-
9
Setting Up - Android
Setting up the environment for Android development
-
10
Setting Up - IOS
Setting up environment for iOS development
-
11
Code Editor
Installing and overview of Visual Studio Code
-
12
Installing Extensions for Rapid Coding
Best extensions for fast development in Visual Studio Code
-
13
Create React Native Project
Learn how to create a React Native project
-
14
Running on iOS Simulator
Run a React Native app in a iOS simulator
-
15
Running on Android Emulator
Run a React Native app in Android Simulator
-
16
Running on Your Mobile Device Using Vysor
Using a 3rd party application to mirror your android device and run the application there
-
17
Hello World App and Logging
Build your first React Native Hello World App
-
18
Debugging with Chrome Browser
Learn how to debug a React Native application with Chrome
-
19
Debugging with VSCode
Use your VSCode text editor to debug a React Native application
-
20
Getting Movies Data : API Overview
Overview of the TMDB API
-
21
Creating Movies App Project
What are we going to do and how we are going to do it
-
22
Regarding Dependencies Versions
-
23
Create Movies Data Service
Create services to get Movie data to our application
-
24
Display Movie Data
Handle and display data
-
25
Important: Using Effects + Checking Performance
Understand React Hook useEffect and there performance optimization
-
26
Services Error Handling
Handle Errors in our app
-
27
Refactoring
Code Refactoring
-
28
Section Code
Section Code
-
29
Creating Home Screen Component
In this lecture we will create our first Home Screen Component
-
30
Latest Movies Images Slider
Learn how to add and handle an Image Slider in the app
-
31
Styling Movies Images Slider
Learn how to style our Image Slider
-
32
Working with Movies Lists - Carousels
Add Lists and Carousels with React Native
-
33
Create List Component
Creating our List Component
-
34
Create Card Component
Create our Movie Card
-
35
Image Placeholder in Card Component
How to add image in our Card Component
-
36
Type checking in React Native
Learn how to check the Props types in React to avoid future errors
-
37
Adding Scroll View to Scroll the Home Screen
Manage the type of View in our screens with ScrollView
-
38
Popular TV Shows - Family Movies - Documentaries
Get and display data by genre
-
39
Refactoring
Code Refactoring
-
40
Add Loading Spinner
Loading Spinner to show while the user waits for the data to be loaded
-
41
Add Error Component
Create and Error Component to show if there's something wrong with our data
-
42
Section Code
-
47
Movie Detail Overview
What we are aiming to do in this section
-
48
Pass Selected Movie Data to Detail Component
Passing route params props to our movie detail screen
-
49
Movie Detail Service
Add our custom service to Movie Detail screen
-
50
Movie Title and Genres
Manage, extract and display title and genres of our movie
-
51
Movie Star-Rating Component
Add a star rating component to score the movies
-
52
Using Icons in React Native
Learn how to add icons to a React Native Application
-
53
If You Still Getting Error with Icon Fonts
Text based solution for adding icons errors
-
54
Movie Description and Release Date
Add more data to our Movie Detail
-
55
Movie Play Button
Add a play button and align it with position absolute
-
56
Video Player Modal
Display our video in a Modal component
-
57
Play a Movie Within the Modal
Start playing our video in the Modal opens
-
58
Modal Closing Logic
Add function for when we close our Modal
-
59
Section Code
-
64
Search Movies and TV's Services
Implement our search movie services
-
65
Search Movie Screen
Add and configure the Search Screen
-
66
Search Form
Implement a search form with our newly created method
-
67
Search Results
Render a list with the results of the search
-
68
Merging Movies and TV Search Results
Get both results in one single list
-
69
Section Code
