React Front To Back
19,216 students enrolled
React Front To Back
Learn Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects
19,216 students enrolled
Created by
Brad Traversy
Last updated 6/2019
English
English [Auto],
German [Auto],
1 more
- Portuguese [Auto]
Current price: $77.99
Original price: $119.99
Discount:
35% off
9 hours left at this price!
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
+
–
Project 1 Start [Github Finder] & React Setup
6 lectures
32:55
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
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
(
11 courses,
5 reviews
)
a year 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