React Tutorial Professionaliserings-punt

Melvin Idema - 500829682

Beoordelaar: Arthur van Schravendijk

Final Project: https://ikbenmel.vin/ & https://ikbenmel.vin/storybook-static

Dit repository is bedoeld als logboek voor de cursus https://react-tutorial.app. De cursus is opgedeeld in 85 hoofdstukken, met in totaal 16 projecten. Verdeeld als volgt:

Inhoudsopgave

Klik om uit te vouwen 1. Intro 2. React Intro 3. React DOM 4. Intro to JSX 5. JSX expressions 6. JSX II 7. Components 8. Props 9. [Project I](/0-project-i/README.md) 10. Pure Functions 11. JSX advanced 12. [Project II](/project-ii/README.md) 13. Array destructuring 14. State with Hooks 15. Changing state 16. Closures 17. Events 18. Conditional state change 19. Conditional rendering 20. [Project III](/project-iii/README.md) 21. Multiple states 22. Immutability 23. array immutability 24. State with arrays 25. Object immutability 26. State with objects 27. Basic forms 28. Accessible forms 29. [Project IV](/project-iv/README.md) 30. Create react app 31. Passing functions 32. Lifting state up 33. Refactoring components 34. [Project V](/react-tutorial-SRP/06-project-v/) 35. React dev tools 36. Functional state update 37. Effect hook 38. Effect with cleanup 39. Effect dependencies 40. Layout effect 41. [Project VI](/react-tutorial-SRP/07-project-vi/) 42. Effect & state 43. [Project VII](/react-tutorial-SRP/08-project-vii/) 44. Effect, state & events 45. Effect performance 46. Storing to localStorage 47. Restoring from localStorage 48. [project VIII](/react-tutorial-SRP/09-project-viii/) 49. Fetch API refresher 50. Using the Fetch API 51. fetch data error 52. Handling fetch errors 53. Handling fetch loading 54. Fetch & Events 55. Fetch with async await 56. [Project IX](/react-tutorial-SRP/10-project-ix/) 57. Fetch POST 58. [Project X](/react-tutorial-SRP/11-project-x/) 59. Building your own hooks 60. Custom hooks with parameters 61. [Project XI](/react-tutorial-SRP/12-project-xi/) 62. Custom hooks with state 63. Custom useFetch hook 64. Refactoring to useFetch 65. [Project XII](/react-tutorial-SRP/13-project-xii/) 66. Refs 67. [Project XIII](/react-tutorial-SRP/14-project-xiii/) 68. Context 69. Update context 70. [Project XIV](/react-tutorial-SRP/15-project-xiv/) 71. JSX Advanced II 72. Misc concepts 73. [Deploying to Netlify](/react-tutorial-SRP/15A-deployment-to-netlify/) 74. Synthetic events 75. Introduction to react router 76. React router URL params 77. [Project XV](/react-tutorial-SRP/16-project-xv/) 78. React router nested routes 79. React router advanced 80. [Project XVI](/react-tutorial-SRP/17-project-xvi/) 81. Stripe checkout integration 82. [Final project](/react-tutorial-SRP/18-final-project/) 83. Option: refactor SuperM to context 84. Optional: SuperM Dark theme 85. Optional: Intro to class components

Leerdoel

Ik wil voor 31 mei 2021 de Javascript library React kunnen toepassen op een real-world project en een portfolio item hebben door middel van het volgen van een cursus in React. Dit hou ik bij door praktische kleine deliverables die het geleerde in de praktijk brengen in een GIT-repository te plaatsen.

Aanpak & Deliverables

Aangezien de cursus draait om de tussentijdse projecten wil ik hier niet teveel van afwijken. Anders kan ik de cursus niet meer normaal volgen. De cursus draait namelijk om het bouwen van een Supermarkt Applicatie van scratch. Waarin de code niet voorgeschreven is. Je bouwt verder op de vorige projecten om als conclusie een grote applicatie te hebben.

Daarom zal ik wel de opdracht volgen, maar hier mijn eigen draai aan geven. In plaats van een supermarkt applicatie, wordt het een webshop voor een bakker met Stripe Checkout Integratie.

Reflectie

React is een fantastische library die de uitdagingen van de Web 2.0 verfijnd kan oplossen. Haar atomitische component gebaseerde concepten zijn een verademing voor iemand die van voornamelijk monolytisch programmeren afkomt. Zoals een collega heel mooi zei: “React stelt je in staat om verder te kijken dan de basis. Door haar efficientie kun je je meer focussen op de gebruikerservaring.”.

Wel vind ik het jammer dat voor dit component gebaseerd conceptdenken je voor nu nog bij frameworks en libraries moet zijn. En dat vrijwel je hele website, in het geval van een Single Page Application, in Javascript geschreven wordt. Met Next.JS en Styled Components wordt het hier niet beter op.

Ik voorzie een toekomst waarin volledige websites server-side gerenderd worden met Javascript en we vrijwel geen vanilla HTML en vanilla CSS meer aanraken. Met haar nodige uitdagingen voor toegankelijkheid.

Randtekeningen

Arthur en ik hebben overlegd over het beschrijven van de opdrachten. Het leek hem nuttiger om de opdrachten in eigen woorden te beschrijven, maar was niet noodzakelijk voor het SRP. Voor de volledigheid van de documentatie heb ik daarom gekozen om de opdrachtbeschrijvingen letterlijk te kopiëren. Hierdoor heeft de lezer een beter beeld bij de zelfstandigheid van de cursus.