React 18 Tutorial and Projects Course - 2024 Edition

Hands-on React: Create 25+ Projects. Includes Axios, Router 6, Query 5, Redux Toolkit

4.71 (10433 reviews)
Udemy
platform
English
language
Other
category
instructor
65,745
students
77 hours
content
Mar 2024
last update
$99.99
regular price

What you will learn

Make Great Projects Using React

Description

Mastering React 18: Building Modern Web Applications


Dive into the dynamic world of front-end development with our comprehensive course on React 18, a cutting-edge JavaScript library used for creating engaging user interfaces. Developed and maintained by Facebook, React has become a cornerstone in building both single-page and mobile applications.

Why Learn React?


  • High Demand: React's popularity makes it a valuable skill for job seekers in the tech industry.

  • Efficiency and Performance: React's use of a virtual DOM ensures fast, scalable, and efficient application development.

  • Flexibility and Reusability: The library's design allows for reusable components, simplifying the development process and making code maintenance easier.

Course Coverage:


  • React Fundamentals: Understand the core principles of React.

  • Latest Features: Get hands-on with React 18.

  • Hooks & State Management: Deep dive into useState, useEffect, useRef, useReducer, useCallback, useMemo, and custom hooks.

  • Advanced Concepts: Learn about conditional rendering, prop drilling, context API, and more.

  • Navigation and Routing: Explore React Router 6 for seamless app navigation.

  • Data Handling: Utilize axios and redux-toolkit for efficient data management.

  • Project-Based Learning: Build over 25 real-world projects including a Birthday Reminder, E-Commerce Site, Quiz App, and a GitHub Users Explorer.

Ideal For:

Aspiring and experienced front-end developers looking to master React and elevate their web development skills. Whether you're aiming to boost your career prospects or build high-performance web applications, this course is your gateway to becoming a proficient React developer.


All Project Intros are available for preview.

Here are some of the projects we are going to build in this course

1. Birthday Reminder

2. Tours

3. Reviews

4. Accordion

5. Menu

6. Tabs

7. Slider

8. Lorem Ipsum

9. Color Generator

10. Grocery Bud

11. Navbar

12. Sidebar and Modal

13. Stripe Menu

14. Cart

15. Cocktails

16. Markdown Preview

17. Random Person

18. Pagination

19. Stock Photos

20. Dark Mode

21. Movies DB

22. Hacker News

23. Quiz

24. Github Users

25. E-Commerce

26. Jobster



Content

Introduction and Setup

What is React?
Video Blur Fix
Course Review
Course Structure
Course Requirements
Javascript ES6 Module
Dev Environment Setup
Text Editor Setup

Install create-react-app

Command Line Basics
NPM Basics
What is Create-react-app, Babel, Webpack
Install Create-react-app
Create-react-app Folder Structure

React Basics Tutorial

First React Component
Resource Download
First React Component In Detail
React JSX Rules
Nested Components and ES6
Mini Book Project
CSS in React
Javascript in JSX
Props
More Props and Destructuring
Children Props

Person List Project

Intro
Main Project
Project Files

React Basics Tutorial Continued

Import and Export (ES6 Modules)
Class Based Components in React
Functional VS Class Based Components
State
Alternative State Syntax
Book Mini Project
Events
this.setState
Passing Methods and "Prop Drilling"
Passing Methods to Children Components to Work with State
Conditionals in JSX

City Tours Project

Intro
Font Awesome Update
Install and Setup
Font Awesome Update!
Navbar Component Logic
Navbar Component SASS
Main Project Structure
TourList Component
Tour Component Logic
Tour Component Styling
Tour Info Toggle
Tour Component Delete
Deploy on Netlify with Drag and Drop
Deploy on Netlify with Continuous Deployment (Github, Git)

React Basics Tutorial Continued

PropTypes
isRequired and defaultProps
PropTypes : Object Shape
Controlled Inputs and Form Submission
Controlled Inputs Use Case
Uncontrolled Inputs with ref
React Fragment and this.setState() Asynchronous

Todo List Project

Project Intro
Font Awesome Update!
Setup
Font Awesome Update!
Bootstrap and Folder Structure
Github and Netlify Pipeline
App Component
Input Component
Handle Change and HandleSubmit
Todo List Component
Todo Item Component
Clear List and Delete Method
Edit Method
Finished Application

Beach Resort Project

Project Intro
Setup Files and CSS
Scaffold React Application
Project Setup
Page Setup
Router Setup
Navbar Component
Hero Component
Banner Component
Services Section
Local Data
Context Api Setup
Format Data
Loading Component Setup
Featured Rooms Component
Room Component
GetRoom Function
Single Room Setup
Single Room Hero
Styled-Hero
Single Room Complete
Room Container
Room List
Room Filter Setup
Type Filter
Capacity Filter
Price Filter
Size-Checkbox Filter
Contentful Interface
Content Model
Content
Consume Content
Deploy On Netlify

OPTIONAL PROJECT!

OPTIONAL PROJECT

Tech Store

Project Intro
Setup and Installs
Google Fonts, CSS Variables and App.css
Github - Netlify Pipeline
React-Icons Intro
Styled-Components Intro
Folder and Page Structure
React Router Setup
Navbar-Sidebar-Sidecart-Footer
Context API Intro
Context API Setup
Navbar Context API
Navbar Component
Sidebar Component
SideCart Component
Hero Component
Main Link Class
Default Page
About Page and Title Component
Contact Page
Formspree
Footer
Home Page Services Section
Products Data Intro
Setup State in Context
SetProducts
Image Url Fix
Featured Products Section
Product Component
All Products Section
AddToCart Method
AddTotals Method
SyncStorage Method
SetSingle Product Method
SetSingleProduct Page
SideCart Component
Cart Page Method Placeholders
CartPage Component Setup
CartPage Setup
Cart Columns Component
Cart Totals Component
Cart List Component
Cart Item Component
Increase Method Logic
Remove Item Logic
Clear Cart and Decrease Method Logic
Filter Products Context Setup
Filter Products Product Component Setup
Product Filter Component
Select Input Logic
Handle Change Method Logic
Sort Data Method Logic
Finished Project Before Adding Contentful
Contentful Intro
Contentful Interface
Setting Up Content Model
Adding Content
Retrieving Content
Setting Up Environment Variables and Netlify Build Variables
Image Fix
Paypal Button Setup
React Router Netlify Fix
Finished Project

React Hooks

Intro

React Hooks Budget Calculator

Intro
Project Setup Files
Bootstrap Application
Folder Structure
Initial List
UseState Setup
App Component Return
Expense List
Expense Item
Expense Form
Controlled Inputs
Handle Submit Function
Alert Component
Clear Expenses
Delete Single Item
Edit Single Item
localStorage API
useEffect

CocktailDB Project

Intro
Starter Project
Starter Project
Folder Structure
React Router Dom Install and Basic Setup
First Pages
Error Page
Single Cocktail Setup - Url Parameters
Navbar
About Page
Error Page
Home Page Setup
UseEffect and API Setup
UseEffect Second Argument
GetCocktails
CocktailList Component
Cocktail Component
Single Cocktail HTTP Request
Single Cocktail JSX
Search Form Component
Complete Application

Vintage Tech Project

Intro
Vintage Tech Intro
Starter Application
Folder Structure
Router Setup
Basic Routes
Error Page
Product Details Page
Header
Error Page
About Page
Hero Component
Context API Intro
Product Context Setup
Setting Values using useState
Url Value
Axios - Url - Response
UseEffect Setup
UseEffect Second Argument
Loading Component
Product List and Product
Featured Products
Single Product
Cart Context Setup
Empty Cart
Cart Page
Single Cart Item
Calculate Cart Total and Cart Items
Remove Item
Increase Amount
Decrease Amount
AddToCart and ClearCart
localStorage
CartLink
Info
Strapi Install
Strapi Basics
Content Type
Add Products
API Access
Image Problem
Local Image Fix
Claudinary Image Fix
CartItem Image Fix
Login Page Setup
Login Page JSX
Login Page Initial Functionality
Strapi Auth Info
Register User Function
Login User Function
User Context Setup
User Context Complete
Alert Functionality
Alert Component
Using Alert
Hide Submit
Restrict Access
Restrict Checkout Page
Checkout Page Setup
Checkout Page JSX
Stripe Account and API Keys
Install react-stripe-elements
Integrate Stripe Elements
Get Stripe Token
Create Order Content Type
Submit Order Setup
Submit Order Complete
Strapi Backend
Deployment Info
Heroku Sign Up
Heroku Deployment
Setup Production App
Deploy FrontEnd
Additional Features
Additional Features CSS
Scroll Button Component
Scroll Functionality
Prop Types Intro
FlattenProducts Bug Fix
Product PropTypes
General useReducer Intro
Quick useReducer Info
useReducer Setup
Remove Item
Rest of the Cart Functionality
Actions as Variables
useReducer Recap
Paginate and Filter Intro
Add Fields, Products
Products Context Setup
Paginate Function Placeholder
Filters and PageProducts Components
Paginate Function - Splice Method
Paginate Function - Slice Method
Display New Sorted Array
Page Buttons
Prev and Next Buttons
Filters Form Setup
updateFilters Function
Filters Logic Setup
Filters Logic Complete
Complete Project

Redux

Intro
Quick Redux Info
Starter App
App Intro
Starter Application / Folder Structure
Create App using only React
Redux - Initial Setup
createStore and reducer
First Action
Rest of the Actions
Separate Logic
Connect To Redux
Access Dispatch
Mutation Example
mapDispatchToProps
Install Redux DevTools
Multiple Reducers Info
Setup Multiple Reducers
Modal Component
Modal Reducer
Connect Modal to Redux
Action Creators
Redux Thunk Install and Setup
Products Reducer
Products Component
Complete Project

Javascript ES6

VAR, LET, CONST
Function Scoped VS Block Scoped
Template Strings - String Concatenation
Template Strings - Dynamic HTML
Tagged Template Literals
Arrow Functions
Arrow Functions - "this" Object Example
Arrow Function - "this" Select Elements
Default Parameters and Hoisting Gotchas
Array Destructuring
Swap Variables
Object Destructuring
Destructuring Function Parameters
New String Methods
for-of Loop
Spread Operator Basics
Spread Operators With Objects
Spread Operator With DOM Elements
Spread Operator with Function Arguments
REST Operator
Array.of
Array.from - Strings and Function Arguments Objects
Array.from - NodeList

Screenshots

React 18  Tutorial and Projects Course - 2024 Edition - Screenshot_01React 18  Tutorial and Projects Course - 2024 Edition - Screenshot_02React 18  Tutorial and Projects Course - 2024 Edition - Screenshot_03React 18  Tutorial and Projects Course - 2024 Edition - Screenshot_04

Reviews

Roy
November 15, 2023
John will only teach concepts that the students will immediately use during an exercise. He does a great job of directing the student's attention during each video by explicitly stating what they should and shouldn't be focused on during the lesson. This helps to keep you from becoming overwhelmed and dropping off.
Mahmoud
November 12, 2023
Effective, current, easy to understand, and a matured course! John shows many ways of achieving the same result and explains his preferences. I have watched 4 hours of the tutorial so far and I am loving it. I have a few other unfinished/abandoned React tutorials online but unless I complete this course, I will not return to them. Hey, I may not even have to!
제임스
November 8, 2023
Please hire a voice-over artist man, your voice is incredibly annoying, so irritating to ears that I can barely notice your other major problems like repeating one word over and over "extremely extremely extremely extremely important!" or how bloated your courses are to make them look they're informative. cut the volume of this course in half, then cut it in half again, then cut it in half once again & finally, cut the remainder in half again and that'd be the proper duration for this course. Never seen someone that annoying and this was my third course with you, my grandma who doesn't even know what a computer is can teach better. AWFUL.
John
October 28, 2023
The instructor has an interesting teaching style that I think has a lot of potential. Unfortunately, I find the duration of the class makes the material seem unfocused. Some good content, but too much here to wade through. I'd actually be interested a course if this instructor made a React class that was less than 10 hours of just the essentials.
Ithihas
October 22, 2023
this course was well designed and put together. And i liked the way john tells us different approaches was good, every project is well documented.
Patrick
October 12, 2023
John is a great teacher. I didn't know him before, this course is my first contact with him, and I'm very grateful because usually things like this don't go well. He has great didactics and knows how to structure a course. Oh, I forgot that is very funny too. It's not that heavy thing that you just want to end. Thank you, John.
Md
October 3, 2023
John Smilga is the best teacher i love this course it help me to lant my first front end developer job. thank you john sir i really appreciate your hard work
Chinatu
September 1, 2023
It's been amazing so far. I'm so happy I bought it. Concepts are well explained. This course has actually improved my knowledge of react. Thank you John
Islam
August 13, 2023
John's way of explaining is incredible. I like the course's structure and I enjoy the tips and tricks that he shares while coding.
Ahmed
August 13, 2023
this the best react course i have ever seen, and i watched many the way he build the knowledge is amazing, helps you to understand each part, then there a project to apply that. i really hope that there is a course in the same way for everything i want to learn such as react native.
Aditya
August 9, 2023
I am just start , i thing cource is good but my exert feedback after complet cource how is my reviwe
Somya
August 7, 2023
I was enrolled in Colt's Web Dev BootCamp, and that gave me a really good foundation to focus on the frontend part. John is as amazing as Colt, with a good sense of humour, and straight to the action style of teaching. Really excited to learn React!
Irfan
August 6, 2023
John Smilga is a software worker who loves his job obsessively and always works hard but on the right side despite all the difficulties in order to do it perfectly. I have taken all of his courses and would recommend them to anyone who is considering it.
Abraham
August 5, 2023
John Smilga in my opinion is one of the best tutors out there. I loved his JavaScript course and am also enjoying this React course. Thank you John for taking the time to explain every bit.
Ioan
August 2, 2023
The best course out there. I have been following his YouTube channel for a while, and thanks to him I have overcome most of my obstacles in programming. Explained everything very well and with a scale of difficulty that goes up based on the skills you gradually acquire during the course. In the future it would be the best if it set up fullstack projects / applications with more interactions also on the server / backend side with mysql and why not, php / laravel. For now, I thank you and pay you my respects. GG

Coupons

DateDiscountStatus
7/25/202050% OFF
expired
8/27/202050% OFF
expired
9/16/202050% OFF
expired
9/26/202050% OFF
expired
10/27/202050% OFF
expired
2/22/202150% OFF
expired
3/15/202150% OFF
expired
4/22/202150% OFF
expired
5/26/202150% OFF
expired
6/20/202150% OFF
expired
7/20/202150% OFF
expired
8/22/202150% OFF
expired
9/22/202150% OFF
expired
10/21/202150% OFF
expired
12/20/202150% OFF
expired
1/20/202250% OFF
expired
2/20/202250% OFF
expired
3/21/202250% OFF
expired
4/19/202250% OFF
expired
6/22/202250% OFF
expired
7/26/202250% OFF
expired
10/23/202250% OFF
expired
12/21/202250% OFF
expired
1/24/202350% OFF
expired
3/20/202390% OFF
expired

Charts

Price

React 18  Tutorial and Projects Course - 2024 Edition - Price chart

Rating

React 18  Tutorial and Projects Course - 2024 Edition - Ratings chart

Enrollment distribution

React 18  Tutorial and Projects Course - 2024 Edition - Distribution chart

Related Topics

2018828
udemy ID
11/10/2018
course created date
5/13/2019
course indexed date
Bot
course submited by