React vs Angular
vs Vue

interface Props {
  titre: string
  prix:  number
  onBuy: () => void
}

function ProductCard(
  { titre, prix, onBuy }: Props
) {
  const [qty, setQty] =
    useState(1)

  return (
    <div className="card">
      <h2>{titre}</h2>
      <p>{prix * qty} €</p>
      <input type="number"
        value={qty}
        onChange={e =>
          setQty(+e.target.value)}
      />
      <button onClick={onBuy}>
        Acheter
      </button>
    </div>
  )
}

@Component({
  selector: 'app-product-card',
  standalone: true,
  imports: [FormsModule],
  template: `
  <div class="card">
    <h2>{{ titre }}</h2>
    <p>{{ prix * qty }} €</p>
    <input type="number"
      [(ngModel)]="qty" />
    <button (click)="buy.emit()">
      Acheter
    </button>
  </div>
  `
})
export class ProductCardComponent {
  @Input() titre!: string
  @Input() prix!:  number
  @Output() buy =
    new EventEmitter<void>()
  qty = 1
}

<template>
  <div class="card">
    <h2>{{ titre }}</h2>
    <p>{{ prix * qty }} €</p>
    <input
      type="number"
      v-model.number="qty"
    />
    <button
      @click="emit('buy')">
      Acheter
    </button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  titre: string
  prix:  number
}>()
const emit = defineEmits<{
  buy: []
}>()
const qty = ref(1)
</script>

// Local
const [count, setCount] = useState(0)
setCount(c => c + 1)

// Calculé (mémoïsé)
const doubled = useMemo(
  () => count * 2, [count]
)

// Partagé
const ctx = useContext(AppCtx)

// Global — Zustand
const { items, add } = useStore()

// Serveur — TanStack Query
const { data } = useQuery({
  queryKey: ['users'],
  queryFn: fetchUsers
})

// Local — signal (ng 16+)
const count = signal(0)
count.update(c => c + 1)

// Calculé
const doubled = computed(
  () => count() * 2
)

// Service singleton partagé
@Injectable({ providedIn: 'root' })
class AppState {
  count = signal(0)
  items = signal<Item[]>([])
}

// inject(AppState).count()

// HTTP + async pipe (Observable)
users$ = this.http.get('/api/users')
// {{ users$ | async }}

// Local — réactif automatique
const count = ref(0)
count.value++
// {{ count }} dans le template

// Calculé (auto-mémoïsé)
const doubled = computed(
  () => count.value * 2
)

// Partagé — provide/inject
provide('theme', theme)
const theme = inject('theme')

// Global — Pinia (officiel)
const cart = useCartStore()
const { items } = storeToRefs(cart)
cart.addItem(product)

// npm install react-router-dom
const router = createBrowserRouter([
  { path: '/',
    element: <Home/> },
  { path: '/u/:id',
    element: <UserDetail/> },
  { path: '/admin',
    element: <Layout/>,
    children: [
      { index: true,
        element: <Dashboard/> }
    ] },
])

// Hooks
const navigate = useNavigate()
const { id }   = useParams()
navigate('/home')

// Lazy
const Admin = lazy(
  () => import('./Admin')
)

// Intégré — app.routes.ts
const routes: Routes = [
  { path: '',
    component: HomeComponent },
  { path: 'u/:id',
    component: UserDetail,
    resolve: { user: userResolver } },
  { path: 'admin',
    loadChildren: () =>
      import('./admin.routes')
        .then(m => m.routes),
    canActivate: [authGuard] },
]

// Dans le composant
router = inject(Router)
route  = inject(ActivatedRoute)
this.router.navigate(['/home'])
this.route.params.pipe(
  map(p => p['id']))

// npm install vue-router
const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/',
      component: HomePage },
    { path: '/u/:id',
      component: UserDetail },
    { path: '/admin',
      component: () =>
        import('./Admin.vue'),
      meta: { auth: true } },
  ]
})

// Dans le composant
const router = useRouter()
const route  = useRoute()
router.push('/home')
route.params.id

// npm install react-hook-form
const {
  register,
  handleSubmit,
  formState: { errors }
} = useForm()

// JSX
<form
  onSubmit={handleSubmit(onSubmit)}>
  <input
    {...register('email', {
      required: 'Requis',
      pattern: /^[^@]+@[^@]+$/
    })}
  />
  {errors.email &&
    <p>{errors.email.message}</p>}
  <button type="submit">OK</button>
</form>

// Intégré — aucune lib requise
form = this.fb.group({
  email: ['', [
    Validators.required,
    Validators.email
  ]],
  nom: ['', Validators.required],
})

onSubmit() {
  if (this.form.invalid) return
  console.log(this.form.value)
}

<!-- template HTML -->
<form [formGroup]="form"
      (ngSubmit)="onSubmit()">
  <input formControlName="email"/>
  @if (form.get('email')?.invalid
    && form.get('email')?.touched) {
    <p>Email invalide</p>
  }
  <button type="submit">OK</button>
</form>

// Simple — v-model + ref
const form  = reactive({ email: '' })
const errors = reactive({ email: '' })

function validate() {
  if (!form.email.includes('@')) {
    errors.email = 'Email invalide'
    return false
  }
  return true
}

function submit() {
  if (!validate()) return
  // soumettre
}
<!-- template :
<form @submit.prevent="submit">
  <input v-model="form.email" />
  <p v-if="errors.email">
    {{ errors.email }}
  </p>
  <button type="submit">OK</button>
</form>
Avancé → VeeValidate + Zod -->