frontend developer umbria

REACT introduzione parte 1 di 2: come potenziare il proprio profilo Frontend Developer e vivere quasi felici!

Lo sappiamo oggi il mercato del lavoro vuole supereroi in grado di conoscere almeno un migliaio di tecnologie base per fare sviluppo web, se non sei full stack developer non sei nessuno. Poi ti hanno detto che devi imparare tutto per ieri anche se non sei un gatto dai molti karma incorporati. Quindi prendiamoci una vacanza da http://umbriawayformazione.altervista.org/ci_project_longitudine/ (dove sto litigando con i css ma anche con le substring che hanno deciso di non collaborare costringendomi a delle mandrakate poco professionali) e scorporiamo NELLA PRATICA il materiale proposto da Flavio Copes all’ indirizzo https://www.freecodecamp.org/news/react-beginner-handbook/ . L’articolo per avere un primo trauma formativo é perfetto, anche perché si digerisce malgrado l’argomento non sia proprio easy come il calcio da serie A come assimilazione.

React è uno dei framework JavaScript più popolari mai creati, uno dei migliori strumenti in circolazione. L’obiettivo di questo post è fornire una guida introduttiva all’apprendimento di React, TUTORIAL filtrato come già detto sulla parte pratica da https://www.freecodecamp.org. Alla fine di questo POST possiamo somatizzare perché React è così popolare, come installarlo, cosa sono i COMPONENTI, che cosa é JSX, che cosa sono gli STATI e i PROPS, come gestire gli EVENTI e una idea di massima sul CICLO DI VITA in un componente React. Tutto ciò può essere filtrato per innalzare asticelle più alte con tutorial più avanzati. React è una libreria JavaScript che mira a semplificare lo sviluppo di interfacce visive. Sviluppato su Facebook e rilasciato nel mondo nel 2013, guida alcune delle app più utilizzate, alimentando Facebook e Instagram tra innumerevoli altre applicazioni. Il suo obiettivo principale è quello di semplificare il ragionamento su un’interfaccia e sul suo stato in qualsiasi momento. Lo fa dividendo tutto in una raccolta di componenti. All’ inizio é inevitabile una battaglia con REACT e un momento di repulsione per la complessità verso qualcosa a tratti di incomprensibile perché nuovo, ma se si supera questa crisi e scatta un toggle-uno allora l’interruttore si accende, REACT potrà essere integrato nel proprio cv come risorsa da sviluppatore frontend (il linguaggio naturalmente lavora anche e soprattutto lato server). React é ecosistema pieno di risorse, funzioni, librerie, strumenti.

Per partire bisogna capire quattro idee base: components, JSX, State, Props. Ma quanto JS tradizionale devo conoscere per spulciare React? I fondamenti di JS andrebbero carpiti con una panoramica su variabili, funzioni freccia, oggetti e array con REST, funzioni di ritorno o callback, richiami e valori letterali modello! Per le variabili vedere https://flaviocopes.com/javascript-variables/ , per le arrow function vedere https://flaviocopes.com/javascript-arrow-functions/ , per oggetti e array vedere https://flaviocopes.com/javascript-rest-spread/ , su come destructuring Objects and Arrays in JavaScript vedere https://flaviocopes.com/javascript-destructuring/ , per i Template Literal vedere https://flaviocopes.com/javascript-template-literals/ , per le callback vedere https://flaviocopes.com/javascript-callbacks/ , per i moduli vedere https://flaviocopes.com/es-modules/

Perché imparare React? Qualsiasi sviluppatore Web dovrebbe avere una conoscenza di base di React perché il framework é molto popolare e richiesto dal mondo del lavoro, perché sotto il cofano di molte applicazioni trovi REACT come core business e perché REACT promuove buone pratiche di sviluppo, tra cui la riusabilità del codice e lo sviluppo basato sui componenti. È veloce, è leggero e il modo in cui ti fa pensare al flusso di dati nella tua applicazione si adatta perfettamente a molti scenari comuni. React é assolutamente fantastico! A questo punto proviamo a darci da fare, andiamo con la finestra terminale fino a xampp/htdocs (oppure altro path) e una volta dentro la nostra area creazioni digitiamo il comando:

npx create-react-app nomeprogetto

alla fine della lunga installazione dove la macchina si preoccuperà di inizializzare anche GIT sulla struttura dell’ Applicazione react compaririranno le istruzioni per proseguire, dove con cd nomeprogetto si entra nella cartella progetto e con il comando npm start si vede l’effetto che fa, nello specifico verrà lanciato un web server all’ indirizzo http://localhost e porta 3000, quindi http://localhost:3000/, per vedere comparire a video la nostra prima applicazione!

frontend developer umbria
WOW!

A questo punto voglio dare un occhiata a tutti i file della mia APP quindi apro visual studio code e apro la cartella progetto dove andremo subito a vedere quali adattamenti ha messo in atto il programma sul file package.json:

{
  "name": "tuacartellaprogetto",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.6",
    "@testing-library/react": "^11.2.1",
    "@testing-library/user-event": "^12.2.2",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

Sembrerà incredibile ma in questo momento abbiamo installato con successo la nostra applicazione react e verificato anche che tutto é ok per il funzionamento, fantastico! Il passo successivo sarà quello di indagare sul suo funzionamento. Per esempio cerchiamo di inquadrare l’idea di COMPONENTE! Visionando il tutto c’è un file che spicca: App.js che é il nostro primo componente React che incontriamo:

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

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>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

Un’applicazione creata utilizzando React, o uno degli altri framework di frontend popolari come Vue e Svelte, ad esempio, viene creata utilizzando dozzine di componenti. Analizziamo questo primo componente. Semplifichiamo il codice per la didattica in questo modo:

import React from 'react'
import logo from './logo.svg'
import './App.css'

function App() {
  return /* something */
}

export default App

Possiamo vedere alcune cose interessanti come il fatto che esportiamo una funzione chiamata App per esempio e il fatto che importiamo una libreria js di nome react, una immagine svg e un file css in questo modo abbiamo già pronte da usare e visualizzare tutte le risorse di cui abbiamo bisogno. Indaghiamo ancora sul concetto di componente. L’app è una funzione che, nell’esempio originale, restituisce qualcosa che a prima vista sembra piuttosto strano. Sembra HTML ma contiene JavaScript incorporato. Questo è JSX, un linguaggio speciale che usiamo per costruire l’output di un componente. Parleremo di più di JSX nella prossima sezione. Oltre a definire alcuni JSX da restituire, un componente ha molte altre caratteristiche. Un componente può avere il proprio stato, il che significa che incapsula alcune variabili a cui altri componenti non possono accedere a meno che questo componente non esponga questo stato al resto dell’applicazione. Un componente può anche ricevere dati da altri componenti. In questo caso stiamo parlando di oggetti di scena. Presto esamineremo in dettaglio tutti questi termini (JSX, State e Props). Non possiamo parlare di React senza prima spiegare JSX. Nell’ultima sezione hai incontrato il tuo primo componente React, il componente App definito nell’applicazione predefinita creata da create-react-app. Ritorniamo quindi su:

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

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>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
      </header>
    </div>
  );
}

export default App;

In precedenza abbiamo ignorato tutto ciò che era all’interno dell’istruzione return, ma in questa sezione ne parleremo. Chiamiamo JSX tutto ciò che è racchiuso tra parentesi restituite dal componente:

<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>
    <a
      className="App-link"
      href="https://reactjs.org"
      target="_blank"
      rel="noopener noreferrer"
    >
      Learn React
    </a>
  </header>
</div>

Sembra HTML, ma non è realmente HTML. È un po ‘diverso. Ed è un po ‘strano avere questo codice all’interno di un file JavaScript. Questo non sembra affatto JavaScript! Sotto il cofano, React elaborerà il JSX e lo trasformerà in JavaScript che il browser sarà in grado di interpretare. Quindi stiamo scrivendo JSX, ma alla fine c’è un passaggio di traduzione che lo rende digeribile a un interprete JavaScript. React ci fornisce questa interfaccia per una ragione: è più facile costruire interfacce UI usando JSX. Una volta acquisita familiarità con esso, ovviamente. Nella prossima sezione parleremo di come JSX ti permetta di comporre facilmente una UI, poi vedremo le differenze con il “normale HTML” che devi conoscere. Uno dei principali vantaggi di JSX è che semplifica la creazione di un’interfaccia utente. In particolare, in un componente React puoi importare altri componenti React e puoi incorporarli e visualizzarli. Un componente React viene solitamente creato nel proprio file, perché è così che possiamo facilmente riutilizzarlo (importandolo) in altri componenti. Ma un componente React può anche essere creato nello stesso file di un altro componente, se prevedi di usarlo solo in quel componente. Non ci sono “regole” qui, puoi fare ciò che ti sembra meglio. In genere utilizzo file separati quando il numero di righe in un file aumenta troppo. Per semplificare le cose, creiamo un componente nello stesso file App.js. Creeremo un componente WelcomeMessage:

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

È una semplice funzione che restituisce una riga di JSX che rappresenta un elemento HTML p. Lo aggiungeremo al file App.js. Ora all’interno del componente App JSX possiamo aggiungere per mostrare questo componente nell’interfaccia utente:

import React from 'react'
import logo from './logo.svg'
import './App.css'

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

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

Ed ecco il risultato. Riesci a vedere il “Benvenuto!” come messaggio sullo schermo? Ricordiamoci di avere appeso il WelcomeMessage nel punto giusto!

Ancora WOW!

Diciamo che WelcomeMessage è un componente figlio di App e App è il suo componente padre. Stiamo aggiungendo il componente come se facesse parte del linguaggio HTML. Questa è la bellezza dei componenti React e di JSX: possiamo comporre un’interfaccia dell’applicazione e usarla come se stessimo scrivendo HTML. Con alcune differenze. Quindi indaghiamo sulle differenze tra JSX e HTML. JSX sembra un po’ HTML, ma non lo è. In questa sezione voglio presentarti alcune delle cose più importanti che devi tenere a mente quando usi JSX. Una delle differenze potrebbe essere abbastanza ovvia se guardi il componente App JSX: c’è uno strano attributo chiamato className. In HTML usiamo l’attributo class. È probabilmente l’attributo più utilizzato, per vari motivi. Uno di questi motivi è CSS. L’attributo class ci consente di modellare facilmente gli elementi HTML e framework CSS come Tailwind mettono questo attributo al centro del processo di progettazione dell’interfaccia utente CSS. Ma c’è un problema. Stiamo scrivendo questo codice dell’interfaccia utente in un file JavaScript e la classe nel linguaggio di programmazione JavaScript è una parola riservata. Ciò significa che non possiamo usare questa parola riservata come vogliamo. Ha uno scopo specifico (definire le classi JavaScript) e i creatori di React hanno dovuto scegliere un nome diverso per esso. È così che siamo finiti con className invece di class. È necessario ricordarlo soprattutto quando si copia / incolla dell’HTML esistente. React farà del suo meglio per assicurarsi che le cose non si rompano, ma genererà molti avvisi negli Strumenti per sviluppatori:

Questa non è l’unica caratteristica HTML che soffre di questo problema, ma è la più comune. Un’altra grande differenza tra JSX e HTML è che l’HTML è molto rilassato, possiamo dire. Anche se hai un errore nella sintassi, o chiudi il tag sbagliato, o hai una mancata corrispondenza, il browser farà del suo meglio per interpretare l’HTML senza interruzioni. È una delle caratteristiche principali del Web. È molto indulgente. JSX non perdona. Se dimentichi di chiudere un tag, avrai un chiaro messaggio di errore. Un’altra grande differenza tra JSX e HTML è che in JSX possiamo incorporare JavaScript. Una delle migliori caratteristiche di React è che possiamo facilmente incorporare JavaScript in JSX. Altri framework di frontend, ad esempio Angular e Vue, hanno i loro modi specifici per stampare i valori JavaScript nel modello o eseguire cose come i loop. React non aggiunge cose nuove. Invece, ci consente di utilizzare JavaScript nel JSX, utilizzando le parentesi graffe. Il primo esempio di questo che ti mostrerò proviene direttamente dal componente App che abbiamo studiato finora. Importiamo il file SVG del logo utilizzando:

import logo from './logo.svg'

e poi nel JSX assegniamo questo file SVG all’attributo src di un tag img:

<img src={logo} class="App-logo" alt="logo" />

Vediamo un altro esempio. Supponiamo che il componente App abbia una variabile chiamata messaggio:

function App() {
  const message = 'Hello!'
  //...
}

Possiamo stampare questo valore nel JSX aggiungendo {messaggio} ovunque nel JSX. All’interno delle parentesi graffe {} possiamo aggiungere qualsiasi istruzione JavaScript, ma solo un’istruzione per ogni blocco di parentesi graffe. E la dichiarazione deve restituire qualcosa. Per esempio questa è una dichiarazione comune, che troverete in JSX. Abbiamo un operatore ternario in cui definiamo una condizione (messaggio === ‘Ciao!’), E stampiamo un valore se la condizione è vera, o un altro valore (il contenuto del messaggio in questo caso) se la condizione è falsa:

{
  message === 'Hello!' ? 'The message was "Hello!"' : message
}

In questa prima parte abbiamo approfondito l’idea di COMPONENTE e focalizzato meglio che cosa é JSX nella seconda e ultima parte andremo a concludere con gli stati, i cicli di vita e props!

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