React Native - The Practical Guide 2020

BY
Eduonix

Learn React Native and acquire React knowledge to support your web development skills, to create native iOS and Android apps.

Mode

Online

Fees

₹ 199 995

Quick Facts

particular details
Medium of instructions English
Mode of learning Self study
Mode of Delivery Video and Text Based

Course overview

React Native is a wonderful technology that allows you to create real Native apps that you can publish to the app lab store or Google Play using javascript and the React library. The course attempts to teach everything about React Native, including all of the components and how to style applications, from the scratch. React Native - The Practical Guide 2020 is created by Academind - one of the world's leading online technical education companies, offering various types of technical courses and presented by Eduonix, an ed-tech firm that offers online skill development courses to both beginners and professionals.

Participants taking the React Native - The Practical Guide 2020 online course are required to have some basic knowledge of javascript and native. Participants don't need to know Swift iOS programming or Objective C and java for android programming, React Native - The Practical Guide 2020 syllabus covers topics such as React Native basics, debugging, styling, components, responsive and adaptive apps, navigation, The course also focuses on teaching the participants to build multiple applications with components, provide layouts, add navigation and provide a nice user experience in their application. Participants who want to benefit from the course content and improve their skills can enrol in the course.

The highlights

  • Self-paced course
  • English videos with subtitles
  • Pre-recorded video content
  • 30-day money-back guarantee
  • Accessible on portable devices

Program offerings

  • Self-paced course
  • English videos with subtitles
  • 30-day money-back guarantee
  • Lifetime membership available
  • Accessible on portable devices

Course and certificate fees

Fees information
₹ 199  ₹995
certificate availability

No

Who it is for

What you will learn

Programming skills

After completing the React Native - The Practical Guide 2020, participants will gain a thorough knowledge of React, React Native, React Native advanced programmers, and their components, as well as javascript. Participants will learn how to create real native applications with javascript and React Native, how to manage state with redux, how to tap into native device features, how to use the device camera, google maps, and how to obtain the user's position. Participants will also learn how to send data to and store data on a web server.

The syllabus

Section 1 : Getting Started

  • Welcome!
  • What is React Native?
  • How React Native Works Preview
  • Expo vs React Native CLI
  • Node.js Download
  • Creating Our First React Native App
  • Working on Our First App
  • React Native Apps Are Hard Work!
  • React Native Alternatives
  • Course Requirements
  • Running the App on an Android Emulator
  • Running the App on an iOS Simulator
  • Course Outline
  • How to get the Most out of This Course
  • Useful Resources & Links

Section 2 : Diving into the Basics [COURSE GOALS APP]

  • Module Introduction
  • How to work with React Native Components
  • Setting Up A New Project Preview
  • Planning the App
  • Working with Core Components
  • Getting Started with Styles
  • Flexbox & Layouts (Intro)
  • React Native Flexbox Deep Dive
  • Inline Styles & StyleSheet Objects
  • Working with State & Events
  • Outputting a List of Items
  • Styling List Items
  • Making it Scrollable with ScrollView!
  • A Better List: FlatList
  • Splitting the App Into Components
  • Passing Data Between Components
  • Working with Touchable Components
  • Deleting Items
  • Adding a Modal Overlay
  • More Flexbox Styling
  • Closing the Modal & Clearing Input
  • Finishing the Modal Styling
  • Wrap Up
  • Useful Resources & Links

Section 3 : Debugging React Native Apps

  • Module Introduction Preview
  • What To Debug & How To Debug?
  • Handling Error Messages
  • Understanding Code Flow with console.log()
  • Using the Remote Debugger & Breakpoints
  • Working with the Device DevTools Overlay
  • Debugging the UI & Using React Native Debugger
  • Wrap Up
  • Useful Resources & Links

Section 4 : Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]

  • Module Introduction
  • Setup & App Planning
  • Adding a Custom Header Component
  • Adding a Screen Component
  • Working on the Layout
  • Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
  • Extracting a Card Component (Presentational Component)
  • Color Theming with Constants
  • Configuring & Styling a TextInput
  • Cleaning User Input & Controlling the Soft Keyboard
  • Resetting & Confirming User Input
  • Showing an Alert
  • Time to Finish the "Confirmation Box"
  • Adding Random Number Generation
  • Switching Between Multiple "Screens"
  • Adding Game Features: Hints & Validation
  • Checking the "Win" Condition with useEffect()
  • Finishing the Game Logic
  • Adding Custom Fonts
  • A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
  • Adding Local Images
  • Styling Images
  • Working with Network (Web) Images
  • A Closer Look at the "Text" Component (and what you can do with it)
  • Building a Custom Button Component
  • Adding Icons
  • Exploring UI Libraries
  • Managing Past Guesses as a List
  • Styling List Items & Lists
  • ScrollView & Flexbox (Yes, that works!)
  • Using FlatList Instead of ScrollView
  • Wrap Up

Section 5 : Responsive & Adaptive User Interfaces and Apps

  • Module Introduction
  • Finding Improvement Opportunities
  • Working with More Flexible Styling Rules
  • Introducing the Dimensions API
  • Using Dimensions in "if" Checks
  • Calculating Sizes Dynamically
  • Problems with Different Device Orientations
  • Controlling Orientation & Using the KeyboardAvoidingView
  • Listening to Orientation Changes
  • Rendering Different Layouts
  • Fixing the GameOver Screen
  • Expo's ScreenOrientation API
  • Introducing the Platform API
  • Working with Platform.select() and Platform in "if" Checks
  • Using Platform-specific Code Files
  • Using the SafeAreaView
  • Wrap Up

Section 6 : Navigation with React Navigation [THE MEALS APP]

  • Module Introduction
  • Planning the App
  • Adding Screens
  • Adding Fonts
  • Installing React Navigation & Adding Navigation to the App
  • Creating a StackNavigator
  • Navigating Between Screens
  • Navigation to the "Meal Details" Screen
  • Pushing, Popping & Replacing
  • Outputting a Grid of Categories
  • Configuring the Header with Navigation Options
  • Passing & Reading Params Upon Navigation
  • Setting Dynamic Navigation Options
  • Default Navigation Options & Config
  • Grid Styling & Some Refactoring
  • Adding Meal Models & Data
  • Loading Meals for Categories
  • Rendering a Meals List
  • Passing Data to the Meal Detail Screen
  • Adding Header Buttons
  • Fixing the Shadows
  • Adding Tabs-based Navigation
  • Setting Icons and Configuring Tabs
  • Adding MaterialBottomTabs
  • Adding a Favorites Stack
  • Adding a Menu Button & Drawer Navigation
  • Configuring the Drawer
  • More Navigation Config & Styling
  • Adding a DefaultText Component
  • Adding the MealDetail Screen Content
  • Time for the "Filters" Screen Content!
  • Passing Data Between Component & Navigation Options (Header)
  • Wrap Up

Section 7 : State Management & Redux

  • Module Introduction
  • What is State & What is Redux?
  • Redux & Store Setup
  • Selecting State Slices
  • Redux Data & Navigation Options
  • Dispatching Actions & Reducer Logic
  • Switching the Favorites Icon
  • Rendering a Fallback Text
  • Adding Filtering Logic
  • Dispatching Filter Actions
  • Wrap Up

Section 8 : Time to Practice - THE SHOP APP

  • Module Introduction
  • Planning the App
  • Creating the Basic Project Setup
  • The Products Overview Screen
  • Setting Up a Navigator
  • Styling the Product Items
  • Adding Touchable Components
  • Working on the Product Details Screen
  • Using Custom Fonts
  • Adding Items to the Cart
  • Implementing Header Buttons
  • Outputting Cart Items
  • Adding Logic to Delete Items
  • Adding Redux Logic for Orders
  • SideDrawer & The Orders Screen
  • Clearing the Cart
  • Styling Order Items
  • Making the "Show Details" Button Work
  • Building the "User Products" Screen
  • Reorganizing the ProductItem Component
  • Deleting Items
  • Adding Basic Editing & Navigation Logic
  • Handling User Input
  • Using Params to Submit User Input
  • Dispatching Actions for Creating & Updating
  • Time to Improve the App!
  • Wrap Up

Section 9 : Handling User Input

  • Module Introduction
  • Configuring TextInputs
  • Adding Basic Validation
  • Getting Started with useReducer()
  • Finishing the Merged Form & Input Management
  • Moving Input Logic Into A Separate Component
  • Connecting Input Component & Form
  • Tweaking Styles & Handling the Soft Keyboard
  • Alternatives & Wrap Up

Section 10 : Http Requests & Adding a Web Server + Database

  • Module Introduction
  • Setup & How To Send Requests
  • Installing Redux Thunk
  • Storing Products on a Server
  • Fetching Products from the Server
  • Displaying a Loading Spinner & Handling Errors
  • Setting Up a Navigation Listener
  • Updating & Deleting Products
  • Handling Additional Errors
  • Storing Orders
  • Displaying an ActivityIndicator
  • Fetching Stored Orders
  • Adding "Pull to Refresh"
  • Wrap Up

Section 11 : User Authentication

  • Module Introduction
  • How Authentication Works
  • Implementing a Basic Login Screen
  • Adding User Signup
  • Logging Users In
  • Managing the Loading State & Errors
  • Using the Token
  • Mapping Orders to Users
  • Improved Mapping (Scoping)
  • Implementing "Auto Login"
  • Adding Logout
  • Implementing "Auto Logout"
  • Wrap Up

Section 12 : Native Device Features (Camera, Maps, Location, SQLite, ...) [GREAT PLACES APP]

  • Module Introduction
  • Planning the App
  • Screen & Navigation Setup
  • Getting Started with the Form
  • Redux & Adding Places
  • Outputting a List of Places
  • Accessing the Device Camera
  • Configuring the Camera Access
  • Using the Picked Image
  • Storing the Image on the Filesystem
  • Diving into SQLite for Permanent Data Storage
  • Storing Data in the Local Database
  • Fetching Data from the Local Database
  • Getting the User Location
  • Showing a Map Preview of the Location
  • Displaying an Interactive Map
  • Adding a Marker
  • Making the Picked Location "Saveable"
  • Storing Picked Places
  • Updating the Location Screen When the Location Changes
  • Storing the Address
  • Displaying the "Details" Screen
  • Finishing the "Map" Screen
  • Running the App on iOS
  • Running the App on Android
  • Wrap Up

Section 13 : Building Apps Without Expo

  • Module Introduction
  • Alternatives to Expo
  • Building Apps with Just the React Native CLI
  • Adding Native Modules to Non-Expo Apps
  • Understanding Expo's "Bare Workflow"
  • Ejecting from Expo's "Managed Workflow"
  • When To Use Which?

Section 14 : Publishing React Native Apps

  • Module Introduction
  • Deployment Steps
  • Configuring the App & Publishing
  • Configuring Icons & The Splash Screen
  • Working with Offline Asset Bundles
  • Using "Over the Air Updates" (OTA Updates)
  • Building the Apps for Deployment (iOS & Android)
  • Publishing iOS Apps without Expo
  • Publishing Android Apps without Expo

Section 15 : Updating to React Navigation 5+

  • Module Introduction
  • What Changed?
  • Preparing the Project
  • More Information & Updating the Project Dependencies
  • Moving from the "Registry-like" to the "Component-based" Navigation Config
  • First Migration Steps
  • Converting More Stack Navigators to the New Config
  • Migrating the Drawer Navigation
  • Replacing the "Switch" Navigator & Auth Flow
  • Logout & Further Fixes/ Adjustments
  • Extracting Screen Params
  • Setting Screen Options Dynamically
  • Remaining Migration Steps & Roundup
  • A Summary Of All Important Changes

Section 16 : Course Roundup & Next Steps

  • Roundup & Next Steps

Articles

Popular Articles

Latest Articles

Trending Courses

Popular Courses

Popular Platforms

Learn more about the Courses

Download the Careers360 App on your Android phone

Regular exam updates, QnA, Predictors, College Applications & E-books now on your Mobile

Careers360 App
150M+ Students
30,000+ Colleges
500+ Exams
1500+ E-books