Introducció
...
Entorn de treball
Instal.la Bun
Crea un projecte amb Vite
$ bun create vite react --template react-swc-ts
Scaffolding project in /home/box/game...
Done. Now run:
cd react
bun install
bun run dev
Executa les instruccions ...
Modifica el fitxer index.html
amb aquest contingut:
<!doctype html>
<html>
<head>
<title>Game</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href=" https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css">
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/main.tsx"></script>
</body>
</html>
Elimina el fitxer index.css
i el import d'aquest fitxer a main.tsx
.
Elimina el fitxer App.css
i modifica el contingut del fitxer App.tsx
:
export default function App() {
return <h1>Hello!</h1>
}
El prefijo export default
es parte de la sintaxis estándar de Javascript (no es específico de React). Te permite marcar la función principal en un archivo para que luego puedas importarlas en otros archivos.
Component
Las aplicaciones de React se construyen a partir de piezas independientes de UI llamadas componentes. Un componente de React es una función de JavaScript a la que le puedes agregar un poco de marcado (markup). Los componentes pueden ser tan pequeños como un botón, o tan grandes como una página entera.
Defineix el component Greeting
que es utilitzat pel component App
:
export default function App() {
return <Greeting/>
}
function Greeting() {
return <p className="fs-3 p-4 border">Hello X</p>
}
¡Los componentes de React son funciones regulares de JavaScript, pero sus nombres deben comenzar con letra mayúscula o no funcionarán!
El componente devuelve una etiqueta <p />
con el atributo className
.
L'atribut className
correspon a l'atribut class
d'HTML (en JSX class
és una paraula reservada)
Las sentencias return
se pueden escribir todo en una línea, como en este componente:
return <p className="fs-3 p-4 border">Hello X</p>
Pero si tu marcado no está todo en la misma línea que la palabra clave return
, debes ponerlo dentro de paréntesis como en este ejemplo:
function Greeting() {
return (
<div className="m-5">
<p className="fs-3 p-4 border">Hello X</p>
</div>
)
}
¡Sin paréntesis, todo el código que está en las líneas posteriores al return
serán ignoradas!
El componente Greeting
està anidat dins el component App
, i si vols, pots afegit tants components Greeting
com vulguis dins del component App
:
export default function App() {
return (
<>
<Greeting />
<Greeting />
<Greeting />
</>
)
}
function Greeting() {
return <p className="fs-3 m-2 p-2 border text-center">Hello X</p>
}
Has d'utilitzar el marcatge buit <>
perque el return
ha de tornar un únic component arrel.
Nota la diferencia de mayúsculas y minúsculas:
<p>
está en minúsculas, por lo que React sabe que nos referimos a una etiqueta HTML.<Greeting />
comienza con unaG
mayúscula, por lo que React sabe que queremos usar nuestro componente llamadoGreeting
.
Al final lo que el navegador ve es esto:
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
<p class="fs-3 m-2 p-2 border text-center">Hello X</p>
Anidar y organizar componentes
Los componentes son funciones regulares de JavaScript, por lo que puedes tener múltiples componentes en el mismo archivo.
Dado que los componentes Greeting
se renderizan dentro de App
(¡incluso varias veces!) podemos decir que App
es un componente padre, que renderiza cada Greeting
como un «hijo». Este es la parte mágica de React: puedes definir un componente una vez, y luego usarlo en muchos lugares y tantas veces como quieras.
⚠ Atenció!
Los componentes pueden renderizar otros componentes, pero nunca debes anidar sus definiciones:
export default function App() {
// 🔴 ¡Nunca definas un componente dentro de otro componente!
function Greeting() {
// ...
}
// ...
}
El fragmento de código de arriba es muy lento y causa errores.
En su lugar, define cada componente en el primer nivel:
export default function App() {
// ...
}
// ✅ Declara los componentes en el primer nivel
function Greeting() {
// ...
}
Segueix amb Importar y exportar componentes, etc.
Exemple Modifica el component greeting per tal que si li posem un nom, es generarà el codi HTML:
Hello nom
A app.py
has de tenir el següent codi:
export default function App() {
return (
<>
<Greeting name="Roser"/>
<Greeting name="Jose" />
<Greeting name="David" />
</>
)
}
function Greeting({name}:{name:string}) {
return <p className="fs-3 m-2 p-2 border text-center">Hello {name}</p>
}