Learn React Js By Building A Hangman Game In 2023

Quickly learn React JS, get familiar with Hooks & Components, and understand the core concepts of React JS

What you'll learn

Learn the core concepts of React

Understand Hooks and how to use them

Get familiar with functional components

Learn how to build and deploy React JS apps

Requirements

Basic Javascript, HTML, CSS knowledge

Node JS installed on your computer

A good code editor (I suggest VS code)

Description

Get more than just familiar with React JS in under 3 hoursIn this hands-on course, I'll guide you through a short but fun journey of creating a fully functional Hangman Game using the latest React JS techniques and standard practices.What You'll Learn:React Fundamentals: Lay a solid foundation by grasping the core concepts of React, including components, state, and props.React Hooks: Explore the power of React Hooks and learn how to use them to manage the application effortlessly.React Component: Design a clean and scalable component structure that enhances maintainability and code readability.State Management: Understand state management in React using useState and useReducer.Deploying React App: Build and deploy a React Application on the internetBy the end of this course, you will have built a working Hangman Game that showcases your React JS skills, giving you the confidence to start working on your next project using React JS.Please note that this course is not for complete beginners, interested people should know Javascript, CSS, and HTML. Just having basic knowledge of them will be good to go. Enroll now and code with me as we learn React JS while creating a fun game.Happy coding!

Overview

Section 1: Introduction

Lecture 1 Intro to the course

Lecture 2 Who is this course for and what to expect?

Section 2: Getting Started with React JS

Lecture 3 Installing React JS on your computer

Lecture 4 First look inside a React JS application

Lecture 5 The JSX file extension

Lecture 6 Installing TailwindCSS in your React JS project

Lecture 7 Overview of styling React JS applications

Section 3: Building the Hangman game

Lecture 8 Quick overview of the application

Lecture 9 Building our first React component

Lecture 10 Class-based components vs Functional components

Lecture 11 Styling the Layout and the Header component

Lecture 12 Rendering using arrays in React JS

Lecture 13 Styling the Footer Component

Lecture 14 Using Props with Components

Lecture 15 Creating the Hangman Component (Part 1)

Lecture 16 Creating the Hangman Component (Part 2)

Lecture 17 Creating the Letters Component

Lecture 18 Creating the Keyboard Component

Lecture 19 Adding interactivity to our Keyboard buttons

Lecture 20 Using the useState hook with our Components

Lecture 21 Adding some more buttons to the application

Lecture 22 Creating the AlertBox Component

Section 4: Implementing logic to the React JS application

Lecture 23 Using useReducer to manage the state of the Application

Lecture 24 Creating the function to generate words for the Game

Lecture 25 Conditionally rendering the Components

Lecture 26 Looking into the Reducer function

Lecture 27 Adding an action to the Reducer function

Lecture 28 Fixing the re-render error with useEffect hook

Lecture 29 Adding the logic to make a guess (Part 1)

Lecture 30 Adding the logic to make a guess (Part 2)

Lecture 31 Adding the logic to win the game

Lecture 32 Making the Give Up button work

Lecture 33 Making the Hint button work

Lecture 34 Adding the logic to change topics

Beginner web developers looking to quickly get started with React JS,Experience developer coming from different frameworks looking to quickly learn React JS