- Prep exercises
- Optional: Test Exercises
- Code alongs
- PROJECT: Ecommerce Shop III
- 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.
Possible Q&A exercises are exercises that you can nominate to discuss with the Q&A mentor during the session on Sunday. Have a go at these and see which one you find difficult, then you can reply to the thread in your cohort channel with a link to the exercise you want to do. Even if the exercise does not get handled in the Q&A session these exercises are good ways to get ideas of what to build to keep practicing.
If you want to nominate a different exercise you found online then feel free to do so! We may even add that one to the list for the next class to use and attribute it to you ;).
Inside of your React fork, go to the folder week3. Inside of that folder, navigate to /possible-qa-exercises. For each exercise, you will find a separate folder. The README explains what needs to be done. Go through them to practice concepts that you have learned about!
This week includes testing exercises in the 2-react-testing-library-exercises folder. There are 6 different scenarios in there, you can only nominate one of them as doing all will take too much time.
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.
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.
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!
There is also a great website called frontendeval that gives a nice list of challenges that may come up in frontend technical assignments. You will have a leg up if you have already solved these problems beforehand. Every challenge also has solutions from others so you can compare yours and maybe learn something from other people!
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 assignment that needs to be submitted is the following:
- Project: Ecommerce Shop III
Deadline Tuesday 23.59 CET