React 18 Course 2024 – Learn React JS the fast way

Course Curriculum

Chapter 1: React Fundamentals

Lecture 1: Project "Moviedux" Introduction

Lecture 2: Sourcecode: Moviedux

Lecture 3: React 101: React itself

Lecture 4: Installing Visual Studio Code

Lecture 5: Installing NodeJS

Lecture 6: React extensions that make our life easier

Lecture 7: Creating a React project and handling package versions

Lecture 8: Cheat Sheet: React Introduction

Lecture 9: Exploring our ReactJS project

Lecture 10: Download: Moviedux Project Resources (Images, Logos, Css, etc.)

Lecture 11: Importing the Moviedux project resources

Lecture 12: Modifying the app component

Lecture 13: React 101 – Components

Lecture 14: Creating the Header component

Lecture 15: Footer component with dynamic date and JSX

Lecture 16: Cheat Sheet: React Components

Chapter 2: JavaScript for React Part 1: Scope, Arrow Functions and more

Lecture 1: JavaScript for React Intro

Lecture 2: Scope of var, let and const

Lecture 3: Arrow functions

Lecture 4: Functions as declarations or expressions

Lecture 5: Rest Operator

Lecture 6: Spread Operator

Chapter 3: Handling state with React

Lecture 1: Creating the MoviesGrid component

Lecture 2: React 101 – State

Lecture 3: Creating the movies state with UseState

Lecture 4: Setting the movies state with UseEffect

Lecture 5: Using the react developer tools

Lecture 6: Loading movies from JSON

Lecture 7: Rendering the movies in cards

Lecture 8: A small request

Lecture 9: Cheat Sheet: React State and Effect

Chapter 4: Events, Searching, Refactoring and Domain Logic

Lecture 1: React 101 – Props

Lecture 2: Refactoring to a MovieCard and component properties

Lecture 3: Error handler for image loading

Lecture 4: Dynamic rating color

Lecture 5: Search state and search bar

Lecture 6: Search bar logic

Chapter 5: Filtering with advanced UI and events

Lecture 1: Filter bar

Lecture 2: Filter event handling

Lecture 3: Filter logic

Chapter 6: React Router, Watchlisting, Lifting State and Props

Lecture 1: React 101: Router

Lecture 2: Installing React Router

Lecture 3: Configuring the router

Lecture 4: Lifting the movie state

Lecture 5: Watchlist state

Lecture 6: Watchlist component props

Lecture 7: Watchlist UI toggle

Lecture 8: Cheat Sheet: React Router

Chapter 7: JavaScript for React Part 2: Modules, Interpolations and Array Methods

Lecture 1: Default export of modules

Lecture 2: Named export of modules

Lecture 3: Template literals, string interpolations and multi-line strings

Lecture 4: Array find()

Lecture 5: Array filter()

Lecture 6: Array forEach()

Lecture 7: Array map()

Chapter 8: Building a web application with React Reducers

Lecture 1: Project "Bug Blaster" Introduction

Lecture 2: Source Code: Bug Blaster

Lecture 3: Resources for "Bug Blaster" Project

Lecture 4: Setting up the bug blaster project

Lecture 5: Creating the ticket form logic

Lecture 6: Building the ticket form

Lecture 7: Building the priority selection

Lecture 8: Building a ticket from the form

Lecture 9: React 101 – Reducer

Lecture 10: Creating the ticket reducer

Lecture 11: Implementing the ticket reducer actions

Lecture 12: Dispatching the ADD_TICKET action using the useReducer hook

Lecture 13: Creating the TicketItem component

Lecture 14: Creating the TicketList component and conditional rendering

Lecture 15: Deleting tickets

Lecture 16: Editing Tickets

Lecture 17: Deleting an "under-edit" ticket

Lecture 18: Canceling an edit procedure

Lecture 19: Sorting tickets by priority

Lecture 20: Cheat Sheet: React Reducer

Chapter 9: Using the context API for global state

Lecture 1: React 101 – Context

Lecture 2: Example of prop drilling for context

Lecture 3: Creating your first context

Lecture 4: Blog application with Context API

Lecture 5: Combining context and prop drilling

Lecture 6: Combining state and context part 1

Lecture 7: Combining state and context part 2

Lecture 8: Congratulations! You have finished the section

Lecture 9: Cheat Sheet: React Context