Scribd
Upload
48 views

React Native: Duration: 4 Days Day 1

This 4-day React Native course covers topics such as styling apps, making HTTP requests, authentication with Firebase, data handling with Redux, navigation, and using Firebase as a data store. On day 1, students learn the basics of React Native, components, styling, and fetching network data. Day 2 focuses on authentication with Firebase and diving deeper into Redux. Day 3 covers handling data in Redux versus React, immutable state, and navigation. Finally, day 4 teaches using Firebase as a database and reusing code for edit and create forms.

Uploaded by

Amit Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
48 views

React Native: Duration: 4 Days Day 1

This 4-day React Native course covers topics such as styling apps, making HTTP requests, authentication with Firebase, data handling with Redux, navigation, and using Firebase as a data store. On day 1, students learn the basics of React Native, components, styling, and fetching network data. Day 2 focuses on authentication with Firebase and diving deeper into Redux. Day 3 covers handling data in Redux versus React, immutable state, and navigation. Finally, day 4 teaches using Firebase as a database and reusing code for edit and create forms.

Uploaded by

Amit Sharma
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 4

React Native

Duration: 4 Days

Day 1:
Introduction

• 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

Styling Apps with React

• Styling with React Native


• More on Styling Components
• Intro 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
• App Wrapup

Day 2:
Authentication with Firebase

• Auth App Introduction


• 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
• Creating an Activity Spinner
• Conditional Rendering of JSX
• Clearing the Form Spinner
• Logging a User Out and Wrapup

Digging Deeper with Redux

• App Mockup and Approach


• The Basics of Redux
• More on Redux
• More on Redux Boilerplate

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

Day 3:
Handling Data in React vs Redux

• Login Form in a Redux World


• Rebuilding the Login Form
• Handling Form Updates with Action Creators
• Wiring up Action Creators
• Typed Actions

Don't Mutate that State

• Immutable State
• Creating Immutable State
• More on Creating Immutable State
• Synchronous vs Asynchronous Action Creators
• Introduction to Redux Thunk
• Redux Thunk in Practice
• 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
• Addressing Styling Issues
• 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
Day 4:
Firebase as a Data Store

• Firebase JSON Schema


• Data Security in Firebase
• Creating Records with Firebase
• Default Form Values
• Resetting Form Properties
• Fetching Data from Firebase
• Dynamic DataSource Building
• Transforming Objects to Arrays
• List Building in List

Code Reuse - Edit vs Create

• Reusing the Form


• Create vs Edit Forms
• A Standalone Edit Form
• Initializing Forms from State
• Updating Firebase Records
• Clearing Form Attributes
• Modals as a Reusable Component

You might also like