⇦ Back

WDX-180

Web Development X

Week 23 | React JS

Week 23 - Day 1 | React Hooks: useState, useRef & useEffect

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: useState Hook
Part 2: useRef & useEffect Hooks

You can find the lecture code here

Remember, the code is a React app created using vite.

Tips:
- Temporarily disable ESLint: just at a comment at the top of the file: /* eslint-disable */

References & Resources:

Hooks
- React Hooks Lifecycle
  - Another view of the Component lifecycle
- A family of built-in functions in React that:
  - are prefixed with “use”: useState, useRef, useEffect
  - should ONLY be used inside Component functions
  - should NOT be conditionally executed
JavaScript:
- Highly recommended: https://github.com/getify/You-Dont-Know-JS/blob/1st-ed/README.md
  - I don’t believe “Async and Performance” and “ES6 and Beyond” are relevant today as they are a bit outdated these days, so you can skip them.
  - You can read the 2nd edition of “Scopes & Closures” since it’s ready and wait for the 2nd edition of “Sync & Async” and “ES.Next & Beyond”
- In order to master JS you should definitely master the following concepts:
  - this
  - anything asynchronous
  - The object prototype
- Check out: https://learn.js.org/
  - Feel free to comment and open a PR or suggest:
    - https://github.com/in-tech-gration/LearnJavascript
ReacTree
Error Lens VSCode Extension
React Rule: useState creates a unique state value for each Component instance
React Rule: Try to avoid mixing native DOM API and React
- We reach out to the Refs when there’s no other way of doing something with the DOM.
- We use useRef to make use of a vanilla JS library that needs direct access to the DOM (e.g. D3, Google Maps, etc.)
State
- If you need a value that depends or is “derived” from a state variable, you probably don’t need another state variable for that. Just try with a simple local variable.

Exercises

Try to turn the App.jsx into a shopping cart
- Idea: update shopping cart with number of items added
- Idea: Update the total price of the shopping cart
Study: useEffect
Study: Render & Commit: https://react.dev/learn/render-and-commit
Ideas: refactor TrafficLight app using useRef and useEffect

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/week23/progress/progress.draft.w23.d01.csv

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

Week 23 - Day 2 | More about useState & useEffect

Schedule

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

Study Plan

In the last lecture, you were introduced to the useState, useRef and useEffect hooks.

Today, we recommend that you study the following material to understand more about how these hooks work and how to avoid common beginner mistakes as well as taking a peek behind the algorithm that checks whether the state has changed in order to re-render a Component.

Grab a hot cup of coffee ☕️ (or tea), remove all distractions, and dive into the following resources:

Enjoy and don’t forget to share your questions and comments.

Week 23 - Day 3 | useEffect, Fetch API & Context API

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: useEffect & Fetch API
Part 2: Context API

You can find the lecture code here

Lecture Notes:

Context API can wrap any kind of JSX content, …but, can only be used by Components (via the useContext hook).
Tips
- Try to limit the scope of your Context Provider to avoid unnecessary re-renders.
Questions
- Why instead of using useRef to hold the value of a variable during re-renders, not declaring a variable outside of the Component?
  - The best thing you can do is try things out!
  - Make sure to try the experiment with multiple instances of the same Component: <Button /><Button />...
- Why instead of Global state, e.g. useContext or Redux not use localStorage?
  - Same as above: try it! You’ll learn a lot from this experiments.

References & Resources:

REST Countries JSON API
Fetching Libraries
State Rule: NEVER update the state value directly.
- Use the state setter and ALWAYS return a NEW value
  - DON’T: prevState.push(42)
  - DO: […prevState, 42] or prevState.concat(42)
React DevTools Extension
CodeGrepper Extension for the Browser
FakeStore API
JSON Formatter Extension
Get GitHub profile through JSON API:
- https://api.github.com/users/<GitHub Username>
useEffect callback rules:
- These useEffect callbacks are sensitive to their own Component’s re-renders (DOM Update means the Component that contains the useEffect)
- useEffect( function runsAfterEveryDOMUpdate(){} )
- useEffect( function runsOnceAfterFirstDOMUpdate(){},[] )
- useEffect( function runsAfterInitialDOMUpdateAndWhenDependenciesChange(){},[stateA, propCounterB, stateB] )

Exercises

Clean up the demo App.jsx files and split your Components and Context into different files.
Add the functionality to remove a product as well
Advanced: try to update a product

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

Week 23 - Day 4 | ReactCommerce Challenge

Schedule

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

Study Plan

Go straight to the Exercises Section and start the coding challenge!

Exercises

The ReactCommerce Coding Challenge

You have applied for a React developer job at a tech company. The lead Frontend developer has sent you the following challenge to complete today in order to get hired.

Good luck!

First things first…

Give a “heart” ❤️ to the original Codepen

Instructions

Your task is to convert this HTML/CSS page into a functional React app.

Here is an online demo of the app.

Here are the tasks:

1. Split the web page into the following React Components:
- <Header />
  - Contains the <Logo />, <NavMenu /> and top-right <HamburgerMenu /> which contains the products bubble (showing 5 currently)
- <ProductsHeader />: contains the <Results /> Component which displays “BAGS” and the number of products found (6 results). The number 6 should be dynamic, based on the number of Products (length of some array?) and not a hardcoded string as it is now. It also contains a <Close /> Component (the X)
- A loop that displays 6 <Product /> Components.
- Each Component should be placed in its own folder along with a .css file that contains the relevant CSS styling.
1. When you click on the heart of each <Product /> Component, the heart icon should toggle between the black and white version based on whether the product has been liked or not.
1. When you click on the shopping cart icon of each product, the bubble at the top right should update (increment when clicked once, decrement when clicked again and so forth). When the selected product is in the shopping cart, the icon should be black or golden otherwise.
1. The data for each product should come from a JSON file. You should use the Fetch API inside a useEffect hook to fetch the data. You can use the Fakestore API to get some fake product details and replace each Lorem ipsum.

Hints

Move the generic CSS styling into the index.css
Move the <link> inside the index.html
Use https://transform.tools/html-to-jsx or https://marketplace.visualstudio.com/items?itemName=riazxrazor.html-to-jsx to convert HTML int o JSX
The Product’s price, like status, description and image should be passed as Props from a parent Component. The initial products data should be stored in a JSON file locally that will be fetched using a useEffect hook during the initial mount of some parent component. The JSON should be placed inside the public folder, and named products.json.

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

Week 23 - Day 5 | Context API & useReducer

Schedule

Watch the lectures
Study the suggested material
Practice on the topics and share your questions

Study Plan

Your instructor will share the video lectures with you. Here are the topics covered:

Part 1: Handling Errors, Context API and useReducer (Part 1)
Part 2: Handling Errors, Context API and useReducer (Part 2)

You can find the lecture code here

Lecture Notes & Questions:

useEffect Rules: Your callback (side effect) function must NEVER BE async
Tips
- If you want to debug and x-ray your HTTP responses, you can temporarily switch to the response.text() method when using the Fetch API.

References & Resources:

useReducer
Nice experimental API: JSON placeholder

Exercises

Study and complete the exercises included within for the following React.dev doc pages:

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

WDX-180

Week 23 | React JS

Week 22 ⇦

⇨ Week 24

Week 23 - Day 1 | React Hooks: useState, useRef & useEffect

Schedule

Study Plan

Exercises

Week 23 - Day 2 | More about useState & useEffect

Schedule

Study Plan

Week 23 - Day 3 | useEffect, Fetch API & Context API

Schedule

Study Plan

Exercises

Week 23 - Day 4 | ReactCommerce Challenge

Schedule

Study Plan

Exercises

Week 23 - Day 5 | Context API & useReducer

Schedule

Study Plan

Exercises