frontend developer umbria

Come realizzare componenti con REACT e vivere felici anche con il lockdown

Ok questa idea in REACT di scomporre l’interfaccia utente in tante zone essenziali più piccole riutilizzabili piace quindi adesso sperimentiamo con un pò di pratica facendo seguito agli articoli preliminari apparsi su https://umbriawaysemplifica.wordpress.com/ . Voglio realizzare il mio primo componente personalizzato come faccio? O magari anche più di uno! Dopo aver creato il progetto con le modalità che conosciamo (npx create-react-app nomeprogetto) e capito che per lanciare l’eseguibile presente nel file package.json con npm start che lancia di default un localhost sulla porta 3000 (usare visual code studio che ha la finestra terminale integrata facilita le cose) per consentirci la visualizzazione, andiamo a lavorare sulla pagina principale APP.JS strimpellando questo codice:

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

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

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
	<WelcomeMessage />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Da notare in alto la funzione di benvenuto:

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

questa funzione che ha un return e quindi restituisce la scritta modellata dai css Welcome GMC viene inserita sottoforma di tag in stile XML all’ interno della funzione APP che ha a sua volta un modo di restituire il contenuto tramite la parola chiave return. Ne consegue che ad esempio posso inserire tutto ciò che voglio all’ interno della pagina a livello atomico, per esempio potrei decidere di inserire un ulteriore componente sotto il welcome che recita la forza elo dell’ agonista (GM sta per grande maestro e GMC é un termine scherzoso che fa riferimento a una inedita categoria degli scacchi che é quella di grande maestro condominiale e il punteggio elo é quello che caratterizza la forza di un giocatore, il campione del mondo Carlsen per esempio ha uno stratosferico 2882 punti elo) vediamo come posso trasformare la pagina per inserire due componenti:

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 App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
<WelcomeMessage />
<PunteggioElo />
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

nel frattempo però ho dovuto anche ampliare il mio file APP.CSS che inserendo le due classi aggiuntive gmc ed elo é diventato:



.App {
  text-align: center;
}

.App-logo {
  height: 40vmin;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    animation: App-logo-spin infinite 20s linear;
  }
}

.App-header {
  background-color: #ff9900;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

.gmc {
background-color:#e5e5e5;
padding:10px;
border:4px solid black;
color: blue;
}

.elo {
background-color:cyan;
padding:14px;
border:2px solid #ccc;
color:red;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

cerchiamo di complicarci la vita, per esempio se volessi integrare dei font diversi per i miei paragrafi come faccio? Vado su https://fonts.google.com/ ne scelgo uno e seguo le indicazioni del codice offerte a video, in particolare si tratta di aggiungere font-family: ‘Nerko One’, cursive; nel css e anche l’import, il tutto dopo il copia e incolla per la classe elo ad esempio che voglio modellare diventa:

.elo {
background-color:cyan;
padding:14px;
border:2px solid #ccc;
color:red;
@import url('https://fonts.googleapis.com/css2?family=Nerko+One&display=swap');
font-family: 'Nerko One', cursive;
}

ed é palesemente chiara la differenza tra i due paragrafi, quindi posso gestire i miei CSS come voglio ricordando che con JSX non é sufficiente menzionare la classe (class) ma usare la notazione Camel Case con className. Inoltre andando nella cartella PUBLIC e sul file index.html ho anche la possibilità di modificare il TITLE della pagina per esempio per farlo diventare come nel nostro caso:

<title>Welcome APP GMC React</title>

In questo post abbiamo preso domestichezza con i file e la struttura ad albero react, un esercizio interessante da mettere in piedi é quello di inserire un framework responsive tipo Bulma e stampare a video per esempio un componente CARD. Dopodiché creare un array seriale per più item e moltiplicare le CARD in automatico per far scorrere i dati. Fantascienza?

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...