Essayer react pour de vrai

On va créer un nouveau projet react, avec React Router. Ça va nous permettre de créer plusieurs pages différentes.

		npx create-react-router@latest my-react-router-app
	

Ajouter le file-based-routing

On va installer ce qui va nous permettre de gérer nos routes avec des fichiers.

		npm i @react-router/fs-routes
	

Puis, dans routes.ts on remplace le code par :

		import { type RouteConfig } from "@react-router/dev/routes";
import { flatRoutes } from "@react-router/fs-routes";
 
export default flatRoutes() satisfies RouteConfig;
	

Pour finir, on va renommer le fichier home.tsx en _index.jsx. On ne change que ce fichier là, et les autres pages si on en ajoute, de tsx à jsx ! Les autres fichiers générés par React Router restent en TS !

Exercices

Création d’un bouton réactif

Créer un bouton qui contient Count: 1 , lors du clic sur le bouton le count augmente de 1.

Valeur double

À côté du bouton, ajouter un texte qui dit Double: 2, et affiche la valeur de count doublée en temps réel

Ajout d’un formulaire

Ajouter un formulaire pour ajouter une tâche. Le formulaire contient les champs suivants:

• Titre
• Description
• Statut

Au clic sur ajouter, la tâche s’affiche à l’écran

		const [tasks, setTasks] = useState([])
	

		const handleSubmit = (e) => {
  // ...
  const formData = new FormData(e.target);
  // valeurs sous forme d'un objet
  const form = Object.fromEntries(formData.entries());
}