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