React Native

Learn via : Virtual Classroom / Online
Duration : 5 Days
Download PDF
  1. Home
  2. /
  3. React Native

Description

React Native is a framework for using JavaScript and React to create native mobile applications. It combines the intuitive, declarative structure of React with the performance, look, and feel of Native applications. React Native also has the potential to alter how developer teams are structured, allowing web, iOS, and Android teams to share knowledge, resources, and even code.

This course will guide Developers through the entire React Native development process. From setting up their development environments all the way to developing and deploying an App. Along the way, developers will learn how to work with many of the core React Native components and API’s, as well as best practices for file structure, Styles, and more.

 

Audience

Developers with JavaScript Experience, Web Developers, Mobile App Developers, Software Engineers and UI Developers.

Outline

Installation OSX

  • OSX Installation
  • More on OSX Installation
  • Running in the Simulator

Installation Windows

  • Windows Setup of React Native
  • Android Studio and React Native CLI Installation
  • Emulator Creation and System Variables

Onwards!

  • Troubleshooting React Native Installs
  • Project Directory Walkthrough
  • Getting Content on the Screen
  • React vs React Native
  • Creating a Component with JSX
  • Registering a Component
  • Destructuring Imports
  • Application Outline
  • The Header Component
  • Consuming File Exports

Making Great Looking Apps

  • Styling with React Native
  • More on Styling Components
  • Introduction to Flexbox
  • Header Styling
  • Making the Header Reusable

HTTP Requests with React Native

  • Sourcing Album Data
  • List Component Boilerplate
  • Class Based Components
  • Lifecycle Methods
  • Quick Note On Axios
  • Network Requests
  • Component Level State
  • More on Component Level State
  • Rendering a List of Components
  • Displaying Individual Albums
  • Fantastic Reusable Components – The Card
  • Styling a Card
  • Passing Components as Props
  • Dividing Cards into Sections

Handling Component Layout

  • Mastering Layout with Flexbox
  • Positioning of Elements on Mobile
  • More on Styling
  • Images with React Native
  • Displaying Album Artwork
  • Making Content Scrollable
  • Handling User Input with Buttons
  • Styling of Buttons with UX Considerations
  • Responding to User Input
  • Linking Between Mobile Apps
  • Setting Button Text by Props

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

Rendering Lists the Right Way

  • The Theory of ListView
  • ListView in Practice
  • Rendering a Single Row
  • Styling the List
  • Creating the Selection Reducer
  • Introducing Action Creators
  • Calling Action Creators
  • Adding a Touchable
  • Rules of Reducers
  • Expanding a Row
  • Moving Logic Out of Components
  • Animations

State Using

  • Immutable State
  • Creating Immutable State
  • More on Creating Immutable State
  • Synchronous vs Asynchronous Action Creators
  • Introduction to Redux Thunk
  • Redux Thunk in Practice
  • Redux Thunk in Practice Continued
  • Making LoginUser More Robust
  • Creating User Accounts
  • Showing Error Messages
  • A Firebase Gotcha
  • Showing a Spinner on Loading

Navigating Users Around

  • Dealing with Navigation
  • Navigation in the Router
  • Displaying Multiple Scenes
  • Navigating Between Routes
  • Grouping Scenes with Buckets
  • Navigation Bar Buttons
  • Navigating to the Employee Creation Form
  • Building the Employee Creation Form
  • Employee Form Actions
  • Handling Form Updates at the Reducer Level
  • Dynamic Property Updates
  • The Picker Component
  • Pickers and Style Overrides

React native Build

  • Android apk export
  • android store deploye
  • iOS Teting
  • iOS App store deploye
  • Android key store