Development
Web Development
React
React Front To Back
4.7 (4,198 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
16,565 students enrolled

React Front To Back

Learn Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects
Highest Rated
4.7 (4,198 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
16,552 students enrolled
Created by Brad Traversy
Last updated 6/2019
English
English [Auto-generated], German [Auto-generated], 1 more
  • Portuguese [Auto-generated]
Preview this course
React Front To Back
Current price: $77.99 Original price: $119.99 Discount: 35% off
1 day left at this price!
Buy now
30-Day Money-Back Guarantee
This course includes
  • 14 hours on-demand video
  • 3 articles
  • 3 downloadable resources
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to 4,000+ top Udemy courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Learn Modern React By Building 3 Projects
  • Flux Pattern Using Context & useContext/useReducer Hooks
  • Learn Redux From Scratch
  • Full Stack Development with MERN (MongoDB, Express, React, Node)
  • Suitable For Both Beginners & Intermediate React Developers
Course content
Expand all 91 lectures 13:57:32
+ – Course Introduction
3 lectures 13:36
Welcome To The Course
Preview 03:26
What Is React?
04:03
Setting Up Our Environment
06:07
+ – Project 1 Start [Github Finder] & React Setup
6 lectures 32:55
Project Introduction
Preview 03:22
Code & Resources
00:07
Create React App & File Structure
10:32
CRA Cleanup & Prepare
06:37
Intro To JSX & Fragments
06:22
Expressions & Conditionals In JSX
05:55
+ – Components, State & Props
7 lectures 57:19
Components, Props & PropTypes
10:47
Getting Started With Component State
09:08
Lists & Passing State With Props
08:30
Stateless Functional Components
07:18
HTTP Requests & Updating State
09:05
Spinner Component & Refactoring
07:19
Environment Variables
05:12
+ – Events, Passing Props, React Router & More
8 lectures 01:18:00
Events & Search Component
07:58
Passing Props Up & Search
08:28
Clear Users From State
07:26
Alert State & Component
09:45
React Router Setup
08:43
Single User Component & Data
11:37
User Component UI & Layout
13:10
Repos & RepoItem Component & Data
10:53
+ – Refactoring To Hooks & Context
11 lectures 01:45:09
Overview of Hooks & Context
07:33
Search Class to Function With useState Hook
07:28
User Class to Function With useEffect Hook
08:30
App Class to Function Component
08:15
Implementing Context
12:39
Create Reducer & Actions
12:28
Moving User State To Context
15:37
Moving Repos State To Context
04:24
Alert Context Workflow
12:56
Home & NotFound Components
04:41
Prepare & Deploy To Netlify
10:38
+ – Project 2 Start [Contact Keeper - MERN] & Express Server Setup
6 lectures 38:29
Project Introduction
Preview 03:35
Code & Resources
00:08
MongoDB Atlas Setup
05:17
Dependencies & Basic Express Server
09:20
Backend Routes
11:17
Connect MongoDB To Our App
08:52
+ – Backend Users, Contacts & JWT Authentication
8 lectures 01:12:38
User Model & Validation
11:31
Hash Passwords & Register Route
08:03
Create & Respond With JSON Web Token
06:34
Authenticate Route
09:00
Auth Middleware & Protecting Routes
10:26
Contact Model & Get Contacts Route
06:54
Add Contact Route
08:05
Contact Update & Delete Routes
12:05
+ – Client Side Setup & Contacts UI
10 lectures 01:50:25
Setup React & Concurrently
04:58
Cleanup, Navbar & Router Setup
15:32
Contacts Context & Global State
09:54
Contacts & ContactItem Components
14:22
ContactForm Component
17:13
Delete Contact From UI
05:51
Set & Clear Current Contact
06:50
Edit & Update Contact Action
12:09
Contact Filter Form & State
16:24
Basic Add & Delete Animation
07:12
+ – React/Express Authentication
8 lectures 01:30:36
Auth Context & Initial State
08:30
Register & Login Forms
10:41
Alert Context, State & Component
17:00
User Registration
17:20
Load User & Set Token
15:20
User Login
07:38
Logout & Navbar
08:10
PrivateRoute Component
05:57
+ – Contacts API Integration & Deploy
5 lectures 47:05
Add Contact
10:45
Get & Clear Contacts
14:51
Delete Contacts
04:49
Update Contacts
03:16
Prepare & Deploy To Heroku
13:24
Requirements
  • You should know JavaScript pretty well, including ES6 (Arrow functions, promises, etc)
Description

In this course you will learn to master React 16.8+ concepts including how to create a Flux pattern using the Context API with the useContext and useReducer hooks. We will also build a full stack MERN application with a custom Express backend API that uses JWT (JSON Web Token) for authentication. In addition, we will also create a project that uses Redux.

Here are some of the things you will learn in this course:

  • React Fundamentals (Components, props, state, etc)

  • React Hooks (useState, useEffect, useContext, useReducer, useRef) in real projects

  • Context API & App Level State

  • MERN - MongoDB, Express React, Node

  • Build a Custom API With JWT Authentication

  • Redux - Reducers, Actions, etc

  • Basic Animation

  • Much More...

Who this course is for:
  • Developers looking to learn Modern React 16.8+ with hooks & context, MERN & Redux
Featured review
Onur Iltan
Onur Iltan ( 11 courses, 5 reviews )
11 months ago
I highly recommend Brad! Clear explanations about what he is going to achieve. Also the information he is giving is exact, no more or less. Course is good for people who are familiar a little bit about React