βπ½ Register
π‘ Morning orientation
Learning Objectives
Planning during the week
π£ 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
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.
- 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.
Resilience
π€π½ FeedbackLearning Objectives
Preparation
Introduction
Resilience is about bouncing back when things donβt go to plan. Life isnβt fair, and you wonβt always be successful. Things change. But you can learn to face these challenges.
- You can be proactive in taking action to deal with challenges.
- Look for positive opportunities arising from bad news.
- Stay in touch with people who can help you face challenges.
- Reserve downtime to recover the energy to keep going.
- β¦ and other strategies.
You are here
π― Goal: Think positive and find areas where you need to be resilient (20 minutes)
Work in pairs:
- Tell your partner something positive that happened earlier today.
- Tell your partner something that you find challenging in your life.
- Tell your partner about things you do to relax and how much βdowntimeβ you have.
- Describe a changing topic in the world around you that you could either ignore or pro-actively deal with.
- Identify an activity you were reluctant to do (or do again) because you might fail. What is the worst that could happen?
Resilience scenarios
π― Goal: Recognise opportunities in challenges (20 minutes)
Work in pairs. Consider each of the following scenarios. For each, discuss with your partner:
- Feelings you would have from the immediate situation.
- Positive opportunities arise from it.
- What you could do next.
- How your friends could help you deal with this.
Scenarios:
- You have been rejected from a job application when you thought you had an excellent chance.
- Your landlord told you to leave your home and find somewhere else.
- A relative who had been terminally ill for years and needed lots of care has died.
- Your manager thinks you are the only team member who can handle some tasks and assigns too much work to you.
- You are offered two jobs of your dreams, both at a surprisingly good salary.
Lessons Learned
π― Goal: Share your tips and speak in public (10 minutes)
- Work as a whole class.
- Share ideas and experiences on how to be resilient. Everybody should speak.
Morning Break
A quick break of fifteen minutes so we can all concentrate on the next piece of work.
Pokedex Workshop π
Learning Objectives
Pokedex 1
Stepping through the Pokedex app, we will learn about React components, props, and state. This workshop takes at minimum 90 minutes.
Requirements
This workshop is to practice building a React app from scratch. You will be building a Pokedex app that displays information about Pokemon. It’s a staged workshop which can be run over multiple weeks. This stage focuses on the basics of React components, props, and state, which are covered in the prep work for this sprint. If you haven’t done the prep, you’ve made an error in judgement. You will find this workshop hard to understand.
My first Component
In this exercise we replace the placeholder React app with our own. Set a whole class timer for 10 minutes.
Exercise 1
- First off, head to the root of your
pokedex
repo and start the app usingnpm start
. - In the
pokedex
React app that you just created, open thesrc/App.js
file. - Delete everything in the file except the line containing
export default App
. You should see an error in your terminal and in your web browser - don’t panic! We’re going to remake theApp
component ourselves. - Import the React variable from the React package.
- Create a function named
App
, which will be our component. - Within the
App
function, return a<h1>
element with the text “Welcome to the Pokedex”. What do you see in your web browser? - Create a
<div>
element that wraps around the<h1>
you just created. - Below the
<h1>
element (but within the<div>
), create an<img>
element. Then make itssrc
attribute equal tohttps://assets.pokemon.com/assets/cms2/img/pokedex/full/016.png
. What do you expect to see in your web browser? - Now create a
<header>
element to wrap both the<h1>
element and the<img>
element.
Breaking down the App component
In this exercise, we will split out a new Logo
component from the App
component. And then we’ll add a new BestPokemon
component. Set a whole class timer for 10 minutes.
Exercise 2
- In your
pokedex
React app, open thesrc/App.js
file. - Create a new function named
Logo
. - Copy the
<header>
element and its contents and paste it into theLogo
component. - Replace the
<header>
element in theApp
component with the newLogo
component. - Create a new component function named
BestPokemon
and return a<p>
element with some text saying which is your favorite Pokemon (e.g. “My favorite Pokemon is Squirtle”). - Render your new
BestPokemon
component below theLogo
component within theApp
component.
Composing components, rendering lists with keys
In this exercise, we’ll change the Logo
component to use a variable for the app name. Then we’ll add a new component CaughtPokemon
which displays today’s date. And finally we’ll make BestPokemon
show a list of abilities. Set a whole class timer for 20 minutes.
Exercise 3
- Using the
pokedex
React app that you created earlier, open thesrc/App.js
file. - Inside the
Logo
component create a new variable calledappName
and assign it to"[YOUR_NAME]'s Pokedex"
. - Now replace the hard-coded app name with
{appName}
. What do you see in your web browser? What would you do if you wanted to change the app name? - Create a new component named
CaughtPokemon
. Within this component return a<p>
tag with the text “Caught 0 Pokemon on” (we’re going to fill in today’s date in the next step). - Create a variable named
date
within theCaughtPokemon
component, and assign it today’s date (hint:new Date().toLocaleDateString()
). Finally, render thedate
variable after the text “Caught 0 Pokemon on”. - Render the
CaughtPokemon
component within theApp
component (belowBestPokemon
). - Within the
BestPokemon
component, create a variable namedabilities
and assign it to an array with some Pokemon abilities (e.g.['Anticipation', 'Adaptability', 'Run-Away']
). - Change the
BestPokemon
component to return a<div>
element with the existing<p>
element inside it. Then add a<ul>
element underneath the<p>
element. - Now use the
.map()
method on theabilities
variable to loop over each name and return a<li>
element for each within the<ul>
element.
You may have noticed that we are now seeing a red error message in the Dev Tools: Warning: Each child in a list should have a unique "key" prop.
. What did you learn about this in your prep work? How can you fix it?
Importing and exporting components
In this exercise, we’ll split the Pokedex app into separate files. It should still look the same in your browser as before. Set a whole class timer for 10 minutes.
Exercise 4
- Open the
pokedex
React app that you created earlier. - Create a new file within the
src
directory namedLogo.js
. - Copy and paste the
Logo
component fromApp.js
intoLogo.js
. - Remember to add
import React from 'react'
at the top ofLogo.js
. - Export the
Logo
component fromLogo.js
. - Delete the old
Logo
component fromApp.js
. - Import the
Logo
component intoApp.js
. - Repeat this process with the
BestPokemon
andCaughtPokemon
components. What do you think the files should be called?
Props
In this exercise, we’ll move the variables in Logo
, BestPokemon
and CaughtPokemon
to the App
component. Then we’ll make App
pass those variables as props to the sub-components. Your app should still look the same in your browser as before. Set a whole class timer for 15 minutes.
Exercise 5
- Using the
pokedex
React app that you created earlier, open theApp.js
file. - Pass a prop
appName="Pokedex"
to theLogo
component. - Now open the
Logo.js
file. - Delete the
appName
variable. What do you see in your web browser? Why? - Change the
Logo
function to access the first argument and call itprops
. Useconsole.log
to inspect theprops
variable. - Change the usage of
appName
in the<h1>
to beprops.appName
instead. Does this fix the problem? Why? - Now open the
BestPokemon.js
file. - Copy the
abilities
variable and then delete it fromBestPokemon.js
. - Paste the
abilities
variable intoApp.js
. - Pass the
abilities
variable as a prop toBestPokemon
fromApp.js
. - In the
BestPokemon.js
file replace the existing usage ofabilities
with theabilities
prop. You should still see the Pokemon ability names in your web browser. - (STRETCH GOAL) Repeat the process with the
date
variable in theCaughtPokemon.js
file.
Acceptance Criteria
- Components are created properly and render without errors
- The Logo, BestPokemon, and CaughtPokemon components are split into separate files
- Variables are moved from child components into App and passed back down as props
- Lists are rendered using .map() and have proper keys
Note: inspiration for this workshop came from Kent Dodd’s Beginner React course
Community Lunch
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.
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.
ποΈ 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 reviewWM5 | 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 reviewBump 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.
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 reviewWM5 | 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 reviewAfternoon 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.
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
ποΈ 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.
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.
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 reviewRetro: Start / Stop / Continue
Retro (20 minutes)</span>