Scribd
Upload
50 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
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
50 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
We take content rights seriously. If you suspect this is your content, claim it here.
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