From React to Aurelia

React developers: Discover why Aurelia's standards-based approach delivers better performance and cleaner code without the complexity.

Coming from React? You'll love Aurelia's approach to component development. Get the productivity of React with better performance, cleaner templates, and no virtual DOM overhead.

Why React Developers Choose Aurelia

🚀 Performance That Actually Matters

// React: Virtual DOM reconciliation overhead
function UserList({ users, onUserClick }) {
  return (
    <div>
      {users.filter(u => u.isActive).map(user => (
        <UserCard key={user.id} user={user} onClick={onUserClick} />
      ))}
    </div>
  );
}

// Aurelia: Direct DOM updates, no virtual overhead
export class UserList {
  @bindable users: User[];
  @bindable onUserClick: (user: User) => void;
}

<!-- Aurelia template: Clean HTML, faster rendering -->
<div>
  <user-card repeat.for="user of users.filter(u => u.isActive)" 
             user.bind="user" 
             on-click.call="onUserClick(user)">
  </user-card>
</div>

Result: 30-50% faster rendering with smaller bundle sizes.

✨ Cleaner Component Code

// React: Hooks complexity and re-render management
function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);
  const [loading, setLoading] = useState(false);

  const debouncedSearch = useCallback(
    debounce(async (searchTerm) => {
      setLoading(true);
      try {
        const data = await searchAPI(searchTerm);
        setResults(data);
      } finally {
        setLoading(false);
      }
    }, 300),
    []
  );

  useEffect(() => {
    if (query.length > 2) {
      debouncedSearch(query);
    } else {
      setResults([]);
    }
  }, [query, debouncedSearch]);

  return (
    <div>
      <input 
        value={query} 
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />
      {loading && <div>Loading...</div>}
      {results.map(result => <Result key={result.id} data={result} />)}
    </div>
  );
}

// Aurelia: Simple, intuitive code
export class SearchComponent {
  query = '';
  results: SearchResult[] = [];
  loading = false;

  @watch('query')
  async queryChanged(newQuery: string) {
    if (newQuery.length > 2) {
      this.loading = true;
      try {
        this.results = await searchAPI(newQuery);
      } finally {
        this.loading = false;
      }
    } else {
      this.results = [];
    }
  }
}

<div>
  <input value.bind="query & debounce:300" placeholder="Search...">
  <div if.bind="loading">Loading...</div>
  <result repeat.for="result of results" data.bind="result"></result>
</div>

No hooks complexity. No re-render cycles. Just clean, maintainable code.

🎯 TypeScript-First Development

// React: Complex prop typing
interface UserCardProps {
  user: User;
  onEdit?: (user: User) => void;
  onDelete?: (user: User) => void;
  className?: string;
  children?: React.ReactNode;
}

const UserCard: React.FC<UserCardProps> = ({ 
  user, onEdit, onDelete, className, children 
}) => {
  // Component logic
};

// Aurelia: Built-in TypeScript support
export class UserCard {
  @bindable user: User;
  @bindable onEdit?: (user: User) => void;
  @bindable onDelete?: (user: User) => void;
  
  // Automatic type checking, no prop interfaces needed
}

🔥 Better Developer Experience

Feature

React

Aurelia

Component State

useState, useReducer

Simple class properties

Side Effects

useEffect with dependencies

@watch decorator or lifecycle hooks

Performance

memo, useMemo, useCallback

Automatic optimization

Styling

CSS-in-JS or external files

Automatic CSS loading + Shadow DOM

Forms

Controlled components + validation libs

Two-way binding + built-in validation

Your React Knowledge Transfers

JSX → Aurelia Templates

// React JSX
<div className={`card ${isActive ? 'active' : ''}`}>
  <h2>{user.name}</h2>
  <button onClick={() => handleEdit(user)}>Edit</button>
  {showDetails && (
    <div>
      <p>{user.bio}</p>
      {user.posts.map(post => (
        <PostCard key={post.id} post={post} />
      ))}
    </div>
  )}
</div>

// Aurelia HTML (cleaner, more intuitive)
<div class="card" active.class="isActive">
  <h2>${user.name}</h2>
  <button click.trigger="handleEdit(user)">Edit</button>
  <div if.bind="showDetails">
    <p>${user.bio}</p>
    <post-card repeat.for="post of user.posts" post.bind="post"></post-card>
  </div>
</div>

Props → Bindable Properties

// React
interface Props {
  data: any[];
  onItemClick: (item: any) => void;
  loading?: boolean;
}

const MyComponent: React.FC<Props> = ({ data, onItemClick, loading = false }) => {
  // Component logic
};

// Aurelia
export class MyComponent {
  @bindable data: any[];
  @bindable onItemClick: (item: any) => void;
  @bindable loading = false;
  
  // That's it - cleaner and more intuitive
}

State Management

// React: Context + useReducer or external library
const UserContext = createContext();

function UserProvider({ children }) {
  const [state, dispatch] = useReducer(userReducer, initialState);
  return (
    <UserContext.Provider value={{ state, dispatch }}>
      {children}
    </UserContext.Provider>
  );
}

// Aurelia: Built-in dependency injection
@singleton()
export class UserService {
  private users: User[] = [];
  
  addUser(user: User) {
    this.users.push(user);
  }
  
  getUsers() {
    return this.users;
  }
}

// Use anywhere with simple injection
export class UserList {
  private userService = resolve(UserService);
  
  get users() {
    return this.userService.getUsers();
  }
}

Quick Migration Path

1. Start with Familiar Concepts (5 minutes)

npx makes aurelia my-aurelia-app
cd my-aurelia-app
npm run dev

2. Convert a React Component (10 minutes)

Create your first Aurelia component using familiar React patterns:

// React component you're used to
const TodoList = ({ todos, onToggle, onDelete }) => (
  <ul>
    {todos.map(todo => (
      <li key={todo.id}>
        <input 
          type="checkbox" 
          checked={todo.completed}
          onChange={() => onToggle(todo.id)}
        />
        <span>{todo.text}</span>
        <button onClick={() => onDelete(todo.id)}>Delete</button>
      </li>
    ))}
  </ul>
);

// Equivalent Aurelia component
export class TodoList {
  @bindable todos: Todo[];
  @bindable onToggle: (id: number) => void;
  @bindable onDelete: (id: number) => void;
}

<!-- todo-list.html -->
<ul>
  <li repeat.for="todo of todos">
    <input type="checkbox" 
           checked.bind="todo.completed"
           change.trigger="onToggle(todo.id)">
    <span>${todo.text}</span>
    <button click.trigger="onDelete(todo.id)">Delete</button>
  </li>
</ul>

3. Experience the Differences (5 minutes)

No build step complexity - just works with any bundler
No prop drilling - dependency injection handles state
No re-render debugging - direct DOM updates
No hooks confusion - simple class properties and methods

What You'll Gain

📈 Performance Benefits

Faster initial load - no virtual DOM library overhead
Faster updates - direct DOM manipulation
Smaller bundles - efficient code splitting
Better mobile performance - less JavaScript execution

🧹 Cleaner Codebase

Less boilerplate - no prop interfaces, no memo wrapping
Intuitive templates - HTML that looks like HTML
Simpler state management - class properties instead of hooks
Better separation of concerns - HTML, CSS, and TypeScript in separate files

🚀 Better Developer Experience

Stronger TypeScript integration - built from the ground up for TypeScript
No re-render optimization needed - automatically efficient
Powerful CLI tools - scaffolding and build tools that just work
Excellent debugging - inspect actual DOM, not virtual representations

Ready to Make the Switch?

# Try Aurelia now
npx makes aurelia my-first-aurelia-app
cd my-first-aurelia-app
npm run dev

Next Steps:

Complete Getting Started Guide - Build your first app in 15 minutes
Component Guide - Master Aurelia's component model
Templates Deep Dive - Learn the templating system
Migration Examples - See more migration patterns

Questions? Join our Discord community where developers discuss their experiences with different frameworks.

Ready to experience the difference? Start building with Aurelia now.

PreviousHello World Tutorial NextFrom Vue to Aurelia

Last updated 9 days ago

Was this helpful?