Fullstack 2022/3 – React module

Full Stack Course - 14.11.2022

✏️ Homework

• 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 from code/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 some props 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 simple onClick handlers. Please also try to introduce a first state variable using the useState() 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 a router library (e.g. router or react-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 at localhost:3000/pokemon/26 or localhost: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).

📄 Docs

• Lesson Summary

• Handout

• Outline

🤔 Questions?

Use the Slack channel #fullstack-2022-3

To join Slack just click on this link