React Front To Back

  • Course provided by Udemy
  • Study type: Online
  • Starts: Anytime
  • Price: See latest price on Udemy
Udemy

Course 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

Instructor

Full Stack Web Developer & Instructor at Traversy Media
  • 4.7 Instructor Rating
  • 116,774 Reviews
  • 301,648 Students
  • 16 Courses

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.

Expected Outcomes

  1. 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 Curated for the Udemy Business collection Course content 13 sections • 91 lectures • 13h 57m total length Expand all sections Course Introduction 3 lectures • 14min 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 • 33min 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 • 57min 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 • 1hr 18min 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 • 1hr 45min 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 • 38min 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 • 1hr 13min 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 • 1hr 50min 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 • 1hr 31min 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 • 47min Add Contact 10:45 Get & Clear Contacts 14:51 Delete Contacts 04:49 Update Contacts 03:16 Prepare & Deploy To Heroku 13:24 3 more sections 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 Show more Show less Featured review Hakan Güçlü 294 courses 26 reviews Rating: 4.5 out of 5 10 months ago This is a good course with beginner friendly projects. The only problem that I had was that sometimes small details were overlooked, which doesn't get in the way of learning very much but still... Studying React is confusing by itself and tiny details can make the process worse. That's why I decreased half a star from my rating, but I would still recommend this course to anyone who's starting to learn React and is looking for a practical approach. Show more Show less Instructor Brad Traversy Full Stack Web Developer & Instructor at Traversy Media 4.7 Instructor Rating 116,774 Reviews 301,648 Students 16 Courses 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. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776fae96c49f437',m:'1013b30700a9683ce7e8fb26e8b9c5f344dda6f1-1627736117-1800-Ac3D1K3CsP4i/3SSIyTZvOp1JJkV3I3BulrGqL4nqCjtpYl2QOGHiwQh9dE48MvWHWyzwkiLjc62670SNaZe5GxpP8Dy7wVVqUZusrKYVNzzmkCPho1Gjz4tFBlTF1QFFFAz1S61M3pLwcKISBf0W9NbIUcWQjB/SsjIsGW3270L',s:[0xd1b94e706e,0x6d42b36aad],}})();
  2. 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 Curated for the Udemy Business collection Course content 13 sections • 91 lectures • 13h 57m total length Expand all sections Course Introduction 3 lectures • 14min 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 • 33min 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 • 57min 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 • 1hr 18min 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 • 1hr 45min 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 • 38min 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 • 1hr 13min 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 • 1hr 50min 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 • 1hr 31min 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 • 47min Add Contact 10:45 Get & Clear Contacts 14:51 Delete Contacts 04:49 Update Contacts 03:16 Prepare & Deploy To Heroku 13:24 3 more sections 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 Show more Show less Featured review Hakan Güçlü 294 courses 26 reviews Rating: 4.5 out of 5 10 months ago This is a good course with beginner friendly projects. The only problem that I had was that sometimes small details were overlooked, which doesn't get in the way of learning very much but still... Studying React is confusing by itself and tiny details can make the process worse. That's why I decreased half a star from my rating, but I would still recommend this course to anyone who's starting to learn React and is looking for a practical approach. Show more Show less Instructor Brad Traversy Full Stack Web Developer & Instructor at Traversy Media 4.7 Instructor Rating 116,774 Reviews 301,648 Students 16 Courses 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. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776fae96c49f437',m:'1013b30700a9683ce7e8fb26e8b9c5f344dda6f1-1627736117-1800-Ac3D1K3CsP4i/3SSIyTZvOp1JJkV3I3BulrGqL4nqCjtpYl2QOGHiwQh9dE48MvWHWyzwkiLjc62670SNaZe5GxpP8Dy7wVVqUZusrKYVNzzmkCPho1Gjz4tFBlTF1QFFFAz1S61M3pLwcKISBf0W9NbIUcWQjB/SsjIsGW3270L',s:[0xd1b94e706e,0x6d42b36aad],}})();
  3. Learn Redux From Scratch Full Stack Development with MERN (MongoDB, Express, React, Node) Suitable For Both Beginners & Intermediate React Developers Curated for the Udemy Business collection Course content 13 sections • 91 lectures • 13h 57m total length Expand all sections Course Introduction 3 lectures • 14min 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 • 33min 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 • 57min 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 • 1hr 18min 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 • 1hr 45min 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 • 38min 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 • 1hr 13min 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 • 1hr 50min 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 • 1hr 31min 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 • 47min Add Contact 10:45 Get & Clear Contacts 14:51 Delete Contacts 04:49 Update Contacts 03:16 Prepare & Deploy To Heroku 13:24 3 more sections 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 Show more Show less Featured review Hakan Güçlü 294 courses 26 reviews Rating: 4.5 out of 5 10 months ago This is a good course with beginner friendly projects. The only problem that I had was that sometimes small details were overlooked, which doesn't get in the way of learning very much but still... Studying React is confusing by itself and tiny details can make the process worse. That's why I decreased half a star from my rating, but I would still recommend this course to anyone who's starting to learn React and is looking for a practical approach. Show more Show less Instructor Brad Traversy Full Stack Web Developer & Instructor at Traversy Media 4.7 Instructor Rating 116,774 Reviews 301,648 Students 16 Courses 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. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776fae96c49f437',m:'1013b30700a9683ce7e8fb26e8b9c5f344dda6f1-1627736117-1800-Ac3D1K3CsP4i/3SSIyTZvOp1JJkV3I3BulrGqL4nqCjtpYl2QOGHiwQh9dE48MvWHWyzwkiLjc62670SNaZe5GxpP8Dy7wVVqUZusrKYVNzzmkCPho1Gjz4tFBlTF1QFFFAz1S61M3pLwcKISBf0W9NbIUcWQjB/SsjIsGW3270L',s:[0xd1b94e706e,0x6d42b36aad],}})();
  4. Full Stack Development with MERN (MongoDB, Express, React, Node) Suitable For Both Beginners & Intermediate React Developers Curated for the Udemy Business collection Course content 13 sections • 91 lectures • 13h 57m total length Expand all sections Course Introduction 3 lectures • 14min 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 • 33min 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 • 57min 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 • 1hr 18min 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 • 1hr 45min 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 • 38min 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 • 1hr 13min 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 • 1hr 50min 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 • 1hr 31min 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 • 47min Add Contact 10:45 Get & Clear Contacts 14:51 Delete Contacts 04:49 Update Contacts 03:16 Prepare & Deploy To Heroku 13:24 3 more sections 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 Show more Show less Featured review Hakan Güçlü 294 courses 26 reviews Rating: 4.5 out of 5 10 months ago This is a good course with beginner friendly projects. The only problem that I had was that sometimes small details were overlooked, which doesn't get in the way of learning very much but still... Studying React is confusing by itself and tiny details can make the process worse. That's why I decreased half a star from my rating, but I would still recommend this course to anyone who's starting to learn React and is looking for a practical approach. Show more Show less Instructor Brad Traversy Full Stack Web Developer & Instructor at Traversy Media 4.7 Instructor Rating 116,774 Reviews 301,648 Students 16 Courses 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. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776fae96c49f437',m:'1013b30700a9683ce7e8fb26e8b9c5f344dda6f1-1627736117-1800-Ac3D1K3CsP4i/3SSIyTZvOp1JJkV3I3BulrGqL4nqCjtpYl2QOGHiwQh9dE48MvWHWyzwkiLjc62670SNaZe5GxpP8Dy7wVVqUZusrKYVNzzmkCPho1Gjz4tFBlTF1QFFFAz1S61M3pLwcKISBf0W9NbIUcWQjB/SsjIsGW3270L',s:[0xd1b94e706e,0x6d42b36aad],}})();
  5. Suitable For Both Beginners & Intermediate React Developers Curated for the Udemy Business collection Course content 13 sections • 91 lectures • 13h 57m total length Expand all sections Course Introduction 3 lectures • 14min 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 • 33min 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 • 57min 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 • 1hr 18min 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 • 1hr 45min 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 • 38min 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 • 1hr 13min 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 • 1hr 50min 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 • 1hr 31min 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 • 47min Add Contact 10:45 Get & Clear Contacts 14:51 Delete Contacts 04:49 Update Contacts 03:16 Prepare & Deploy To Heroku 13:24 3 more sections 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 Show more Show less Featured review Hakan Güçlü 294 courses 26 reviews Rating: 4.5 out of 5 10 months ago This is a good course with beginner friendly projects. The only problem that I had was that sometimes small details were overlooked, which doesn't get in the way of learning very much but still... Studying React is confusing by itself and tiny details can make the process worse. That's why I decreased half a star from my rating, but I would still recommend this course to anyone who's starting to learn React and is looking for a practical approach. Show more Show less Instructor Brad Traversy Full Stack Web Developer & Instructor at Traversy Media 4.7 Instructor Rating 116,774 Reviews 301,648 Students 16 Courses 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. Show more Show less Udemy Business Teach on Udemy Get the app About us Contact us Careers Blog Help and Support Affiliate Impressum Kontakt Terms Privacy policy Cookie settings Sitemap © 2021 Udemy, Inc. window.handleCSSToggleButtonClick = function (event) { var target = event.currentTarget; var cssToggleId = target && target.dataset && target.dataset.cssToggleId; var input = cssToggleId && document.getElementById(cssToggleId); if (input) { if (input.dataset.type === 'checkbox') { input.dataset.checked = input.dataset.checked ? '' : 'checked'; } else { input.dataset.checked = input.dataset.allowToggle && input.dataset.checked ? '' : 'checked'; var radios = document.querySelectorAll('[name="' + input.dataset.name + '"]'); for (var i = 0; i (function(){window['__CF$cv$params']={r:'6776fae96c49f437',m:'1013b30700a9683ce7e8fb26e8b9c5f344dda6f1-1627736117-1800-Ac3D1K3CsP4i/3SSIyTZvOp1JJkV3I3BulrGqL4nqCjtpYl2QOGHiwQh9dE48MvWHWyzwkiLjc62670SNaZe5GxpP8Dy7wVVqUZusrKYVNzzmkCPho1Gjz4tFBlTF1QFFFAz1S61M3pLwcKISBf0W9NbIUcWQjB/SsjIsGW3270L',s:[0xd1b94e706e,0x6d42b36aad],}})();