- Prep exercises
- Code alongs
- PROJECT: Ecommerce Shop III
- Optional: Test Exercises
- Optional: Challenges
Prep exercises are exercises that you should work on before the session on Sunday. These are a little more difficult or show an important concept and as such are a great exercise to talk about with your mentor. Have a solution ready by Sunday as you may be asked to show what you did.
Inside your React
fork, go to the folder week3
. Inside of that folder, navigate to /prep-exercises
. For each exercise, you will find a separate folder. The README
explains what needs to be done. There will also be some questions at the bottom to think about. Go through them before the session on Sunday as it will be covered then.
Create a new GitHub repository for each of these projects.
In the following tutorial you'll learn how to build an Expense Tracker
. You'll do so using React Hooks, but also using the Context API!
Happy learning!
In this code along you'll learn how to make a cool Video Player! You'll do so using various packages, among those are styled-components and react-router-dom.
The first is a third party library that'll make writing CSS rules easier in React applications. And it's also starting to be used in more and more real life applications! The second is the most used package for handling client-side routing.
Enjoy!
Let's continue building on our application! This week you'll use all the new tricks you learned to finish up the ecommerce shop by adding client-side routing, a context to store the user's favourite items and finally clean up some duplicate code by building our own custom hook!
Have a look at the project/README.md file to know what to do this week.
To practice your react-testing-library
skills we have some extra small exercises that isolate testing all of the different things that you have learned the past weeks! In the test-exercises
folder you will find a react application with some test files. The README.md
that explains what the idea is.
If you are feeling up for an extra challenge you can try adding tests to your project! If you are struggling with the complexity of the tests you may need to split your components a bit. Note: this is an optional extra challenge and is not required.
Remember that our friends over at CodeYourFuture have provided a repository with different ideas for challenges to build. Have a look at the README.md
in each folder to see what the challenge is and now you can also do ones that require you to create multiple pages!
After you've finished your list it's time to show us what you got! Upload all your files to a forked repository (a copy from the original, which in this case is the React repository) using GIT.
If you need a refresher, take a look at the following guide to see how it's done.
The homework that needs to be submitted is the following:
- Project: Ecommerce Shop III
Deadline Tuesday 23.59 CET