Introducció

Entorn de treball

Instal.la Bun amb Scoop:

> scoop install bun

Crea un projecte amb Vue.js:

> bun create vite game --template react-ts
Scaffolding project in C:\Users\david\workspace\game...

Done. Now run:

  cd game
  bun install
  bun run dev

Executa les instruccions ...

Tres en ratlla

En este tutorial construirás un pequeño juego de Tres en línea. Este tutorial no asume ningún conocimiento previo de React. Las técnicas que aprenderás en el tutorial son fundamentales para crear cualquier aplicación de React, y comprenderlas por completo te dará una comprensión profunda de React.

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 del fitxer main.tsx.

Elimina el fitxer App.css i modifica el contingut del fitxer App.tsx:

export default function App() {

  return (
    <div className='container mt-5'>
      <button className='p-3 fs-1 fw-bold'>X</button>
    </div>
  )
}

Descripció general

Ahora que está configurado, veamos una descripción general de React.

Aprenderás los fundamentos de React: componentes, props y estado.

Inspeccionar el codi d'inici

El código en App.tsx crea un component.

En React, un componente es una pieza de código reutilizable que representa una parte de una interfaz de usuario.

Los componentes se utilizan para representar, administrar y actualizar los elementos de la interfaz de usuario en su aplicación.

export default function App() {
    ...
}

La primera línea:

  • Define una función llamada App.
  • La palabra clave de JavaScript export hace que esta función sea accesible fuera de este archivo.
  • La palabra clave default le dice a otros archivos que usan su código que es la función principal en su archivo.

La segunda línea devuelve un botón:

export default function App() {

  return (
    <div className='container m-2'>
      <button className='p-3 fs-1 fw-bold'>X</button>
    </div>
  )
}

La palabra clave return significa que lo que viene después se devuelve como un valor a la persona que llama a la función.

<div> i <button> són elementos JSX:

  • Un elemento JSX es una combinación de código TypeScript y etiquetas HTML que describe lo que te gustaría mostrar.
  • className="p-3 fs-1 fw-bold" es una propiedad de botón o prop que le dice a CSS cómo diseñar el botón.
  • X es el texto que se muestra dentro del botón y </button> cierra el elemento JSX para indicar que ningún contenido siguiente debe colocarse dentro del botón.

Construir el tablero

Volvamos a App.tsx.

Aquí es donde pasarás el resto de la actividad:

Actualmente, el tablero es solo un cuadrado, ¡pero necesitas nueve!

export default function App() {

  return (
    <div className='container m-2'>
      <div className="row">
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">1</div>
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">2</div>
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">3</div>
      </div>
      <div className="row">
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">4</div>
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">5</div>
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">6</div>
      </div>
      <div className="row">
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">7</div>
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">8</div>
        <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">9</div>
      </div>
    </div>
  )
}

Ara el tauler és veurà complet:

Pasar datos a través de props

A continuación, querrás cambiar el valor de un cuadrado de vacío a «X» cuando el usuario haga clic en el cuadrado.

Con la forma en que ha construido el tablero hasta ahora, necesitarás copiar y pegar el código que actualiza el cuadrado nueve veces (¡una vez por cada cuadrado que tengas)!

En lugar de copiar y pegar, la arquitectura de componentes de React te permite crear un componente reutilizable para evitar el código duplicado desordenado.

Primero, ve a copiar la línea que define el primer cuadrado (<div className="...">1</div>) de tu componente App en un nuevo componente Square:

function Square() {
  return <div className="col-3 col-md-2 p-3 border fs-1 fw-bol text-center">1</div>
}

Luego, actualiza el componente App para renderizar ese componente Square usando la sintaxis JSX:

export default function App() {

  return (
    <div className='container m-2'>
      <div className="row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="row">
        <Square />
        <Square />
        <Square />
      </div>
      <div className="row">
        <Square />
        <Square />
        <Square />
      </div>
    </div>
  )
}

function Square() {
  return <div className="col-3 col-md-2 p-3 border fs-1 fw-bol text-center">1</div>
}

Observa cómo, a diferencia de los divs del navegador, tus propios componentes App y Square deben comenzar con una letra mayúscula.

Vamos a ver:

[IMAGE]

¡Oh, no! Perdiste los cuadrados numerados que tenías antes. Ahora cada cuadrado dice «1». Para arreglar esto, utiliza las props para pasar el valor que debe tener cada cuadrado del componente principal (App) al componente secundario (Square).

Actualiza el componente Square para leer la propiedad value que pasarás desde App:

function Square({ value }: { value: string }) {
  return <div className="col-3 col-md-2 p-3 border fs-1 fw-bold text-center">{value}</div>
}

El compilador dona error en l'element <Square>: Property 'value' is missing in type '{}' but required in type '{ value: string; }'

Afegix la propietat value a tots els components Square:

export default function App() {

  return (
    <div className='container m-2'>
      <div className="row">
        <Square value="1"/>
        <Square value="2"/>
        <Square value="3"/>
      </div>
      <div className="row">
        <Square value="4"/>
        <Square value="5"/>
        <Square value="6"/>
      </div>
      <div className="row">
        <Square value="7"/>
        <Square value="8"/>
        <Square value="9"/>
      </div>
    </div>
  )
}

function Square({ value }: { value: string }) {
  return <div className="col-3 col-md-2 p-3 border fs-1 fw-bol text-center">{value}</div>
}

Ahora deberías ver una cuadrícula de números nuevamente.

Hacer un componente interactivo.

Rellenemos el componente Square con una X al hacer clic en él.

Declara una función llamada handleClick dentro del Square.

Luego, agrega onClick a las props del elemento <div> JSX devuelto por el componente Square:

function Square({ value }: { value: string }) {

  function handleClick() { alert("Click!") }
  
  return <div onClick={handleClick} className="col-3 col-md-2 p-3 border fs-1 fw-bol text-center">{value}</div>
}

Si haces clic en un cuadrado ahora, apareixerà una finestra d’alerta amb el text “Click!”.

continua: Google Docs - React

TODO