A comprehensive React learning platform with interactive tutorials, quizzes, and examples. Built with Next.js 15, React 19, TypeScript, and Tailwind CSS. Learn React from beginner to staff engineer level with progressive, hands-on tutorials.
Explore the live platform with 40+ tutorials, interactive examples, and quizzes:
- 40+ Comprehensive Tutorials - Progressive tutorials from beginner to staff engineer level
- Interactive Examples - Live code examples for all React hooks and concepts
- React 19 - Latest React features including Server Components, new hooks, and improved performance
- Next.js 15 - Built on the latest Next.js with App Router and improved developer experience
- React 19 Hooks - Examples of
useOptimistic,useActionState,useFormStatus, andusehooks - TypeScript Tutorials - Comprehensive guides on types, interfaces, generics, and advanced patterns
- TypeScript - Full type safety for better developer experience and fewer bugs
- Tailwind CSS - Utility-first CSS framework with dark mode support
- ESLint - Code quality and consistency with Next.js recommended configuration
- Modern Structure - Organized folder structure with components, utilities, and best practices
- Lucide Icons - Beautiful icon library included
- Dark Mode - Built-in dark mode support
reactbp/
├── app/ # Next.js App Router
│ ├── layout.tsx # Root layout
│ ├── page.tsx # Home page
│ └── globals.css # Global styles
├── components/ # React components
│ ├── layout/ # Layout components (Header, Footer, Container)
│ ├── sections/ # Page sections (Hero, Features)
│ └── ui/ # Reusable UI components (Button, etc.)
├── hooks/ # Custom React hooks
├── lib/ # Utility functions and constants
├── types/ # TypeScript type definitions
└── utils/ # Helper functions
- Node.js 18+ installed
- npm, yarn, pnpm, or bun package manager
- Install dependencies:
npm install
# or
yarn install
# or
pnpm install- Run the development server:
npm run dev
# or
yarn dev
# or
pnpm dev-
Open http://localhost:3000 in your browser to see the result.
-
Explore tutorials at http://localhost:3000/tutorials
-
Check out React 19 hooks examples at http://localhost:3000/hooks
npm run dev- Start development servernpm run build- Build for productionnpm run start- Start production servernpm run lint- Run ESLint
This project uses Tailwind CSS for styling. The global styles are defined in app/globals.css with CSS variables for theming.
You can customize the color scheme by modifying the CSS variables in app/globals.css:
@theme {
--color-primary: #3b82f6;
--color-background: #ffffff;
/* ... */
}next- React frameworkreact&react-dom- React 19typescript- Type safetytailwindcss- Utility-first CSSlucide-react- Icon libraryclsx&tailwind-merge- Class name utilities
- Layout Components - Header, Footer, Container
- Section Components - Hero, Features
- UI Components - Button and other reusable components
Core Hooks:
useState- Manage component stateuseEffect- Handle side effects and lifecycleuseContext- Access context values without prop drillinguseReducer- Alternative to useState for complex state logic
Performance Hooks:
useCallback- Memoize callbacks to prevent unnecessary re-rendersuseMemo- Memoize expensive calculationsuseLayoutEffect- Synchronous version of useEffect (runs before paint)
Utility Hooks:
useRef- Access DOM elements and store mutable valuesuseId- Generate unique IDs stable across server/client renders
Custom Hooks:
useMediaQuery- Track media query matches
React 19 Hooks:
useOptimistic- Optimistic UI updates for instant feedbackuseActionState- Form state management with server actions (replaces useFormState)useFormStatus- Access form submission status from child componentsuseTransition- Mark state updates as non-urgent transitionsuse- Handle promises directly in render functions
cn()- Merge Tailwind CSS classes (inlib/utils.ts)- Constants - App-wide constants (in
lib/constants.ts)
TypeScript is configured with strict mode enabled. Path aliases are set up using @/* for imports.
ESLint is configured with Next.js recommended rules.
The application is currently deployed and live at: 👉 https://learn-react-ten-steel.vercel.app/
The easiest way to deploy is using Vercel:
- Push your code to GitHub
- Import your repository on Vercel
- Deploy!
This Next.js app can be deployed on any platform that supports Node.js:
This boilerplate includes examples of all major React 19 hooks:
Enable optimistic UI updates for instant feedback. The UI updates immediately, then syncs with the server.
import { useOptimistic } from 'react';
const [optimisticLikes, addOptimisticLike] = useOptimistic(
likes,
(current, amount) => current + amount
);Simplify form state management with server actions. Replaces useFormState in React 19.
import { useActionState } from 'react';
const [state, formAction, pending] = useActionState(action, initialState);Access form submission status from child components without prop drilling.
import { useFormStatus } from 'react-dom';
const { pending } = useFormStatus();Handle promises directly in render functions, automatically suspending until resolved.
import { use } from 'react';
const data = use(promise);See live examples at /hooks route.
This platform includes 40+ comprehensive tutorials covering React and TypeScript from beginner to staff engineer level.
- Introduction to React: Your First Component
- Understanding Props: Passing Data to Components
- Managing State with useState
- Conditional Rendering and Lists
- Event Handling in React
- TypeScript Basics for React Developers
- Component Composition and Patterns
- Building Custom Hooks
- Error Boundaries in React
- React.memo and Performance Optimization
- Throttling and Debouncing in React
- Handling Forms and User Input
- TypeScript Interfaces: Comprehensive Guide
- Type Aliases and Advanced Type Declarations
- TypeScript Generics: Creating Functions with Dynamic Typing
- Advanced TypeScript Patterns in React
- Advanced React patterns and optimizations
- Complex state management
- Advanced TypeScript techniques
- Enterprise-level patterns
- Architecture and scalability
- Advanced TypeScript at scale
- System design and best practices
- Progressive Learning Path - Tutorials build on each other with clear prerequisites
- Code Examples - Every tutorial includes practical, runnable code examples
- Real-World Patterns - Learn patterns used in production applications
- TypeScript Integration - Comprehensive TypeScript coverage throughout
- Best Practices - Learn industry-standard practices and common pitfalls
- Interactive Examples - See concepts in action with live examples
- Browse all tutorials:
/tutorials - Filter by level: Beginner, Intermediate, Advanced, Expert, Staff Engineer
- Each tutorial includes:
- Overview and learning objectives
- Step-by-step sections with explanations
- Code examples with explanations
- Best practices and common patterns
- Conclusion and key takeaways
- Next.js Documentation
- React 19 Documentation
- React Hooks Reference
- Tailwind CSS Documentation
- TypeScript Documentation
React Fundamentals:
- Components, Props, State
- Event Handling
- Conditional Rendering
- Lists and Keys
- Component Composition
React Hooks:
- useState, useEffect, useContext, useReducer
- useCallback, useMemo, useRef
- Custom Hooks
- React 19 Hooks (useOptimistic, useActionState, useFormStatus, use)
Advanced React:
- Performance Optimization (React.memo, useMemo, useCallback)
- Error Boundaries
- Throttling and Debouncing
- Form Handling
- Context API
TypeScript:
- Type Basics and Annotations
- Interfaces and Type Aliases
- Generics and Dynamic Typing
- Union and Intersection Types
- Advanced Type Patterns
- TypeScript with React
Best Practices:
- Code organization
- Performance optimization
- Error handling
- Testing strategies
- Architecture patterns
This project is open source and available under the MIT License.
Contributions, issues, and feature requests are welcome!