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
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
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
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
