REACT overview parte 2 di 2: come potenziare il proprio profilo da Frontend Developer e vivere felici!

Concludiamo il lavoro iniziato con https://umbriawaysemplifica.wordpress.com/2020/11/20/react-introduzione-parte-1-di-2-come-potenziare-il-proprio-profilo-frontend-developer-e-vivere-quasi-felici/ riprendendo un tutorial in inglese https://www.freecodecamp.org/news/react-beginner-handbook/ . Nella prima parte abbiamo visto come é facilissimo creare un APP React (con il comando da finestra npx create-react-app nomeprogetto) e anche come é semplice lanciare un web server sulla porta tremila con il comando npm start, poi abbiamo visto che cosa sono i componenti e come funziona JSX. Non ci resta per completare questa introduzione per newbie vedere gli stati, i cicli di vita e i props! Che cosa é lo STATO in REACT e come si gestisce? Ogni componente React può avere il proprio stato. Cosa si intende per stato? Lo stato è l’insieme di dati gestito dal componente. Pensa a un modulo, per esempio. Ogni singolo elemento di input del modulo è responsabile della gestione del suo stato: ciò che è scritto al suo interno. Un pulsante è responsabile di sapere se viene cliccato o meno. Se è a fuoco. Un collegamento è responsabile di sapere se il mouse passa sopra di esso. In React, o in qualsiasi altro framework / libreria basato su componenti, tutte le nostre applicazioni sono basate sullo stato dei componenti e ne fanno un uso intensivo. Gestiamo lo stato utilizzando l’utility useState fornita da React. È tecnicamente un gancio (non è necessario conoscere i dettagli dei ganci in questo momento, ma è quello che è). Importi useState da React in questo modo:

import React, { useState } from 'react'

Chiamando useState (), otterrai una nuova variabile di stato e una funzione che possiamo chiamare per modificarne il valore. useState () accetta il valore iniziale dell’elemento di stato e restituisce un array contenente la variabile di stato e la funzione che chiami per alterare lo stato:

const [count, setCount] = useState(0)

Questo è importante. Non possiamo semplicemente modificare direttamente il valore di una variabile di stato. Dobbiamo chiamare la sua funzione di modifica. In caso contrario, il componente React non aggiornerà la sua interfaccia utente per riflettere le modifiche dei dati. Chiamare il modificatore è il modo in cui possiamo dire a React che lo stato del componente è cambiato. La sintassi è un po ‘strana, giusto? Poiché useState () restituisce un array, utilizziamo la destrutturazione dell’array per accedere a ogni singolo elemento, in questo modo:

const [count, setCount] = useState (0)

Ecco un esempio pratico:


import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}
ReactDOM.render(<Counter />, 
document.getElementById('app'))

Puoi aggiungere tutte le chiamate useState () che desideri, per creare tutte le variabili di stato che desideri:

const [count, setCount] = useState(0)
const [anotherCounter, setAnotherCounter] = useState(0)

Vediamo ora i PROPS in React. Chiamiamo props i valori iniziali passati a un componente. In precedenza abbiamo creato un componente WelcomeMessage:

function WelcomeMessage() {
  return <p>Welcome!</p>
}

e usato poi per la parte di visualizzazione:

<WelcomeMessage />

Questo componente non ha alcun valore iniziale. Non ha oggetti di scena. Gli oggetti possono essere passati come attributi al componente in JSX:

<WelcomeMessage myprop={'somevalue'} />

e all’interno del componente riceviamo gli oggetti di scena come argomenti:

function WelcomeMessage(props) {
  return <p>Welcome!</p>
}

È comune utilizzare la destrutturazione degli oggetti per ottenere gli oggetti di scena per nome:

function WelcomeMessage({ myprop }) {
  return <p>Welcome!</p>
}

Ora che abbiamo l’elica, possiamo usarla all’interno del componente. Ad esempio possiamo stampare il suo valore nel JSX:

function WelcomeMessage({ myprop }) {
  return <p>{myprop}</p>
}

Le parentesi graffe qui hanno vari significati. Nel caso dell’argomento funzione, le parentesi graffe vengono utilizzate come parte della sintassi di destrutturazione dell’oggetto. Quindi li usiamo per definire il blocco del codice funzione e infine nel JSX per stampare il valore JavaScript. Il passaggio di oggetti di scena ai componenti è un ottimo modo per trasferire i valori nella tua applicazione. Un componente detiene i dati (ha uno stato) o riceve i dati attraverso i suoi prop. Possiamo anche inviare funzioni come oggetti di scena, quindi un componente figlio può chiamare una funzione nel componente genitore. Un oggetto speciale si chiama children. Che contiene il valore di tutto ciò che viene passato tra i tag di apertura e chiusura del componente, ad esempio:

<WelcomeMessage> Here is some message </WelcomeMessage>

In questo caso, all’interno di WelcomeMessage potremmo accedere al valore Here is some message utilizzando il prop children:

function WelcomeMessage({ children }) {
  return <p>{children}</p>
}

Esaurito l’argomento PROPS passiamo a scandagliare il Flusso di dati in un’applicazione React. In un’applicazione React, i dati fluiscono tipicamente da un componente genitore a un componente figlio, usando oggetti di scena come abbiamo visto nella sezione precedente:

<WelcomeMessage myprop={'somevalue'} />

Se passi una funzione al componente figlio, puoi comunque cambiare lo stato del componente genitore da un componente figlio:

const [count, setCount] = useState(0)
<Counter setCount={setCount} />

All’interno del componente Counter ora possiamo prendere il prop setCount e chiamarlo per aggiornare lo stato del conteggio nel componente genitore, quando succede qualcosa:

function Counter({ setCount }) {
  //...

  setCount(1)

  //...
}

Devi sapere che ci sono modi più avanzati per gestire i dati, che includono l’API di contesto e librerie come Redux. Ma quelli introducono più complessità e il 90% delle volte utilizzando questi 2 modi che ho appena spiegato sono la soluzione perfetta. Ok ora passiamo agli eventi da gestire. React fornisce un modo semplice per gestire gli eventi attivati ​​da eventi DOM come clic, eventi del modulo e altro. Parliamo di eventi di clic, che sono piuttosto semplici da digerire:

<button
  onClick={(event) => {
    /* handle the event */
  }}
>
  Click here
</button>

Quando si fa clic sull’elemento, viene attivata la funzione passata all’attributo onClick. È possibile definire questa funzione al di fuori di JSX:

const handleClickEvent = (event) => {
  /* handle the event */
}

function App() {
  return <button onClick={handleClickEvent}>Click here</button>
}

Quando l’evento click viene attivato sul pulsante, React chiama la funzione del gestore di eventi.React supporta una grande quantità di tipi di eventi, come onKeyUp, onFocus, onChange, onMouseDown, onSubmit e molti altri. E passiamo all’ ultimo argomento per completare introduzione e overview per NEWBIE! Eventi del ciclo di vita in un componente React. Finora abbiamo visto come gestire lo stato con l’hook useState. C’è un altro gancio che voglio introdurre in questo post: useEffect. L’hook useEffect consente ai componenti di avere accesso agli eventi del ciclo di vita di un componente. Quando chiami l‘hook, gli passi una funzione. La funzione verrà eseguita da React quando il componente viene renderizzato per la prima volta e ad ogni successivo ri-rendering / aggiornamento. React aggiorna prima il DOM, quindi chiama qualsiasi funzione passata a useEffect (). Il tutto senza bloccare il rendering dell’interfaccia utente, anche bloccando il codice. Ecco un esempio:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)

  useEffect(() => {
    console.log(`You clicked ${count} times`)
  })

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Poiché la funzione useEffect () viene eseguita ad ogni successivo riesecuzione / aggiornamento del componente, possiamo dire a React di saltarla, per motivi di prestazioni. Lo facciamo aggiungendo un secondo parametro che è un array che contiene un elenco di variabili di stato da controllare. React eseguirà nuovamente l’effetto collaterale solo se uno degli elementi in questo array cambia:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
}, [name, count])

Allo stesso modo, puoi dire a React di eseguire l’effetto collaterale solo una volta (al momento del montaggio), passando un array vuoto:

useEffect(() => {
  console.log(`Component mounted`)
}, [])

Potresti ritrovarti a usare molto questa opzione. useEffect () è ottimo per aggiungere log, accedere ad API di terze parti e molto altro ancora. A questo punto possiamo dire di avere imparato REACT? Certo che no! Dove andare da qui? Padroneggiare gli argomenti spiegati in questo articolo è un grande passo verso il tuo obiettivo di imparare React. Quindi occorre costruire app semplici in modo da somatizzare quanto spiegato in questa breve introduzione composta da due articoli su https://umbriawaysemplifica.wordpress.com dove abbiamo preso un pò di confidenza con:

Components
JSX
State
Props

frontend developer umbria

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