The complete React 18 Fullstack course ( 2024 edition)

Take you coding to the next level with React, Redux, Routes, Node js, Express and MongoDB

4.57 (1543 reviews)
Udemy
platform
English
language
Web Development
category
The complete React 18 Fullstack course ( 2024 edition)
8,364
students
75.5 hours
content
Nov 2023
last update
$79.99
regular price

What you will learn

You will learn the whole React WebApp building process, from your pc to the server.

Work with nosql databases ( Firebase, MongoDB and Moongoose)

How to deploy applications to services like Firebase and Heroku.

Learn how Redux work and apply it on a real life application.

Learn what NODE js is and How it works and create your own server,

Learn the basics of Webpack

Description

Do you want to learn the whole process of building your App ?. This is the course for you.

We will start from the very beginning, from "I don't even know how use it..and why would I“ to actually understanding how React works and make it communicate with other technologies like Node JS.

You will learn all the logic and practice behind React in different modules, and as we advance through the course we will be increasing the difficulty.

Since I believe that the best way to fully learn is by coding, after each important section we will put everything in practice with some course projects, and after you have a strong base of React we will journey into Servers and Databases, Redux and deploying  apps to production.

We will use ES6, the latest version of JavaScript. 

Don’t know ES6 ?

Don’t sweat it, there is a full bonus section where we will show you all the ES6 magic.

To sum everything up, you will learn in this course:

  • The very basics of React. How to install and the logic behind it.

  • Once you know the basics of React we will journey into the confusing stuff.

  • After you have a strong base of React we will create a full practice project.

  • Everybody is using Redux, so we will learn how to use redux with our React Apps.

  • Since our app will need a database, you will learn how to use MongoDB and mongoose.

  • Apply security, authentication, restricting routes, hashing passwords and JWT’s.

  • We will create a second practice project using React, Redux, Node Server and MongoDB.

  • Of course, we will learn the whole process of publishing you app using Heroku, Git and Github.

  • Webpack is part of the fullstack.

  • You also get a Full ES6 course

What about the instructor experience ?

Well I've been around for 15 years now, built lots of applications for small projects and big companies like Citi, Fox, Disney and a lot more.

Today I work as developer for a major company developing applications in React or Angular mostly, but I like to teach in my spare time.

How about the target audience?

  • This course is for almost everyone, a little bit of JavaScript is required. We will use ES6 but you can learn as we go.

  • If you want to take your coding to the next level, this is the course for you. 


Content

Introduction

Intro
Installing Node JS
IDE

React basics

Using a boilerplate
The bundle
Creating a simple app
Using JSX
Structuring
Using classes
A little bit of styles
Events
Component state
Working with props
Working with props 2
Props, from class to class
Childrens
More on styling
Using third party libraries
Filter the news
React Lifecycles
React Lifecycles 2
Conclusion

React Hooks

React hooks
Use state
Use state 2
Use state 3
Use effect

Working with routes

Introduction
Router process
Setting up routes
Linking
Make it a little bit better
Params
Memory, hash and navlink
Switch
Redirections
Handling 404

Project: music DB (optional)

Intro and installation
Routes and json server
Finishing home
Creating the artists page
Getting albums

React specific topics

Conditional rendering
Pure components
Adjacent elements
Hight order components 1
Hight order components 2
Animations
Transitions with classes
CSS transitions
TGroup - the template
Animating with TGroup
Typechecking
Typechecking 2
Controlled vs uncontrolled

Project: NBA

Intro and install
Creating header and footer
Creating the slider
Creating the Home subscription
Finishing the Home Subs
Adding home posts/ blocks
Home Poll
Finishing Home Poll
Creating the article post
Creating the teams component
Adding the modal
Finishing the modal

Working with redux

Introduction
Creating a store
Action creators and reducers
Creating reducers
Connecting
Dispatching an action
Making a better code
Using types
Working with promises
Redux and functional component
Redux and Hooks

Working with forms

Introduction
Creating a state for your forms
Templating form elements
Adding events to form elements
Creating a validation function
Displaying error messages
Remaining form elements
Posting data
Starting with formik
Validating with formik
Submitting with formik
Formik and yup

Starting with Node JS

Intro
REPL my terminal
Using node on a project
Write in node
Exporting in node
Blocking and non blocking
Threads, events loop and call stack
Threads, events loop and call stack 2
Threads, events loop and call stack 3
Right to the bone

Node server

Intro
Simple server
Sending an HTML response
Sending a JSON response
Routing
Express intro
Express params and query string
Express middleware
Express middleware 2
Express posting data
Node server and react
Node server and react 2

Databases with Mongo DB

Intro
Installing mongo and mongo driver
Using the mongo driver
Using the mongo driver 2
Mongoose , models and schemas
Mongoose posting
Mongoose getting
Mongoose remove
Mongoose updating

Authentication

Using postman
Creating a server
Adding users
Using bcrypt
Hashing passwords
Hashing passwords 2
Hashing passwords 3
What is a JWT
Generating a token
Validating tokens
Auth middleware
Log out users

Deploying

Creating a Heroku project
Connecting mongo DB cloud
Finishing deploy

Project: The books shelf

Introduction
Creating a server
User model
Hashing password
Login users
Validating tokens
Logout users
Books model
Posting a book
Get, patch and delete a book.
Getting all books
Setting up redux
Creating the header and the sidenav
Adding links to the sidenav
Creating the login
Dispatching a login action
Login in and catch errors
Auth HOC
Logout user
Sidenav options
Creating the add posts section
Validating fields
Posting the book
Finishing the add book post
Creating the edit book
Creating the edit book 2
Finishing the edit book
Admin posts section
Get home articles
Get home articles 2
Home loadmore
Article view
Deploying to heroku
Deploying to heroku 2

Introduction [ Legacy ]

Introduction
Installing Node MAC
Installing Node WINDOWS
IDE ( Visual Studio Code)

React basics [ Legacy ]

Using create-react-app
Bundles and Structure
Rendering the app
React JSX
Exporting modules
Using dynamic data
Functional and Class based components
Adding some style
React events
More on classes
React State
Using Props
Using Props continued...
More on Props
Using childrens
More on Styles
Using CSS modules
Filtering state
Get it from Github

React in deep: Routes, Lifecycle [ Legacy ]

Installing Router
Creating Routes
Using Links in routes.
Params and URL's
Using Router's Switch
Redirecting users
React Lifecycles
React Lifecycles continued
Conditional rendering
Pure components
Returning arrays
HOC's ( High order components )
HOC's..continued
Get it from Github

React transitions & Typechecking [ Legacy ]

Warning.Read this.
Using react transitions
More on transitions
CSS Transitions
Transition Group
Proptypes
Proptypes ..continued
React Refs
Get it from Github

React practice project: NBA App [ Legacy ]

Setting up
Layout and header
Adding Sidenav
Sidenav items
Footer and JSON server
Adding Slider
Adding Slider 2
Adding Slider 3
News List cards
News List Load more
News List transitions
News List Teams
Videos List
Videos List 2
Videos List 3
Article post view
Article post view 2
Video post view
Related videos
News main view
Video main view
Get it from Github

React - Working with forms [ Legacy ]

Controlled and Uncontrolled
Form templating
Form templating 2
Form templating 3
Adding more elements
Adding validation
Adding validation..continued

Firebase [ Legacy ]

Connecting
Posting Data
Remove and Update Data
Getting Data
Working with Arrays type
Using a form
Authentication
Preventing routes
Get it from Github

React practice project: NBA App - Part2 [ Legacy ]

Setting up Firebase and the Slider
Fixing the Newslist
Videos and Post view
Sign in and Forms
Sign in and Forms 2
Sign in and Forms 3
Sign in and Forms 4
Authentication
Sidenav options
Dashboard
Dashboard Editor
Finishing editor and adding teams
Uploading files
Uploading files 2
Posting article
Fixing slider
Private routes
Deploying to production
Get it from Github

Redux: Basics [ Legacy ]

Installing and connecting
Reducers
Action creators
Dispatching
Containers
Get it from Github

Redux practice [ Legacy ]

Intro and setting up
Adding Redux to the home
Finish Home and adding the Artist View
Fixing last problem
Get it from Github

Node JS: Basics [ Legacy ]

What is node
Reading and writing
Node package manager
Blocking and Non-blocking
The call stack, Api's, the event Loop and the event queue
To the very bones of Node JS
Of servers and clients
Get it from Github

Node JS: Creating Servers [ Legacy ]

Simple server
Routing
Using Express
Middleware
Posting data
Node server and React app
Get it from Github

Node JS: Mongo DB [ Leagacy ]

Introduction
Installing Mongo DB ( MAC )
installing Robomongo - Robo T ( MAC )
Installing Mongo DB ( WINDOWS )
installing Robomongo - Robo T ( WINDOWS )
Mongo Driver: connecting and inserting
Mongo Driver: inserting multiple and getting data
Mongo Driver: Delete and update data
Mongoose: Configuration and adding data
Mongoose: Get, Update and Delete
Get it from Github

Node JS: Security and authentication [ Legacy ]

Using postman ( we will use it next )
Installation and set up
Hashing passwords
Comparing passwords
Jason web tokens ( JWTs )
JWTs and mongoose
Using Middleware

Node JS: Deploy ( GIT, Github and Heroku ) [ Legacy ]

Using GIT ( MAC )
Using GIT ( WINDOWS )
Using Github ( MAC )
Using Github ( WINDOWS )
Using Heroku ( MAC )
Using Heroku ( WINDOWS )
Deploy to production
Get it from Github

Final project: The books shelf [ Legacy ]

Intro and installation
Server: Creating the Server
Server: Models and Schemas
Server: Book Routes
Server: Book Routes 2
Server: User Routes
Server: User Routes 2
Server: User Routes 3
Server: Fiishing user Routes
Client: Setup
Client: Header
Client: Sidenav
Client: Home
Client: Home 2
Client: Article view
Client: Article view 2
Client: Login screen
Client: Auth HOC
Client: Auth HOC 2
Client: Add reviews
Client: Add reviews 2
Client: Reviews Panel
Client: Edit Book
Client: Edit Book 2
Client: Quick fix on edit book
Client: Register users
Client: Register users 2
Client: Register users 3
Client: Logout Users
Client: Navitems
Deploy to Heroku
Deploy to Heroku continued
Get it from Github

Webpack

Intro and setup
Loaders
CSS Loaders
Plugins
Webpack and React
Vendor Splitting
Cleaning Bundle and Dynamic links
Webpack dev server
Get it from Github

BONUS: More Redux [ Legacy ]

Using types
Redux form: Intro and set up
Redux form: Validation
Redux form: Posting
Get it from Github

BONUS: ES6 Course

Introduction to ES6
CONST and LET
CONST and LET: Using scope
CONST and LET: Real life example
CONST and LET: Exercise one
CONST and LET: Exercise one - solution
CONST and LET: Exercise two
CONST and LET: Exercise two - solution
Template strings
Template strings 2
Template strings 3
Template strings 4
Template strings: Exercise one
Template strings: Exercise one - solution
Template strings: Exercise two
Template strings: Exercise two - solution
Foreach
Foreach 2
Foreach 3
Foreach: Exercise
Foreach: Exercise - solution
Map
Map 2
Map: Exercise one
Map: Exercise one - solution
Map: Exercise two
Map: Exercise two - solution
Filter
Filter 2
Filter: Exercise one
Filter: Exercise one - solution
Filter: Exercise two
Filter: Exercise two - solution
Find
Find 2
Every & some
Every & some 2
Reduce
Reduce 2
Reduce: Exercise one
Reduce: Exercise one - solution
Reduce: Exercise two
Reduce: Exercise two - solution
For....of
Fat arrow functions
Fat arrow functions 2
Fat arrow functions: Exercise
Fat arrow functions: Exercise solution
Object literals
Object literals 2
Object literals: Exercise
Object literals: Exercise - solution
Default function arguments
Default function arguments - exercise
Default function arguments: Exercise - solution
Rest operator
Spread operator
Rest and Spread: Exercise one
Rest and Spread: Exercise two
Rest and Spread: Exercise two - solution
Classes
Classes 3
Classes 4
Destructuring
Destructuring 2
Destructuring 3
Destructuring 4
Promises and fetch
Promises and fetch 2
Promises and fetch 3
Promises and fetch 4
Strings and numbers
Strings and numbers 2
Modules
Modules 2
Modules 3
Generators
Generators 2
Generators 3
Generators 4
Generators 5
Iterating sets
Iterating map

Reviews

Haythem
January 31, 2023
The instructor takes all the time it needs to explain various details about why we're making such dev choices.
Medet
December 23, 2022
It is a good course but I lost track, when something is shown to you without reasoning behind it, it is kinda hard to grasp. I guess this course is for someone who already has an overall understanding of React and javascript. not for a complete newbie
Rainer
September 2, 2022
Today I finished the backend-part of the big final project. In my opinion the project and its presentation are absolute brilliant: Very well structured and explained - including the logic and the ideas behind. For me it was very helpful, that every single video has its final code on GitHub. So you never get lost. And every time you are confronted with an error, you know that it's yours :). What I also appreciate are the concrete version-numbers of the packages. I had zero problems with errors because of dependencies. Thanks for all that. Now let's go to the frontend ...
Mary
August 27, 2022
I have just started but so far soooo... good. Let me admit i have bought 5 React courses on udemy and i did not get what i was looking for, some are outdated and the code does not work. I wont say must, just started is a long course, i will do as i was just told, to crab a cup of coffee, and of-course do my best.
Mohammad
December 25, 2021
this course has updated material which makes me able to understand react much better and the instructor teach us very well
Debbie
November 5, 2021
This course is superb. I have taken a lot Udemy courses and this one is by far one of the best!! He is super engaging, clear and learned a ton taking this course while I was just brushing up on Node/React skills. Thank you Coding Revolution!!
Alante
August 28, 2021
He's very thorough, speaks clearly, and he sounds genuinely excited. I'm only on Section 2, and I've learned A LOT. 10/10 Recommend this course.
Shubhodeep
August 11, 2021
Amazing course, I love his way of teaching. He definitely passes the vibe check with how he explains things and talks about the little things he experiences!
Chee
April 16, 2021
Just start learning this cause, i feel perfect for me, for start learning React, this react course explain basic very clear!!!!
Samuel
April 9, 2021
Melhor do que eu esperava. O autor tem a didática muito boa, aborda muita coisa, em fim, só tenho elogios.
Geoffrey
February 7, 2021
It has a lot of content. some of the explanations are a little rough and what is supposed to be known or assumed is unknown is a little blurred when it comes to the depth of explanations for topics. There is a decent amount of explaining of what NOT to do. which can be a little confusing. I'm just glad we don't need to know the old way of doing things and if I ever do need to learn that thing, I'll be sure to look it up later when I'm already proficient in the topic as to not get myself even more confused. It's hard to extrapolate what should have attention payed to it and what is just a rough explanation of something you likely might already have learned in a simpler way so it sounds new because the explanation is rough. Idk there's a ton of content and I'm sure this guy is a really nice guy and English isn't his first language and i could never teach a course like this in a foreign language. so I do appreciate this course a lot for simply being available and for this guy to put his work out into the world. It nets positive from all angels.
Josh
February 4, 2021
The goods: You get to practice each "important topic" over and over until you are VERY comfortable. I really like how the instructor did that. The bads: If you ask a question 99% chance it will not be answered. Not a review crusher for me as I turn to Google to get the answers I need BUT it would be beneficial to have the instructor be more involved with his course. Tip for instructor: Add short challenges throughout the course to test us... I would also love to see 15-30 question tests at the end of each section.
Diego
January 29, 2021
Not even 10% done of the course and already blowned up by this awesome way to teach! Thanks from Brazil.
Arthur
January 15, 2021
this course is graat for fullstack javascript but if you want to learn full react. i recommended to learn another course
Rafael
December 24, 2020
Amazing course! It teaches you the fundamentals of everything you use. One of the best courses i ever took!

Charts

Price

The complete React 18 Fullstack course ( 2024 edition) - Price chart

Rating

The complete React 18 Fullstack course ( 2024 edition) - Ratings chart

Enrollment distribution

The complete React 18 Fullstack course ( 2024 edition) - Distribution chart
1411694
udemy ID
10/27/2017
course created date
11/20/2019
course indexed date
Bot
course submited by