🧑🏽‍🤝‍🧑🏽 day-plan

🔖
  1. Orientation
  2. Energiser
  3. Diversity and Inclusion
  4. Morning break
  5. Pokedex Workshop
  6. Lunch
  7. Study Group
  8. Code Review
  9. Afternoon break
  10. React Hotel: Working in teams
  11. Retro

✍🏽 Register

🎡 Morning orientation

Learning Objectives

info

🧭 During the week, create a post on Slack and get some people to take on the roles of facilitator and timekeeper. Nominate new people each time.

👣 Steps

If you haven’t done so already, choose someone (volunteer or trainee) to be the facilitator for this morning orientation block. Choose another to be the timekeeper.

🎙️ The Facilitator will:

  1. Assemble the entire group (all volunteers & all trainees) in a circle
  2. Briefly welcome everyone with an announcement, like this:

    💬 “Morning everyone, Welcome to MCB {REGION}, this week we are working on {MODULE} {SPRINT} and we’re currently working on {SUMMARISE THE TOPICS OF THE WEEK}”

  3. Ask any newcomers to introduce themselves to the group, and welcome them.
  4. Now check: is it the start of a new module? Is it sprint 1? If so, read out the success criteria for the new module.
  5. Next go through the morning day plan only (typically on the curriculum website) - and check the following things:

Facilitator Checklist

  • Check the number of volunteers you have for the morning
  • Check someone is leading each session
  • Describe how any new activities works for the group
  • Decide how best to allocate trainees and volunteers for a given block - most blocks will make this clear

⏰ The Timekeeper will:

  • Announce the start of an activity and how long it will take (check everyone is listening)
  • Manage any whole class timers that are used in an activity
  • Give people a 10-minute wrap-up warning before the end of an activity
  • Announce the end of an activity and what happens next

Energiser

Every session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some favourite games you can play if you are stuck.

  1. Traffic Jam: re-order the cars to unblock yourself
  2. Telephone: draw the words and write the pictures
  3. Popcorn show and tell: popcorn around the room and show one nearby object or something in your pocket or bag and explain what it means to you.

Diversity and Inclusion

Learning Objectives

Introduction

Statistics show that diverse teams are more innovative and perform better. The team members feel better belonging to their company and can more comfortably bring their ideas to the table. As a result, the products and services offered by these companies satisfies consumer needs better.

Inclusion in a group

🎯 Goal: Explain feelings associated with being included or excluded in a group in five sentences; describe at least two coping methods against social exclusion (20 minutes)

Discuss in small groups for 10 minutes. Reflect on your personal experiences of feeling included or excluded in a group. Try to remember how that experience made you feel and how you dealt with it. Did someone help you? Did you help someone be included in a group?

Volunteer for your group to share with rest of the class some coping methods against social exclusion your group has discussed. This should not take longer than 10 minutes, so make sure someone is keeping time.

Inclusive and accessible products

🎯 Goal: Prepare a brief for an inclusive and accessible tech product (30 minutes)

Diversity and inclusion in your team or working with stakeholders is important. However, it is also very important when building a product and making it easily usable by as wide a user community as possible.

Work in small groups. Imagine that your group will develop a new tech product. Consider the following questions:

  1. How can you make sure that the product is as inclusive and accessible as possible?

  2. What challenges can you experience when designing an inclusive and accessible product?

  3. What essential accessibility requirements should you take into consideration?

  4. What should you consider to ensure all team members feel included?

    Prepare a pitch for your product. Name a speaker for your group. They will share your pitch and explain how you will create an inclusive and accessible product. Groups will have a maximum of 2 minutes to present their pitch.

    Ask someone to be the timekeeper, so we don’t overrun our schedule.

Morning Break

A quick break of fifteen minutes so we can all concentrate on the next piece of work.

Pokedex Workshop 🔗

Pokedex 4

Stepping through the Pokedex app, we will learn about routing with React Router. This workshop takes at minimum 30 minutes.

Learning Objectives

Requirements

This workshop is to practice building a React app from scratch. By now, you will have built an application that displays information about Pokemon. It’s a staged workshop which can be run over multiple weeks. This stage focuses on creating multi-page apps with routing, which is covered in the prep work for this sprint. If you haven’t done the prep or the previous workshops, you will find this workshop hard to understand.

Routing

https://v5.reactrouter.com/web/example/basic

React Router provides some default React components that you can use to enable routing in your application. Examine the sandbox above. First, notice the top level <BrowserRouter> component which wraps everything else. Then, the <Routes> component which will choose one <Route> based on the current path. Each route is defined with the <Route> component which maps a path (defined with the path props) to a React component. You can pass an entire component including its properties to the element={...} prop. Finally, the Link component can be used to create links to navigate to different routes.

Pokedex Multi-Page App

Open the pokedex React application. Instead of displaying all your components in the same page, we will use React Router to define different pages in the pokedex application. Set a whole class timer for 20 minutes.

activity

  1. In the terminal, install React Router with npm install --save react-router-dom.
  2. Open src/App.js and import BrowserRouter, Route, Routes and Link components from React Router (hint: import { BrowserRouter, Routes, Route, Link } from "react-router-dom";)
  3. Wrap all the components in the render method in the <BrowserRouter> component.
  4. In the following, we will have CaughtPokemon and BestPokemon displayed with different route. But first, let’s create some links to navigate to different pages. Still in the <BrowserRouter> in the render method of src/App.js, use the Link component to create 2 links: one to navigate to the URL /best-pokemon and another one to navigate to /caught-pokemon (hint: <Link to="/best-pokemon">Best Pokemon</Link>).
  5. Open the pokedex in your browser and verify that you can see 2 links on the page. When clicking on each of these links, the URL in your browser address bar should change (but nothing will change on the screen yet!).
  6. Create a <Routes></Routes> component inside your <BrowserRouter>. This is where we will nest our <Route> components. It will display one of them at a time depending on the current URL path.
  7. Now let’s define the routes to map a path to a React component. First, create a route to map /best-pokemon to the BestPokemon component. Then, use another route to map /caught-pokemon to the CaughtPokemon component (Hint: move the component inside the element key, as in <Route element={...} path="/my-path" />).
  8. Open the pokedex in your browser and verify that when clicking on each link, BestPokemon and CaughtPokemon are rendered accordingly.

URL parameters

https://v5.reactrouter.com/web/example/url-params

In this exercise, we will create a new component to display a Pokemon information. The Pokemon name will be passed through the URL and displayed on the screen. Set a whole class timer for 10 minutes.

activity

  1. Create a new component PokemonInfo.
  2. In src/App.js, create a new route which maps the path /pokemon/:name to the previously created component PokemonInfo (hint: <Route path="/pokemon/:name" element={<PokemonInfo />} />).
  3. In the render method of PokemonInfo component, display the name of the Pokemon which is passed in the URL parameter (hint: use the hook useParams() and extract name from the object it returns ).
  4. Open the pokedex in your browser and try several URLs (such as http://localhost:3000/pokemon/Pikachu and see if the Pokemon name is displayed accordingly on your screen.

Stretch goal

If you have finished early:

Instead of passing the name of the Pokemon in the URL parameter, now pass an ID. The ID passed correspond to the ID of the Pokemon in the Poke API. For example, the ID 1 corresponds to the Pokemon Bulbasaur (https://pokeapi.co/api/v2/pokemon-species/1/). In the PokemonInfo component, use the Pokemon ID from the URL to load the corresponding Pokemon data from the Poke API and display the following Pokemon information on the screen: name, color.name, shape.name, base_happiness and capture_rate.

Acceptance Criteria

  • Fetches and displays a Pokemon’s moves
  • Updates moves when a new Pokemon is selected
  • Renders a user-entered city name
  • Allows user to enter a caught Pokemon name

Note: inspiration for this workshop came from Kent Dodd’s Beginner React course

Lunch

Take your lunch break and be back in an hour!

Study Group

Learning Objectives

What are we doing now?

You’re going to use this time to work through coursework. Your cohort will collectively self-organise to work through the coursework together in your own way. Sort yourselves into groups that work for you.

Use this time wisely

You will have study time in almost every class day. Don’t waste it. Use it to:

  • work through the coursework
  • ask questions and get unblocked
  • give and receive code review
  • work on your portfolio
  • develop your own projects

🛎️ 0 PRs available. Open some pull requests! 🔗

Afternoon Break

Please feel comfortable and welcome to pray at this time if this is part of your religion.

If you are breastfeeding and would like a private space, please let us know.

Team Project

Learning Objectives

In this module you are working in a team to build a React app. (You should have created your group already.)

Take this opportunity to work with your team on your React app. You can use this time to work on your app, to discuss your app with your team, ask questions and get help with blockers.

You can use any study group time to work on your product.

Retro: Start / Stop / Continue

  activity</span>

A retro is a chance to reflect. You can do this on a FigJam (make sure someone makes a copy of the template before you start) or on sticky notes on a wall.

  1. Set a timer for 5 minutes. There’s one on the FigJam too.
  2. Write down as many things as you can think of that you’d like to start, stop, and continue doing next sprint.
  3. Write one point per note and keep it short.
  4. When the timer goes off, one person should set a timer for 1 minute and group the notes into themes.
  5. Next, set a timer for 2 minutes and all vote on the most important themes by adding a dot or a +1 to the note.
  6. Finally, set a timer for 8 minutes and all discuss the top three themes.