codex-lv3-may-2025

Plan for the day

Day 1

• What is React?
• How to get started?
  • https://react.dev/learn/creating-a-react-app
  • slides
  • npm create vite@latest
• The basics
  • JSX
  • Components
    • Functional Components
    • JSX Elements vs HTML Elements
  • “Controlling complexity is the essence of computer programming.” — Brian Kernighan
• Learn React
  • https://react.dev/learn
    • Creating and Nesting Components
    • Writing markup with JSX
    • Adding styles
    • Displaying data
  • Components
    • https://react.dev/learn/your-first-component
• TODO: Practice Resume

Day 2

Reference: https://react.dev/learn

• Components
• JSX data with { }
• Props
• children prop
• Example Code
• TODO: More Practice Resume

Day 3

• Reference 0: https://studio.code.org/courses/course1/units/1/lessons/14/levels/1
• Reference 1: https://studio.code.org/courses/csp-2025/units/6/lessons/5/levels/1
• Reference 2: https://studio.code.org/courses/csp-2025/units/6/lessons/6/levels/1
• Reference 3: https://studio.code.org/courses/csp-2025/units/6/lessons/7/levels/1
• Reference 4: https://studio.code.org/courses/csp-2025/units/6/lessons/8/levels/1
• For-loops: https://studio.code.org/docs/concepts/javascript/for-loops/

TODOs for Day 3

• TODO: Solve the Bee puzzles as a warmup to loops. Be sure to click on “Show Code” in each lesson to see what is going on under the hood. If you are curious about for loops, have a look at the explainer on code.org. We will see for-loops in the following lessons.
• TODO: Start with Loops Explore and answer the question. Don’t take too long on this!
• TODO: Move on to Loops Investigate. There is not much to do, but a lot to observe and investigate.
• TODO: Work on Loops Practice and get some good practice with Loops.
• TODO: Finally, work on Loops Make to create your own app with loops.
• Challenge: Have a look at this old lesson. Try and see how a loop might have helped. https://studio.code.org/courses/csd-2024/units/3/lessons/5/levels/8/sublevel/2

Loops are one of the basic building blocks of algorithms. Being able to use loops will unlock a whole new avenue of programming!

Loops Explanation

Loops Explanation Video

Loops Demo

Loops Demo Video

Day 4

TODOs

• Start work on Mini-Project Portfolio

Day 5

• Complete your Mini-Project

---

Week Summary

Assignments Overview

1. Day 1-2: Non-graded practice material
   • Day 1: React basics, JSX, components, Practice Resume
   • Day 2: Props, children prop, More Practice Resume
2. Day 3: Graded Code.org assignment
   • Code.org Loops Lessons 6-8 (Loops Investigate, Practice, and Make)
3. Day 4-5: Graded mini-project
   • Portfolio Mini-Project