Course Preview
React Native Upcoming Batch - Date and Time
Get customized React Native course according to your requirement
Enquire for Customization
Get CustomizedReact Native Overview
React Native Course Description
In May 2013, Facebook open-sourced their React JavaScript library, providing web developers everywhere with a powerful and efficient tool to create component-based interactive User Interfaces (UIs). React provided powerful features like stateful components, virtual DOM, one-way data binding with properties (props), lifecycle methods and JavaScript XML (JSX). React quickly became the choice for developers to build faster, smoother UIs for data-driven web applications.
In 2015, Facebook extended React to building native mobile applications on iOS and Android platforms. React Native has created a lot of excitement in the market because of its cross-platform nature. Developers can reuse the code between Android, iOS and web projects with minimal effort. The growing interest in React Native has created a need for skilled developers as a lot of development companies are switching to this technology. React Native is used by many Fortune 500 companies like Facebook, Instagram, Bloomberg, Pinterest, Skype, Tesla, Uber, Walmart, Wix.com, and others. React Native’s GitHub repository statistics reveal that nearly 2,000 contributors have committed 16,000 times in 72 branches with over 300 releases. According to Google Trends, React Native has become a trending topic in addition to being a popular framework.
Cross-platform app development is becoming popular as the level of competition is intensifying. React Native is the most preferred cross-platform solution for the creation of both Android and iOS apps. It offers multiple benefits to individuals and organizations.
Learn the popular framework React and Make component-based User Interfaces with open source React JavaScript library for cross platforms. Master the React features like stateful components, virtual DOM, one-way data binding with properties (props), lifecycle methods and custom markup language JavaScript XML and build faster, smoother UIs for data-driven web applications with liberty of reuse the code between Android, iOS and web projects with minimal efforts. Uplift your career with demanding cross platform react Native framework with Edugators.
Who should go for this training?
Web Developers
Mobile App Developers
Software Engineers
Those who want to learn hybrid mobile development
Those who want to use JavaScript and React skills to develop mobile application
Those who aspire to build a career in mobile application development
Requirements
Computer or laptop with Highspeed Internet Connection
There are no prerequisites to attend this course. However, a basic understanding of JavaScript would be beneficial.
React Native Course Syllabus
- What is React Native?
- Creating Our First React Native App
- Dealing with Limitations of React Native
- Creating a New Project
- JSX Elements you Can and Can’t Use
- Switching Away from create-react-native-app
- How to Use the Attached Code
- Running the App on an Android Simulator (+ Setup)
- Running our App on a Real Android Device
- Preparing XCode (for iOS)
- Running our App on an iOS Simulator
- Running our App on an iOS Device
- A Good Development Setup
- Working on the App: Adding a Textinput
- Styling – Understanding the Basics
- Positioning Elements with Flexbox
- Adding a Button and Managing State
- Creating a Custom Component
- Listening to Touch Events
- Reacting to Press Events
- Using a ScrollView
- Rendering Lists Correctly
- Adding Static Images
- Using Network Images
- Adding a Modal
- React vs React Native
- JavaScript – Supported Features
- Question-Answer Session
- A Brief Redux Refresher
- Installing Redux and Creating a Basic Setup
- Setting Up Actions
- Setting Up the Reducer
- Creating the Store
- Connecting React Native to Redux
- Using the Remote JavaScript Debugging console.log
- Debugging with Breakpoints
- Debugging+++ with React Native Debugger
- Debugging Redux
- Template Filters and Custom Filters
- Template Filters Coding Examples
- Question-Answer Session
- Introduction Third Patry Libraries
- Installing Libraries
- Automatic Linking
- Linking Libraries on iOS
- Linking Libraries on Android
- Using Library Features: Adding Icons
- Navigation in Web Apps vs Native Apps
- Exploring Native Navigation Solutions
- Adding React Native Navigation to iOS
- Adding React Native Navigation to Android
- Finishing the Library Setup
- Registering and Rendering a Screen
- Adding a Tabs Screen (Tabs Navigation)
- Adding Icons to Tabs
- Connecting Screens to Redux
- Updating Redux
- Pushing Pages (Navigating “Forwards”)
- Popping Pages (Navigating “Backwards”)
- More Navigator Methods
- Adding a Side Drawer
- Finishing the Drawer
- Question-Answer Session
- Using StyleSheet vs Normal JS Objects
- Vanilla CS vs React Native Styles
- Flexbox in Action
- Styling with Relative Units
- “Global Styles” with Custom Components
- Synthetic Cascading of Styles
- Styling Text
- Cascading Text Styles
- Adding a Background Image
- Creating a Re-Usable Custom Button
- Editing the “Share Place” Screen
- Popping Pages (Navigating “Backwards”)
- Styling & Splitting the “Share Place” Screen
- Finishing the “Share Place” Screen
- Styling the Side Drawer
- Quick Bug Fix: PlaceInput Component
- Intro: Cross Platform Styles & Responsiveness
- Intro:Cross-Platform Styling Made Easy!
- Using the Platform API
- Loading Different Icons for Different Platforms
- Using Different Entry Points (into the App)
- Cross-Platform UI Libraries
- The “Responsive Styling” Problem
- Responsive Design Solutions
- Using the Dimensions API
- Adjusting Styles Dynamically (to changing Width / Height)
- A Better Responsive Solution
- Bug Fix: Centering with Margins
- Cleaning Up Dimensions Listeners
- Styling Navigation Items (react-native-navigation)
- Preparing the App for Animations
- Using the Animated API
- Animations Summary
- Introduction
- Managing Input/ Control State
- Adding Custom Validation Logic
- Using the Validation State
- Dispatching an Auth Action
- Switching Form (Auth) Modes
- Configuring Text Input Components
- Handling the Soft Keyboard
- Question-Answer Session
- Introduction
- A Note on Installing React-Native Maps
- Installing react-native-maps
- Rendering a Map
- Picking a Location on the Map
- Adding a Map Marker
- Animating Map Movement
- Locating the User
- Storing the Picked Location with Redux
- Installing react-native-image-picker
- Fixing Issues with React Native Image Picker
- Using the Image Picker
- Storing the Picked Images
- Image Picker and the Data it Returns
- Sending Http Requests – Theory
- Firebase & The Right Database
- Creating the Server
- Using the Fetch-API
- Storing Data in Firebase
- Adjusting Firebase Functions (Fixing an Error)
- Storing Images
- Fixing Firebase Function Linting Errors
- Finishing the Image Upload Function
- Storing the Remaining Data
- Adding the Activity Indicator
- Handling Errors
- Http, fetch() and Error Handling
- Getting Data from the Server
- Fixing Error
- Question-Answer Session
- How Authentication Works in React Native Apps
- Enabling Firebase Authentication
- Signing Users Up
- Using the Authentication Result (Response)
- Supporting Signup and Login
- Adding User Login
- Protecting Routes on Firebase
- Storing the Auth Token in Redux
- Using the Auth Token
- Fetching the Token in a Re-Usable Way
- Adding Places (Authenticated)
- Storing the Token in AsyncStorage
- Adding an Auto-Signin Functionality
- Managing the Token Expiration
- Clearing the Auth Storage (AsyncStorage)
- Refreshing the Token
- Adding User Logout
- Refreshing the Token Without App Reloads
- Question-Answer Session
- Adding Launcher Icons
- Adding a Splash Screen
- Configuring & Building the App
- Publishing to Google Play Store (Android)
- Publishing to the App Store (iOS)
- Publishing the App – Detailed Instructions
- Question-Answer Session
Nagmani Solanki
Digital Marketing
Edugators platform is the best place to learn live classes, and live projects by which you can understand easily and have excellent customer service.
Saurabh Arya
Full Stack Developer
It was a very good experience. Edugators and the instructor worked with us through the whole process to ensure we received the best training solution for our needs.
Praveen Madhukar
Web Design
I would definitely recommend taking courses from Edugators. The instructors are very knowledgeable, receptive to questions and willing to go out of the way to help you.
Need To Train Your Corporate Team ?
Customized Corporate Training Programs and Developing Skills For Project Success.
Get Newsletter
Subscibe to our newsletter and we will notify you about the newest updates on Edugators
