devmeetings-react-ts-fork
  • Devmeeting React + Typescript
  • Speed dating
  • Typescript
    • It's just JavaScript
    • Basic types
    • Typing objects
    • Typing functions
    • Modules
    • Generics
    • Tasks
  • Hello React
    • Quick look around
    • The first component
    • JSX
    • Tasks
  • Components & Props
    • Small components
    • Passing data to a component
    • Loops in JSX
    • Tasks
  • Stateful components
    • Handling events
    • Components with internal state
    • Talking to a parent component
    • Smart and dumb components
    • Before the break
    • Tasks
  • Side-effects and context
    • Side-effects
    • Prop drilling
    • Using context
    • Tasks
  • What's next
    • Styling
    • Learning component's lifecycle
    • State Management
Powered by GitBook
On this page
  • 1. Help us out and fill out the survey
  • 2. There can be only one expanded contact at a time
  • 3. Fetch a list of contacts from external source
  • 4. Create a dark theme for your app and a widget to change the theme
  • 5. Simulate querying and sorting on the server
  • 6. When filtering highlight the searched phrase in each contact
  • 7. It was all about Pokemon

Was this helpful?

  1. Side-effects and context

Tasks

PreviousUsing contextNextWhat's next

Last updated 5 years ago

Was this helpful?

1. Help us out and fill out the survey

It's anonymous

2. There can be only one expanded contact at a time

Hint the Context value can also contain functions.

3. Fetch a list of contacts from external source

Hint either use the randomuser.me service.

Hint use the fetch API to create the HTTP request for contacts.

Hint use the seed option to get the same response with each request.

4. Create a dark theme for your app and a widget to change the theme

Hint the widget can be as simple as a select dropdown.

5. Simulate querying and sorting on the server

Hint The API doesn't support querying or sorting, but this can be simulated on client side

Hint Create a requestContacts function that takes query and sort, and returns a list of contacts

Hint remember to cleanup pending requests if user keeps typing

Use the Pokemon TCG API and replace contacts with Pokemon

6. When filtering highlight the searched phrase in each contact

7. It was all about Pokemon

⭐
🔥
🔥
🔥