πŸ§‘πŸ½β€πŸ€β€πŸ§‘πŸ½ day-plan

πŸ”–
  1. Orientation
  2. Energiser
  3. Problem Solving
  4. Morning break
  5. Pokedex Workshop
  6. Lunch
  7. Study Group
  8. Code Review
  9. Afternoon break
  10. React Hotel: Working in teams
  11. Code Review
  12. 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.

Problem Solving

Learning Objectives

Preparation

Do the prep.

Introduction

Problem-solving techniques serve as a template to solve a variety of problems of different nature and complexity.

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

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

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

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

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

activity

  1. Open your pokedex React application and open the Logo.js file.
  2. Add a function named logWhenClicked within the Logo component.
  3. In the logWhenClicked function, console.log a message (it doesn’t matter what the message is).
  4. Add an onClick handler to the <img> that will call logWhenClicked. (Hint: look at the ClickLogger component above).
  5. In your web browser, try clicking on the logo image. What do you see in the JavaScript console?
  6. 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.

activity

  1. Open the pokedex React application and open the Logo.js file.
  2. Copy and paste the logWhenClicked function from the Logo component to the App component.
  3. Pass the logWhenClicked function reference as a prop to the Logo component. (Hint: look at the ClickLoggerApp component above for an example).
  4. In the Logo component change the onClick prop so that it passes props.handleClick. (Hint: look at the FancyButton component above for an example). |
  5. 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.

activity

  1. Open the pokedex React application and open the CaughtPokemon.js file.
  2. Create a new state variable with useState. It should be named caught and be initialised to 0
  3. Within the JSX, there should be a “hard-coded” number 0. Replace it with your new caught state.
  4. Add a button to the component with an onClick handler that calls a function called catchPokemon.
  5. Create the catchPokemon function and have it update the caught 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 the useState array) with caught + 1.
  6. Write down the things that will happen when you click the button. Compare your list with your group and discuss.
Hint inside.The state will be updated to be the current state + 1. React is notified that our state has changed, so it re-renders. When rendering, the current state will be different and so React updates the DOM.

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.

activity

  1. Open the pokedex React application and open the CaughtPokemon.js file.
  2. Change the useState to be initialised to an empty array ([])
  3. 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.
  4. Change the JSX to instead render caught.length. Does this fix the bug?
  5. Let’s now show the names of the Pokemon we have caught. Render a <ul> element within the component. Then use the map method to loop through each item in the caught array and render it in an <li> element.
  6. Change the catchPokemon function to add a new Pokemon (it doesn’t matter which one) onto the caught array. (Hint: use the concat 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 with useState
  • 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

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.