How 3132ganesh/reactlearning works
This repository is a collection of React learning projects: the React.labs dashboard is the central learning workflow, while separate projects demonstrate job cards, CSS styling, and props. The dashboard tracks roadmap completion, presents interactive labs, and persists progress in browser storage. Some README-described lab details are represented at their enclosing component path because their implementation was not sampled; the props and CSS examples also have limited sampled wiring evidence.
Main entry points: src/App.jsx Dashboard · PlaygroundTab.jsx Interactive Playground · src/App.jsx CSS Sandbox · Cards.jsx Job Card Components
Components 17
Learning Hub
- Dashboard
react_01/src/App.jsx - Completion Storage
react_01/src/App.jsx
Learning Modules
- Learning Roadmap
react_01/src/components/RoadmapTab.jsx - Interactive Playground
react_01/src/components/PlaygroundTab.jsx - Profile Widget
react_01/src/components/ProfileWidget.jsx - Visualizer Pad
react_01/src/components/VisualizerPad.jsx - Hooks Lab
react_01/src/components/HooksLabTab.jsx - Task List
react_01/src/components/TaskList.jsx
UI Examples
- Job Cards App
04_cards/src/App.jsx - Job Card Components
04_cards/src/Components/Cards.jsx - Root Cards App
src/App.jsx - CSS Sandbox
03_css/src/App.jsx - Button Example
03_css/src/components/button.jsx - Header Example
03_css/src/components/header.jsx - Props Example
03-props/src/App.jsx - Props Card
03-props/src/Comp/Card.jsx
Other components
- Learner
Connections 13
- Learner → Dashboard: uses
- Dashboard → Learning Roadmap: renders
- Dashboard → Interactive Playground: renders
- Dashboard → Hooks Lab: renders
- Dashboard → Completion Storage: reads and writes
- Dashboard → Task List: passes progress
- Interactive Playground → Profile Widget: renders
- Interactive Playground → Visualizer Pad: renders
- Job Cards App → Job Card Components: renders cards
- Root Cards App → Job Card Components: renders cards
- CSS Sandbox → Button Example: renders
- CSS Sandbox → Header Example: intended header
- Props Example → Props Card: intended props