Premiers pas
Créez une application, affichez votre première page et réagissez à une touche.
Dans ce chapitre
- Créer l’application
- Votre première page
- Réagir à une touche
Au fil de dix chapitres, vous construirez Acme Deploys, un tableau de bord de déploiement qui s’affiche dans la console DevTools. Chaque chapitre se termine avec l’application exactement dans l’état où votre code la laisse, en cours d’exécution dans la console de cette page.
Créer l’application
create-text-app génère la structure d’un projet avec l’App Router, TypeScript et l’interface en ligne de commande text.
bunx create-text-app@latest acme-deploys --template startercd acme-deploysbun installbun devOuvrez http://localhost:3000, puis ouvrez la console du navigateur. La page affiche une zone de capture du focus. Votre application s’affiche dans la console.
Votre première page
Chaque route est un fichier page.tsx dans app/. Remplacez la page de démarrage par l’encadré de titre du tableau de bord :
import { Box, Text } from "@textjs/app";export default function Page() { return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text> <Text color="muted">Hello, console.</Text> </Box> );}Enregistrez le fichier. Fast Refresh redessine la frame et conserve l’état de votre composant.
Réagir à une touche
useInput reçoit chaque frappe tant que la page a le focus. Comptez les salutations :
Supprimé : import { Box, Text } from "@textjs/app";Ajouté : import { useState } from "react";Ajouté : import { Box, Text, useInput } from "@textjs/app";export default function Page() {Ajouté : const [hellos, setHellos] = useState(0);Ajouté : Ajouté : useInput((e) => {Ajouté : if (e.key === "return") setHellos((n) => n + 1);Ajouté : if (e.input === "r") setHellos(0);Ajouté : });Ajouté : return ( <Box className="flex-col border rounded px-2 py-1"> <Text bold>▼ Acme Deploys</Text>Supprimé : <Text color="muted">Hello, console.</Text>Ajouté : <Text color="muted">{hellos === 0 ? "Hello, console." : `Hello, console. ×${hellos}`}</Text> </Box> );}C’est une application Text.js complète. Elle possède un état React, une boîte de layout et un appel à console.log par frame modifiée, et ne produit aucun message au repos.
Essayer
Voici Acme Deploys en fin de chapitre, en cours d’exécution dans DevTools. Cliquez sur le pavé, puis utilisez les touches ci-dessous.
Ouvrir la console
L’application s’affiche dans DevTools.Activez d’abord « Afficher les fonctionnalités pour les développeurs web » dans Safari Réglages → Avancés. Puis cliquez ici et appuyez sur Enter.
Ouvrir sur ordinateur
Cette application s’affiche dans la console DevTools, qui nécessite un navigateur sur ordinateur.
Quiz
2 questionsRépondez à toutes les questions pour terminer le chapitre.