CERTIFICATE IN MOBILE APP DEVELOPMENT WITH REACT

Duration: 2 MONTHS

Course Syllabus

REACT NATIVE
REACT ESSENTIALS
REACT INTRODUCTION
- Overview of frameworks, libraries for client side Web applications
- React version history
- React 16 vs React 15
- Understanding “what” and “why” React
- React Component Demonstration using codepen
- Environment Setup for React Application
- Understanding NPM commands
- Using VS Code
- VS Code extensions for ES6, React
- Helloworld app in React

REACT ESSENTIAL FEATURES AND SYNTAX
- React App Project Directory Structure
- Overview of Webpack, Babel
- React Component Basic
- Create React Component
- Understanding JSX
- Limitations of JSX
- Working with Components and Reusing Components

REACT COMPONENTS, PROPS AND STATE
- Functional/Class/Pure Components
- Understanding and using Props and State
- Handling Events with methods
- Manipulating the State
- Two way data-binding
- Functional (Stateless) VS Class (Stateful)Components
- Parent – Child Communication
- Dynamically rendering contents
- Showing Lists, List and keys

YLING COMPONENTS
- CSS Styling
- Scoping Styles using Inline Styles
- Limitations of inline styes
- Inline Styles with Radium
- Using Psuedo classes/media quries with inline styles
- CSS Modules, importing css classes
- Adding Bootstrap, Semantic UI to React apps
- Using react-bootstrap, reactstrap packages

REACT NATIVE
INTRODUCTION & PREREQUISITS
- Course Overview
- Platforms, Frameworks & Tools
- Hybrid frameworks versus Native
- HTML5 / CSS3 / JS brush up
- ES6/JavaScript Basics

INTRODUCTION TO REACT NATIVE
- Advantages of React Native
- React Native vs Web Apps
- React Native vs React web

ENVIRONMENT SETUP
- Installing React Native
- iOS setup – XCode
- Android setup – Android Studio
- Run an example project in iOS and Android simulators

UNDERSTANDING REACT NATIVE DEVELOPMENT
- Creating a New Project
- JSX Elements
- Running the App on an Android Simulator
- 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

BUILDING THE UI
- Adding a Textinpu, Styling - Understanding the Basics
- More on Flexbox, 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
- Adding Static Images, Using Network Images
- Adding a Modal

CORE REACT NATIVE COMPONENTS
- Establishing a layout with View
- Displaying text with Text
- Accepting user input with TextInput
- Adding images with Image
- Making components interactive with TouchableHighlight
- Displaying data with ListView
- Changing screens with Navigator
- Expanding touch capability with GestureResponder and PanResponder

REACT NATIVE APIS
- Using fetch to retrieve data
- Getting a user’s location and handling permissions
- Accessing stored photos with CameraRoll
- Adding animations

USING REDUX WITH REACT NATIVE
- Installing Redux and Creating a Basic Setup
- Setting Up Actions, Reducer, Creating the Store
- Connecting React Native to Redux

DEBUGGING REACT NATIVE APPS
- Using the Remote JavaScript Debugging console.log
- Debugging with Breakpoints
- Debugging with React Native Debugger
- Debugging Redux

LINKING AND USING THIRD PARTY LIBRARIES
- Installing Libraries
- Automatic Linking
- Linking Libraries on iOS
- Linking Libraries on Android
- Using Library Features: Adding Icons

NAVIGATION IN REACT NATIVE APPS
- Navigation in Web Apps vs Native Apps
- Install React Native Navigation,
- Adding React Native Navigation to iOS & Android
- Registering and Rendering a Screen
- Adding a Tabs Screen, Adding a Side Drawer
- Using Navigation Events & Toggling the Drawer

YLING & ANIMATING REACT NATIVE APPS
- Using StyleSheet vs Normal JS Objects
- Vanilla CS vs React Native Styles
- "Global Styles" with Custom Components
- Synthetic Cascading of Styles, Styling Tex, Cascading Text Styles

ADDING A BACKGROUND IMAGE, CREATING A REUSABLE CUSTOM BUTTON
- Cross Platform Styles & Responsiveness
- Using the Platform API, Loading Different Icons for Different Platforms
- Using Different Entry Points, Cross-Platform UI Libraries

HANDLING USER INPUT
- Managing Input/ Control State
- Adding Custom Validation Logic
- Using the Validation State
- Dispatching an Auth Action, Switching Form (Auth) Modes
- Configuring Text Input Component, Handling the Soft Keyboard
- KeyboardAvoidingView and ScrollView

USING NATIVE DEVICE FEATURES - MAPS, CAMERA & IMAGE GALLERY
- Installing react-native-maps, Rendering a Map
- Installing react-native-image-picker, Using the Image Picker

HTTP REQUESTS
- Creating the Server
- Using the Fetch-API
- Handling Errors
- Http, fetch() and Error Handling
- Getting Data from the Server

AUTHENTICATION IN REACT NATIVE APPS
- Adding User Login, Protecting Routes
- Storing/using the Auth Token in Redux
- Adding Places (Authenticated)
- Adding an Auto-Signin Functionality
- Managing the Token Expiration
- Adding User Logout

PUBLISHING THE APP
- Adding Launcher Icons
- Adding a Splash Screen
- Configuring & Building the App
- Publishing to Google Play Store (Android)
- Publishing to the App Store (iOS)

DEPLOYMENT
- Deploying to Apple App Store
- Deploying to Android Play Store

AUTHENTICATION WITH FIREBASE
- A Common Root Component
- Copying Reusable Components
- What is Firebase?
- Firebase Client Setup
- Login Form Scaffolding
- Handling User Inputs
- More on Handling User Inputs
- How to Create Controlled Components
- Making Text Inputs From Scratch
- A Focus on Passing Props
- Making the Input Pretty
- Wrapping up Inputs
- Password Inputs

PROCESSING AUTHENTICATION CREDENTIALS
- Logging a User In
- Error Handling
- More on Authentication Flow
- Creating an Activity Spinner
- Conditional Rendering of JSX
- Clearing the Form Spinner
- Handling Authentication Events
- More on Conditional Rendering
- Logging a User Out and Wrapup

Read More

Eligibility

.


Back to top