Tutorial ReactJS 21-22

De wikijoan
La revisió el 18:53, 18 abr 2022 per Joan (discussió | contribucions) (Es crea la pàgina amb «=Introducció= Nota: versió antiga d'aquest tutorial: *(TBD) Dues opcions: 1) learn by doing: *https://reactjs.org/tutorial/tutorial.html 2) aprendre els conceptes...».)
(dif) ← Versió més antiga | Versió actual (dif) | Versió més nova → (dif)
Salta a la navegació Salta a la cerca

Introducció

Nota: versió antiga d'aquest tutorial:

  • (TBD)

Dues opcions:

1) learn by doing:

2) aprendre els conceptes:

Tutorial tic-tac-toe

Instal·lació

Resultat final:

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

Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remove 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

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


creat per Joan Quintana Compte, abril 2022