React Concepts Cleared – Ready to Build (Day 7)

 React Basics – Done !

Today I dedicated my time to following a React tutorial and revising all the foundational React concepts. It felt great to walk through everything step by step with practical implementation.

      What I Covered:

  • ✅ React setup and course introduction

  • ✅ Created a basic JavaScript project in React

  • ✅ Understood functional components and how to structure them

  • ✅ Practiced passing data using props

  • ✅ Applied inline and external styling techniques

  • ✅ Worked with state using useState hook

  • ✅ Implemented useEffect hook for side effects and data loading

    What I Learned:

    • React is all about components — building UI in pieces that work independently

    • useState helps manage changing values dynamically inside components

    • useEffect runs side effects like data fetching, and needs to be carefully handled to avoid re-renders

    • Props help pass data from parent to child — a core concept in React

    • Styling in React can be done in multiple ways and needs structure for scalability

    Gracias:

    Grateful for the structured approach and the pace of learning.

    Excited to start the course project tomorrow and bring all of this into practice!

    ~ Sanya

Comments

Post a Comment

Popular posts from this blog

Tasks Done, But Faced API MongoDB Integration Errors(Day-24)

  Completed Tasks, But Hit a Roadblock – Integration Challenges Today was productive in terms of frontend updates and feature wrap-ups , but while integrating some of the backend API data with MongoDB , I encountered a few errors. These issues slowed down the final rendering of charts and detailed student stats. Still, I managed to complete most of the UI setup and API function calls — the issue lies mainly in the backend response structure and DB connection errors.  What I Worked On: ✅ Final touches on UI components ✅ Chart sections structured and placeholders added ✅ Connected API endpoints using Axios ✅ Integrated student detail route and contest history view ✅ Attempted MongoDB data fetch for submission + problem stats  Key Learnings: Double-checking backend route logic is essential during API consumption Clean state handling in React helps detect where data is truly breaking Error logs and HTTP status codes guide debugging in integration...
Read more

Frontend Almost Complete – Graphs Up Next(Day-23)

  Frontend Nearing Completion – Final Touches Pending Today, I completed almost all the remaining frontend parts of the Codeforces Tracker project. The main layout is done, data is flowing through API integrations, and almost all the UI components are in place. The last remaining part is the graph section , which I’ll be completing tomorrow using libraries like Recharts or Chart.js to show submissions, problem distribution, and rating visuals. ✅ Completed Today: ✅ Final styling of the contest history section ✅ Dynamic rendering of problem-solving stats with filters ✅ Connected backend endpoints with proper error/loading handling ✅ Polished layout responsiveness with Tailwind ✅ Navigation and UI cleanup across all sections  Left for Tomorrow: Graphical representation of: Activity bar charts  Key Takeaways: Ensured that each API call is separated into reusable services Learned how to conditionally render components based on data s...
Read more

Frontend Begins – Bringing Data to Life (Day-20)

  Frontend Development Kickoff – Visualizing the Backend After wrapping up the backend, today I officially began working on the frontend for the Codeforces Tracker project. It felt great to shift gears and start turning data into interactive UI components. The main goal was to lay a strong foundation using React and Tailwind CSS , fetch data from the APIs, and set up the reusable layout and components that will drive the dashboard experience.  What I Worked On Today: React Frontend Setup Clean React structure created Installed essential dependencies (axios, react-router-dom, tailwind) Component Structure Created base folder structure for pages, components, utils, etc. Set up routing and basic layout UI Work Header and navigation bar set up Designed and implemented basic table structure for students  What I Learned: React and Tailwind combo makes it fast and clean to build beautiful layouts Working with real backend data is al...
Read more