βπ½ 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.
Problem Solving
π€π½ FeedbackLearning Objectives
Preparation
Introduction
IDEA model to solve problems
π― Goal: Learn how to use the IDEA model to solve problems. (60 minutes)
IDEA is a simple yet effective four-step problem-solving process to identify the problem, develop solutions, execute a plan and then assess your results.
I: Identify the problem
D: develop solutions
E: execute your plan
A: assess the extent to which the plan resolved the problem
ο»ΏForm groups of 4 or 5 people, with different people. Read the following problem and follow the steps below.
βOur oceans are full of plastic waste. A lot of them are eaten by fish. This causes uncertain effects on our health. According to The Economist newspaper, by 2050, the oceans could contain more plastic than fish, measured in weight. So: How can we reduce the plastic waste in our oceans today?β
Identify and understand the problem you are trying to solve. Is the oceans being polluted the symptom or consequence? What is the root cause? Ask βWhy?β as often as necessary until you get to the bottom of the issue.
Brainstorm to come up with a few possible solutions. Determine the Pros and Cons for each of them until everyone agrees on which one would be the most appropriate. Once you have determined the solution, come up with goals that we can execute and will help us solve the problem.
Discuss how the goals you set in the previous step can be executed. If one of your goals was to remove 10% of plastic waste in our oceans in 1 year, you must explain how you will accomplish this goal.
The final step is to assess if the solution addresses the problem. We wonβt be able to solve the problem in 30 minutes, but instead, identify the ways you could monitor and assess progress on solving the problem on an ongoing basis.
Morning Break
A quick break of fifteen minutes so we can all concentrate on the next piece of work.
Pokedex Workshop π
Pokedex 2
Stepping through the Pokedex app, we will learn about events and interactivity.
Learning Objectives
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 events, which are covered in the prep work for this sprint. If you haven’t done the prep or the previous workshop, you will find this workshop hard to understand.
Handling events
In this exercise we will extend our Logo
component to log to the console when clicking on the image. Split into your React groups. Set a whole class timer for 10 minutes.
Exercise 1
- Open your
pokedex
React application and open theLogo.js
file. - Add a function named
logWhenClicked
within theLogo
component. - In the
logWhenClicked
function,console.log
a message (it doesn’t matter what the message is). - Add an
onClick
handler to the<img>
that will calllogWhenClicked
. (Hint: look at theClickLogger
component above). - In your web browser, try clicking on the logo image. What do you see in the JavaScript console?
- Discuss what would happen if you changed your code to
onClick={logWhenClicked()}
. Can you explain why?
Passing functions as props
In this exercise, we’ll move the logWhenClicked
function in the Logo
component 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 as before. Set a whole class timer for 10 minutes.
Exercise 2
- Open the
pokedex
React application and open theLogo.js
file. - Copy and paste the
logWhenClicked
function from theLogo
component to theApp
component. - Pass the
logWhenClicked
function reference as a prop to theLogo
component. (Hint: look at theClickLoggerApp
component above for an example). - In the
Logo
component change theonClick
prop so that it passesprops.handleClick
. (Hint: look at theFancyButton
component above for an example). | - Discuss what you think will happen when you click the logo image now. Predict and then test. Can you explain why?
useState
In this exercise, we’ll add a button to the CaughtPokemon
component which adds one to the number of Pokemon you have caught. Set a whole class timer for 20 minutes.
Exercise 3
- Open the
pokedex
React application and open theCaughtPokemon.js
file. - Create a new state variable with
useState
. It should be namedcaught
and be initialised to0
- Within the JSX, there should be a “hard-coded” number 0. Replace it with your new
caught
state. - Add a button to the component with an
onClick
handler that calls a function calledcatchPokemon
. - Create the
catchPokemon
function and have it update thecaught
state so that it is increased by 1 on each click. Click here if you are stuck.You will need to call the set state function (the 2nd item in theuseState
array) withcaught + 1
. - Write down the things that will happen when you click the button. Compare your list with your group and discuss.
Showing a list of Pokemon
In this exercise, we’ll change the CaughtPokemon
component to show a list of Pokemon that we have caught instead of a number. Set a whole class timer for 15 minutes.
Exercise 4
- Open the
pokedex
React application and open theCaughtPokemon.js
file. - Change the
useState
to be initialised to an empty array ([]
) - There will now be a bug in your app! We don’t see how many Pokemon we have caught. Discuss with another trainee what you think the problem is.
- Change the JSX to instead render
caught.length
. Does this fix the bug? - Let’s now show the names of the Pokemon we have caught. Render a
<ul>
element within the component. Then use themap
method to loop through each item in thecaught
array and render it in an<li>
element. - Change the
catchPokemon
function to add a new Pokemon (it doesn’t matter which one) onto thecaught
array. (Hint: use theconcat
method.)
(STRETCH GOAL) Generate a random Pokemon each time you click the button Hint insideThis StackOverflow post may be helpful.
Acceptance Criteria
- The logo click handler is passed from
App
as a prop function CaughtPokemon
tracks a caught state variable withuseState
- Clicking catch adds a Pokemon name to the caught array
- Caught Pokemon names are rendered in a list
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.
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.
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.
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.
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>