- Practice the concepts
- Prep exercises
- Optional: Possible Q&A exercises
- Code along
- PROJECT: Ecommerce Shop I
- Optional: Challenges
Let's get started with some interactive exercises! Complete the exercises from the following resources:
- React challenge #1 (Displaying simple data)
- React challenge #2 (Loop over and display data)
- React challenge #3 (Using React state to update the DOM))
- React challenge #4 (Show an alert based on input)
- React challenge #5 (Adding calculator)
- React challenge #6 (DOM movement with events)
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 week1. 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.
If you are struggling with the prep exercises, try out some of the practice exercises, maybe they will give you some ideas!
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 week1. 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!
Create a new GitHub repository for this project.
Learning how to work with React is a fundamentally different approach to building a user interface. Therefore, we need to practice a lot!
In the following tutorial you'll learn how to build a Budget Calculator!
It might seem complicated at first, but don't worry. Aim for understanding the principle behind it to the best you can. If you ever feel in doubt: do a Google search or ask a question in Slack!
Enjoy!
During this module you'll be starting a project called Ecommerce Shop! Like in the Node.js module, each week you'll add to it until it becomes a fully-fledged application that has used all of the concepts you have learned.
Here's what you're eventually going to end up with: Ecommerce Shop Finished
Have a look at the project/README.md file to know what to do this week.
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 try to build it. It mentions the difficulty in the different README's, anything with easy should be doable at this point. But if not, leave it for next week and then try again.
Building many different small applications will get you the practice you need to do your final project in week 4, so in the next 3 weeks if you are done with the rest of the assignment, look back at the challenges and try to do as many as you can.
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. Then make a pull request to your teacher's forked repository.
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 I
Make sure you only commit the project files to the repository!
Deadline Tuesday 23.59 CET