React - Complete Developer Course

Learn React JS through a Series of Hands-On Projects
Enroll Now $199 $12.00

Why Enroll?

Check out just a few key highlights for:
React - Complete Developer Course.

6,325 Students

Join a community of other students taking this course.

Duration

Each lecture is recorded in HD 1920x1080p with clear audio.

4.8/5 Stars

All courses are rated by fellow community members.

More Benefits

Learning with YouAccel has several exciting benefits.

Clear HD Video

All YouAccel courses are recorded and produced in 1920x1080p HD Quality.

Live Support

Have a question? Contact our support team at any time using our chat feature, or built-in messaging console.

Certification

All YouAccel courses come with a Certificate of Completion. This helps Showcase your proficiency in a subject to prospective employers.

Lifetime Access

All YouAccel courses include lifetime on-demand access. Class lecture are also available for offline viewing.

Community

Join a community of over 600,000 learners. Connect & Communicate through YouAccel's networking tools.

Job Pool

YouAccel's integration with Indeed makes it easy to search through thousands of jobs and apply with just a click.

Course Outline

A comprehensive list of all sections & lectures for this course can be found below.

Course Introduction

Course Introduction - 04:38 [Play]

Skills Required - 01:03

What is React? - 04:50

Project Overview - 01:34 [Play]

Tools Needed - 01:01

Creating the Game Board - 11:56

Game Circle OnClickEvent - 05:41

Passing Props Destructing React Children - 07:04

Passing Arguments to Click Events - 09:25

Inline Styling - 05:47

Square to Circle Component - 13:18

Global Styling - 06:43

Dynamic Styling - 03:59

Dynamic Classes - 03:47

Handling Callbacks - 03:47

Using React State Hook (Again) - 14:32

Updating the Player Circle - 17:13

Initializing the Game Board - 08:20

React Key Property - 02:12

Styling the Game Board Header and Footer - 11:17

Calculating the Winner - 13:38

Displaying the Winner - 14:41

Determining a Draw Condition - 05:51

React Lifecycle Events - 03:24

Initializing the Game - 06:23

Suggesting a Move Implementing a Computer Player - 12:13

Smart Computer Player Basic AI - 19:08

CSS Variables - 07:14

Conditional Rendering - 08:22

Deploy to Netlify - 06:08

Deploy to Surge - 02:47

Project Summary - 02:42

Project Introduction What We Build - 02:00 [Play]

Scaffolding the Project - 04:04

Intro to JSON Server - 04:08

Fetch API - 10:41

Styling the Store - 04:15

Rendering the Categories - 10:56

Binding the Products - 08:12

Refactor the Fetch API Call - 08:57

Dealing with Errors in Fetch API - 08:33

Tidy the Fetch API Call - 02:29

Styling the Product List - 13:07

Installing React Router - 06:14

Fixing the Key Warning - 04:04

React Router Detail Page - 12:31

Fetch API Get Product By Id - 09:03

Product Description - 05:33

Intro to Styled Components - 13:08

Styled Components Product Description - 03:15

Dangerously Set HTML - 04:15

Refactor the Categories - 08:31

Refactor the Layout - 05:32

Refactor the Home Page - 05:58

Intro to Context in React - 09:01

UseContext Hook and UseReducer Hook in React - 18:07

Basket Layout - 11:19

Implementing the Basket - 06:30

Implementing Basket Icons - 04:44

Implementing Basket Total - 07:58

Finishing the Checkout - 01:14

Checkout Fixing the State - 12:39

Implementing the Order Confirmation - 06:51

Intro to Local Storage - 13:15

Implementing Search Results - 14:31

Better Searching with Debouncing - 07:44

Validating Forms in React (Part 1) - 08:55

Validating Forms in React (Part 2) - 09:23

Validating Forms in React (Part 3) - 08:19

Validating Forms in React (Part 4) - 08:02

Project Summary - 02:52

Project Overview - 01:06 [Play]

Hello React - 06:31

Tools Needed - 01:10

Code Pen - 04:48

Into to JSX - 04:13

Functional Components in React - 05:39

Why Components - 03:10

Intro to Props in React - 03:59

React Components Props and Callbacks - 04:24

Building the Calculator Visuals - 11:09

OnClick Events in React - 05:54

Passing Parameters in Callback Functions - 04:36

Using React State Hook - 04:50

Implementing the Calculator Display - 07:35

Implementing the Calculator Operators - 10:18

Debugging in React - 05:17

Project Summary - 01:57

Course Description

Welcome to the Complete React Certification course. This course offers a comprehensive guide into one of the most powerful, modern JavaScript libraries available - ReactJS. Whether you are completely new to React, or you've dabbled with it in the past, one thing's for sure - You've likely interacted with a number of web applications that use the React library for building out user interface components. Some of the most well known examples include Netflix, Facebook, and Airbnb. Developed and maintained by Meta along with a community of independent developers, React remains free and open-source. React is a component based library built entirely on JavaScript, which makes it perfect for designing complex UI's. With React, developers can build encapsulated components that efficiently manage their own state and render UI updates specifically when data changes. For example, think of the automated content refresh feature you see on a twitter feed, or Facebook like button. Here, the state of the UI component changes on the page without having to manually refresh when the data is updated. This is just one small, yet powerful UI feature built into React.

This course starts with exploring the foundations of React and its core use cases. We offer a concise definition of what React is and what it's not. From there, we explore the tools needed to get started along with an introduction into JSX, and Functional React components. Through a complete hands-on project, you will learn a number of important concepts including react props, callbacks, OnClick Events and passing parameters within callback functions. By the end of module one you will have built a fully functional calculator, complete with display and numerical operators. We will also cover important topics such as the React State Hook and Debugging.

In the second module students build out a multiplayer Connect-4 clone, with AI integration. Here we start with styling the individual game board components followed by advanced onClickEvents. This includes global, dynamic and inline styling. From there, we move on to passing props, destructing, and React children. Students will explore the React key property, along with Lifecycle events, game initialization, CSS variables, and conditional rendering. By the end, you will have built a complete Connect-4 game capable of automatically determining the winner in both a multi-player and AI based single player setting.

In module three we further unleash the power of React by building out a complete e-commerce site with multiple product categories, a product showcase, shopping cart feature, and much more. Here, we introduce a number of integral new concepts including JSON server, Fetch API, and installing React router. These essential building blocks will be used to render the product categories, style the product list, and configure the product details page. From there we dive into styled components, refactoring the shop layout, and exploring the concept of "Ccontext" in React. In the final stages of the project students will configure the shopping cart basket, and the integrated checkout feature. We will also implement a product search feature, followed by in-depth exercises on validating input forms in React.

As you can see this course covers a tremendous bit of ground. Best of all its authored by Tim Maclachlan - a renowned senior full-stack developer with over 20 years of commercial development experience. As a multi-faceted developer, Tim's core competencies include algorithmic, analytical and mobile development. To date, he's written hundreds of applications and worked in a number of industries from commercial aviation and military, to banking and finance. Tim has a genuine passion for teaching others how to become better coders and looks forward to interacting with his students.

With that said, we hope you're just as excited about this course as we are, if so - hit the enroll button and let's get started.

React - Complete Developer Course

All course reviews are written by students who have completed the course or are currently enrolled.

Course Instructor - Youaccel

youaccel
Teaching 93 Courses

youaccel is currently teaching 93 courses. All courses are currently open for enrollment.

574,171 Enrollments

youaccel currently has 574,171 global enrollments across 93 courses that are active on the platform.

4.5 Star Rating

youaccel has an average rating of 4.5/5 stars, across 93 courses.

YouAccel is a leading provider in online training, offering courses across numerous industries from IT and Development to Business, Marketing, Design, and Productivity. The e-learning experience provided by YouAccel is Dynamic. Each course is streamed in High Definition with corresponding assignments, quizzes, and exams that are delivered and graded electronically. All YouAccel courses are taught by certified educators that have numerous years of work experience in the field for which they provide instruction. The courses can be taken at one's own pace and are offered at several levels including beginner, intermediate and advanced. Online courses are also compatible with any mobile device for the ultimate in convenience. Taking the experience to a new personalized level, live communication with instructors is available through an online messaging console. All courses come with a certificate of completion and no age restrictions apply.



All Courses include a 30-Day Satisfaction Guarantee.

You have nothing to lose. Give the course a try. If it's not what you expected, get a full refund within 30 days of purchase.