Feat(program component): adds mattieweathersby new program react component for lesson 22

[mattieweathersby]

Lesson 22 React Homework: What I Learned & Challenges Faced

📚What I Learned

• React Project Structure

  • Understood the importance of the src/ folder for all React code.
  • Learned the roles of App.tsx, main.tsx, and how routing is set up.
  • Discovered how to organize components and pages for better maintainability.

• React Router

  • Learned to use react-router-dom for client-side routing.
  • Set up routes in main.tsx using createBrowserRouter and RouterProvider.
  • Used the Link component for navigation without full page reloads.

• Component Creation

  • Built new components (Program, ProgramList) and pages (NewProgram).
  • Passed props to components to display dynamic content.
  • Used forms in React for user input.

• State Management

  • Used React state to manage form data and program lists.
  • Understood the basics of lifting state up for shared data.

• Styling

  • Applied provided HTML and CSS.
  • Used SCSS for component-level styling.

• Development Workflow

  • Installed dependencies with npm install.
  • Ran the development server using npm run dev.
  • Used Vite for fast development and hot reloading.

---

Challenges I Faced

• Understanding File Structure

  • Unsure which files to edit at first; learned to focus on src/ and not touch node_modules/ or most of public/.

• Routing Issues

  • Initially, the "New Program" form showed up on the Home page instead of its own route.
  • Had to learn how to properly set up nested routes and use the Link component for navigation.

• Component Placement

  • Struggled with where to put the "Add New Program" button (solved by placing it in the header and linking it to the correct route).

• Path and Import Errors

  • Faced issues with incorrect import paths and case sensitivity in file names.
  • Sometimes used <a href> instead of <Link to>, causing full page reloads.

• Form Handling

  • Unsure how to handle form submissions and state updates in React.
  • Needed to look up how to use controlled components and manage form state.

• API Integration (if attempted)

  • Had to figure out how to use @tanstack/react-query for fetching and mutating data.

• General React Syntax

  • Adjusting to JSX/TSX syntax and the differences from plain HTML/JS.

---

✅Key Takeaways

• Always use Link from react-router-dom for navigation in React apps.
• Organize code into components and pages for clarity.
• Use the dev server (npm run dev) and check the browser for live updates.
• Read and edit files in src/—that’s where all the React magic happens!
• Don’t be afraid to consult the React Router docs or ask for help when stuck.