This is Neill's set of solutions in React to the various levels of the tv-show-dom-project challenge.
Each level is in its own branch in this repo, but is also deployed separately to netlify. (Right now, you're probably looking at the master branch.)
- level-100 source and level-100 deployed
- level-101 source and level-101 deployed
- level-200 source and level-200 deployed
- level-300 source and level-300 deployed
- level-350 source and level-350 deployed
- level-400 source and level-400 deployed
- level-500 source and level-500 deployed
Bonus oddities:
- p5js-loader source and p5js-loader deployed (Don't do animations this way.)
You can find Ahmad's alternative solution here.
Earlier levels are intentionally written without the use of common React idioms.
This is in order that they look as familiar as possible for CYF students meeting React for the first time.
Just because you see something done one way here doesn't mean that's the best or most common way to do it.
Examples:
- no destructuring of objects (e.g. to extract from props)
- no file-per-component breakdown - see the (invented) level-101 solution for this refactoring.
Also, at each level, the bare minimum has been done to meet the requirements. There is no finessing.
This is to limit the amount of code students have to read through to grasp what's going on.
The CSS is bad.
Also, there's no attempt here at responsive design, only for desktop.
You don't need to!
With the links above you don't need to run this locally, unless you really want to experiment with the code.
Instead, just view a level on netlify, and read its code on github, following the links above.
If you really want to run it locally, note that it was made with Create React App, so:
- clone this project
- check out the branch you're interested in
- open a terminal and navigate to the project directory
npm install- make a cup of tea while you wait...
npm start- open the code visual studio code to make edits, etc...