⇦ Back

WDX-180

Web Development X


Week 24 | React JS

Week 23 ⇦

Updated: 26/3/2025

⇨ Week 25


Week 24 - Day 1 | React Study: useEffect

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

The plan for today and tomorrow is to study the following article by Dan Abramov*:

This is a long, lengthy article that goes into deep details about the useEffect Hook and the Components’ lifecycle.

It is highly recommended that you read the full article as it provides some very important concepts and rules that you must know if you want to master React. That’s why we split this task in two days.

Here are some of the main points covered in the the article:

  • How do I replicate componentDidMount** with useEffect?
  • How do I correctly fetch data inside useEffect? What is []?
  • Do I need to specify functions as effect dependencies or not?
  • Why do I sometimes get an infinite refetching loop?
  • Why do I sometimes get an old state or prop value inside my effect?

Make sure to open up all the Codesandbox demos provided in the article and study and experiment with the code.

*(Dan Abramov is a core contributor to React and the creator of Redux)

**(componentDidMount is a special lifecycle method used in Class Components that gets called when the component has been mounted. More about Class Components and componentDidMount here)


Week 24 - Day 2 | React Study: useEffect

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

The plan for today is to finish the study of the article by Dan Abramov*:


Week 24 - Day 3 | Coding Challenge: React Quiz

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Go straight to the Exercises section below and start on your final React challenge to complete the 2nd part of WDX180.

Exercises

Today and the rest of this week is all about practicing your React skills.

The main goal is to deliver a fully functional React quiz app by the end of the week and receive your digital certificates*.

You’ll find the requirements/specifications and some guidelines here:

https://in-tech-gration.github.io/WDX-180/curriculum/modules/javascript/frameworks/react/exercises/simple-quiz/

Good luck! 😎

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week24/progress/progress.draft.w24.d03.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.


Week 24 - Day 4 | Coding Challenge: React Quiz

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Continue working on the React Coding Challenge (Quiz) to complete the 2nd part of WDX180.

Exercises

The main goal is to deliver a fully functional React quiz app by the end of the week and receive your digital certificates*.

You’ll find the requirements/specifications and some guidelines here:

https://in-tech-gration.github.io/WDX-180/curriculum/modules/javascript/frameworks/react/exercises/simple-quiz/

Good luck! :sunglasses:

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week24/progress/progress.draft.w24.d04.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.


Week 24 - Day 5 | Coding Challenge: React Quiz

Schedule

  • Study the suggested material
  • Practice on the topics and share your questions

Study Plan

Continue working on the React Coding Challenge (Quiz) to complete the 2nd part of WDX180.

Exercises

The main goal is to deliver a fully functional React quiz app by the end of the week and receive your digital certificates*.

You’ll find the requirements/specifications and some guidelines here:

https://in-tech-gration.github.io/WDX-180/curriculum/modules/javascript/frameworks/react/exercises/simple-quiz/

Good luck! :sunglasses:

IMPORTANT: Make sure to complete all the tasks found in the daily Progress Sheet and update the sheet accordingly. Once you’ve updated the sheet, don’t forget to commit and push. The progress draft sheet for this day is: /user/week24/progress/progress.draft.w24.d05.csv

You should NEVER update the draft sheets directly, but rather work on a copy of them according to the instructions found here.


Weekly feedback: Hey, it’s really important for us to know how your experience with the course has been so far, so don’t forget to fill in and submit your mandatory feedback form before the day ends. Thanks you!



Project maintained by in-tech-gration Hosted on GitHub Pages — Theme by mattgraham