React – Complete Developer Course with Hands-On Projects


Learn React JS through a Series of Hands-On Projects. Build an E-Commerce Site, Calculator, and Connect4 Game.

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

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.


Get Instant Notification of New Courses on our Telegram channel.

Note➛ Make sure your 𝐔𝐝𝐞𝐦𝐲 cart has only this course you're going to enroll it now, Remove all other courses from the 𝐔𝐝𝐞𝐦𝐲 cart before Enrolling!


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.

English
language

Content

Introduction to React

Skills Required
What is React?

Project 1: Build a Calculator in React

Project Overview
Hello React
Tools Needed
Code Pen
Intro to JSX
Functional Components in React
Why Components?
Intro to Props in React
React Components, Props and Callbacks
Building the Calculator Visuals
OnClick Events in React
Passing Parameters in Callback Functions
Using React State Hook
Implementing the calculator – Display
Implementing the calculator – Operators
Debugging in React
Project Summary

Project 2 – Build a Connect-4 Clone in React

Project Introduction – What We Will Build
Tools Needed
Creating the Game Board
Game Circle – OnClickEvent
Passing Props – Destructing – React Children
Passing Arguments to Click Events
Inline Styling
Square to Circle Component
Global Styling
Dynamic Styling
Dynamic Classes
Handling Callbacks
Using React State Hook (again)
Updating the Player Circle
Initializing the Game Board
React Key Property
Styling the Game Board – Header and Footer
Calculating the Winner
Displaying the Winner
Determining a Draw Condition
React Lifecycle Events
Initializing the Game
Suggesting a Move – Implementing a Computer Player
Smart Computer Player (Basic AI)
CSS Variables
Conditional Rendering
Deploy to Netlify
Deploy to Surge
Project Summary

Project 3 – Build an E-Commerce Site in React

Project Introduction – What We Build
Scaffolding the Project
Intro to JSON Server
Fetch API
Styling the Store
Rendering the Categories
Binding the Products
Refactor the Fetch API call
Dealing with errors in Fetch API
Tidy the Fetch API call
Styling the Product List
Installing React Router
Fixing the Key Warning
React Router – Detail Page
Fetch API – Get Product By Id
Product Description
Intro to Styled Components
Styled Components – Product Description
Dangerously Set HTML (Yeah Really)
Refactor the Categories
Refactor the Layout
Refactor the Home Page
Intro to Context in React
UseContext Hook and UseReducer Hook in React
Basket Layout
Implementing the Basket
Implementing Basket Icons
Implementing Basket Total
Finishing the Checkout
Checkout – Fixing the State
Implementing the Order Confirmation
Intro to Local Storage
Implementing Search Results
Better Searching with Debouncing
Validating Forms in React – Part 1
Validating Forms in React – Part 2
Validating Forms in React – Part 3
Validating Forms in React – Part 4
Project Summary