From f0803e4deaaf9859cfd41b3352f2470e1d5a2e95 Mon Sep 17 00:00:00 2001 From: markitosha Date: Sat, 10 May 2025 15:19:47 +0200 Subject: [PATCH 1/7] Create react-plan.md Added React restructure proposal --- plans/react-plan.md | 85 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 85 insertions(+) create mode 100644 plans/react-plan.md diff --git a/plans/react-plan.md b/plans/react-plan.md new file mode 100644 index 00000000..30fb5c04 --- /dev/null +++ b/plans/react-plan.md @@ -0,0 +1,85 @@ +## 📘 React & Next.js Module Restructuring Plan Proposal + +### 🎯 Goal + +The purpose of this restructuring is to enhance trainees' learning experience by clearly distinguishing foundational React concepts from the advanced features provided by Next.js. The current structure mixes fundamental and framework-specific topics, which has caused confusion and hindered deeper understanding. By separating these topics into two distinct, focused modules—one dedicated to mastering core React concepts and another specifically for exploring Next.js—we aim to improve comprehension, reinforce skills through targeted exercises, and ultimately empower trainees to confidently build real-world applications using modern development practices. + +--- + +## ORIGINAL MODULE STRUCTURE + +![draw io 2025-05-10 15 15 20](https://github.com/user-attachments/assets/1129af41-d894-422a-8b56-b7ef8fd42d07) +![draw io 2025-05-10 15 15 30](https://github.com/user-attachments/assets/b3cee13d-472e-4e47-ac66-689b3b840ee1) + + +## đŸ§± PROPOSED MODULE STRUCTURE + +### React Module (4 Weeks) + +**Description:** +Covers everything essential about React and building React applications, including component lifecycle, state management, and routing. After completion, trainees should confidently create applications using React. + +**Teaching Methodology:** + +* **Flipped classroom:** With preparation materials, class sessions are dedicated to solving problems and practical implementation rather than theoretical explanations. \[From my experience, this amount of matherial might become 4-hours-lecture instead of 4-hours-practice] +* **Preparation Materials:** Improve beyond React documentation for effective flipped classroom learning. + +**Technical Recommendations:** + +* Use Vite or similar library for a client-only React setup to simplify configuration and focus more on React itself. + +**Homework Strategy:** + +* "Meal Sharing" project can be integrated progressively during the course, rather than post-module only. + +![draw io 2025-05-10 15 15 50](https://github.com/user-attachments/assets/8c98a4ae-aeed-41d1-afc2-33667ff6bd44) + + +#### Weekly Goals and Topics: + +**Week 1:** Everything about rendering a single component. + +* React Introduction +* JSX fundamentals +* Components, props, CSS imports + +**Week 2:** Master state management (passing, storing, updating state). + +* useState Hook +* Conditional rendering, dynamic rendering + +**Week 3:** Component lifecycle, data management (events, API), and refs. + +* Event handlers, form management +* useEffect Hook +* API integration + +**Week 4:** Context, Routing, Libraries, handling real-world cases. + +* React Context +* (Optional): Reducers (I haven’t seen it used in production a lot), advanced state management +* Component libraries (UI libraries) +* Routing +* Introduction to easy deployment (Vercel) + +--- + +### Next.js Module (1 Week) + +**Description:** An advanced module specifically for Next.js and advanced topics it coveres: server-side rendering (SSR), static site generation (SSG), differentiating between client and server components. It clearly explains how Next.js solves problems previously encountered in React. + +Since trainees has already seen most of fundamental concepts and how they solved in pure React (fx Routing), it should be easier to explain how Next.js solves it, without focusing on what it is in general. + +**Teaching Methodology:** + +* **Preparation Materials:** Use “Next.js” original introduction course. + +![draw io 2025-05-10 15 16 06](https://github.com/user-attachments/assets/bece24ea-418c-436d-b6d3-89da91b631e4) + +#### Topics: + +* Introduction to Next.js (why Next.js, recommended by React) +* SSR & SSG +* Next.js App Router +* When to use client vs server components +* Optional Advanced: Server Actions, API Routes From d58a0c57513caf975c3a5c0e40684f752f94bd35 Mon Sep 17 00:00:00 2001 From: markitosha Date: Mon, 12 May 2025 09:30:47 +0200 Subject: [PATCH 2/7] Fixed linter issues --- .../react-restructure.md | 52 +++++++++---------- 1 file changed, 25 insertions(+), 27 deletions(-) rename plans/react-plan.md => proposals/react-restructure.md (75%) diff --git a/plans/react-plan.md b/proposals/react-restructure.md similarity index 75% rename from plans/react-plan.md rename to proposals/react-restructure.md index 30fb5c04..cdd97936 100644 --- a/plans/react-plan.md +++ b/proposals/react-restructure.md @@ -11,7 +11,6 @@ The purpose of this restructuring is to enhance trainees' learning experience by ![draw io 2025-05-10 15 15 20](https://github.com/user-attachments/assets/1129af41-d894-422a-8b56-b7ef8fd42d07) ![draw io 2025-05-10 15 15 30](https://github.com/user-attachments/assets/b3cee13d-472e-4e47-ac66-689b3b840ee1) - ## đŸ§± PROPOSED MODULE STRUCTURE ### React Module (4 Weeks) @@ -21,46 +20,45 @@ Covers everything essential about React and building React applications, includi **Teaching Methodology:** -* **Flipped classroom:** With preparation materials, class sessions are dedicated to solving problems and practical implementation rather than theoretical explanations. \[From my experience, this amount of matherial might become 4-hours-lecture instead of 4-hours-practice] -* **Preparation Materials:** Improve beyond React documentation for effective flipped classroom learning. +- **Flipped classroom:** With preparation materials, class sessions are dedicated to solving problems and practical implementation rather than theoretical explanations. \[From my experience, this amount of matherial might become 4-hours-lecture instead of 4-hours-practice] +- **Preparation Materials:** Improve beyond React documentation for effective flipped classroom learning. **Technical Recommendations:** -* Use Vite or similar library for a client-only React setup to simplify configuration and focus more on React itself. +- Use Vite or similar library for a client-only React setup to simplify configuration and focus more on React itself. **Homework Strategy:** -* "Meal Sharing" project can be integrated progressively during the course, rather than post-module only. +- "Meal Sharing" project can be integrated progressively during the course, rather than post-module only. ![draw io 2025-05-10 15 15 50](https://github.com/user-attachments/assets/8c98a4ae-aeed-41d1-afc2-33667ff6bd44) - -#### Weekly Goals and Topics: +#### Weekly Goals and Topics **Week 1:** Everything about rendering a single component. -* React Introduction -* JSX fundamentals -* Components, props, CSS imports +- React Introduction +- JSX fundamentals +- Components, props, CSS imports **Week 2:** Master state management (passing, storing, updating state). -* useState Hook -* Conditional rendering, dynamic rendering +- useState Hook +- Conditional rendering, dynamic rendering **Week 3:** Component lifecycle, data management (events, API), and refs. -* Event handlers, form management -* useEffect Hook -* API integration +- Event handlers, form management +- useEffect Hook +- API integration **Week 4:** Context, Routing, Libraries, handling real-world cases. -* React Context -* (Optional): Reducers (I haven’t seen it used in production a lot), advanced state management -* Component libraries (UI libraries) -* Routing -* Introduction to easy deployment (Vercel) +- React Context +- (Optional): Reducers (I haven’t seen it used in production a lot), advanced state management +- Component libraries (UI libraries) +- Routing +- Introduction to easy deployment (Vercel) --- @@ -72,14 +70,14 @@ Since trainees has already seen most of fundamental concepts and how they solved **Teaching Methodology:** -* **Preparation Materials:** Use “Next.js” original introduction course. +- **Preparation Materials:** Use “Next.js” original introduction course. ![draw io 2025-05-10 15 16 06](https://github.com/user-attachments/assets/bece24ea-418c-436d-b6d3-89da91b631e4) -#### Topics: +#### Topics -* Introduction to Next.js (why Next.js, recommended by React) -* SSR & SSG -* Next.js App Router -* When to use client vs server components -* Optional Advanced: Server Actions, API Routes +- Introduction to Next.js (why Next.js, recommended by React) +- SSR & SSG +- Next.js App Router +- When to use client vs server components +- Optional Advanced: Server Actions, API Routes From c3bdd4c5c828052cb46ef19d2ee1a1acd1a83cae Mon Sep 17 00:00:00 2001 From: markitosha Date: Mon, 12 May 2025 09:46:49 +0200 Subject: [PATCH 3/7] Fixed linter issues --- proposals/react-restructure.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/proposals/react-restructure.md b/proposals/react-restructure.md index cdd97936..d6a2abb3 100644 --- a/proposals/react-restructure.md +++ b/proposals/react-restructure.md @@ -1,6 +1,6 @@ -## 📘 React & Next.js Module Restructuring Plan Proposal +# 📘 React & Next.js Module Restructuring Plan Proposal -### 🎯 Goal +## 🎯 Goal The purpose of this restructuring is to enhance trainees' learning experience by clearly distinguishing foundational React concepts from the advanced features provided by Next.js. The current structure mixes fundamental and framework-specific topics, which has caused confusion and hindered deeper understanding. By separating these topics into two distinct, focused modules—one dedicated to mastering core React concepts and another specifically for exploring Next.js—we aim to improve comprehension, reinforce skills through targeted exercises, and ultimately empower trainees to confidently build real-world applications using modern development practices. From 58d19d013a281018c5a316ead351c9b051afee18 Mon Sep 17 00:00:00 2001 From: markitosha Date: Tue, 13 May 2025 18:13:52 +0200 Subject: [PATCH 4/7] Moved to contributing/ directory --- {proposals => contributing/proposals}/react-restructure.md | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename {proposals => contributing/proposals}/react-restructure.md (100%) diff --git a/proposals/react-restructure.md b/contributing/proposals/react-restructure.md similarity index 100% rename from proposals/react-restructure.md rename to contributing/proposals/react-restructure.md From 72a540746db27237627ad2f651d707226df85565 Mon Sep 17 00:00:00 2001 From: markitosha Date: Sun, 8 Jun 2025 11:50:49 +0200 Subject: [PATCH 5/7] Apply suggestions from code review --- contributing/proposals/react-restructure.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/contributing/proposals/react-restructure.md b/contributing/proposals/react-restructure.md index d6a2abb3..26199bdf 100644 --- a/contributing/proposals/react-restructure.md +++ b/contributing/proposals/react-restructure.md @@ -16,7 +16,7 @@ The purpose of this restructuring is to enhance trainees' learning experience by ### React Module (4 Weeks) **Description:** -Covers everything essential about React and building React applications, including component lifecycle, state management, and routing. After completion, trainees should confidently create applications using React. +Covers everything essential about React and building React applications, including component lifecycle, state management, and routing. After completion, trainees should be able to create simple applications and websites using React **Teaching Methodology:** From 7863641dd1e9b53894d97b9e0376b6ba7404191d Mon Sep 17 00:00:00 2001 From: markitosha Date: Sun, 8 Jun 2025 22:36:14 +0200 Subject: [PATCH 6/7] Update react-restructure.md --- contributing/proposals/react-restructure.md | 23 +++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/contributing/proposals/react-restructure.md b/contributing/proposals/react-restructure.md index 26199bdf..a74189be 100644 --- a/contributing/proposals/react-restructure.md +++ b/contributing/proposals/react-restructure.md @@ -81,3 +81,26 @@ Since trainees has already seen most of fundamental concepts and how they solved - Next.js App Router - When to use client vs server components - Optional Advanced: Server Actions, API Routes + +## Proposal discussion notes + +Overall, I think we can accept this proposal with some noted (also added to the document). + +Agreed on: +- Restucture itself: separate React and Next +- Fallback to Vite in React module -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087473349) +- We DO NOT introduce any state libraries -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087502733) +- We DO NOT introduce reducers -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109923071) [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087489631) +- We DO NOT introduce UI Libraries, only mention that they're exist, so they can research is they want to -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109923071) + +Todo: +- Research and add more preparation materials -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087472475) +- Integrate MealSharing better with new structure: do it in React module, check that steps are coverting the lesson plan -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087483027) +- IF we introduce refs, we need to add good examples when they might be non-avoidable (fx timers) -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087521327) +- Add introction for any 1-click-deploy, fx Vercel -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087491241) +- Figure out an example with good example of server rendering -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087497199) + +Up to a discussion: +- Which router to take with Vite? How we approach Routing now? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109832621) +- Should we cover render props? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109934479) +- Should we introduce refs? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087521327) From a273a7a4fd89d17288cec2541ee5d261a0960eb6 Mon Sep 17 00:00:00 2001 From: markitosha Date: Sun, 8 Jun 2025 22:51:25 +0200 Subject: [PATCH 7/7] Added last point --- contributing/proposals/react-restructure.md | 24 ++++++++++++--------- 1 file changed, 14 insertions(+), 10 deletions(-) diff --git a/contributing/proposals/react-restructure.md b/contributing/proposals/react-restructure.md index a74189be..5c30e822 100644 --- a/contributing/proposals/react-restructure.md +++ b/contributing/proposals/react-restructure.md @@ -87,20 +87,24 @@ Since trainees has already seen most of fundamental concepts and how they solved Overall, I think we can accept this proposal with some noted (also added to the document). Agreed on: + - Restucture itself: separate React and Next -- Fallback to Vite in React module -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087473349) -- We DO NOT introduce any state libraries -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087502733) -- We DO NOT introduce reducers -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109923071) [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087489631) -- We DO NOT introduce UI Libraries, only mention that they're exist, so they can research is they want to -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109923071) +- Fallback to Vite in React module -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087473349) +- We DO NOT introduce any state libraries -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087502733) +- We DO NOT introduce reducers -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109923071) [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087489631) +- We DO NOT introduce UI Libraries, only mention that they're exist, so they can research is they want to -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109923071) Todo: -- Research and add more preparation materials -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087472475) -- Integrate MealSharing better with new structure: do it in React module, check that steps are coverting the lesson plan -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087483027) -- IF we introduce refs, we need to add good examples when they might be non-avoidable (fx timers) -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087521327) + +- Research and add more preparation materials -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087472475) +- Integrate MealSharing better with new structure: do it in React module, check that steps are coverting the lesson plan -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087483027) +- IF we introduce refs, we need to add good examples when they might be non-avoidable (fx timers) -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087521327) - Add introction for any 1-click-deploy, fx Vercel -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087491241) - Figure out an example with good example of server rendering -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087497199) Up to a discussion: -- Which router to take with Vite? How we approach Routing now? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109832621) -- Should we cover render props? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109934479) -- Should we introduce refs? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087521327) + +- Which router to take with Vite? How we approach Routing now? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109832621) +- Should we cover render props? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2109934479) +- Should we introduce refs? -- [Discussion](https://github.com/HackYourFuture-CPH/programme/pull/65/files#r2087521327) +- If we remove most of the content in week 4, we probably can move there everything we found as "not exactly fit with goal" for other weeks. Or use session for questions.