- 2 Sections
- 869 Lessons
- 12 Weeks
Expand all sectionsCollapse all sections
- Learn React Js, Professional Training Course with Internship526
- 1.1Getting Started
- 1.2Introduction
- 1.3Join our Online Learning Community
- 1.4Real-World SPAs & React Web Apps
- 1.5Writing our First React Code
- 1.6Why Should we Choose React?
- 1.7React Alternatives
- 1.8Understanding Single Page Applications and Multi Page Applications
- 1.9Course Outline
- 1.10How to get the Most out of This Course
- 1.11Useful Resources & Links
- 1.12Refreshing Next Generation JavaScript (Optional)
- 1.13Module Introduction
- 1.14Understanding “let” and “const”
- 1.15Arrow Functions
- 1.16Exports and Imports
- 1.17Understanding Classes
- 1.18Classes, Properties and Methods
- 1.19The Spread & Rest Operator
- 1.20Destructuring
- 1.21Reference and Primitive Types Refresher
- 1.22Refreshing Array Functions
- 1.23Wrap Up
- 1.24Next-Gen JavaScript – Summary
- 1.25JS Array Functions
- 1.26Understanding the Base Features & Syntax
- 1.27Module Introduction
- 1.28The Build Workflow
- 1.29Using Create React App
- 1.30Understanding the Folder Structure
- 1.31Understanding Component Basics
- 1.32Understanding JSX
- 1.33JSX Restrictions
- 1.34Creating a Functional Component
- 1.35Components & JSX Cheat Sheet
- 1.36Working with Components & Re-Using Them
- 1.37Outputting Dynamic Content
- 1.38Working with Props
- 1.39Understanding the “children” Prop
- 1.40Understanding & Using State
- 1.41Props & State
- 1.42Handling Events with Methods
- 1.43To Which Events Can You Listen?
- 1.44Manipulating the State
- 1.45Function Components Naming
- 1.46Using the useState() Hook for State Manipulation
- 1.47Stateless vs Stateful Components
- 1.48Passing Method References Between Components
- 1.49Adding Two Way Binding
- 1.50Adding Styling with Stylesheets
- 1.51Working with Inline Styles
- 1.52Time to Practice – The Base Syntax
- 1.53[OPTIONAL] Assignment Solution
- 1.54Useful Resources & Links
- 1.55Working with Lists and Conditionals
- 1.56Module Introduction
- 1.57Rendering Content Conditionally
- 1.58Handling Dynamic Content “The JavaScript Way”
- 1.59Outputting Lists (Intro)
- 1.60Outputting Lists
- 1.61Lists & State
- 1.62Updating State Immutably
- 1.63Lists & Keys
- 1.64Flexible Lists
- 1.65Wrap Up
- 1.66Time to Practice – Lists & Conditionals
- 1.67[OPTIONAL] Assignment Solution
- 1.68Useful Resources & Links
- 1.69Styling React Components & Elements
- 1.70Module Introduction
- 1.71Outlining the Problem Set
- 1.72Setting Styles Dynamically
- 1.73Setting Class Names Dynamically
- 1.74Adding and Using Radium
- 1.75Using Radium for Media Queries
- 1.76Introducing Styled Components
- 1.77More on Styled Components
- 1.78Styled Components & Dynamic Styles
- 1.79Working with CSS Modules
- 1.80CSS Modules & Media Queries
- 1.81More on CSS Modules
- 1.82Useful Resources & Links
- 1.83Debugging React Apps
- 1.84Module Introduction
- 1.85Understanding Error Messages
- 1.86Finding Logical Errors by using Dev Tools & Sourcemaps
- 1.87Working with the React Developer Tools
- 1.88Using Error Boundaries (React 16+)
- 1.89Wrap Up
- 1.90Useful Resources & Links
- 1.91Diving Deeper into Components & React Internals
- 1.92Module Introduction
- 1.93A Better Project Structure
- 1.94Splitting an App Into Components
- 1.95Comparing Stateless and Stateful Components
- 1.96Class-based vs Functional Components
- 1.97class Component Lifecycle Overview
- 1.98Component Creation Lifecycle in Action
- 1.99Component Update Lifecycle (for props Changes)
- 1.100Component Update Lifecycle (for state Changes)
- 1.101Using useEffect() in Functional Components
- 1.102Controlling the useEffect() Behavior
- 1.103Cleaning up with Lifecycle Hooks & useEffect()
- 1.104Cleanup Work with useEffect() – Example
- 1.105Using should Component Update for Optimization
- 1.106Optimizing Functional Components with React.memo()
- 1.107When should you optimize?
- 1.108PureComponents instead of should Component Update
- 1.109How React Updates the DOM
- 1.110Rendering Adjacent JSX Elements
- 1.111Windows Users Must Read
- 1.112Using React.Fragment
- 1.113Higher Order Components (HOC) – Introduction
- 1.114Another Form of HOCs
- 1.115Passing Unknown Props
- 1.116Setting State Correctly
- 1.117Using PropTypes
- 1.118Using Refs
- 1.119Refs with React Hooks
- 1.120Understanding Prop Chain Problems
- 1.121Using the Context API
- 1.122ContextType & useContext()
- 1.123Wrap Up
- 1.124Useful Resources & Links
- 1.125A Real App: The Burger Builder (Basic Version)
- 1.126About React Hooks
- 1.127Module Introduction
- 1.128Planning an App in React – Core Steps
- 1.129Planning our App – Layout and Component Tree
- 1.130Planning the State
- 1.131MUST READ: Enabling CSS Modules
- 1.132Setting up the Project
- 1.133Creating a Layout Component
- 1.134Starting Implementation of The Burger Builder Container
- 1.135Adding a Dynamic Ingredient Component
- 1.136Adding Prop Type Validation
- 1.137Starting the Burger Component
- 1.138Outputting Burger Ingredients Dynamically
- 1.139Calculating the Ingredient Sum Dynamically
- 1.140Adding the Build Control Component
- 1.141Outputting Multiple Build Controls
- 1.142Connecting State to Build Controls
- 1.143Removing Ingredients Safely
- 1.144Displaying and Updating the Burger Price
- 1.145Adding the Order Button
- 1.146Creating the Order Summary Modal
- 1.147Showing & Hiding the Modal (with Animation!)
- 1.148Implementing the Backdrop Component
- 1.149Adding a Custom Button Component
- 1.150Implementing the Button Component
- 1.151Adding the Price to the Order Summary
- 1.152Adding a Toolbar
- 1.153Using a Logo in our Application
- 1.154Adding Reusable Navigation Items
- 1.155Creating a Responsive Sidedrawer
- 1.156Working on Responsive Adjustments
- 1.157More about Responsive Adjustments
- 1.158Reusing the Backdrop
- 1.159Adding a Sidedrawer Toggle Button
- 1.160Adding a Hamburger Icon
- 1.161Improving the App – Introduction
- 1.162Prop Type Validation
- 1.163Improving Performance
- 1.164Using Component Lifecycle Methods
- 1.165Changing the Folder Structure
- 1.166Wrap Up
- 1.167Useful Resources & Links
- 1.168Reaching out to the Web (Http / Ajax)
- 1.169Module Introduction
- 1.170Understanding Http Requests in React
- 1.171Understanding our Project and Introducing Axios
- 1.172Creating a Http Request to GET Data
- 1.173Rendering Fetched Data to the Screen
- 1.174Transforming Data
- 1.175Making a Post Selectable
- 1.176Fetching Data on Update (without Creating Infinite Loops)
- 1.177Posting Data to the Server
- 1.178Sending a DELETE Request
- 1.179Fixing a Bug
- 1.180Handling Errors Locally
- 1.181Adding Interceptors to Execute Code Globally
- 1.182Removing Interceptors
- 1.183Setting a Default Global Configuration for Axios
- 1.184Creating and Using Axios Instances
- 1.185Wrap Up
- 1.186Useful Resources & Links
- 1.187Burger Builder Project: Accessing a Server
- 1.188Module Introduction
- 1.189Firebase & The Right Database
- 1.190Creating the Firebase Project
- 1.191Creating the Axios Instance
- 1.192Sending a POST Request
- 1.193Displaying a Spinner while Sending a Request
- 1.194Handling Errors
- 1.195Retrieving Data from the Backend
- 1.196Removing Old Interceptors
- 1.197Useful Resources & Links
- 1.198Multi-Page-Feeling in a Single-Page-App: Routing
- 1.199Module Introduction
- 1.200Routing and SPAs
- 1.201Setting Up Links
- 1.202Setting Up the Router Package
- 1.203react-router vs react-router-dom
- 1.204Preparing the Project For Routing
- 1.205Setting Up and Rendering Routes
- 1.206Rendering Components for Routes
- 1.207Switching Between Pages
- 1.208Using Links to Switch Pages
- 1.209Using Routing-Related Props
- 1.210The “withRouter” HOC & Route Props
- 1.211Absolute vs Relative Paths
- 1.212Absolute vs Relative Paths (Article)
- 1.213Styling the Active Route
- 1.214Passing Route Parameters
- 1.215Extracting Route Parameters
- 1.216Parsing Query Parameters & the Fragment
- 1.217Using Switch to Load a Single Route
- 1.218Navigating Programmatically
- 1.219Additional Information Regarding Active Links
- 1.220Understanding Nested Routes
- 1.221Creating Dynamic Nested Routes
- 1.222Redirecting Requests
- 1.223Conditional Redirects
- 1.224Using the History Prop to Redirect (Replace)
- 1.225Working with Guards
- 1.226Handling the 404 Case (Unknown Routes)
- 1.227Loading Routes Lazily
- 1.228Lazy Loading with React Suspense (16.6)
- 1.229Routing and Server Deployment
- 1.230Time to Practice – Routing
- 1.231Wrap Up
- 1.232Useful Resources & Links
- 1.233Adding Routing to our Burger Project
- 1.234Module Introduction
- 1.235Building the Checkout Container
- 1.236Setting Up Routing & Routes
- 1.237Navigating to the Checkout Page
- 1.238Navigating Back & To Next Page
- 1.239Passing Ingredients via Query Params
- 1.240Navigating to the Contact Data Component
- 1.241Order Submission & Passing Data Between Pages
- 1.242Adding an Orders Page
- 1.243Implementing Navigation Links
- 1.244Fetching Orders
- 1.245Outputting the Orders
- 1.246Wrap Up
- 1.247Useful Resources & Links
- 1.248Forms and Form Validation
- 1.249Module Introduction
- 1.250Analyzing the App
- 1.251Creating a Custom Dynamic Input Component
- 1.252Setting Up a JS Config for the Form
- 1.253Dynamically Create Inputs based on JS Config
- 1.254Adding a Dropdown Component
- 1.255Handling User Input
- 1.256Handling Form Submission
- 1.257Adding Custom Form Validation
- 1.258Fixing a Common Validation Gotcha
- 1.259Adding Validation Feedback
- 1.260Improving Visual Feedback
- 1.261Showing Error Messages
- 1.262Handling Overall Form Validity
- 1.263Working on an Error
- 1.264Fixing a Bug
- 1.265Useful Resources & Links
- 1.266Redux
- 1.267Module Introduction
- 1.268Understanding State
- 1.269The Complexity of Managing State
- 1.270Understanding the Redux Flow
- 1.271Setting Up Reducer and Store
- 1.272Dispatching Actions
- 1.273Adding Subscriptions
- 1.274Connecting React to Redux
- 1.275Connecting the Store to React
- 1.276Dispatching Actions from within the Component
- 1.277Time to Practice – Dispatching Actions
- 1.278Passing and Retrieving Data with Action
- 1.279Switch-Case in the Reducer
- 1.280Updating State Immutably
- 1.281Updating Arrays Immutably
- 1.282Immutable Update Patterns
- 1.283Outsourcing Action Types
- 1.284Combining Multiple Reducers
- 1.285Understanding State Types
- 1.286Time to Practice – Redux Basics
- 1.287[OPTIONAL] Assignment Solution
- 1.288Combining Local UI State and Redux
- 1.289Wrap Up
- 1.290Useful Resources & Links
- 1.291Adding Redux to our Project
- 1.292Module Introduction
- 1.293Installing Redux and React Redux
- 1.294Basic Redux Setup
- 1.295Finishing the Reducer for Ingredients
- 1.296Connecting the Burger Builder Container to our Store
- 1.297Working on the Total Price Calculation
- 1.298Redux & UI State
- 1.299Adjusting Checkout and Contact Data
- 1.300Wrap Up
- 1.301Useful Resources & Links
- 1.302Redux Advanced
- 1.303Module Introduction
- 1.304Adding Middleware
- 1.305Using the Redux Devtools
- 1.306Executing Asynchronous Code – Introduction
- 1.307Introducing Action Creators
- 1.308Action Creators & Async Code
- 1.309Handling Asynchronous Code
- 1.310Restructuring Actions
- 1.311Where to Put Data Transforming Logic?
- 1.312Using Action Creators and Get State
- 1.313Using Utility Functions
- 1.314A Leaner Switch Case Statement
- 1.315An Alternative Folder Structure
- 1.316Diving Much Deeper
- 1.317Wrap Up
- 1.318Useful Resources & Links
- 1.319Redux Advanced: Burger Project
- 1.320Module Introduction
- 1.321Installing the Redux Devtools
- 1.322Preparing the Folder Structure
- 1.323Creating Action Creators
- 1.324Executing Asynchronous Code
- 1.325Fetching Ingredients Asynchronously
- 1.326Initializing Ingredients in the BurgerBuilder
- 1.327Changing the Order of our Ingredients Manually
- 1.328Adding Order Actions
- 1.329Connecting Contact Data Container & Actions
- 1.330The Order Reducer
- 1.331Working on Order Actions
- 1.332Redirect to Improve UX
- 1.333Combining Reducers
- 1.334Handling Purchases & Updating the UI
- 1.335Resetting the Price after Purchases
- 1.336Fetching Orders (via Redux)
- 1.337Checking our Implemented Functionalities
- 1.338Refactoring Reducers
- 1.339Refactoring Reducers Continued
- 1.340Wrap Up
- 1.341Useful Resources & Links
- 1.342Adding Authentication to our Burger Project
- 1.343Module Introduction
- 1.344Understanding Authentication in Single Page Applications
- 1.345Required App Adjustments
- 1.346Adding an Auth Form
- 1.347Adding Actions
- 1.348Getting a Token from the Backend
- 1.349Adding Sign-In
- 1.350Storing the Token
- 1.351Adding a Spinner
- 1.352Logging Users Out
- 1.353Accessing Protected Resources
- 1.354Updating the UI Depending on Auth State
- 1.355Adding a Logout Link
- 1.356Forwarding Unauthenticated Users
- 1.357Redirecting the User to the Checkout Page
- 1.358Persistent Auth State with localStorage
- 1.359Fixing Connect + Routing Errors
- 1.360Ensuring App Security
- 1.361Guarding Routes
- 1.362Displaying User Specific Orders
- 1.363Wrap Up
- 1.364Useful Resources & Links
- 1.365Improving our Burger Project
- 1.366Module Introduction
- 1.367Fixing the Redirect to the Frontpage
- 1.368Using updateObject in the Entire App
- 1.369Sharing the Validation Method
- 1.370Using Environment Variables
- 1.371Removing console.log()s
- 1.372Adding Lazy Loading
- 1.373Wrap Up
- 1.374Useful Resources & Links
- 1.375Testing
- 1.376Module Introduction
- 1.377What is Testing?
- 1.378Required Testing Tools
- 1.379What To Test?
- 1.380Writing our First Test
- 1.381Testing Components Continued
- 1.382Jest and Enzyme Documentations
- 1.383Testing Components Correctly
- 1.384Testing Containers
- 1.385How to Test Redux
- 1.386Wrap Up
- 1.387Useful Resources & Links
- 1.388Deploying the App to the Web
- 1.389Module Introduction
- 1.390Deployment Steps
- 1.391Building the Project
- 1.392Example: Deploying on Firebase
- 1.393Wrap Up
- 1.394Useful Resources & Links
- 1.395Bonus: Working with Webpack
- 1.396Module Introduction
- 1.397DON’T SKIP: Webpack Versions
- 1.398Introducing Webpack
- 1.399How Webpack works
- 1.400Basic Workflow Requirements
- 1.401Project & npm Setup
- 1.402Creating a Basic Folder & File Structure
- 1.403Creating the Basic React Application
- 1.404Installing Production Dependencies
- 1.405Setting Up the Basic Webpack Config
- 1.406Adding File Rules & Babel
- 1.407Loading CSS Files
- 1.408Loading Images & Injecting into HTML Page
- 1.409Production Workflow & Wrap Up
- 1.410Adding babel-polyfill
- 1.411Useful Resources & Links
- 1.412Bonus: Next.js
- 1.413Module Introduction
- 1.414Understanding Server Side Rendering
- 1.415Setting Up a Project
- 1.416Understanding the Basics
- 1.417Next.js & Components & Pages
- 1.418Styling our App in Next.js
- 1.419Handling (404) Errors
- 1.420A Special Lifecycle Hook
- 1.421Useful Resources & Links
- 1.422Deploying our App
- 1.423Bonus: Animations in React Apps
- 1.424Module Introduction
- 1.425Preparing the Demo Project
- 1.426Using CSS Transitions
- 1.427Using CSS Animations
- 1.428CSS Transition & Animations Limitations
- 1.429Using ReactTransitionGroup
- 1.430Using the Transition Component
- 1.431Wrapping the Transition Component
- 1.432Animation Timings
- 1.433Transition Events
- 1.434Customizing CSS Classnames
- 1.435The CSSTransition Component
- 1.436Animating Lists
- 1.437Alternative Animation Packages
- 1.438Wrap Up
- 1.439Useful Resources & Links
- 1.440Bonus: A Brief Introduction to Redux Saga
- 1.441Module Introduction
- 1.442Installing Redux Saga
- 1.443Creating our First Saga
- 1.444Hooking the Saga Up (to the Store and Actions)
- 1.445Moving Logic from the Action Creator to a Saga
- 1.446Moving More Logic Into Sagas
- 1.447Handling Authentication with a Saga
- 1.448Handling Auto-Sign-In with a Saga
- 1.449Moving the BurgerBuilder Side Effects into a Saga
- 1.450Moving the Orders Side Effects into Sagas
- 1.451Why Sagas can be Helpful
- 1.452Diving Deeper into Sagas
- 1.453Useful Resources & Links
- 1.454React Hooks
- 1.455Introduction
- 1.456What are “React Hooks”?
- 1.457The Starting Project
- 1.458Getting Started with useState()
- 1.459More on useState() & State Updating
- 1.460Array Destructuring
- 1.461Multiple States
- 1.462Rules of Hooks
- 1.463Passing State Data Across Components
- 1.464Time to Practice: Hooks Basics
- 1.465Sending Http Requests
- 1.466useEffect() & Loading Data
- 1.467Understanding useEffect() Dependencies
- 1.468More on useEffect()
- 1.469What’s useCallback()?
- 1.470Working with Refs & useRef()
- 1.471Cleaning Up with useEffect()
- 1.472Deleting Ingredients
- 1.473Loading Errors & State Batching
- 1.474More on State Batching & State Updates
- 1.475Understanding useReducer()
- 1.476Using useReducer() for the Http State
- 1.477Working with useContext()
- 1.478Performance Optimizations with useMemo()
- 1.479Getting Started with Custom Hooks
- 1.480Sharing Data Between Custom Hooks & Components
- 1.481Using the Custom Hook
- 1.482Wrap Up
- 1.483Using Hooks in the Burger Builder
- 1.484Introduction
- 1.485Converting
- 1.486Routing with React.lazy()
- 1.487Converting the Layout Component
- 1.488Converting withErrorHandler HOC
- 1.489Adjusting the Order & Checkout Containers
- 1.490Add Hooks to ContactData
- 1.491Converting the BurgerBuilder Container
- 1.492Adjusting Auth & Logout Components
- 1.493Using React.memo() & More!
- 1.494Adding a Custom Error Handling Hook
- 1.495Setting the right useEffect() Dependencies
- 1.496Working with useSelector() and useDispatch()
- 1.497Wrap Up
- 1.498Useful Resources & Links
- 1.499Bonus: Replacing Redux with React Hooks
- 1.500Module Introduction
- 1.501Starting Project & Why You Would Replace Redux
- 1.502Alternative: Using the Context API
- 1.503Toggling Favorites with the Context API
- 1.504Context API Summary (and why NOT to use it instead of Redux)
- 1.505Getting Started with a Custom Hook as a Store
- 1.506Finishing the Store Hook
- 1.507Creating a Concrete Store
- 1.508Using the Custom Store
- 1.509Custom Hook Store Summary
- 1.510Optimizing the Custom Hook Store
- 1.511Bonus: Managing Multiple State Slices with the Custom Store Hook
- 1.512Wrap Up
- 1.513Useful Resources & Links
- 1.514Bonus: Building the Burger CSS
- 1.515Building the Burger CSS Code
- 1.516Next Steps and Course Roundup
- 1.517Module Introduction
- 1.518More Inspiration: Real-World Projects Built with React
- 1.519React Rocks! Where to find more Examples
- 1.520Static React Apps with Gatsby.js
- 1.521Introducing React Native
- 1.522Component Libraries (Example: Material UI)
- 1.523Smaller Apps with Preact
- 1.524Comparing React with Preact
- 1.525Congratulations
- 1.526Bonus: More Content!
- Learn React Native, Professional Training Course with Internship343
- 2.1Getting Started
- 2.2What is React Native?
- 2.3Join our Online Learning Community
- 2.4How React Native Works
- 2.5Expo vs React Native CLI
- 2.6Node.js Download
- 2.7Creating Our First React Native App
- 2.8Working on Our First App
- 2.9React Native Apps Are Hard Work!
- 2.10React Native Alternatives
- 2.11Course Requirements
- 2.12Course Requirement Refreshers
- 2.13Running the App on an Android Emulator
- 2.14Running the App on an iOS Simulator
- 2.15Course Outline
- 2.16How to get the Most out of This Course
- 2.17Useful Resources & Links
- 2.18JavaScript Refresher
- 2.19Module Introduction
- 2.20JavaScript – A Summary
- 2.21Project Setup
- 2.22Core Syntax Refresher
- 2.23let & const
- 2.24Arrow Functions
- 2.25Objects: Properties & Methods
- 2.26Arrays & Array Methods
- 2.27Arrays, Objects & Reference Types
- 2.28Spread Operator & Rest Parameters
- 2.29Destructuring
- 2.30Async Code & Promises
- 2.31Wrap Up
- 2.32Module Resources
- 2.33React.js Refresher
- 2.34Module Introduction
- 2.35What is React
- 2.36A Starting Project
- 2.37Understanding JSX
- 2.38Understanding Components
- 2.39Working with Multiple Components
- 2.40Working with Props
- 2.41Rendering Lists of Data
- 2.42Handling Events
- 2.43Parent-Child Communication
- 2.44Managing State
- 2.45More on State
- 2.46User Input & Two-Way Binding
- 2.47Wrap Up
- 2.48Module Resources
- 2.49Diving into the Basics [COURSE GOALS APP]
- 2.50Module Introduction
- 2.51How to work with React Native Components
- 2.52Setting Up A New Project
- 2.53Planning the App
- 2.54Working with Core Components
- 2.55Getting Started with Styles
- 2.56Flexbox & Layouts (Intro)
- 2.57React Native Flexbox Deep Dive
- 2.58Inline Styles & StyleSheet Objects
- 2.59Components, Styles, Layouts
- 2.60Working with State & Events
- 2.61Outputting a List of Items
- 2.62Styling List Items
- 2.63Making it Scrollable with ScrollView!
- 2.64A Better List: FlatList
- 2.65More Components & Lists
- 2.66Splitting the App Into Components
- 2.67Passing Data Between Components
- 2.68Working with Touchable Components
- 2.69Deleting Items
- 2.70Adding a Modal Overlay
- 2.71More Flexbox Styling
- 2.72Closing the Modal & Clearing Input
- 2.73Finishing the Modal Styling
- 2.74Wrap Up
- 2.75Useful Resources & Links
- 2.76Debugging React Native Apps
- 2.77Module Introduction
- 2.78What To Debug & How To Debug?
- 2.79Running the App on a Real Device & Debugging
- 2.80Handling Error Messages
- 2.81Understanding Code Flow with console.log()
- 2.82Using the Remote Debugger & Breakpoints
- 2.83Working with the Device DevTools Overlay
- 2.84Debugging the UI & Using React Native Debugger
- 2.85Wrap Up
- 2.86Useful Resources & Links
- 2.87Components, Styling, Layouts – Building Real Apps [GUESS A NUMBER APP]
- 2.88Module Introduction
- 2.89Setup & App Planning
- 2.90Adding a Custom Header Component
- 2.91Adding a Screen Component
- 2.92Working on the Layout
- 2.93Styling a View as a “Card” Container (with Drop Shadows & Rounded Corners)
- 2.94React Native Styling vs CSS Styling
- 2.95Extracting a Card Component (Presentational Component)
- 2.96Components & Styling
- 2.97Color Theming with Constants
- 2.98Configuring & Styling a TextInput
- 2.99Cleaning User Input & Controlling the Soft Keyboard
- 2.100Resetting & Confirming User Input
- 2.101Configuring Components
- 2.102Showing an Alert
- 2.103Time to Finish the “Confirmation Box”
- 2.104Adding Random Number Generation
- 2.105Switching Between Multiple “Screens”
- 2.106Adding Game Features: Hints & Validation
- 2.107Checking the “Win” Condition with useEffect()
- 2.108Finishing the Game Logic
- 2.109Adding AppLoading
- 2.110Adding Custom Fonts
- 2.111Installing expo-font
- 2.112A Synthetic Style “Cascade”: Custom Wrapper Components & Global Styles
- 2.113Adding Local Images
- 2.114Styling Images
- 2.115Working with Network (Web) Images
- 2.116A Closer Look at the “Text” Component (and what you can do with it)
- 2.117vs – A Summary
- 2.118Building a Custom Button Component
- 2.119Adding Icons
- 2.120Exploring UI Libraries
- 2.121Managing Past Guesses as a List
- 2.122Styling List Items & Lists
- 2.123ScrollView & Flexbox (Yes, that works!)
- 2.124Using FlatList Instead of ScrollView
- 2.125Wrap Up
- 2.126Useful Resources & Links
- 2.127Responsive & Adaptive User Interfaces and Apps
- 2.128Module Introduction
- 2.129Finding Improvement Opportunities
- 2.130Working with More Flexible Styling Rules
- 2.131Introducing the Dimensions API
- 2.132Using Dimensions in “if” Checks
- 2.133Calculating Sizes Dynamically
- 2.134Problems with Different Device Orientations
- 2.135Controlling Orientation & Using the KeyboardAvoidingView
- 2.136Listening to Orientation Changes
- 2.137Rendering Different Layouts
- 2.138Fixing the GameOver Screen
- 2.139Updating All Code to Update Dynamically
- 2.140The Dimensions API & Responsive UIs
- 2.141Expo’s ScreenOrientation API
- 2.142Introducing the Platform API
- 2.143Working with Platform.select() and Platform in “if” Checks
- 2.144Using Platform-specific Code Files
- 2.145The Platform API
- 2.146Using the SafeAreaView
- 2.147Wrap Up
- 2.148Useful Resources & Links
- 2.149Navigation with React Navigation [THE MEALS APP]
- 2.150Module Introduction
- 2.151Planning the App
- 2.152Adding Screens
- 2.153Adding AppLoading
- 2.154Adding Fonts
- 2.155React Navigation Docs
- 2.156Installing React Navigation & Adding Navigation to the App
- 2.157MUST READ: Installing Different Navigators
- 2.158Creating a StackNavigator
- 2.159React Navigation & Code Attachments
- 2.160Navigating Between Screens
- 2.161Alternative Navigation Syntax
- 2.162Navigation Basics
- 2.163Navigation to the “Meal Details” Screen
- 2.164Pushing, Popping & Replacing
- 2.165Outputting a Grid of Categories
- 2.166Configuring the Header with Navigation Options
- 2.167Passing & Reading Params Upon Navigation
- 2.168Setting Dynamic Navigation Options
- 2.169Default Navigation Options & Config
- 2.170Navigation Params & Configuration
- 2.171Grid Styling & Some Refactoring
- 2.172Adding Meal Models & Data
- 2.173Loading Meals for Categories
- 2.174Rendering a Meals List
- 2.175Passing Data to the Meal Detail Screen
- 2.176Adding Header Buttons
- 2.177Fixing the Shadows
- 2.178Adding Tabs-based Navigation
- 2.179Setting Icons and Configuring Tabs
- 2.180NavigationOptions inside of a Navigator
- 2.181Adding MaterialBottomTabs
- 2.182Adding a Favorites Stack
- 2.183Adding a Menu Button & Drawer Navigation
- 2.184Configuring the Drawer
- 2.185More Navigation Config & Styling
- 2.186Adding a DefaultText Component
- 2.187Adding the MealDetail Screen Content
- 2.188Time for the “Filters” Screen Content!
- 2.189Passing Data Between Component & Navigation Options (Header)
- 2.190[React Refresher] useEffect() & useCallback()
- 2.191Wrap Up
- 2.192Useful Resources & Links
- 2.193State Management & Redux
- 2.194Module Introduction
- 2.195What is State & What is Redux?
- 2.196Redux & Store Setup
- 2.197Selecting State Slices
- 2.198Redux Data & Navigation Options
- 2.199Dispatching Actions & Reducer Logic
- 2.200Switching the Favorites Icon
- 2.201Rendering a Fallback Text
- 2.202Adding Filtering Logic
- 2.203Dispatching Filter Actions
- 2.204Debugging Redux in React Native Apps
- 2.205Wrap Up
- 2.206Useful Resources & Links
- 2.207Time to Practice – THE SHOP APP
- 2.208Module Introduction
- 2.209Planning the App
- 2.210Creating the Basic Project Setup
- 2.211The Products Overview Screen
- 2.212Setting Up a Navigator
- 2.213Styling the Product Items
- 2.214Adding Touchable Components
- 2.215Working on the Product Details Screen
- 2.216Using Custom Fonts
- 2.217Adding Items to the Cart
- 2.218Implementing Header Buttons
- 2.219Outputting Cart Items
- 2.220Adding Logic to Delete Items
- 2.221Adding Redux Logic for Orders
- 2.222SideDrawer & The Orders Screen
- 2.223Clearing the Cart
- 2.224Styling Order Items
- 2.225Making the “Show Details” Button Work
- 2.226Building the “User Products” Screen
- 2.227Reorganizing the ProductItem Component
- 2.228Deleting Items
- 2.229Adding Basic Editing & Navigation Logic
- 2.230Handling User Input
- 2.231Using Params to Submit User Input
- 2.232Dispatching Actions for Creating & Updating
- 2.233Time to Improve the App!
- 2.234Wrap Up
- 2.235Useful Resources & Links
- 2.236Handling User Input
- 2.237Module Introduction
- 2.238Configuring TextInputs
- 2.239Adding Basic Validation
- 2.240Getting Started with useReducer()
- 2.241Finishing the Merged Form & Input Management
- 2.242Moving Input Logic Into A Separate Component
- 2.243Connecting Input Component & Form
- 2.244Tweaking Styles & Handling the Soft Keyboard
- 2.245Alternatives & Wrap Up
- 2.246Useful Resources & Links
- 2.247Http Requests & Adding a Web Server + Database
- 2.248Module Introduction
- 2.249Setup & How To Send Requests
- 2.250Installing Redux Thunk
- 2.251Storing Products on a Server
- 2.252Fetching Products from the Server
- 2.253Displaying a Loading Spinner & Handling Errors
- 2.254Setting Up a Navigation Listener
- 2.255Updating & Deleting Products
- 2.256Handling Additional Errors
- 2.257Storing Orders
- 2.258Displaying an ActivityIndicator
- 2.259Fetching Stored Orders
- 2.260Adding “Pull to Refresh”
- 2.261Wrap Up
- 2.262Useful Resources & Links
- 2.263User Authentication
- 2.264Module Introduction
- 2.265How Authentication Works
- 2.266Implementing a Basic Login Screen
- 2.267Adding User Signup
- 2.268Logging Users In
- 2.269Managing the Loading State & Errors
- 2.270Using the Token
- 2.271Mapping Orders to Users
- 2.272Improved Mapping (Scoping)
- 2.273Implementing “Auto Login”
- 2.274Adding Logout
- 2.275Implementing “Auto Logout”
- 2.276Auto-Logout & Android (Warning)
- 2.277Wrap Up
- 2.278Useful Resources & Links
- 2.279Native Device Features (Camera, Maps, Location, SQLite, …) [GREAT PLACES APP]
- 2.280Module Introduction
- 2.281Planning the App
- 2.282Navigation Setup in Next Lecture
- 2.283Screen & Navigation Setup
- 2.284Getting Started with the Form
- 2.285Redux & Adding Places
- 2.286Outputting a List of Places
- 2.287Accessing the Device Camera
- 2.288Configuring the Camera Access
- 2.289Using the Picked Image
- 2.290Storing the Image on the Filesystem
- 2.291Changed SQLite Import
- 2.292Diving into SQLite for Permanent Data Storage
- 2.293Storing Data in the Local Database
- 2.294Fetching Data from the Local Database
- 2.295Getting the User Location
- 2.296Showing a Map Preview of the Location
- 2.297More on Environment Variables
- 2.298Displaying an Interactive Map
- 2.299Adding a Marker
- 2.300Making the Picked Location “Saveable”
- 2.301Updating the Location Screen When the Location Changes
- 2.302Storing the Address
- 2.303Storing Picked Places
- 2.304Displaying the “Details” Screen
- 2.305Finishing the “Map” Screen
- 2.306Running the App on iOS
- 2.307Running the App on Android
- 2.308Wrap Up
- 2.309Useful Resources & Links
- 2.310Building Apps Without Expo
- 2.311Module Introduction
- 2.312Alternatives to Expo
- 2.313Building Apps with Just the React Native CLI
- 2.314Live Reload and RN CLI Apps
- 2.315Important: Using React Native Image Picker
- 2.316Adding Native Modules to Non-Expo Apps
- 2.317Understanding Expo’s “Bare Workflow”
- 2.318Ejecting from Expo’s “Managed Workflow”
- 2.319When To Use Which?
- 2.320Useful Resources & Links
- 2.321Push Notifications
- 2.322Module Introduction
- 2.323Understanding Notifications
- 2.324Sending Local Notifications
- 2.325Getting Permissions
- 2.326Controlling How Notifications Are Displayed
- 2.327Reacting to Foreground Notifications
- 2.328Reacting to Background Notifications
- 2.329How Push Notifications Work
- 2.330Expo & Push Notifications
- 2.331Getting a Push Token
- 2.332Sending Push Notifications
- 2.333Using Expo’s Push Server
- 2.334More on Push Tokens
- 2.335Adding Push Notifications to the Shop App (1/3)
- 2.336Adding Push Notifications to the Shop App (2/3)
- 2.337Adding Push Notifications to the Shop App (3/3)
- 2.338Push Notifications in non-Expo Managed Apps
- 2.339Module Resources
- 2.340Course Roundup & Next Steps
- 2.341Roundup & Next Steps
- 2.342Bonus
- 2.343Bonus: More Content!