Skip to main content

Learn More

Welcome to the Refract learning hub! Whether you're just getting started or looking to master advanced concepts, we've compiled comprehensive resources to help you on your journey.

Learning Paths​

Beginner Path​

Estimated time: 2-3 weeks

Start here if you're new to Refract or reactive frameworks in general.

  1. Week 1: Fundamentals

  2. Week 2: Core Concepts

  3. Week 3: Building Applications

    • Create a Todo App
    • Add routing with @refract/router
    • Style with CSS Modules or Tailwind
    • Deploy your first Refract app
    • Write basic tests

Intermediate Path​

Estimated time: 3-4 weeks

For developers comfortable with Refract basics.

  1. Advanced State Management

  2. Performance Optimization

  3. Advanced Patterns

    • Custom optics creation
    • Higher-order components
    • Render props pattern
    • Compound components
    • Advanced TypeScript patterns

Expert Path​

Estimated time: 4-6 weeks

Master advanced Refract concepts and contribute to the ecosystem.

  1. Architecture & Design

    • Micro-frontend architecture
    • Design system creation
    • Plugin development
    • Custom renderers
    • Compiler extensions

  2. Production Deployment

  3. Ecosystem Contribution

    • Create Refract packages
    • Contribute to core
    • Write technical blogs
    • Mentor others
    • Speaking at conferences

Tutorials & Courses​

Official Tutorials​

Interactive Tutorials​

Video Courses​

  • Refract Fundamentals (Free, 4 hours)

    • Introduction to core concepts
    • Building your first app
    • State management basics
    • Component patterns

  • Advanced Refract Patterns (Free, 6 hours)

    • Complex state management
    • Performance optimization
    • Testing strategies
    • Production deployment

  • Refract Masterclass (Premium, 20 hours)

    • Complete framework deep-dive
    • Real-world projects
    • Best practices
    • Certificate of completion

Community Tutorials​

Written Guides​

Video Tutorials​

Example Projects​

Starter Templates​

# Basic template
npx create-refract-app my-app

# TypeScript template
npx create-refract-app my-app --typescript

# Full-stack template
npx create-refract-app my-app --template fullstack

# PWA template
npx create-refract-app my-app --template pwa

Sample Applications​

Small Projects​

Medium Projects​

Large Projects​

  • E-commerce Platform

    • Product catalog
    • Shopping cart
    • Payment integration
    • User authentication
    • Admin dashboard

  • Real-time Chat

    • WebSocket integration
    • Message history
    • File sharing
    • Video calls
    • Notifications

  • Project Management Tool

    • Kanban boards
    • Gantt charts
    • Team collaboration
    • Time tracking
    • Reporting

Books & Publications​

Official Books​

  • "Refract: The Complete Guide" (2024)

    • Author: Refract Team
    • 500+ pages of in-depth coverage
    • Available in print and digital
    • Get it here

  • "Reactive UI Patterns with Refract" (2024)

Community Books​

  • "Learning Refract by Example" - John Doe
  • "Refract for React Developers" - Jane Smith
  • "Building PWAs with Refract" - Mike Johnson
  • "Testing Refract Applications" - Emily Brown

Research Papers​

Conference Talks​

Workshop Recordings​

Developer Tools​

IDE Extensions​

Visual Studio Code​

Other Editors​

Browser Extensions​

  • Refract DevTools
    • Component inspector
    • State viewer
    • Performance profiler
    • Time-travel debugging

CLI Tools​

# Refract CLI
npm install -g @refract/cli

# Available commands
refract create <app-name>    # Create new app
refract add <package>        # Add Refract package
refract build               # Build for production
refract dev                 # Start dev server
refract test                # Run tests
refract lint                # Lint code

Community Resources​

Official Channels​

Meetups & Events​

  • RefractConf - Annual conference (Next: June 2025, San Francisco)
  • Local Meetups - Find one near you at meetups.refract-js.org
  • Online Events - Weekly workshops and talks
  • Hackathons - Quarterly online hackathons

Contributing​

Certification & Training​

Official Certification​

Refract Certified Developer (RCD)

  • Demonstrates proficiency in Refract
  • Industry-recognized credential
  • Three levels: Associate, Professional, Expert
  • Learn more

Corporate Training​

  • On-site workshops
  • Custom curriculum
  • Team assessments
  • Migration assistance
  • Contact for pricing

Academic Resources​

  • University curriculum
  • Student licenses
  • Research collaboration
  • Thesis support
  • Academic program

What's Next?​

Roadmap​

Check out our public roadmap to see what's coming:

  • Q1 2025: Native mobile support
  • Q2 2025: AI-powered development tools
  • Q3 2025: WebAssembly optimization
  • Q4 2025: Refract 2.0

Stay Updated​

Get Involved​

Need Personal Help?​

Premium Support​

  • Priority issue resolution
  • Direct access to core team
  • Custom feature requests
  • SLA guarantees
  • View plans

Consulting Services​

  • Architecture review
  • Performance optimization
  • Migration assistance
  • Team training
  • Get a quote

Remember: The best way to learn Refract is by building with it. Start small, experiment often, and don't hesitate to ask for help in our community. Happy coding!