Skip to content

Instantly share code, notes, and snippets.

@HartiganHM

HartiganHM/React-Practice-Apps.md

Last active September 21, 2022 19:55
Show Gist options
  • Star 3 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save HartiganHM/395094b3f160a3359a270b4a1e0a70fc to your computer and use it in GitHub Desktop.
Save HartiganHM/395094b3f160a3359a270b4a1e0a70fc to your computer and use it in GitHub Desktop.
Download ZIP
A collection of project based React Practice Apps
Raw
React-Practice-Apps.md

React Practice Apps

This is a list of practice apps that can be used to build a portfolio. Each one has a list of technologies used, links any relevant blog posts/videos, as well general difficulty from a React development perspecitve. The apps are listed in no particular order, but are grouped by level of difficulty (Beginner, Intermediate, Advanced).

Beginner

These projects assume foundational knowledge of React, CSS, and asynchronous JavaScript.

React Pokedex by Juan Diego Jimenez

A five part series building a Pokedex in React the Poke API.

What you'll use 🧰

  • CRA
  • CSS
  • Asynchronous JS
  • Sprites 👾

React concepts covered 📖

  • Stateful class components
  • Modular component development
  • CSS in JS

Extra challenges ⚔️

  • Convert all fetch calls to use async/await and try/catch
  • Update all class components to use React hooks
  • Make the application accessible
  • Update the design to be responsive on a mobile device
  • Ask yourself why there were ever more than 151 Pokemon

Snake Game with React Hooks by Ali Gümüş Tosun

Get a quick intoduction to React hooks by building a bare-bones Snake game.

What you'll use 🧰

React concepts covered 📖

  • React hooks
  • Modular component development

Gotchas 🚨

  • The images referenced in the post (e.g. blank.png) can be found here

Extra challenges ⚔️

  • Update the keydown event listeners to use React Hooks
  • Update the "food" to use a random fruit image every time it changes
  • Create a "Game Over" state if the snake runs into itself
  • Build a frame that looks like an old Nokia phone

Intermediate

These projects assume everything from the Beginner level and fold in more frontend complexities like webpack, advanced React patterns (e.g. context API), or GraphQL (e.g. Apollo Client).

Advanced

These projects assume everything from the Intermediate level and can involve building a backend server, using cloud services (e.g. AWS), and using TypeScript.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment