Duplicate Mini 1 ...but in React

[jlooper]

Context

Currently our workshops are done in Vue, as per our normal flow and initial mission, but now that we have rebranded and expanded our scope, we need our workshops to follow suit and help React devs onboard.

Steps:

Take a look at mini-1, which is our flagship workshop, and follow its lead to be rewritten in React. https://github.com/FrontEndFoxes/curriculum/blob/main/workshops/vue/minis/mini1.md

The new workshop can live in the /react folder

Preliminary tries have been made on this topic: https://github.com/FrontEndFoxes/curriculum/tree/main/workshops/react/minis

However I would like us to prioritize classes, and have callouts to hooks in boxes, so that the workshop is combined to handle teaching about classes AND hooks.

The first step would be to create a Code Sandbox for this mini and workback from there, explaining the code step b step, following the pattern of the Vue mini-1.

I'm very picky about our workshop texts so we will probably have some editing sessions :)

Note: we don't want to introduce a material design package such as Vuetify, but instead use CSS-grid like thus: https://codesandbox.io/s/epic-bird-t9dm6

The API can continue to be the dog-ceo API as we used in mini-1 for Vue

[MonicaFidalgo]

Hi @jlooper ! Can I be assigned to this task?