- Monday, 14.11.2022:
Split up your existing "Travel Blog" application into simple React components. You shouldn't care about styling or functionality right now. Just think about the structure of your files, and where it makes sense to create new components. - Wednesday, 16.11.2022:
Either take your own code from the "travel blog" or alternatively take the code fromcode/lesson02/component-template/index.html
and move it into a new React app. Then split it up into sensible components (more than 3). Finally, add someprops
to your components so we can change the dynamic parts of your page (something like a counter value, or a travel location spot) from the outside. - Friday, 18.11.2022:
Use your code from the previous homework and enrich it with all the stuff that we learned, where you see fit. Explicitly this means you should be using Object destructuring in Component props, Conditional rendering with&&
,||
or?
and Attaching simpleonClick
handlers. Please also try to introduce a first state variable using theuseState()
hook and pass it on to some components. - Monday, 21.11.2022:
Create a new React app that renders little Profile cards for users. Add a form to your app, that has inputs for first name, last name, age and location. When a user fills the form and clicks on a button (or presses the enter key), the form should be emptied and a "Profile card" should be created and appear somewhere on the page. - Wednesday, 23.11.2022:
Modify the last app/component with the profile cards, to show dynamic data that you got from an external API (e.g. PokeAPI or any other API). Try to show more than one item, to get some practice with.map()
. - Friday, 25.11.2022:
Modify the last app/component with the profile cards to use arouter
library (e.g.router
orreact-router
). Create a route that renders a dynamic profile card depending on a dynamic route parameter (e.g. a Pokemon ID or name or weather location). So, when you open your app atlocalhost:3000/pokemon/26
orlocalhost:3000/weather/london
you should see the appropriate card/information. - Monday, 28.11.2022:
Modify the last app/component with the profile cards to use either CSS Modules or Styled Components to style your profile card (or even more parts of the App).
Use the Slack channel #fullstack-2022-3
To join Slack just click on this link