🧑🏽‍🤝‍🧑🏽 day-plan

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

🎡 Morning orientation

Learning Objectives

Planning during the week

🧭 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 CYF {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 CYF session begins with an energiser. Usually there’s a rota showing who will lead the energiser. We have some CYF 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.

Resilience 🔗

Learning Objectives

Preparation

Trainees will work in pairs.

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:

  1. Tell your partner something positive that happened earlier today.
  2. Tell your partner something that you find challenging in your life.
  3. Tell your partner about things you do to relax and how much “downtime” you have.
  4. Describe a changing topic in the world around you that you could either ignore or pro-actively deal with.
  5. Identify an activity where you are currently stuck at a lower skill level but would need to try doing “a new thing badly” before you could move up a level. Discuss how you could deal with that.
  6. 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 🔗

Pokedex 1

Stepping through the Pokedex app, we will learn about React components, props, and state. This workshop takes at minimum 90 minutes.

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 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

  1. First off, head to the root of your pokedex repo and start the app using npm start.
  2. In the pokedex React app that you just created, open the src/App.js file.
  3. 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 the App component ourselves.
  4. Import the React variable from the React package.
  5. Create a function named App, which will be our component.
  6. Within the App function, return a <h1> element with the text “Welcome to the Pokedex”. What do you see in your web browser?
  7. Create a <div> element that wraps around the <h1> you just created.
  8. Below the <h1> element (but within the <div>), create an <img> element. Then make its src attribute equal to https://assets.pokemon.com/assets/cms2/img/pokedex/full/016.png. What do you expect to see in your web browser?
  9. 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

  1. In your pokedex React app, open the src/App.js file.
  2. Create a new function named Logo.
  3. Copy the <header> element and its contents and paste it into the Logo component.
  4. Replace the <header> element in the App component with the new Logo component.
  5. 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”).
  6. Render your new BestPokemon component below the Logo component within the App 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

  1. Using the pokedex React app that you created earlier, open the src/App.js file.
  2. Inside the Logo component create a new variable called appName and assign it to "[YOUR_NAME]'s Pokedex".
  3. 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?
  4. 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).
  5. Create a variable named date within the CaughtPokemon component, and assign it today’s date (hint: new Date().toLocaleDateString()). Finally, render the date variable after the text “Caught 0 Pokemon on”.
  6. Render the CaughtPokemon component within the App component (below BestPokemon).
  7. Within the BestPokemon component, create a variable named abilities and assign it to an array with some Pokemon abilities (e.g. ['Anticipation', 'Adaptability', 'Run-Away']).
  8. 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.
  9. Now use the .map() method on the abilities 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

  1. Open the pokedex React app that you created earlier.
  2. Create a new file within the src directory named Logo.js.
  3. Copy and paste the Logo component from App.js into Logo.js.
  4. Remember to add import React from 'react' at the top of Logo.js.
  5. Export the Logo component from Logo.js.
  6. Delete the old Logo component from App.js.
  7. Import the Logo component into App.js .
  8. Repeat this process with the BestPokemon and CaughtPokemon 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

  1. Using the pokedex React app that you created earlier, open the App.js file.
  2. Pass a prop appName="Pokedex" to the Logo component.
  3. Now open the Logo.js file.
  4. Delete the appName variable. What do you see in your web browser? Why?
  5. Change the Logo function to access the first argument and call it props. Use console.log to inspect the props variable.
  6. Change the usage of appName in the <h1> to be props.appName instead. Does this fix the problem? Why?
  7. Now open the BestPokemon.js file.
  8. Copy the abilities variable and then delete it from BestPokemon.js.
  9. Paste the abilities variable into App.js.
  10. Pass the abilities variable as a prop to BestPokemon from App.js.
  11. In the BestPokemon.js file replace the existing usage of abilities with the abilities prop. You should still see the Pokemon ability names in your web browser.
  12. (STRETCH GOAL) Repeat the process with the date variable in the CaughtPokemon.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 at CYF 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 | 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
NW6 | Pedro Eugenio | Eslint and Prop-types section 🔗

Changelist

Added “Eslint and Prop-types” section to the README.md to address issues where Eslint shows red marks below variables due to the demand for prop-types in React projects.

The added section provides clear instructions for resolving this issue by modifying the .eslintrc.cjs file in the project’s root folder. It instructs users to disable the ‘react/prop-types’ rule, thus eliminating the red marks.

Start a review
Bump vite from 5.0.10 to 5.0.12 in /high-score-tables 🔗

Bumps vite from 5.0.10 to 5.0.12.

Changelog

Sourced from vite's changelog.

5.0.12 (2024-01-19)

5.0.11 (2024-01-05)

Commits

Dependabot compatibility score

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.

Dependabot commands and options

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
See more 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.

Study Group

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.

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
NW6 | Orlando Morales | Feature add more pizzas - ReactProject | Week2 🔗

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

Retro: Start / Stop / Continue

Retro (20 minutes)

A retro is a chance to reflect on this past sprint. You can do this on a Jamboard (make sure someone clicks “Make a copy” before you start, and you work on that together) or on sticky notes on a wall.

  1. Set a timer for 5 minutes.
  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.