React Native Programming

I. Overview:

React Native is an open-source framework for building cross-platform applications (apps) using React and the platform’s native capabilities. In this course, you will move from the basics of React to a more advanced implementation using React Native. You’ll review a wide range of different React components and ways of styling them. And you’ll get to practice using different mobile methods of interactivity with React Native.

II. Duration:

60 hours

III. Intended Audience:
  • Anyone who wants to use React to build native mobile apps
  • Every mobile developer who wishes to learn only one language to write cross-platform mobile apps
IV. Prerequisites:
  • Basic JavaScript and React knowledge.
  • NO Android/ Java or iOS (Swift, Objective-C) development experience is required.
V. Objectives:
  • Learn how to use React Native to build real native mobile apps for iOS and Android
  • Develop cross-platform (iOS and Android) mobile apps without knowing Swift, Objective-C or Java/ Android
  • Explore React Native basics and advanced features.
VI. Course outlines:

1. Module 1: JavaScript

  • Core Syntax
  • let and const
  • Arrow Functions
  • Objects: Properties and Methods
  • Arrays and Array Methods
  • Arrays, Objects, and Reference Types
  • Spread Operator and Rest Parameters
  • Destructuring
  • Async Code and Promises

2. Module 2: React.js

  • What is React?
  • Understanding JSX
  • Understanding Components
  • Working with Multiple Components
  • Working with Props
  • Rendering Lists of Data
  • Handling Events
  • Parent-Child Communication
  • Managing State
  • More on State
  • User Input and Two-Way Binding

3. Module 3: Getting Started with React Native

  • What Is React Native?
  • Creating React Native Projects: Expo CLI Versus React Native CLI
  • Creating a New React Native Project
  • Analyzing the Created Project
  • Running Our First App on a Real Device!
  • Setting Up a Local Development Environment

4. Module 4: React Native Basics

  • Exploring Core Components and Component Styling
  • Working with Core Components
  • Styling React Native Apps
  • Exploring Layouts and Flexbox
  • React Native and Flexbox
  • Using Flexbox to Create Layouts
  • Improving the Layout
  • Handling Events
  • iOS and Android Styling Differences
  • Making Content Scrollable with ScrollView
  • Optimizing Lists with FlatList
  • Splitting Components into Smaller Components
  • Utilizing Props
  • Handling Taps with the Pressable Component
  • Adding an Android Ripple Effect and an iOS Alternative
  • Adding and working with a Modal Screen
  • Working with Images and Changing Colors

5. Module 5: Debugging React Native Apps

  • Handling Errors
  • Logging to the Console
  • Debugging JavaScript Remotely
  • Using the React DevTools
  • Using the Documentation

6. Module 6: Advanced Components, Layouts, and Styling

  • Starting Setup and Analyzing the Target App
  • Setting Up Screen Components
  • Creating Custom Buttons
  • Styling for Android and iOS
  • Configuring the TextInput Field
  • Handling User Input and Showing an Alert Dialog

7. Module 7: Building Adaptive User Interfaces (Adapt to Platform and Device Sizes)

  • Setting Dynamic Widths
  • Introducing the Dimensions API
  • Adjusting Image Sizes with the Dimensions API
  • Understanding Screen Orientation Problems
  • Setting Sizes Dynamically (for Different Orientations)
  • Managing Screen Content with KeyboardAvoidingView
  • Improving the Landscape Mode UI
  • Further Improvements with useWindowDimensions
  • Writing Platform-Specific Code with the Platform API
  • Styling the Status Bar

8. Module 8: React Native Navigation with React Navigation

  • What Is Navigation?
  • Displaying Items in a Grid
  • The React Navigation Package
  • Implementing Navigation Between Two Screens
  • Understanding the use of Navigation Hook
  • Working with Route Parameters to Pass Data Between Screens
  • Styling Screen Headers and Backgrounds
  • Setting Navigation Options Dynamically
  • Adding Header Buttons
  • Adding an Icon Button to a Header
  • Adding Drawer Navigation and Creating a Drawer
  • Configuring the Drawer Navigator and the Drawer
  • Adding, Configuring, and Using Bottom Tabs

9. Module 9: App-wide State Management with Redux & Context API

  • Nesting NavigatorsGetting Started with React's Context API
  • Managing App-Wide State with Context
  • Using the Created Context with useContext
  • Getting Started with Redux and Redux Toolkit
  • Working with Redux Slices
  • Managing Redux State and Dispatching Actions
  • Using Redux State in Components

10. Module 10: Sending Http Requests

  • Sending POST Http Requests
  • Fetching Backend Data (GET Requests)
  • Transforming and Using Fetched Data
  • Using Response Data from POST Requests
  • Updating and Deleting Backend Data (UPDATE and DELETE Requests)
  • Managing the Loading State
  • Handling Request Errors

11. Module 11: Using Native Device Features (Camera, Location, and More)

  • Working with Camera package
  • Working with ImagePicker package
  • Working with Map
  • Working with SQLite

12. Module 12: Push Notifications

  • What is Notification?
  • Handle Local Notification
  • Setup Push Notification
  • Handle Push Notification

13. Module 13: Publishing React Native Apps

  • Configuring App Names and Versions
  • A Quick Note About Environment Variables
  • Adding Icons and a Splash Screen
  • Building for iOS
  • Building for Android

14. Module 14: Project

  • Planning, developing, and presenting a final project.
  • Học trực tuyến

  • Học tại Hồ Chí Minh

  • Học tại Hà Nội

Các khóa học khác