A comprehensive, hands-on learning repository with practical examples and detailed documentation
This repository is currently in active development! 🚧
New concepts and examples are being added regularly. Make sure to star ⭐ this repository to keep track of updates and follow along with the learning journey!
- About This Project
- Tech Stack
- Folder Structure
- Getting Started
- Learning Path
- Concepts Covered
- Contributing
- Connect with Me
This repository is designed to help you learn React 19 effectively by combining:
- Hands-on code examples: Real, working React components in the main application
- Detailed documentation: A Docusaurus-powered documentation site with explanations for each concept
- Progressive learning: Concepts are organized in a logical, beginner-friendly order
-
Main Application:
- React 19.1.0
- Vite 6.3.5 (build tool & dev server)
- React Icons 5.5.0
-
Documentation:
- Docusaurus 3.7.0
- React 19.0.0
- MDX for interactive content
react19-Learning/
├── src/ # Main React application source code
│ ├── 01-Fundamentals/ # React fundamentals examples (concepts 1-15)
│ │ ├── 01.components/ # Basic React components
│ │ ├── 02.jsx/ # JSX syntax and expressions
│ │ ├── 03.lists/ # Rendering lists in React
│ │ ├── 04.props/ # Props and component communication
│ │ ├── 05.conditionalRendering/ # Conditional rendering techniques
│ │ ├── 06.stylingInReact/ # Various styling approaches
│ │ ├── 07.StateAndHooks/ # State management with useState
│ │ ├── 08.portals/ # React Portals
│ │ ├── 09.useEffect/ # Side effects with useEffect
│ │ ├── 10.propDrilling/ # Prop drilling concept
│ │ ├── 11.ContextAPI/ # Context API for state management
│ │ ├── 12.useReducer/ # useReducer hook
│ │ ├── 13.useRef/ # useRef hook
│ │ ├── 14.CustomHook/ # Custom hooks
│ │ ├── 15.useId/ # useId hook for unique IDs
│ │ └── DocumentationLink.jsx # Reusable documentation link component
│ ├── 02-BeginnerProjects/ # Beginner projects to practice concepts
│ │ ├── 001-CounterProject/ # Counter application
│ │ ├── 002-TodoProject/ # Todo application
│ │ ├── 003-Mealsproject/ # Meals app
│ │ ├── 004-CalculatorProject/# Calculator app
│ │ ├── 005-ToggleBackgroundColorProject/ # Background color toggle
│ │ ├── 006-HiddenSearchBarProject/ # Hidden search bar
│ │ ├── 007-TestimonialsProject/ # Testimonials component
│ │ ├── 008-AccordionProject/ # Accordion FAQ
│ │ ├── 009-FormValidationProject/ # Form validation
│ │ ├── 010-ImageGalleryProject/ # Image gallery
│ │ ├── Index.jsx # Reusable project section wrapper
│ │ └── 01-BeginnerProjects.mdx # Projects docs
│ ├── 03-ReactWithTypeScript/ # React + TypeScript learning content
│ │ ├── 001-Annotations/ # Type annotations
│ │ ├── 002-TypeInference/ # Type inference
│ │ ├── 003-FunctionParametersAnnotations/ # Function type annotations
│ │ └── ReactWithTypeScript.mdx # React + TS intro
│ ├── docsMap.js # Section → doc URL mappings
│ ├── frontendskill.md # Frontend skill roadmap
│ ├── App.jsx # Root application component
│ ├── main.jsx # Application entry point
│ └── index.css # Global styles
├── docs/ # Documentation site (Docusaurus)
│ ├── docs/ # Documentation content
│ │ ├── 01.components/ # Components documentation
│ │ ├── 02.jsx/ # JSX documentation
│ │ ├── ... # (All concept folders mirror the main app)
│ │ └── intro.md # Introduction page
│ ├── src/ # Docusaurus source code
│ ├── static/ # Static assets for docs
│ ├── docusaurus.config.js # Docusaurus configuration
│ └── package.json # Docs dependencies
├── public/ # Static assets for main app
├── index.html # Main app HTML entry
├── vite.config.js # Vite configuration
├── eslint.config.js # ESLint configuration
└── package.json # Main project dependencies
Before you begin, make sure you have the following installed:
- Node.js: Version 18.0 or higher
- npm or yarn: Package managers
- Clone the repository
git clone <your-repository-url>
cd react19-Learning- Install dependencies for the main application
npm install- Install dependencies for the documentation (optional, if you want to run the docs locally)
cd docs
npm install
cd ..To run the React application with all the example components:
npm run devThe application will open automatically in your browser at http://localhost:5173.
To run the documentation site locally:
cd docs
npm startThe documentation site will open at http://localhost:3000.
Follow this step-by-step path to learn React effectively:
- Components - Start with the basics of React components
- JSX - Learn how JSX works and how to use expressions
- Lists - Master rendering lists of data
- Props - Understand how to pass data between components
- Conditional Rendering - Learn different ways to conditionally render content
- Styling in React - Explore various styling approaches
- State and Hooks - Dive into state management with useState
- Portals - Learn about React Portals for DOM manipulation
- useEffect - Handle side effects in your components
- Prop Drilling - Understand prop drilling and its limitations
- Context API - Manage global state with Context API
- useReducer - Use useReducer for complex state logic
- useRef — Work with useRef for DOM references and mutable values
- Custom Hooks — Create your own custom hooks
- useId — Generate unique IDs with the useId hook
Practice what you learned by building these 10 beginner projects:
- Counter Project
- Todo Project
- Meals Project
- Calculator Project
- Toggle Background Color Project
- Hidden Search Bar Project
- Testimonials Project
- Accordion Project
- Form Validation Project
- Image Gallery Project
Add TypeScript to your React skills:
- Introduction to TypeScript & React with TypeScript
- Type Annotations
- Type Inference & Any Type
- Function Parameters Annotations, Return Types, Void, & Never
Each concept includes working code examples in src/01-Fundamentals/ and detailed explanations in docs/docs/:
| # | Topic | Code Examples | Documentation |
|---|---|---|---|
| 01 | Components | 01.components | components.mdx |
| 02 | JSX | 02.jsx | jsx.mdx |
| 03 | Lists | 03.lists | lists.mdx |
| 04 | Props | 04.props | props.mdx |
| 05 | Conditional Rendering | 05.conditionalRendering | - |
| 06 | Styling in React | 06.stylingInReact | - |
| 07 | State and Hooks (useState) | 07.StateAndHooks | - |
| 08 | Portals | 08.portals | - |
| 09 | useEffect | 09.useEffect | - |
| 10 | Prop Drilling | 10.propDrilling | - |
| 11 | Context API | 11.ContextAPI | contextAPI.mdx |
| 12 | useReducer | 12.useReducer | - |
| 13 | useRef | 13.useRef | - |
| 14 | Custom Hooks | 14.CustomHook | - |
| 15 | useId | 15.useId | useId.mdx |
All projects live in src/02-BeginnerProjects/ and use the reusable BeginnerProjectsWrapper component:
| # | Project | Files | Description |
|---|---|---|---|
| 001 | Counter Project | Counter.jsx | Basic counter using useState |
| 002 | Todo Project | Todo.jsx | Todo list with add/remove |
| 003 | Meals Project | Meals.jsx | Meals/recipe app |
| 004 | Calculator Project | Calculator.jsx | Basic calculator |
| 005 | Toggle Background Color | ToggleBackgroundColor.jsx | Background switcher |
| 006 | Hidden Search Bar | HiddenSearchBar.jsx | Expandable search |
| 007 | Testimonials | Testimonials.jsx | Testimonials carousel |
| 008 | Accordion | Accordion.jsx | FAQ accordion |
| 009 | Form Validation | FormValidation.jsx | Form with validation |
| 010 | Image Gallery | ImageGallery.jsx | Image gallery app |
Full guide: 01-BeginnerProjects.mdx
All TypeScript learning content is in src/03-ReactWithTypeScript/:
| # | Topic | File | What You'll Learn |
|---|---|---|---|
| 000 | Introduction & Setup | ReactWithTypeScript.mdx | What is TypeScript, installation guide, setup, & .ts/.tsx files basics |
| 001 | Type Annotations | Annotations.mdx | Explicitly annotate types for variables: String, Number, Boolean annotations |
| 002 | Type Inference & Any Type | TypeInference.mdx | Auto type inference, Any type & its caveats/warnings |
| 003 | Function Parameters & Return Types | FunctionParametersAnnotations | Function param annotations, default params, return types (regular & arrow), Void, and Never types |
Feel free to contribute to this learning repository! Whether it's fixing bugs, adding new examples, or improving documentation, all contributions are welcome.
If you find this repository helpful, consider connecting with me on social media! I share updates about web development, React, and more.
Don't forget to ⭐ this repository if you found it helpful!
Happy learning React 19! 🚀