Course introduction and getting started
  • Introduction
  • Setting up the project
  • Setting up the developer environment
  • React project contents
  • Hot Module Replacement
  • Folder structure
  • Source control
  • Course assets and source code
React concepts
  • Introduction
  • Why React
  • React concepts
  • Intro to JSX
  • React Dev tools
  • Decisions made on this course
Thinking in React
  • Introduction
  • Breaking up the UI into components
  • Intro to Semantic UI
  • Building our first component
  • Exports and imports
  • Navigation bar and styling
  • Event List Items
  • Creating an Event Form
  • Passing props down to child components
  • React component state
  • Summary of section 3
CRUD Operations in React
  • Introduction
  • Basic forms in React
  • Creating an event
  • Selecting an event to read
  • Controlled components with a key
  • Updating an event
  • Deleting an event
  • React class components
  • Summary of section 4
Routing in React
  • Introduction
  • Adding some additional components to route to
  • Routing configuration
  • Using NavLinks and Links
  • Home page styling
  • Adding menus for authenticated and unauthenticated users
  • Adding fake authentication
  • Using the useHistory hook
  • Event Detailed Page structure
  • Event Detailed Page content
  • Cleaning up the unused code
  • Summary of section 5
Introduction to Redux
  • Introduction
  • React-Redux
  • Setting up Redux
  • Adding a sandbox area for experimenting with the code
  • Redux Actions
  • Action Creators
  • Redux Dev Tools
  • Creating the event reducer
  • RRF 6-9 Creating a root reducer
  • Getting events from the redux store
  • Dispatching event actions
  • Clean up
  • Scroll to top
  • Summary of section 6
Forms revisited
  • Introduction
  • Setting up Formik
  • Formik with less code
  • Form validation
  • Creating a reusable text input
  • Cleaning up the form
  • Creating a reusable text area
  • Creating a reusable select input
  • Creating a reusable date input
  • Date-FNS
  • Formik props
  • Modals
  • Adding a Modal Manager
  • Creating the sign up form
  • Adding an auth reducer
  • Hooking up the sign up form
  • Summary of section 7
Google maps integration
  • Introduction
  • Getting the Google API keys
  • Setting up places autocomplete
  • Creating a custom place input
  • Using the place input
  • Narrowing the place input search results
  • Google maps react
  • Challenge solution
  • Adding the map to the Event Detailed Page
  • Summary of section 8
Asynchronous code
  • Introduction
  • Redux Thunk 101
  • Redux Thunk 102
  • Isolating the loading indicators