Small React Projects

This is a repository for learning and practising concepts in React such as Hooks and Testing.

It follows this React Course and extends functionality in some projects.

You can visit and see the result of this repo.

Usage

Install dependencies: npm run install

Run tests: npm run test

Run it locally: npm run start

Contents

• You can find projects under /projects folder.
• You can find tests under *.spec.ts files.
• Some commonly used hooks are under /src/hooks.

Resources

While working on this I used:

Learning & Articles

• React Course for project ideas.
• Testing Library for running tests and Kent C. Dodds' blog for testing best practices and tips.
• Progressively Loading Images and React Blurhash used in Photo Album.
• Implementations of useful react hooks https://usehooks.com/ and typescript https://usehooks-typescript.com/.
• Dark Theme in React by Kent C. Dodds, css-variables.
• Embracing modern image formats Optimizing images.

Material

• Undraw for images and illustrations.
• Unsplash The internet’s source of freely-usable images.

Notes:

• Project Cocktails

  On this project a context is used in order to inject data between components and share functions. Also there are some nested routes for navigating to /cocktails/details and /cocktails/about. One issue that was noticed is that the context gets re-rendered on every navigation. Not sure if this intended or can be resolved, the only solution I found is moving the context provider wrapping outside of the Router.