frontend developer umbria

Come moltiplicare le trote andando a pesca in un lago in secca con React: un esempio concreto

wow!

Alla fine di un precedente articolo su REACT ci eravamo detti come sarebbe bello se potessi disegnare un SINGOLO componente REACT e alimentarlo con un array, generando ALTRI oggetti in automatico sul desktop come chi cammina sulle acque concludendo con la domanda critica: fantascienza? Abbiamo visto che lavoriamo prevalentemente sulla cartella SRC ma questa volta sulla index.html della cartella PUBLIC dove eravamo stati per cambiare il titolo andiamo a linkare la libreria framework responsive BULMA aggiungendo prima della fine dell’ HEAD:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.8.0/css/bulma.min.css">

A questo punto noi abbiamo già dall’ esercizio precedente presente su UmbriawaySemplifica, indirizzo https://umbriawaysemplifica.wordpress.com/, la presunta CARD copiata dal sito di esempi originario https://bulma.io/ questa card ora vede le classi di Bulma un framework responsive leggero minimalista.


import logo from './logo.svg';
import './App.css';

function WelcomeMessage() {
  return <div className="gmc"><p>Welcome GMC</p></div>
}

function PunteggioElo() {
  return <div className="elo"><p>In questo momento hai 2745 di elo secondo le liste FIDE</p></div>
}

function BulmaCard() {
return <div class="card">
  <div class="card-content">
    <p class="title">
      “creare é dare una forma al proprio destino”
    </p>
    <p class="subtitle">
      Umbriaway Consulting
    </p>
  </div>
  <footer class="card-footer">
    <p class="card-footer-item">
      <span>
        View on <a href="#">Twitter</a>
      </span>
    </p>
    <p class="card-footer-item">
      <span>
        Share on <a href="#">Facebook</a>
      </span>
    </p>
  </footer>
</div>
}


function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
<WelcomeMessage />
<PunteggioElo />
<BulmaCard />

      </header>
    </div>
  );
}

export default App;
Bulma indirizzo https://bulma.io/

e l’effetto che fa lo vediamo qui sopra. Ora andiamo oltre, là dove nessuno é mai stato per vedere finalmente in azione i PROPS dal vivo! Allo stello livello di APP.JS creo una cartella componente e dentro ci creo un file componente specifico di nome AppCard.js, da sottolineare che il componente é uno, come la trota del titolo, ma che il pescatore se ne porta a casa tre di item:

import React from 'react';

function AppCard(props) {
  return (
    <div className="card">
      <header className="card-header">
        <h1 className="card-header-title subtitle">{ props.title }</h1>
      </header>
      <div className="card-content">
        <p>{ props.msg }</p>
      </div>
    </div>
  )
}

export default AppCard;

questo componente verrà richiamato nel file APP:JS che ospita un array di dati da far ciclare con il comando nomearray.map! Nei dati ci sono i numeri di telefono di famosi grandi maestri, sostanzialmente stiamo costruendo una rubrica passando dinamicamente dei valori grazie alla tecnica PROPS:

import React from 'react';
import './App.css';
import AppCard from './components/AppCard';

function App() {
  const users = [
    {
      name: 'Caruana',
      cell: '+39 13148249'
    },
    {
      name: 'Carlsen',
      cell: '+39 13148247'
    },
    {
      name: 'Polgar',
      cell: '+39 13148241'
    }
  ];

  return (
    <div className="section">
      <div className="columns">
        {
          users.map(user => <AppCard title={user.name} msg={user.cell} />)
        }
      </div>
    </div>
  );
}

Ecco allora che quel fantomatico fantascienza finale dell’ articolo precedente all’ indirizzo https://umbriawaysemplifica.wordpress.com/2020/11/24/come-realizzare-componenti-con-react-e-vivere-felici-anche-con-il-lockdown/ é stato felicemente concretizzato, come dire senza mancare di rispetto alle istituzioni che anche noi con React siamo capaci di moltiplicare i pani e i pesci! Pardon le trote cioé!

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...