https://github.com/bikramai/react-game-hub-app

Built an app for discovering video games. Features and UI patterns you would expect from a modern app, toggle with the dark and light modes, search for games, filter by genre, platform. As we change filters, the title gets updated dynamically, sort games, load skeletons while fetched from backend.
https://github.com/bikramai/react-game-hub-app

components-library css fetch-api filtering forms handling-events hooks listgroup loading-indicator props react react-dev-tools rendering-lists state-management typescript vanilla-css vite zod

Last synced: about 2 months ago
JSON representation

Built an app for discovering video games. Features and UI patterns you would expect from a modern app, toggle with the dark and light modes, search for games, filter by genre, platform. As we change filters, the title gets updated dynamically, sort games, load skeletons while fetched from backend.

• Host: GitHub
• URL: https://github.com/bikramai/react-game-hub-app
• Owner: Bikramai
• Created: 2024-09-16T11:38:21.000Z (3 months ago)
• Default Branch: master
• Last Pushed: 2024-10-24T11:46:37.000Z (2 months ago)
• Last Synced: 2024-10-25T11:17:10.317Z (2 months ago)
• Topics: components-library, css, fetch-api, filtering, forms, handling-events, hooks, listgroup, loading-indicator, props, react, react-dev-tools, rendering-lists, state-management, typescript, vanilla-css, vite, zod
• Language: TypeScript
• Homepage:
• Size: 64.5 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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-1: Getting Start with React

- What is React

- Setting Up the Development Environment

- Creating a my React App

- How React Works

- React Ecosystem

# Section-2: Building Components

- Building components

- Rendering markup with JSX

- Managing state

- Passing input via props

- Debugging React apps

# Section-3: Styling Components

- Vanilla CSS

- CSS Modules

- CSS-in-JS

- Using CSS Libraries