πŸ§‘πŸΏβ€ prep

πŸ• Fetching data

Learning Objectives

Often when you create a React app, you will want to fetch data from an API and display it inside your components. How do we do this in React?

You might think that we could just fetch the data in the component like this, but unfortunately it won’t work. Try it out in the CodeSandbox below.

This is because React is synchronous, while fetch is asynchronous. If we look in the console, we’ll see that the imgSrc will always be null when we try to render it. React will try to render before fetch has had time to get the data from the API.

So how do we fix this? We need to use a React hook called useEffect.

🀹🏼 Synchronising with effects

Learning Objectives

React Learn

Complete πŸ§‘πŸΎβ€πŸŽ“ Synchronizing with Effects

Effect here means “side effect”. We use the useEffect() hook to run code that has side effects, like fetching data from an API. We use these sparingly, because they can make our code harder to reason about.

Check your understanding

Q: What is the purpose of the useEffect hook in React? A: It's used for handling side effects in components, like synchronising with external systems.
Q: What's the difference between effects and events in React? A: Effects handle side effects after a component renders, while events handle user interactions within a component.

Use Effects Sparingly

As you build and review your React Hotel apps, use You Probably Don’t Need an Effect to help you critique the code you read.

πŸ• 🎳 Fetching data with Effects

Learning Objectives

React Learn

Complete πŸ§‘πŸΎβ€πŸŽ“ Fetching data with Effects

πŸ“‹ Working with forms

Learning Objectives

Modern web applications often involve interacting with forms such as creating an account, adding a blog post or posting a comment. We need to declare form inputs and get the values entered by users to do something with it (like display them on a page or send them in a POST request). So, how do we do this in React?

A popular pattern for building forms and collect user data is the controlled component pattern. A pattern is a repeated solution to a problem that is useful in multiple similar cases. Let’s have a look at an example:

We’re controlling the value of the input by using the value from the reminder state. This means that we can only change the value by updating the state. It is done using the onChange attribute and the handleChange function, called every time the input value changes. This happens when a new character is added or removed.

If we didn’t call setReminder in the handleChange function, then the input’s value would never change. It would appear as if you couldn’t type in the input!

Finally, the value we keep in the reminder state is displayed on the screen as today’s reminder.

(We could have also transformed the string before we set it with setReminder, by calling toUpperCase() on the string.)

πŸ—‚οΈ Forms with multiple fields

Learning Objectives

Let’s have a look at a more complex example. Here we will build a form for users to create a personal account. Make sure to select CreateAccountForm.js in the menu to you’re looking at the right part of the code.

We now have three different inputs named username, email and password. There is a corresponding state variable and change handler function for each value.


🧼 Inlining event handlers

We could make our code a bit shorter if we inlined our event handlers:


🧺 Centralising event handlers

Sometimes we need to put all of our update logic in one function. Maybe we need to validate the user’s input before we set it in state.

We can use a single handleChange function, that is reused to keep track of changes for all of the form fields. To be able to tell which <input> is being updated, we check the event.target.name field. This corresponds to the name attribute on the <input> (e.g. <input name="username">).

Based on this value, we then decide which state to update:

πŸͺ€ Controlled Components

Learning Objectives

React Learn

Complete πŸ§‘πŸΎβ€πŸŽ“ Reacting to inputs with state

Check your understanding

Q: What is the difference between controlled and uncontrolled components in React? A: Controlled components are components that are controlled by React, whereas uncontrolled components are controlled by the DOM.
Q: What is the difference between declarative and imperative programming in React? A: Declarative programming in React involves describing the UI state, whereas imperative programming involves directly manipulating the DOM.

Prep WIP and Feedback πŸ”—

Learning Objectives

Introduction

Almost all professional development involves people with different skills working together to deliver the things their customers want: designers, developers, testers, and so on. How they manage their work together impacts how quickly and effectively they deliver. This exercise explores the importance of ideas like prioritising your backlog, limiting the number of tasks that the team – or parts of a team – does, and reassigning people to work on different types of work to improve workflow.

Notes: Work-in-progress, or WIP, refers to the amount of work in a process that has been started but not completely delivered. This can include both tasks that are actively being worked on, as well as tasks that are waiting in a queue somewhere for the next person to pick up.

Agile Game

🎯 Goal: Manage a simulated team to deliver as much value as possible to your customer in 4 sprints of 10 working days each. (50 minutes)

  1. Go to https://agilegame.octigo.pl/main and read the rules of the simulation.

  2. When ready to start, click on 2. Play Simulation.

    Remember that you can pause the game by toggling the Stop control. This is useful when you want to re-prioritize your backlog, move tasks between different subteams, or move team members between different subteams.

    You can also use the Speed control to slow down or speed up the simulation.

  3. After 40 simulated days, view your scores. What was the value of the work your team delivered? Consider these questions:

    • In what ways did you notice limiting the amount of work-in-progress impact the effectiveness of the subteams?
    • How did you prioritize the work your team started on?
    • Did you move people between subteams to help when one subteam was overloaded and if so, why did this help?
  4. Do you think you could improve your score? If you want to, you can click 4. Play again to try and improve your results

  5. Post one thing you found most challenging and one thing that was the most fun on your cohort’s CYF Slack channel.

Many development teams adopt this saying:

β€œStop starting and start finishing!”

Assign teams for Design-A-Snack game

🎯 Goal: Assign people to teams for the Design-A-Snack game (10 minutes)

  1. Only ONE person needs to do this prep. Assign people in your cohort into smaller teams of 3-5 people each. If nobody else has announced they are going to do this, send a message on your Slack channel saying you will do it.Β  They will surely treat you as the hero that you are and buy you doughnuts.
  2. Copy this template spreadsheet and fill in the names of you and your colleagues to create an even number of teams of 3-5 people each.Β  Decide who will be the facilitator who will tell people when to move on to the next part of the game.
  3. Post the spreadsheet on your Slack channel so everyone knows which team they are in.