💡 React est du JS avec une convention : les composants retournent du JSX (HTML-like). Tout ce que tu as appris s'y retrouve directement.

// MODULE 02 : arrow function
// MODULE 03 : map(), filter()
// MODULE 04 : événements
// MODULE 05 : async/await
// MODULE 06 : import/export

import { useState, useEffect } from 'react'

export default function TodoList() {
  const [todos, setTodos] = useState([])   // état

  // useEffect = Observer sur [deps]
  useEffect(() => {
    fetch('/api/todos')                     // MODULE 05
      .then(r => r.json())
      .then(data => setTodos(data))
  }, [])

  // Immutabilité — MODULE 09
  const ajouter = item =>
    setTodos(prev => [...prev, item])

  // JSX = map() + HTML — MODULE 03
  return (
    <ul>
      {todos.map(t => (
        <li key={t.id}>{t.texte}</li>
      ))}
    </ul>
  )
}

💡 Vue utilise le Proxy JS (Module 08) pour sa réactivité. Si tu as compris le Proxy, tu comprends comment Vue fonctionne sous le capot.

<!-- TodoList.vue -->
<script setup>
import { ref, computed, onMounted } from 'vue'

const todos    = ref([])             // Proxy réactif — MODULE 08
const filtre   = ref('tout')

// Computed = getter recalculé — MODULE 06
const filtered = computed(() =>
  filtre.value === 'fait'
    ? todos.value.filter(t => t.fait)   // MODULE 03
    : todos.value
)

// onMounted = useEffect(fn, []) en React
onMounted(async () => {               // MODULE 05
  const res = await fetch('/api/todos')
  todos.value = await res.json()
})

const ajouter = item =>
  todos.value.push(item)              // Vue gère la mutation
</script>

<template>
  <ul>
    <!-- v-for = .map() en JSX -->
    <li v-for="t in filtered" :key="t.id">
      {{ t.texte }}
    </li>
  </ul>
</template>

🎯 Conseil : commence par React (plus demandé), puis Vue si tu veux diversifier. Les concepts sont identiques — seule la syntaxe change.