React-Course-Jonas-Schmedtmann Tailwind Templates

React Course Jonas Schmedtmann

learning modern React from beginner to advanced! Context API, React Query, Redux Toolkit, Tailwind, advanced patterns

Download

The Ultimate React Course 2023: React, Redux & More

Course Content:

Section 1: Welcome, Welcome, Welcome!

  1. Course Roadmap and Projects
  2. Building Our First React App!
  3. Watch Before You Start!
  4. Read Before You Start!
  5. Downloading Course Material

Section 2: PART 1: REACT FUNDAMENTALS [4 PROJECTS]

  1. Introduction to Part 1
  2. Useful Resources for Part 1

Section 3: A First Look at React

  1. Section Overview
  2. Why Do Front-End Frameworks Exist?
  3. React vs. Vanilla JavaScript
  4. What is React?
  5. Setting Up Our Development Environment
  6. Pure React
  7. A Quick Look at React's Official Documentation
  8. Setting Up a New React Project: The Options
  9. Setting Up a Project With Create-React-App

Section 4: [Optional] Review of Essential JavaScript for React

  1. Section Overview
  2. Destructuring Objects and Arrays
  3. Rest/Spread Operator
  4. Template Literals
  5. Ternaries Instead of if/else Statements
  6. Arrow Functions
  7. Short-Circuiting And Logical Operators: &&, ||, ??
  8. Optional Chaining
  9. The Array map Method
  10. The Array filter Method
  11. The Array reduce Method
  12. The Array sort Method
  13. Working With Immutable Arrays
  14. Asynchronous JavaScript: Promises
  15. Asynchronous JavaScript: Async/Await

Section 5: Working With Components, Props, and JSX

  1. Section Overview
  2. Rendering the Root Component and Strict Mode
  3. Before We Start Coding: Debugging
  4. Components as Building Blocks
  5. Creating And Reusing a Component
  6. What is JSX?
  7. Creating More Components
  8. JavaScript Logic in Components
  9. Separation of Concerns
  10. Styling React Applications
  11. Passing and Receiving Props
  12. Props, Immutability, and One-Way Data Flow
  13. CHALLENGE #1: Profile Card (v1)
  14. The Rules of JSX
  15. Rendering Lists
  16. Conditional Rendering With &&
  17. Conditional Rendering With Ternaries
  18. Conditional Rendering With Multiple Returns
  19. Extracting JSX Into a New Component
  20. Destructuring Props
  21. React Fragments
  22. Setting Classes and Text Conditionally
  23. Section Summary
  24. CHALLENGE #2: Profile Card (v2)

Section 6: State, Events, and Forms: Interactive Components

  1. Section Overview
  2. Let's Build a Steps Component
  3. Handling Events the React Way
  4. What is State in React?
  5. Creating a State Variable With useState
  6. Don't Set State Manually!
  7. The Mechanics of State
  8. Adding Another Piece of State
  9. React Developer Tools
  10. Updating State Based on Current State
  11. More Thoughts About State + State Guidelines
  12. A Vanilla JavaScript Implementation
  13. CHALLENGE #1: Date Counter (v1)
  14. Starting a New Project: The "Far Away" Travel List
  15. Building the Layout
  16. Rendering the Items List
  17. Building a Form and Handling Submissions
  18. Controlled Elements
  19. State vs. Props
  20. EXERCISE #1: Flashcards
  21. CHALLENGE #2: Date Counter (v2)

Section 7: Thinking In React: State Management

  1. Section Overview
  2. What is "Thinking in React"?
  3. Fundamentals of State Management
  4. Thinking About State and Lifting State Up
  5. Reviewing "Lifting Up State"
  6. Deleting an Item: More Child-to-Parent Communication!
  7. Updating an Item: Complex Immutable Data Operation
  8. Derived State
  9. Calculating Statistics as Derived State
  10. Sorting Items
  11. Clearing the List
  12. Moving Components Into Separate Files
  13. EXERCISE #1: Accordion Component (v1)
  14. The "children" Prop: Making a Reusable Button
  15. More Reusability With the "children" Prop
  16. EXERCISE #2: Accordion Component (v2)
  17. CHALLENGE #1: Tip Calculator

Section 8: [Optional] Practice Project: Eat-'N-Split

  1. Section Overview
  2. Project Setup
  3. Building the Static App: List of Friends
  4. Building the Static App: Forms
  5. Displaying the New Friend Form
  6. Adding a New Friend
  7. Selecting a Friend
  8. Creating Controlled Elements
  9. Splitting a Bill

Section 9: PART 2: INTERMEDIATE REACT [2 PROJECTS]

  1. Introduction to Part 2
  2. Useful Resources for Part 2

Section 10: Thinking in React: Components, Composition, and Reusability

  1. Section Overview
  2. Setting Up the "usePopcorn" Project
  3. How to Split a UI Into Components
  4. Splitting Components in Practice
  5. Component Categories
  6. Prop Drilling
  7. Component Composition
  8. Fixing Prop Drilling With Composition (And Building a Layout)
  9. Using Composition to Make a Reusable Box
  10. Passing Elements as Props (Alternative to children)
  11. Building a Reusable Star Rating Component
  12. Creating the Stars
  13. Handling Hover Events
  14. Props as a Component API
  15. Improving Reusability With Props
  16. PropTypes
  17. CHALLENGE #1: Text Expander Component

Section 11: How React Works Behind the Scenes

  1. Section Overview
  2. Project Setup and Walkthrough
  3. Components, Instances, and Elements
  4. Instances and Elements in Practice
  5. How Rendering Works: Overview
  6. How Rendering Works: The Render Phase
  7. How Rendering Works: The Commit Phase
  8. How Diffing Works
  9. Diffing Rules in Practice
  10. The Key Prop
  11. Resetting State With the Key Prop
  12. Using the Key Prop to Fix Our Eat-'N-Split App
  13. Rules for Render Logic: Pure Components
  14. State Update Batching
  15. State Update Batching in Practice
  16. How Events Work in React
  17. Libraries vs. Frameworks & The React Ecosystem
  18. Section Summary: Practical Takeaways

Section 12: Effects and Data Fetching

  1. Section Overview
  2. The Component Lifecycle
  3. How NOT to Fetch Data in React
  4. useEffect to the Rescue
  5. A First Look at Effects
  6. Using an async Function
  7. Adding a Loading State
  8. Handling Errors
  9. The useEffect Dependency Array
  10. Synchronizing Queries With Movie Data
  11. Selecting a Movie
  12. Loading Movie Details
  13. Adding a Watched Movie
  14. Adding a New Effect: Changing Page Title
  15. The useEffect Cleanup Function
  16. Cleaning Up the Title
  17. Cleaning Up Data Fetching
  18. One More Effect: Listening to a Keypress
  19. CHALLENGE #1: Currency Converter

Section 13: Custom Hooks, Refs, and More State

  1. Section Overview
  2. React Hooks and Their Rules
  3. The Rules of Hooks in Practice
  4. More Details of useState
  5. Initializing State With a Callback (Lazy Initial State)
  6. useState Summary
  7. How NOT to Select DOM Elements in React
  8. Introducing Another Hook: useRef
  9. Refs to Select DOM Elements
  10. Refs to Persist Data Between Renders
  11. What are Custom Hooks? When to Create One?
  12. Creating our First Custom Hook: useMovies
  13. Creating useLocalStorageState
  14. Creating useKey
  15. CHALLENGE #1: useGeolocate

Section 14: [Optional] React Before Hooks: Class-Based React

  1. Section Overview
  2. Our First Class Component
  3. Working With Event Handlers
  4. Class Components vs. Function Components
  5. Starting the "Classy Weather" App
  6. Fetching Weather Data
  7. Displaying the Weather
  8. Removing Boilerplate Code With Class Fields
  9. Child to Parent Communication
  10. Lifecycle Methods

Section 15: PART 3: ADVANCED REACT + REDUX [4 PROJECTS]

  1. Introduction to Part 3
  2. Useful Resources for Part 3

Section 16: The Advanced useReducer Hook

  1. Section Overview
  2. Yet Another Hook: useReducer
  3. Managing Related Pieces of State
  4. Managing State With useReducer
  5. The "React Quiz" App
  6. Loading Questions from a Fake API
  7. Handling Loading, Error, and Ready Status
  8. Starting a New Quiz
  9. Displaying Questions
  10. Handling New Answers
  11. Moving to the Next Question
  12. Displaying Progress
  13. Finishing a Quiz
  14. Restarting a Quiz
  15. Setting Up a Timer With useEffect
  16. Section Summary: useState vs. useReducer
  17. CHALLENGE #1: Creating a Bank Account With useReducer

Section 17: React Router: Building Single-Page Applications (SPA)

  1. Section Overview
  2. Creating Our First App With Vite: "WorldWise"
  3. Routing and Single-Page Applications (SPAs)
  4. Implementing Main Pages and Routes
  5. Linking Between Routes With and
  6. Styling Options For React Applications
  7. Using CSS Modules
  8. Building the Pages
  9. Building the App Layout
  10. Nested Routes and Index Route
  11. Implementing the Cities List
  12. Implementing the Countries List
  13. Storing State in the URL
  14. Dynamic Routes With URL Parameters
  15. Reading and Setting a Query String
  16. Programmatic Navigation with useNavigate
  17. Programmatic Navigation with

Section 18: Advanced State Management: The Context API

  1. Section Overview
  2. CHALLENGE #1: Understand "The Atomic Blog" App
  3. What is the Context API?
  4. Creating and Providing a Context
  5. Consuming the Context
  6. Advanced Pattern: A Custom Provider and Hook
  7. Thinking In React: Advanced State Management
  8. Back to "WorldWise": Creating a CitiesContext
  9. Consuming the CitiesContext
  10. Finishing the City View
  11. Including a Map With the Leaflet Library
  12. Displaying City Markers on Map
  13. Interacting With the Map
  14. Setting Map Position With Geolocation
  15. Fetching City Data in the Form
  16. Creating a New City
  17. Deleting a City
  18. Advanced State Management System: Context + useReducer
  19. Adding Fake Authentication: Setting Up Context
  20. Adding Fake Authentication: Implementing "Login"
  21. Adding Fake Authentication: Protecting a Route
  22. CHALLENGE #2: Refactoring "React Quiz" to Context API

Section 19: Performance Optimization and Advanced useEffect

  1. Section Overview
  2. Performance Optimization and Wasted Renders
  3. The Profiler Developer Tool
  4. A Surprising Optimization Trick With children
  5. Understanding memo
  6. memo in Practice
  7. Understanding useMemo and useCallback
  8. useMemo in Practice
  9. useCallback in Practice
  10. Optimizing Context Re-Renders
  11. Back to The "WorldWise" App
  12. Optimizing Bundle Size With Code Splitting
  13. Don't Optimize Prematurely!
  14. useEffect Rules and Best Practices
  15. CHALLENGE #1: Fix Performance Issues in "Workout Timer"
  16. Setting State Based on Other State Updates
  17. Using Helper Functions In Effects
  18. Closures in Effects

Section 20: Redux and Modern Redux Toolkit (With Thunks)

  1. Section Overview
  2. Introduction to Redux
  3. Creating a Reducer: Bank Account
  4. Creating a Redux Store
  5. Working With Action Creators
  6. Adding More State: Customer
  7. Professional Redux File Structure: State Slices
  8. Back to React! Connecting our Redux App With React
  9. Dispatching Actions from Our React App
  10. The Legacy Way of Connecting Components to Redux
  11. Redux Middleware and Thunks
  12. Making an API Call With Redux Thunks
  13. The Redux DevTools
  14. What is Redux Toolkit (RTK)?
  15. Creating the Store With RTK
  16. Creating the Account Slice
  17. Back to Thunks
  18. Creating the Customer Slice
  19. Redux vs. Context API

Section 21: PART 4: PROFESSIONAL REACT DEVELOPMENT [2 PROJECTS]

  1. Introduction to Part 4
  2. Useful Resources for Part 4

Section 22: React Router With Data Loading (v6.4+)

  1. Section Overview
  2. Setting Up a New Project: "Fast React Pizza Co."
  3. Application Planning
  4. Setting Up a Professional File Structure
  5. A New Way Of Implementing Routes
  6. Building the App Layout
  7. Fetching Data With React Router "Loaders": Pizza Menu
  8. Displaying a Loading Indicator
  9. Handling Errors With Error Elements
  10. Fetching Orders
  11. Writing Data With React Router "Actions"
  12. Error Handling in Form Actions

Section 23: [Optional] Tailwind CSS Crash Course: Styling the App

  1. Section Overview
  2. What is Tailwind CSS?
  3. Setting Up Tailwind CSS
  4. Working With Color
  5. Styling Text
  6. The Box Model: Spacing, Borders, and Display
  7. Responsive Design
  8. Using Flexbox
  9. Using CSS Grid
  10. Styling Buttons: Element States and Transitions
  11. Styling Form Elements
  12. Reusing Styles With @apply
  13. Reusing Styles With React Components
  14. Absolute Positioning, z-index, and More
  15. Configuring Tailwind: Custom Font Family
  16. Styling the Menu
  17. Styling the Cart
  18. Styling the Order Form
  19. Styling the Order Overview

Section 24: Adding Redux and Advanced React Router

  1. Section Overview
  2. Modeling the "User" State With Redux Toolkit
  3. Reading and Updating the User State
  4. Modeling the "Cart" State
  5. Adding Menu Items to the Cart
  6. Building the Cart Overview With Redux Selectors
  7. Building the Cart Page
  8. Deleting Cart Items
  9. Updating Cart Quantities
  10. Using the Cart for New Orders
  11. Redux Thunks With createAsyncThunk
  12. Integrating Geolocation
  13. Fetching Data Without Navigation: useFetcher
  14. Updating Data Without Navigation

Section 25: Setting Up Our Biggest Project + Styled Components

  1. Section Overview
  2. Application Planning
  3. Setting Up the Project: "The Wild Oasis"
  4. Introduction to Styled Components
  5. Global Styles With Styled Components
  6. Styled Component Props and the "css" Function
  7. Building More Reusable Styled Components
  8. Setting Up Pages and Routes
  9. Building the App Layout
  10. Building the Sidebar and Main Navigation

Section 26: Supabase Crash Course: Building a Back-End!

  1. Section Overview
  2. What is Supabase?
  3. Creating a New Database
  4. Modeling Application State
  5. Creating Tables
  6. Relationships Between Tables
  7. Adding Security Policies (RLS)
  8. Connecting Supabase With Our React App
  9. Setting Up Storage Buckets

Section 27: React Query: Managing Remote State

  1. Section Overview
  2. What is React Query?
  3. Setting Up React Query
  4. Fetching Cabin Data
  5. Mutations: Deleting a Cabin
  6. Displaying Toasts (Notifications)
  7. Introducing Another Library: React Hook Form
  8. Creating a New Cabin
  9. Handling Form Errors
  10. Uploading Images to Supabase
  11. Editing a Cabin
  12. Abstracting React Query Into Custom Hooks
  13. Duplicating Cabins
  14. Fetching Applications Settings
  15. Updating Application Settings

Section 28: Advanced React Patterns

  1. Section Overview
  2. An Overview of Reusability in React
  3. Setting Up an Example
  4. The Render Props Pattern
  5. A Look at Higher-Order Components (HOC)
  6. The Compound Component Pattern
  7. Building a Modal Window Using a React Portal
  8. Converting the Modal to a Compound Component
  9. Detecting a Click Outside the Modal
  10. Confirming Cabin Deletions
  11. Building a Reusable Table
  12. Applying the Render Props Pattern
  13. Building a Reusable Context Menu

Section 29: [Optional] Implementing More Features: Authentication, Dark Mode, Dashboard, etc

  1. Section Overview
  2. Client-Side Filtering: Filtering Cabins
  3. Client-Side Sorting: Sorting Cabins
  4. Building the Bookings Table
  5. Uploading Sample Data
  6. API-Side Filtering: Filtering Bookings
  7. API-Side Sorting: Sorting Bookings
  8. Building a Reusable Pagination Component
  9. API-Side Pagination: Paginating Bookings
  10. Prefetching With React Query
  11. Building the Single Booking Page
  12. Checking In a Booking
  13. Adding Optional Breakfast
  14. Checking Out a Booking (+ Fixing a Small Bug)
  15. Deleting a Booking
  16. Authentication: User Login With Supabase
  17. Authorization: Protecting Routes
  18. User Logout
  19. Fixing an Important Bug
  20. Building the Sign Up Form
  21. User Sign Up
  22. Authorization on Supabase: Protecting Database (RLS)
  23. Building The App Header
  24. Updating User Data and Password
  25. Implementing Dark Mode With CSS Variables
  26. Building the Dashboard Layout
  27. Computing Recent Bookings and Stays
  28. Displaying Statistics
  29. Displaying a Line Chart With the Recharts Library
  30. Displaying a Pie Chart
  31. Displaying Stays for Current Day
  32. Error Boundaries
  33. Final Touches + Fixing Bugs

Section 30: Deployment With Netlify and Vercel

  1. Section Overview
  2. Deploying to Netlify
  3. Setting Up a Git and GitHub Repository
  4. Deploying to Vercel

Section 31: The End!

  1. Where to Go from Here

Top categories

tailwind daisyui resume portfolio email blog dashboard landing-page admin ecommerce
Loading Svelte Themes