Add Week 4 Pair Programming README (closes #2653) - #2768
Conversation
naomiquinones
left a comment
naomiquinones
left a comment
There was a problem hiding this comment.
Thanks for this work. I made a few comments, some of which need @daaimah123's input.
| The mini project is here so React does not become the only tool you reach for. | ||
| Classes and DOM manipulation are plain JavaScript, and they stay useful whether or | ||
| not a framework is involved. |
There was a problem hiding this comment.
Flagging @daaimah123 on this as follow-up to Slack conversation. We should consider moving the Mini Project to the Week 3 folder since it uses plain JavaScript. If we keep it here, I suggest listing it as the first exercise rather than the last.
| 5. **Mini Project: OOP** (`mini-project-OOP`) is the change of pace. No React | ||
| here. You write an `Event` class that can add tickets with a price and a | ||
| ticket type, let someone search by the price they can afford, and then show a | ||
| list of events on an HTML page. |
There was a problem hiding this comment.
We may want to make this the first exercise in the group, rather than the last. Or maybe move it to Week 3.
| 3. Pass a function into a component as a prop and call it when a button is clicked. | ||
| 4. Send information from a child component back up to its parent. | ||
| 5. Hold a piece of changing information with `useState`. | ||
| 6. Write a JavaScript class with methods that store and filter data. |
There was a problem hiding this comment.
If this is describing the learning objective for the Mini Project-OOP exercise, this should be moved if the exercise is moved.
| 2. React Button Part 1 (`react-props`) | ||
| 3. React Button Part 2 (`passing_props_from_child_to_parent`) | ||
| 4. Button Component (`button-component`) | ||
| 5. Mini Project: OOP (`mini-project-OOP`) |
There was a problem hiding this comment.
Along with the other comments regarding this exercise, we may want to consider moving this to the beginning of the sequence or even to a prior week.
| **The vital concept this week is props.** Props are how a React component | ||
| receives information from the outside. Almost everything else this week is a | ||
| different angle on that one idea. | ||
|
|
There was a problem hiding this comment.
These two sections could be consolidated into the Sequence and Motivation or Learning Objectives sections, as the listed order in "What is in this folder" is the same as the Sequence. The last paragraph is redundant with the first paragraph in the Motivation section.
| A React component is just a function that returns some markup. A prop is an | ||
| argument you pass to that function. That is genuinely all it is. When you write | ||
| this: |
There was a problem hiding this comment.
It might be useful to add that "prop" is just short for "property".
| 1. These folders do not all start the same way. `react-props` and | ||
| `passing_props_from_child_to_parent` use Vite, so you run `npm install` and | ||
| then `npm run dev`. `hello-component` and `button-component` use | ||
| `react-scripts`, so you run `npm install` and then `npm start`. Check the | ||
| `package.json` if you are not sure which one you are in. |
There was a problem hiding this comment.
@daaimah123, do we want to update the exercises that use react-scripts to use Vite, or do we want to leave these as they are?
|
@Yosolita1978, after discussing with @daaimah123, we agreed that the Mini Project OOP can go first in the sequence rather than last. |
2 participants
📝 Description
Adds a summary README to
pair-programming/week-4/that orients learners to theweek's exercises, gives a suggested order, and explains how the React exercises
relate to each other. Continues the effort to organize the pair-programming
section.
🔂 Changes Made
pair-programming/week-4/README.md(new file only; no existing files changed or removed).(
react-props), React Button Part 2 (passing_props_from_child_to_parent),Button Component, and Mini Project: OOP.
a duplicated exercise, and explains the genuine overlap between
react-propsand
button-component.npm run dev) forreact-propsandpassing_props_from_child_to_parent,react-scripts(
npm start) forhello-componentandbutton-component.as a prop lets information travel back up.
making the point that array methods and classes are plain JavaScript and that
what changes is how the result reaches the screen.
⚙️ Related Issue
🍏 Type of Change
🎁 Acceptance Criteria
pair-programming/week-4/summarizing all exercises in the folder.core concept.
🧪 How to test or what to evaluate
pair-programming/week-4/README.mdand preview the Markdown (VS Code:Cmd+Shift+V).link to
javascript/first-js-oop-project.md.🚀 Repo Notes (if applicable)
All exercises are JavaScript.
📸 Screenshots (if applicable)
N/A — Markdown documentation only.
✅ Checklist