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 o Game) 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).

---

creat per Joan Quintana Compte, abril 2022