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:
Klik om uit te vouwen
- Intro
- React Intro
- React DOM
- Intro to JSX
- JSX expressions
- JSX II
- Components
- Props
- Project I
- Pure Functions
- JSX advanced
- Project II
- Array destructuring
- State with Hooks
- Changing state
- Closures
- Events
- Conditional state change
- Conditional rendering
- Project III
- Multiple states
- Immutability
- array immutability
- State with arrays
- Object immutability
- State with objects
- Basic forms
- Accessible forms
- Project IV
- Create react app
- Passing functions
- Lifting state up
- Refactoring components
- Project V
- React dev tools
- Functional state update
- Effect hook
- Effect with cleanup
- Effect dependencies
- Layout effect
- Project VI
- Effect & state
- Project VII
- Effect, state & events
- Effect performance
- Storing to localStorage
- Restoring from localStorage
- project VIII
- Fetch API refresher
- Using the Fetch API
- fetch data error
- Handling fetch errors
- Handling fetch loading
- Fetch & Events
- Fetch with async await
- Project IX
- Fetch POST
- Project X
- Building your own hooks
- Custom hooks with parameters
- Project XI
- Custom hooks with state
- Custom useFetch hook
- Refactoring to useFetch
- Project XII
- Refs
- Project XIII
- Context
- Update context
- Project XIV
- JSX Advanced II
- Misc concepts
- Deploying to Netlify
- Synthetic events
- Introduction to react router
- React router URL params
- Project XV
- React router nested routes
- React router advanced
- Project XVI
- Stripe checkout integration
- Final project
- Option: refactor SuperM to context
- Optional: SuperM Dark theme
- Optional: Intro to class components
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.
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.
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.
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.