Tutorial ReactJS 21-22

Introducció

Nota: versió antiga d'aquest tutorial:

• (TBD)

Dues opcions:

1) learn by doing:

• https://reactjs.org/tutorial/tutorial.html

2) aprendre els conceptes:

• https://reactjs.org/docs/hello-world.html

Tutorial tic-tac-toe

Instal·lació

Resultat final:

• https://codepen.io/gaearon/pen/gWWZgR?editors=0010

Setup Option 2: Local Development Environment

$ npx create-react-app my-app

Hem de tenir instal·lada la versió més recent de create-react-app

The latest instructions for creating a new app can be found here:

• https://create-react-app.dev/docs/getting-started/

Per instal·lar la versió més recet de create-react-app:

$ npm i create-react-app

I ara ja podem crear el projecte:

$ npx create-react-app my-app

Fixar-se que s'ha creat el fitxer package.json

Delete all files in the src/ folder of the new project

cd my-app
cd src

# If you're using a Mac or Linux:
rm -f *

# Or, if you're on Windows:
del *

# Then, switch back to the project folder
cd ..

4. Add a file named index.css in the src/ folder with this CSS code (codi que indica el tutorial).

5. Add a file named index.js in the src/ folder with this JS code (codi que indica el tutorial).

6. Add these three lines to the top of index.js in the src/ folder:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

I ara ja podem arrencar l'aplicació:

$ npm start

• http://localhost:3000/

ja tenim l'aplicació, que encara no far res, però ja podem veure el taulell del 3 en ratlla.

Ara que ja hem fet la primera aplicació, és el moment de parlar de què és React.

Overview

What Is React?

El component principal és React.Component.

A component takes in parameters, called props (short for properties), and returns a hierarchy of views to display via the render method.

Nosaltres utilitzarem la sintaxi anomenada JSX.

De moment en el nostre projecte tenim 3 components de React: Square, Board i Game.

Per veure com podem passar dades a través de les props, fem els petits canvis a la classe Board i a la classe Square:

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;
  }
}

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}
      </button>
    );
  }
}

i ara si mirem com es renderitza l'aplicatiu veiem que ens apareixen els números de les caselles.

Ara podem afegir un petit event:

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => console.log('click')}>
       {this.props.value}
     </button>
   );
 }
}

Seguint el tutorial, ara parlem dels state que ens permeten guardar informació associada al component. D'aquesta manera, ja podem guardar la informació dels botons que hem clicat, i quedaran marcats amb una X.

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"
        onClick={() => this.setState({value: 'X'})}
      >
        {this.state.value}
      </button>
    );
  }
}

Completar el joc

Per completar el joc, hem d'alternar les X i les O i determinar quan s'acaba el joc i qui guanya.

Necessitem saber els valors de cada quadrat-botó, i necessitem una variable que estigui més amunt que Square (és a dir, Board) per tenir la visió global de tot el taulell. Per tant, el valor del state dels quadrats (que estan a nivell de Square), els hem de pujar cap amunt (lift).

Definirem una matriu en el component Board:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;
  }

I ara el següent pas important és gestionar com fem el click dels botons. Tenim un onclick a nivell del component Square, però hem de pujar cap amunt el seu comportament i definir el onclick a nivell de Board, on definirem la funció handleClick(), que actualitzarà la matriu squares.

En el component Board tenim:

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = 'X';
    this.setState({squares: squares});
  }

Since the Square components no longer maintain state, the Square components receive values from the Board component and inform the Board component when they’re clicked. In React terms, the Square components are now controlled components. The Board has full control over them.

Per crear una còpia de l'array squares utilitzem el mètode slice(). Aquest fet és important.

La classe Square, que fins ara era un component que venia heredat de React.Component, ara la convertirem en una function component, i això ho podem fer en un component senzill on només tenim uns props com a entrada i una renderització com a valor retornat.

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

I ara ja podem implementar la lògica del joc: fer torns entre els dos jugadors (després de la X ve la O. I saber quan s'acaba la partida i quin és el guanyador.

I ja podem jugar una partida.

Adding time travel

Com a millora, anem a implementar la possibilitat d'anar endarrere en el temps i poder modificar una jugada.

Podem crear un array history, que emmagatzemi els arrays square cada cop que es faci una jugada. Qui guardarà la informació del history. No pot ser el Board, que guarda l'estat actual de la partida, sinó que ha de ser el component superior (Game), que pot guardar l'historial de totes les jugades. Per tant, haurem de fer el lifting del state cap amunt.

I això implicarà canvis en el Board component.

Finalment hem de poder mostrar els moviments anteriors (utilitzarem el mètode map dels arrays), i fer-los clicables, per poder anar a una jugada passada.

Necessitarem les claus key per tal d'identificar de forma unívoca els elements de la llista HTML, que és una llista dinàmica on els elements es creen i es destrueixen.

Després d'implementar tots els canvis proposats, ja podem jugar al tic-tac-toe que es proposa en el tutorial.

---

creat per Joan Quintana Compte, abril 2022