React for Beginners

React-Game-Hub-App ( React + TypeScript )

Prerequisites

What you should know to take this Project.

You should have good understanding of

• HTML
• CSS
• JavaScript

React:

React is a JavaScript library for building dynamic and Interactive user interfaces. It was created at Facebook in 2011, and is currently the most widely used JavaScript library for frontend development.

Why React Created?

Well, as we probably know, when a web page loaded in a browser, the browser takes the HTML code and creates a tree like structure called the document object model or the DOM for short. This allows us to use Jasvascript and change the page content in response to user actions.

For Example, we can use JavaScript to hide an element when a button is clicked. This is called vanilla JavaScript, meaning plain JavaScript code without any third party tools. Now, as our applications grow, working with DOM can become quite complex and challenging to manage. This is where react comes into play. With react, we nolonger need to worry about querying and updating DOM elements, instead, we describe a webpage using small reusable components and react will take care of efficiently creating and updating DOM elements. So components help us write reusable, modular and and better organized code

We can build all these components individually, and then combine them to build page. Essentially, a React application is a tree of components with the app being the root, bringing everything together.

Section-0: Getting Start with React

• What is React
• Setting Up the Development Environment
• Creating a my React App
• How React Works
• React Ecosystem

Section-1: Building Components

• Building components
• Rendering markup with JSX
• Managing state
• Passing input via props
• Debugging React apps

Section-2: Styling Components

• Vanilla CSS
• CSS Modules
• CSS-in-JS
• Using CSS Libraries

Section-3: Managing Component State

• Understand State Hook
• Choosing the State Structure
• Keeping Components Pure
• Understanding the strict Mode
• Updating Objects
• Updating Nested Objects
• Updating Arrays
• Updating Array of Objects
• Updating Arrays
• Updatating Array of Objects
• Simplifying Update Logic with Immer
• Sharing State between Components

Section-4: Building Forms

• Building a Form
• Handling Form Submission
• Accessing Input Fields
• Controlled Components
• Managing Forms with React Hook Form
• Applying Validation
• Schema based Validation with Zod
• Disabling the Submit Button
• Prject-Expenses Tracker
• Building ExpensesList
• Building ExpensesFilter
• Building Expenses Form
• Integrating with React Hook Form and Zod
• Adding an Expense

Section-5: Connecting to the Backend

• Introduction
• Understanding the Effect Hook
• Effect Dependencies
• Effect Clean Up
• Fetching Data
• Understanding HTTP Requests
• Handling Errors
• Working with Async and Await
• Cancelling a Fetch Request
• Showing a Loading Indicator
• Deleting Data
• Creating Data
• Updating Data
• Extracting a Reusable API Client
• Extracting the User Service
• Creating a Generic HTTP Service
• Creating a Custom Data Fetching Hook

Project: Building a Video Game Discovery App

• What is Build This is a mini version of the ROG website, a popular video game discovery platform. We can search for games up here. We can filter them by genre. As the games are loading, we can see loading skeletons. We can also filter by platform, like PC, PlayStation, Xbox, and so on. We can sort the games. So we have several UI patterns you see in modern applications.

• Up for a Chellenge?

• Setting Up the Project

• Installing Chakra UI

• Creating a Respinsive Layout

• Building the Navigation Bar

• Implementing the Dark Mode

• Building the Color Mode Switch

• Fetching the Games

• Note: Secure API Key Mangement

• Building Game Cards

• Displaying Platform Icons

• Displauing Critic Score

• Getting Optimized Images

• Improving User Experience with Loading Skeletons

• Refactor- Removing Duplicated Stu;es

• Fetching the Genres

• Creating a Generic Data Fetching Hook

• Displaying the Genres

• Showing a spinner

• Filtering Games by Genres

• Highlighting the Selected Genre

• Building Platform Selector

• Filtering Games by Platform

• Refactoring - Extracting a Query Objects

• Building Sort Selector

• Sorting Games

• Handling Games without an Images

• Fixing the Issue with Chakra Menus

• Building Search Input

• Searching Games

• Adding a Dynamic Heading

• Cleaning Up the Genres

• Cleanig Up the Game Cards

• Addig Emojis

• Shipping Static Data

• Customizing the Chakra Theme

• Refactoring Game Grid

• Building for Production

• Deploying to Vercel