React Complete Developer Course with Hands-On Projects

React – Complete Developer Course with Hands-On Projects, available at $59.99, has an average rating of 4.16, with 87 lectures, based on 486 reviews, and has 55669 subscribers.

You will learn about What is React? The Tools Needed to Build React Projects Introduction to Code Pen Functional Components in React Building a Fully Functional Calculator in React Using React Props Debugging in React Using the React State Hook Introduction to JSX Styling React Projects React Events Building a Single and Multi-Player Connect-4 Clone Game with AI Introduction to JSON Server Using Fetch API Building a Custom E-Commerce Site in React Building an Integrated Search Function using React Validating Forms in React This course is ideal for individuals who are Students interested in learning to Build Web Apps using React or Students interested in using JavaScript libraries for Building our Functional UI Components. or Students interested in interactive front-end development using React It is particularly useful for Students interested in learning to Build Web Apps using React or Students interested in using JavaScript libraries for Building our Functional UI Components. or Students interested in interactive front-end development using React.

Enroll now: React – Complete Developer Course with Hands-On Projects

Summary

Title: React – Complete Developer Course with Hands-On Projects

Price: $59.99

Average Rating: 4.16

Number of Lectures: 87

Number of Published Lectures: 87

Number of Curriculum Items: 87

Number of Published Curriculum Objects: 87

Original Price: $199.99

Quality Status: approved

Status: Live

What You Will Learn

What is React?

The Tools Needed to Build React Projects

Introduction to Code Pen

Functional Components in React

Building a Fully Functional Calculator in React

Using React Props

Debugging in React

Using the React State Hook

Introduction to JSX

Styling React Projects

React Events

Building a Single and Multi-Player Connect-4 Clone Game with AI

Introduction to JSON Server

Using Fetch API

Building a Custom E-Commerce Site in React

Building an Integrated Search Function using React

Validating Forms in React

Who Should Attend

Students interested in learning to Build Web Apps using React

Students interested in using JavaScript libraries for Building our Functional UI Components.

Students interested in interactive front-end development using React

Target Audiences

Students interested in learning to Build Web Apps using React

Students interested in using JavaScript libraries for Building our Functional UI Components.

Students interested in interactive front-end development using React

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 “context” 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 it’s 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.

Course Curriculum

Chapter 1: Introduction to React

Lecture 1: Skills Required

Lecture 2: What is React?

Chapter 2: Project 1: Build a Calculator in React

Lecture 1: Project Overview

Lecture 2: Hello React

Lecture 3: Tools Needed

Lecture 4: Code Pen

Lecture 5: Intro to JSX

Lecture 6: Functional Components in React

Lecture 7: Why Components?

Lecture 8: Intro to Props in React

Lecture 9: React Components, Props and Callbacks

Lecture 10: Building the Calculator Visuals

Lecture 11: OnClick Events in React

Lecture 12: Passing Parameters in Callback Functions

Lecture 13: Using React State Hook

Lecture 14: Implementing the calculator – Display

Lecture 15: Implementing the calculator – Operators

Lecture 16: Debugging in React

Lecture 17: Project Summary

Chapter 3: Project 2 – Build a Connect-4 Clone in React

Lecture 1: Project Introduction – What We Will Build

Lecture 2: Tools Needed

Lecture 3: Creating the Game Board

Lecture 4: Game Circle – OnClickEvent

Lecture 5: Passing Props – Destructing – React Children

Lecture 6: Passing Arguments to Click Events

Lecture 7: Inline Styling

Lecture 8: Square to Circle Component

Lecture 9: Global Styling

Lecture 10: Dynamic Styling

Lecture 11: Dynamic Classes

Lecture 12: Handling Callbacks

Lecture 13: Using React State Hook (again)

Lecture 14: Updating the Player Circle

Lecture 15: Initializing the Game Board

Lecture 16: React Key Property

Lecture 17: Styling the Game Board – Header and Footer

Lecture 18: Calculating the Winner

Lecture 19: Displaying the Winner

Lecture 20: Determining a Draw Condition

Lecture 21: React Lifecycle Events

Lecture 22: Initializing the Game

Lecture 23: Suggesting a Move – Implementing a Computer Player

Lecture 24: Smart Computer Player (Basic AI)

Lecture 25: CSS Variables

Lecture 26: Conditional Rendering

Lecture 27: Deploy to Netlify

Lecture 28: Deploy to Surge

Lecture 29: Project Summary

Chapter 4: Project 3 – Build an E-Commerce Site in React

Lecture 1: Project Introduction – What We Build

Lecture 2: Scaffolding the Project

Lecture 3: Intro to JSON Server

Lecture 4: Fetch API

Lecture 5: Styling the Store

Lecture 6: Rendering the Categories

Lecture 7: Binding the Products

Lecture 8: Refactor the Fetch API call

Lecture 9: Dealing with errors in Fetch API

Lecture 10: Tidy the Fetch API call

Lecture 11: Styling the Product List

Lecture 12: Installing React Router

Lecture 13: Fixing the Key Warning

Lecture 14: React Router – Detail Page

Lecture 15: Fetch API – Get Product By Id

Lecture 16: Product Description

Lecture 17: Intro to Styled Components

Lecture 18: Styled Components – Product Description

Lecture 19: Dangerously Set HTML (Yeah Really)

Lecture 20: Refactor the Categories

Lecture 21: Refactor the Layout

Lecture 22: Refactor the Home Page

Lecture 23: Intro to Context in React

Lecture 24: UseContext Hook and UseReducer Hook in React

Lecture 25: Basket Layout

Lecture 26: Implementing the Basket

Lecture 27: Implementing Basket Icons

Lecture 28: Implementing Basket Total

Lecture 29: Finishing the Checkout

Lecture 30: Checkout – Fixing the State

Lecture 31: Implementing the Order Confirmation

Lecture 32: Intro to Local Storage

Lecture 33: Implementing Search Results

Lecture 34: Better Searching with Debouncing

Lecture 35: Validating Forms in React – Part 1

Lecture 36: Validating Forms in React – Part 2

Lecture 37: Validating Forms in React – Part 3

Lecture 38: Validating Forms in React – Part 4

Lecture 39: Project Summary

Instructors

YouAccel Training
8+ Million Enrollments, 70k+ Reviews. Register Today.

Blue Digital Media
Explore, Engage, Excel: Online Education Redefined

Rating Distribution

1 stars: 16 votes

2 stars: 18 votes

3 stars: 74 votes

4 stars: 166 votes

5 stars: 212 votes

Frequently Asked Questions

How long do I have access to the course materials?

You can view and review the lecture materials indefinitely, like an on-demand channel.

Can I take my courses with me wherever I go?

Definitely! If you have an internet connection, courses on Udemy are available on any device at any time. If you don’t have an internet connection, some instructors also let their students download course lectures. That’s up to the instructor though, so make sure you get on their good side!