React Front To Back

Learn Modern React 16.8+ Including Hooks, Context API, Full Stack MERN & Redux By Building Real Life Projects

  • Brad Traversy
  • 4.39
  • (8899 reviews)
  • 14 hrs
  • 91 lectures
  • Udemy
React Front To Back

What you will 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

Your trainer

Brad Traversy

Brad Traversy has been programming for around 12 years and teaching for almost 5 years. He is the owner of Traversy Media which is a successful web development YouTube channel and specializes in everything from HTML5 to front end frameworks like Angular as well as server side technologies like Node.js, PHP and Python. Brad has mastered explaining very complex topics in a simple manner that is very understandable. Invest in your knowledge by watching Brad's courses.

91 lessons

Easy to follow lectures and videos covering subject details.

14 hours

This course includes hours of video material. Watch on-demand, anytime, anywhere.

Certificate of Completion

You will earn a Certificate of Completion at the end of this course.

Course curriculum

Course Introduction13:36

  • Welcome To The Course03:26
  • What Is React?04:03
  • Setting Up Our Environment06:07

  • Project Introduction03:22
  • Code & Resources00:07
  • Create React App & File Structure10:32
  • CRA Cleanup & Prepare06:37
  • Intro To JSX & Fragments06:22
  • Expressions & Conditionals In JSX05:55

  • Components, Props & PropTypes10:47
  • Getting Started With Component State09:08
  • Lists & Passing State With Props08:30
  • Stateless Functional Components07:18
  • HTTP Requests & Updating State09:05
  • Spinner Component & Refactoring07:19
  • Environment Variables05:12

  • Events & Search Component07:58
  • Passing Props Up & Search08:28
  • Clear Users From State07:26
  • Alert State & Component09:45
  • React Router Setup08:43
  • Single User Component & Data11:37
  • User Component UI & Layout13:10
  • Repos & RepoItem Component & Data10:53

  • Overview of Hooks & Context07:33
  • Search Class to Function With useState Hook07:28
  • User Class to Function With useEffect Hook08:30
  • App Class to Function Component08:15
  • Implementing Context12:39
  • Create Reducer & Actions12:28
  • Moving User State To Context15:37
  • Moving Repos State To Context04:24
  • Alert Context Workflow12:56
  • Home & NotFound Components04:41
  • Prepare & Deploy To Netlify10:38

  • Project Introduction03:35
  • Code & Resources00:08
  • MongoDB Atlas Setup05:17
  • Dependencies & Basic Express Server09:20
  • Backend Routes11:17
  • Connect MongoDB To Our App08:52

  • User Model & Validation11:31
  • Hash Passwords & Register Route08:03
  • Create & Respond With JSON Web Token06:34
  • Authenticate Route09:00
  • Auth Middleware & Protecting Routes10:26
  • Contact Model & Get Contacts Route06:54
  • Add Contact Route08:05
  • Contact Update & Delete Routes12:05

  • Setup React & Concurrently04:58
  • Cleanup, Navbar & Router Setup15:32
  • Contacts Context & Global State09:54
  • Contacts & ContactItem Components14:22
  • ContactForm Component17:13
  • Delete Contact From UI05:51
  • Set & Clear Current Contact06:50
  • Edit & Update Contact Action12:09
  • Contact Filter Form & State16:24
  • Basic Add & Delete Animation07:12

  • Auth Context & Initial State08:30
  • Register & Login Forms10:41
  • Alert Context, State & Component17:00
  • User Registration17:20
  • Load User & Set Token15:20
  • User Login07:38
  • Logout & Navbar08:10
  • PrivateRoute Component05:57

  • Add Contact10:45
  • Get & Clear Contacts14:51
  • Delete Contacts04:49
  • Update Contacts03:16
  • Prepare & Deploy To Heroku13:24

  • Project Introduction05:31
  • Code & Resources00:01
  • React & JSON-Server Setup08:48
  • Materialize Setup08:38
  • SearchBar & Logs Component11:33
  • LogItem & Preloader Components10:50
  • AddBtn & AddLogModal Components20:34
  • Edit & Tech Modal Components17:04

  • Redux Store & Provider Setup11:33
  • Logs Reducer, Actions & Types13:52
  • Connecting Redux To a Component10:09
  • Add Logs09:30
  • Delete Logs07:48
  • Update Logs14:41
  • Search Logs07:47

  • Techs Reducer, Action & Component10:34
  • Tech Options Select Component07:02
  • Add Technicians07:11
  • Delete Technicians08:12
Enroll now
Online Courses

Learning React doesn't have to be hard. Here is our curated list of recommended online courses that will guide you step-by-step in the learning process.

Learn more
Books

Are you an avid book reader? Do you prefer paperback, or maybe Kindle version? Take a look at our curated list of React related books and take yourskills to the next level.

Learn more
YouTube videos

The number of high-quality and free React video tutorials is growing fast. Check this curated list of recommended videos - there is no excuse to stop learning.

Learn more