Learning Objectives

Introduce and welcome new volunteers
Nominate a timekeeper
Check the morning day plan and group structures

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:

Assemble the entire group (all volunteers & all trainees) in a circle
Briefly welcome everyone with an announcement, like this:
💬 “Morning everyone, Welcome to CYF {REGION}, this week we are working on {MODULE} {SPRINT} and we’re currently working on {SUMMARISE THE TOPICS OF THE WEEK}”
Ask any newcomers to introduce themselves to the group, and welcome them.
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.
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

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.

Traffic Jam: re-order the cars to unblock yourself
Telephone: draw the words and write the pictures
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.

Learning Objectives

Identify 2 coping methods against social exclusion
Prepare a brief for an inclusive and accessible tech product

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:

How can you make sure that the product is as inclusive and accessible as possible?
What challenges can you experience when designing an inclusive and accessible product?
What essential accessibility requirements should you take into consideration?
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.

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

Pokedex 4

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

Learning Objectives

Fetch data from an API and render it
Update state on input changes
Conditionally render UI based on state
Control form inputs with state

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

In the terminal, install React Router with npm install --save react-router-dom.
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";)
Wrap all the components in the render method in the <BrowserRouter> component.
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>).
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!).
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.
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" />).
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

Create a new component PokemonInfo.
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 />} />).
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 ).
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

Every Saturday we cook and eat together. We share our food and our stories. We learn about each other and the world. We build community.

This is everyone’s responsibility, so help with what is needed to make this happen, for example, organising the food, setting up the table, washing up, tidying up, etc. You can do something different every week. You don’t need to be constantly responsible for the same task.

Learning Objectives

Resolve blockers in your coursework
Express and resolve problems effectively by writing tickets and asking questions
Give and receive code review
Develop your personal portfolio
Pair programme
Evaluate your progress with peers and mentors

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

🛎️ Code waiting for review 🔗

Below are trainee coursework Pull Requests that need to be reviewed by volunteers.

WM5 | LAURA_SANTIAGO | MODULE-REACT | FROM SCRATCH | WEEK 3 🔗

Learners, PR Template

Self checklist

I have committed my files one by one, on purpose, and for a reason
I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
I have tested my changes
My changes follow the style guide
My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review

WM5 | LAURA SANTIAGO| MODULE_REACT | HIGH_SCORES_TABLE | LEVEL 1 & 2 🔗

Learners, PR Template

Self checklist

I have committed my files one by one, on purpose, and for a reason
I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
I have tested my changes
My changes follow the style guide
My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review

Bump vite from 5.0.10 to 5.0.13 in /high-score-tables 🔗

Bumps vite from 5.0.10 to 5.0.13.

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.

Start a review

WM5 | AISHA_ATHMAN_LALI | MODULE_REACT | HIGH_SCORES_TABLE | LEVEL 1 & 2 🔗

Self checklist

I have committed my files one by one, on purpose, and for a reason
I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
I have tested my changes
My changes follow the style guide
My changes meet the requirements of this task

This is a PR for the High-Scores Table challenge. I have completed level one where I have displayed the given data in tables as requested in the instructions

Questions

I am still struggling with the table. Is there a better way to go about it?

Start a review

WM5 | ADNIYA YOUSAF | FROM SCRATCH | WEEK 3 🔗

Self checklist

I have committed my files one by one, on purpose, and for a reason
I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
I have tested my changes
My changes follow the style guide
My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review

See more pull requests

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.

Learning Objectives

Work in a team to build a React app

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.

🛎️ Code waiting for review 🔗

Below are trainee coursework Pull Requests that need to be reviewed by volunteers.

Bump ws from 8.15.1 to 8.17.1 🔗

Bumps ws from 8.15.1 to 8.17.1.

if (++count === 2000) break; }

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.

Start a review

Bump vite from 5.0.12 to 5.0.13 🔗

Bumps vite from 5.0.12 to 5.0.13.

Dependabot will resolve any conflicts with this PR as long as you don’t alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

@dependabot rebase will rebase this PR
@dependabot recreate will recreate this PR, overwriting any edits that have been made to it
@dependabot merge will merge this PR after your CI passes on it
@dependabot squash and merge will squash and merge this PR after your CI passes on it
@dependabot cancel merge will cancel a previously requested merge and block automerging
@dependabot reopen will reopen this PR if it is closed
@dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
@dependabot show <dependency name> ignore conditions will show all of the ignore conditions of the specified dependency
@dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
@dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself) You can disable automated security fix PRs for this repo from the Security Alerts page.

Start a review

Featurebookingstate 🔗

Learners, PR Template

Self checklist

I have committed my files one by one, on purpose, and for a reason
I have titled my PR with COHORT_NAME | FIRST_NAME LAST_NAME | REPO_NAME | WEEK
I have tested my changes
My changes follow the style guide
My changes meet the requirements of this task

Changelist

Briefly explain your PR.

Questions

Ask any questions you have for your reviewer.

Start a review

See more pull requests

Link to the coursework

https://curriculum.codeyourfuture.io/react/success/

Why are we doing this?

🔑 The most important thing is that you are secure in your understanding.

At the end of the course, we will expect you to build novel applications using your understanding. If you cannot build things, we cannot put you forward for jobs. It is in your personal interest to make sure you have properly understood this module.

To progress to the next module you need to meet the success criteria for this module. How will you as a cohort meet the module success criteria? Discuss it in your class channel and make a plan together.

🧑🏿‍🎤 good strategies

asking volunteers to review your code
helping each other with coursework blockers
arranging midweek study sessions
using Saturday time to review code and cohort tracker

🙅🏿 bad strategies

opening empty PRs
copying and pasting
breaking the Trainee Agreement
mistaking the measure for the target

Maximum time in hours

.5

How to get help

Discuss with your cohort. Support each other.

How to submit

In week 4 of your module you will need a representative to report to the organisation. Here’s your template, fill in your details and delete as appropriate:

📈 Cohort Progress Report from @cohort-name to @programme-team

criterion
criterion
criterion
criterion

✅ We are progressing to the next module. ⛔ We are taking a consolidation week to meet our targets.

🎯 Topic Code Review
🎯 Topic Communication
🎯 Topic Delivery
🎯 Topic Requirements
🎯 Topic Teamwork
🎯 Topic Testing
🎯 Topic Time Management
🏕 Priority Mandatory
🦔 Size Tiny
📅 React
📅 Week 3
📅 Week 4

  activity</span>