OVERVIEW OF REACT NATIVE

React Native is an open-source mobile application framework created by Facebook. It is used to develop applications for Android, iOS, Web and UWP by enabling developers to use React along with native platform capabilities.

The working principles of React Native are virtually identical to React except that React Native does not manipulate the DOM via the Virtual DOM. It runs in a background process (which interprets the JavaScript written by the developers) directly on the end-device and communicates with the native platform via a serialisation, asynchronous and batched Bridge.

React components wrap existing native code and interact with native APIs via React’s declarative UI paradigm and JavaScript. This enables native app development for whole new teams of developers, and can let existing native teams work much faster.[citation needed] React Native does not use HTML. Instead, messages from the JavaScript thread are used to manipulate native views.

Getting Started
- What is React Native?
- How React Native Works
- Expo vs React Native CLI
- Creating Our First React Native App
- Working on Our First App
- React Native Apps Are Hard Work!
- React Native Alternatives
- Course Requirements
- Running the App on an Android Emulator
- Running the App on an iOS Simulator
- Course Outline
- How to get the Most out of This Course
Diving into the Basics [COURSE GOALS APP]
- Module Introduction
- How to work with React Native Components
- Setting Up A New Project
- Planning the App
- Working with Core Components
- Getting Started with Styles
- Flexbox & Layouts (Intro)
- React Native Flexbox Deep Dive
- Inline Styles & StyleSheet Objects
- Components, Styles, Layouts
- Working with State & Events
- Outputting a List of Items
- Styling List Items
- Making it Scrollable with ScrollView!
- A Better List: FlatList
- More Components & Lists
- Splitting the App Into Components
- Passing Data Between Components
- Working with Touchable Components
- Deleting Items
- Adding a Modal Overlay
- More Flexbox Styling
- Closing the Modal & Clearing Input
- Finishing the Modal Styling
- Wrap Up
Debugging React Native Apps
- Module Introduction
- What To Debug & How To Debug?
- Running the App on a Real Device & Debugging
- Handling Error Messages
- Understanding Code Flow with console.log()
- Using the Remote Debugger & Breakpoints
- Working with the Device DevTools Overlay
- Debugging the UI & Using React Native Debugger
- Wrap Up
Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]
- Module Introduction
- Setup & App Planning
- Adding a Custom Header Component
- Adding a Screen Component
- Working on the Layout
- Styling a View as a "Card" Container (with Drop Shadows & Rounded Corners)
- React Native Styling vs CSS Styling
- Extracting a Card Component (Presentational Component)
- Components & Styling
- Color Theming with Constants
- Configuring & Styling a TextInput
- Cleaning User Input & Controlling the Soft Keyboard
- Resetting & Confirming User Input
- Configuring Components
- Showing an Alert
- Time to Finish the "Confirmation Box"
- Adding Random Number Generation
- Switching Between Multiple "Screens"
- Adding Game Features: Hints & Validation
- Checking the "Win" Condition with useEffect()
- Finishing the Game Logic
- Adding Custom Fonts
- Installing expo-font
- A Synthetic Style "Cascade": Custom Wrapper Components & Global Styles
- Adding Local Images
- Styling Images
- Working with Network (Web) Images
- A Closer Look at the "Text" Component (and what you can do with it)
- vs - A Summary
- Building a Custom Button Component
- Adding Icons
- Exploring UI Libraries
- Managing Past Guesses as a List
- Styling List Items & Lists
- ScrollView & Flexbox (Yes, that works!)
- Using FlatList Instead of ScrollView
- Wrap Up
Responsive & Adaptive User Interfaces and Apps
- Module Introduction
- Finding Improvement Opportunities
- Working with More Flexible Styling Rules
- Introducing the Dimensions API
- Using Dimensions in "if" Checks
- Calculating Sizes Dynamically
- Problems with Different Device Orientations
- Controlling Orientation & Using the KeyboardAvoidingView
- Listening to Orientation Changes
- Rendering Different Layouts
- Fixing the GameOver Screen
- Expo's ScreenOrientation API
- Introducing the Platform API
- Working with Platform.select() and Platform in "if" Checks
- Using Platform-specific Code Files
Navigation with React Navigation [THE MEALS APP]
- Module Introduction
- Planning the App
- Adding Screens
- Adding Fonts
- Installing React Navigation & Adding Navigation to the App
- Creating a StackNavigator
- Navigating Between Screens
- Navigation to the "Meal Details" Screen
- Pushing, Popping & Replacing
- Outputting a Grid of Categories
- Configuring the Header with Navigation Options
- Passing & Reading Params Upon Navigation
- Setting Dynamic Navigation Options
- Default Navigation Options & Config
- Navigation Params & Configuration
- Grid Styling & Some Refactoring
- Adding Meal Models & Data
- Loading Meals for Categories
- Rendering a Meals List
- Passing Data to the Meal Detail Screen
- Adding Header Buttons
- Fixing the Shadows
- Adding Tabs-based Navigation
- Setting Icons and Configuring Tabs
- Adding MaterialBottomTabs
- Adding a Favorites Stack
- Adding a Menu Button & Drawer Navigation
- Configuring the Drawer
- More Navigation Config & Styling
- Adding a DefaultText Component
- Adding the MealDetail Screen Content
- Time for the "Filters" Screen Content!
- Passing Data Between Component & Navigation Options (Header)
State Management & Redux
- Module Introduction
- What is State & What is Redux?
- Redux & Store Setup
- Selecting State Slices
- Redux Data & Navigation Options
- Dispatching Actions & Reducer Logic
- Switching the Favorites Icon
- Rendering a Fallback Text
- Adding Filtering Logic
- Dispatching Filter Actions
Time to Practice - THE SHOP APP
- Module Introduction
- Planning the App
- Creating the Basic Project Setup
- The Products Overview Screen
- Setting Up a Navigator
- Styling the Product Items
- Adding Touchable Components
- Working on the Product Details Screen
- Using Custom Fonts
- Adding Items to the Cart
- Implementing Header Buttons
- Outputting Cart Items
- Adding Logic to Delete Items
- Adding Redux Logic for Orders
- SideDrawer & The Orders Screen
- Clearing the Cart
- Styling Order Items
- Making the "Show Details" Button Work
- Building the "User Products" Screen
- Reorganizing the ProductItem Component
- Deleting Items
- Adding Basic Editing & Navigation Logic
- Handling User Input
- Using Params to Submit User Input
- Dispatching Actions for Creating & Updating
- Time to Improve the App!
Handling User Input
- Module Introduction
- Configuring TextInputs
- Adding Basic Validation
- Getting Started with useReducer()
- Finishing the Merged Form & Input Management
- Moving Input Logic Into A Separate Component
- Connecting Input Component & Form
- Tweaking Styles & Handling the Soft Keyboard
- Alternatives & Wrap Up
Http Requests & Adding a Web Server + Database
- Module Introduction
- Setup & How To Send Requests
- Installing Redux Thunk
- Storing Products on a Server
- Fetching Products from the Server
- Displaying a Loading Spinner & Handling Errors
- Setting Up a Navigation Listener
- Updating & Deleting Products
- Handling Additional Errors
- Storing Orders
- Displaying an ActivityIndicator
- Fetching Stored Orders
- Adding "Pull to Refresh"

REACT NATIVE

Courses

OVERVIEW OF REACT NATIVE

Getting Started

Diving into the Basics [COURSE GOALS APP]

Debugging React Native Apps

Components, Styling, Layouts - Building Real Apps [GUESS A NUMBER APP]

Responsive & Adaptive User Interfaces and Apps

Navigation with React Navigation [THE MEALS APP]

State Management & Redux

Time to Practice - THE SHOP APP

Handling User Input

Http Requests & Adding a Web Server + Database

NEWSLETTER

Get Enquiry