docs/
└── tutorials/
└── react/
├── index.mdx
│
├── 01-getting-started/
│ ├── introduction.mdx
│ ├─ ─ why-react.mdx
│ ├── react-vs-other-frameworks.mdx
│ ├── setup-development-environment.mdx
│ ├── create-first-react-app.mdx
│ ├── project-structure.mdx
│ └── jsx-basics.mdx
│
├── 02-javascript-for-react/
│ ├── modern-javascript.mdx
│ ├── let-const-and-arrow-functions.mdx
│ ├── template-literals.mdx
│ ├── destructuring.mdx
│ ├── spread-and-rest.mdx
│ ├── array-methods.mdx
│ ├── modules-import-export.mdx
│ ├── promises-and-async-await.mdx
│ └── optional-chaining.mdx
│
├── 03-react-fundamentals/
│ ├── components.mdx
│ ├── functional-components.mdx
│ ├── jsx-expressions.mdx
│ ├── props.mdx
│ ├── composition.mdx
│ ├── conditional-rendering.mdx
│ ├── rendering-lists.mdx
│ ├── keys-and-reconciliation.mdx
│ └── fragments.mdx
│
├── 04-state-and-events/
│ ├── understanding-state.mdx
│ ├── use-state.mdx
│ ├── updating-state.mdx
│ ├── state-as-a-snapshot.mdx
│ ├── handling-events.mdx
│ ├── forms-and-inputs.mdx
│ ├── controlled-components.mdx
│ ├── lifting-state-up.mdx
│ └── sharing-state-between-components.mdx
│
├── 05-react-hooks/
│ ├── hooks-rules.mdx
│ ├── use-effect.mdx
│ ├── effect-cleanup.mdx
│ ├── use-ref.mdx
│ ├── use-context.mdx
│ ├── use-reducer.mdx
│ ├── use-memo.mdx
│ ├── use-callback.mdx
│ ├── custom-hooks.mdx
│ └── hooks-best-practices.mdx
│
├── 06-styling-and-ui/
│ ├── css-in-react.mdx
│ ├── css-modules.mdx
│ ├── styled-components-overview.mdx
│ ├── tailwind-css-with-react.mdx
│ ├── responsive-design.mdx
│ ├── design-systems.mdx
│ ├── reusable-ui-components.mdx
│ └── animations-and-transitions.mdx
│
├── 07-forms-and-validation/
│ ├── form-fundamentals.mdx
│ ├── form-validation.mdx
│ ├── accessible-forms.mdx
│ ├── dynamic-form-fields.mdx
│ ├── file-uploads.mdx
│ └── form-libraries.mdx
│
├── 08-routing/
│ ├── routing-fundamentals.mdx
│ ├── installation-and-setup.mdx
│ ├── routes-and-layouts.mdx
│ ├── route-parameters.mdx
│ ├── nested-routes.mdx
│ ├── navigation-and-links.mdx
│ ├── protected-routes.mdx
│ ├── error-pages.mdx
│ └── routing-best-practices.mdx
│
├── 09-api-and-data-fetching/
│ ├── http-and-rest-apis.mdx
│ ├── fetch-and-async-await.mdx
│ ├── loading-and-error-states.mdx
│ ├── use-effect-data-fetching.mdx
│ ├── request-cancellation.mdx
│ ├── pagination.mdx
│ ├── search-and-filtering.mdx
│ ├── server-state-management.mdx
│ └── tanstack-query-introduction.mdx
│
├── 10-state-management/
│ ├── local-vs-global-state.mdx
│ ├── context-api.mdx
│ ├── reducer-pattern.mdx
│ ├── redux-toolkit.mdx
│ ├── zustand-introduction.mdx
│ ├── server-vs-client-state.mdx
│ └── choosing-state-management.mdx
│
├── 11-advanced-react/
│ ├── component-lifecycle-concepts.mdx
│ ├── advanced-composition.mdx
│ ├── compound-components.mdx
│ ├── render-props-and-hocs.mdx
│ ├── portals.mdx
│ ├── error-boundaries.mdx
│ ├── suspense.mdx
│ ├── lazy-loading.mdx
│ ├── concurrent-rendering.mdx
│ └── react-compiler-overview.mdx
│
├── 12-typescript-with-react/
│ ├── typescript-setup.mdx
│ ├── typing-props.mdx
│ ├── typing-state-and-events.mdx
│ ├── typing-hooks.mdx
│ ├── component-children-and-jsx.mdx
│ ├── generics-in-components.mdx
│ ├── discriminated-unions.mdx
│ └── reusable-type-safe-components.mdx
│
├── 13-performance/
│ ├── rendering-and-reconciliation.mdx
│ ├── identifying-performance-issues.mdx
│ ├── react-profiler.mdx
│ ├── memoization.mdx
│ ├── code-splitting.mdx
│ ├── list-virtualization.mdx
│ ├── optimizing-data-fetching.mdx
│ └── performance-best-practices.mdx
│
├── 14-testing-and-debugging/
│ ├── react-devtools.mdx
│ ├── debugging-components.mdx
│ ├── testing-fundamentals.mdx
│ ├── vitest-setup.mdx
│ ├── react-testing-library.mdx
│ ├── testing-user-interactions.mdx
│ ├── mocking-apis.mdx
│ ├── integration-testing.mdx
│ └── end-to-end-testing.mdx
│
├── 15-accessibility-and-security/
│ ├── semantic-html.mdx
│ ├── keyboard-navigation.mdx
│ ├── aria-fundamentals.mdx
│ ├── accessible-dialogs.mdx
│ ├── accessibility-testing.mdx
│ ├── preventing-xss.mdx
│ ├── secure-authentication-patterns.mdx
│ └── handling-secrets-and-user-data.mdx
│
├── 16-full-stack-and-frameworks/
│ ├── react-rendering-models.mdx
│ ├── server-rendering-overview.mdx
│ ├── react-server-components.mdx
│ ├── nextjs-introduction.mdx
│ ├── full-stack-data-flow.mdx
│ ├── authentication-and-sessions.mdx
│ └── deployment-and-environments.mdx
│
├── 17-production-workflows/
│ ├── environment-variables.mdx
│ ├── project-architecture.mdx
│ ├── reusable-feature-modules.mdx
│ ├── error-monitoring.mdx
│ ├── build-and-bundle-analysis.mdx
│ ├── ci-cd-fundamentals.mdx
│ └── production-checklist.mdx
│
├── 18-projects/
│ ├── beginner/
│ │ ├── counter-and-todo-app.mdx
│ │ ├── weather-dashboard.mdx
│ │ └── quiz-application.mdx
│ ├── intermediate/
│ │ ├── github-profile-explorer.mdx
│ │ ├── ecommerce-storefront.mdx
│ │ └── task-management-dashboard.mdx
│ └── advanced/
│ ├── saas-admin-dashboard.mdx
│ ├── realtime-collaboration-app.mdx
│ └── full-stack-product-platform.mdx
│
├── 19-exercises-and-quizzes/
│ ├── javascript-prerequisite-quiz.mdx
│ ├── jsx-and-components-exercises.mdx
│ ├── hooks-exercises.mdx
│ ├── routing-exercises.mdx
│ ├── api-integration-exercises.mdx
│ ├── testing-exercises.mdx
│ └── final-assessment.mdx
│
├── 20-interview-preparation/
│ ├── react-interview-questions.mdx
│ ├── hooks-interview-questions.mdx
│ ├── javascript-for-react-interviews.mdx
│ ├── performance-interview-questions.mdx
│ ├── frontend-coding-challenges.mdx
│ └── system-design-for-frontend.mdx
│
├── 21-reference/
│ ├── jsx-cheat-sheet.mdx
│ ├── hooks-reference.mdx
│ ├── common-errors.mdx
│ ├── terminology.mdx
│ ├── glossary.mdx
│ └── official-resources.mdx
│
└── assets/
├── images/
├── diagrams/
├── examples/
└── datasets/