Corso React in Italiano da 7 ORE Introduttivo

Ciao a tutti benvenuti al corso di react episodio 1 oggi non ce la caviamo facendo un unico episodio di introduzione ed installazione come mio solito Perciò oggi ci dedichiamo a fare un'introduzione a react non saltatela perché parliamo di un po' di cose perché imparare react Cos'è react un pochino del dell'ecosistema di react e quant'altro Allora prima di entrare sulla definizione eccetera Questo è il Sito di riferimento Che utilizzeremo che Potete utilizzare react.dom È nuovo quindi hanno rifatto un po' tutto hanno rivisto un po' tutto sono cambiate un po' di cose quindi siete fortunati perché è

una versione aggiornata del corso alle ultimissime novità e come al solito sarà un corso introduttivo Nel senso che andremo a vedere tutte le basi non entreremo nel dettaglio più profondo di tutto però Vedremo Tanto di react la quasi totalità di ciò che vi serve per Cominciare farò poi un corso avanzato sul mio sito cgr.protezionecivile.it conoscerete react con la triade react View e angular e hanno tutti un approccio diverso nell'affrontare il problema della creazione del dell'interfaccia grafica di un sito di una applicazione e quant'altro Il discorso è che react è molto particolare in in merito però

secondo me è molto utile imparare non solo perché è largamente diffuso è il Framework lo chiamo framework ma adesso ci arriviamo è il è il framework con più Community dietro più are che ha un ecosistema più grande librerie eccetera eccetera ma è molto utile perché imparando le basi di react arrivate poi a capire altre cose che sono comprese Ad esempio in Astro che è un framework che sta crescendo tantissimo che può avere dentro react ok E in più si capisce tanto svelt anche se non sono eh correlati svelt e react in realtà molte Cose sono

quasi simili molto più simili tra svelt e react che non tra angular e react eccetera svelt è un altro che si potrebbe aggiungere a questa triade ok Quindi per farvi capire quanto è grosso l'ecosistema di JavaScript Ne parleremo Appunto nel mio corso di JavaScript eh sul sito quindi react non solo è famoso largamente utilizzato eccetera eccetera ma è anche un'ottima base perché se capite react che è quello un po' più particolare in realtà gli altri Framework sono molto più semplici Secondo me a livello di sintassi eccetera e molte cose vengono riprese quindi molte cose che

utilizziamo qua dentro vengono poi riprese in altri framework ora Che cos'è react react È una libreria per web e Native interfaccia utente lasciate perdere queste Din Native eccetera concentriamoci sul fatto è una libreria non viene definito come framework perché un framework Di solito è un insieme più Grande di strumenti come vedrete poi react si va a dividere Ad esempio in remix e Next e vedete che questi sono definiti come framework Quindi react è più una libreria per quanto porta tutto nuovo in realtà è comunque molto semplice Next ad esempio e remix portano invece molte molte

molte semplificazioni per lavorare con react infatti durante il corso cercheremo di restare con le basi di react cercherò di spiegarvi solo le basi di react ma in realtà avremo Modo di utilizzare in qualche video qualche libreria ad esempio redax è una delle delle più famose ma potreste aggiungere frame Motion per animazioni potreste usare Axios per fare le chiamate http anche se le potete fare eh Native con JavaScript quindi c'è tutto un ecosistema attorno a react che poi viene condensato e più facile e di più facile utilizzo all'interno dei framework Ok quindi Sì potete vedere react

come tra virgolette un framework In realtà poi vi rendete conto che ci sono i framework del framework perciò react ha poi delle diramazioni molto più complesse in termini di carico di strumenti che portano in realtà sono molto più semplici da usare perché ci permettono di evitare di scrivere noi tante cose che dovremmo fare a mano con react va bene noi però in questo corso Ci limitiamo di imparare a fare le cose con react perché poi diventa più semplice approcciare Next e remix di cui Poi andrò a fare dei corsi perciò non preoccupatevi Quindi react alla

fine è è questo è una libreria per creare interfacce web Ok Cosa sono le interfacce perché ci serve una libreria o un framework perché ci serve tutta sta cosa Il fatto è che se voi arrivate dal pur htm ml e CSS e JavaScript cosa che mi aspetto A meno che state girando da altri framework se non avete ancora cominciato a lavorare quindi con framework fari avete molto probabilmente Creato delle pagine HTML dove Ad esempio la il menù qua in alto lo avete messo su ogni pagina Quindi se io mi sposto learn reference Community vedete come

qua in alto c'è sempre questa barra di ricerca il logo e quant'altro in puro HTML questa cosa qua dovete metterla su ogni pagina come Vedremo poi quando parleremo dei componenti in re react La cosa bella di questi framework quindi non solo react ma dei framework in generale è che noi possiamo dire Guarda ti scrivo una Volta sta cosa qui e poi tu me la vai a riprendere quindi il concetto dei framework e di react è quello di andare a semplificare la creazione dell'interfaccia utente quindi molte cose che diventano tediose fastidiose anche da gestire Lunghe da

scrivere in puro HTML o anche il lato JavaScript quindi codici lunghi da dover fare su ogni pagina richiamare eccetera che diventano complessi react ci permette di gestirle in modo molto molto molto più Semplice certo per semplificarci quella gestione del codice dobbiamo imparare una sintassi aggiuntiva dobbiamo imparare nuovi costrutti quindi dobbiamo imparare cose al di fuori del puro HTML al di fuori del puro eh del puro JavaScript al di fuori del puro CSS Però una cosa bella è la possibilità di dire che io applico una classe di un certo tipo in base ad una condizione giusto

per fare degli esempi non non cerco di spoilerarvi niente perché magari Appunto È la prima volta che vi approcciate ad un framework e non voglio spaventarvi però il discorso è che in react potete fare praticamente tutto Quindi da siti poi potete andare su react Native per fare applicazioni possiamo fare applicazioni web quindi non solo siti che cambiano pagina vedete Ma possiamo fare in realtà se notate qui non cambia mai la pagina vado qua e vedete che cambia pagina vedete che si aggiorna che qua c'è la x in realtà come vedete Essendo fatto in react questo

è tutto una sulla pagina vedete qua non si aggiorna praticamente mai Ok quindi non solo siti ma anche vere applicazioni web quindi pensate a gestionali e e quant'altro le possibilità sono praticamente infinite e diventano ancora di più infinite quando Cominciate ad aggiungerci i vari framework le varie librerie e tutto ciò che react offre ultima postilla da dire è che react un po' meno di angular in Italia ma è molto Ricercato quindi react è assolutamente valido da imparare non solo perché vi apre una quantità di possibilità infinite non solo appunto con poi con le sue diramazioni

ma è anche molto ricercato un po' meno in Italia rispetto all'estero All'estero si usa molto di più react se Guardate YouTube se guardate i progetti gitab eccetera C'è molto codice react in Italia si tende ancora a cercare angular Non preoccupatevi perché non è che per saper Creare delle interfacce dovete dedicare una vita react potete impararli entrambi certo più tempo dedicate a uno più diventate bravi su quello specifico framework Però in realtà sapere due o tre framework angular svelt react non è una cosa impossibile quindi Quest era un'introduzione a react cos'è come perché diramazioni come impararlo

perché impararlo eccetera eccetera direi di non andare oltre con l'introduzione cominciamo subito dal prossimo video ad Installare quelli che sono tutti gli strumenti necessari per poter effettivamente lavorare in react Ci vediamo tra poco episodio 2 del corso di react oggi andiamo ad installare tutto ciò che ci serve e e a creare la nostra prima applicazione che poi analizzeremo nei prossimi due video uno dal lato struttura e uno dal lato sintassi per cominciare a lavorare con react Dobbiamo crearci non solo il nostro ambiente ma anche un progetto che permetta a JavaScript di funzionare sulla macchina senza

il web di conseguenza se sapete già di cosa sto parlando è Node chiaramente se invece non lo sapete ripeto è Node Però al momento non Dateci molto pensiero perché io ho un corso di Node già sul sul sul canale gratuitamente andrò a fare poi un corso molto più nel dettaglio sul mio sito per capirlo molto molto bene per ora vedetela così Node è ciò che ci serve per far funzionare il nostro ambiente Quindi tutto il nostro sito quant'altro eccetera funziona anche grazie a node stessa cosa quando poi andremo a deploy quindi a mettere in produzione

la nostra applicazione anche i server su cui andiamo a mettere il nostro sito o app o quello che è avranno Node Quindi se non lo conoscete Non l'avete ancora studiato eccetera portatevelo a casa così Node è fondamentale per far funzionare ciò che stiamo scrivendo sulla nostra macchina così come lo è anche sui server su cui Andremo a deploy per ora ve la portate a casa così senza problemi Poi però approfondito perché non potete essere in realtà dei web developer come si deve o anche full Stack a maggior ragione full Stack che utilizzate Node senza sapere

cos'è Node perché funziona come funziona come lo possiamo sfruttare al meglio eccetera eccetera Un conto è non utilizzarlo poi lato backend però va conosciuto è uno strumento fondamentale e va conosciuto quindi Queste sono le Due alternative potete scegliere 18-18 è quella consigliata al momento Oppure io ho la corrente 20 280 Io sto usando questa se non mi sbaglio forse la 26 è irrilevante Scegliete Cosa volete io ho le ultime funzionalità scaricate ed installate non non la tiro per le lunghe c'è il mio video di Node del mio corso su come installare Node son comunque avanti

avanti avanti Non ci vuole molto ad installarlo e quindi questo è fondamentale per far girare il nostro Progetto vedrete poi quando apriremo la struttura del progetto subito dei punti di Node e ve li andrò a elencare soprattutto per chi non non lo dovesse conoscere Dopodiché ci serve Visual studio code ci sono tanti altri li chiamo editor di codice Ok In realtà ci sono anche gli Ide che sono strumenti di lavoro in realtà più avanzati però restiamo così chiamiamo chamoli editor di codice va bene Sono programmi che ci permettono di scrivere codice più Velocemente e quindi

è quello che ci interessa è Visual studio code che è il più famoso il più bello non non ci sono storie Google sta lavorando a qualcosa ID idx idx non è ancora uscito non si sa niente perciò per ora Visual studio code resta Lo standard Lo scaricate Ecco qua anziché descrivervelo ve lo faccio vedere direttamente anche senza installarlo accetto vado avanti queste sono le quattro spunte che ci interessano spiego le prime due servono Per aprire con code una cartella velocemente sia dal comando dal terminale che dal dalle spora risorse Dopodiché utilizziamo code per aprire direttamente

i file supportati può essere un file json un file HTML e altre cose e poi abbiamo aggiungi ath che è fondamentale Mi raccomando riavviate appunto per poter utilizzare i vari comandi eccetera quindi queste quattro sono fondamentali questa qui fate quello che volete proseguite con avanti avanti Installate e siete a posto Io esco e quindi al momento abbiamo il sito che Potete utilizzare react Se fate learn potete leggere e qua c'è tutta la documentazione spiegano eccetera dopodiché abbiamo installato Node che ci serve per far funzionare tutto il nostro ambiente dopodiché abbiamo Visual studio code che ci

serve per vedere il nostro ambiente e scrivere nel nostro ambiente Adesso però dobbiamo creare la nostra prima applicazione in react se avete Visto altri tutorial Voi potreste aver visto questo vedete crea create react app che però non è stato deprecato Attenzione si dice che è stato deprecato è semplicemente sconsigliato adesso dal team di react di conseguenza è largamente suggerito se scrivete react vit vite andate su vite.js ed è stato consigliato questo ora quello che ci interessa è questa parte qua quindi possiamo utilizzare vari tipi di comandi per creare dei progetti già di default Quindi non

solo Vanilla Vanilla js è semplicemente JavaScript normale do perché abbiamo View react preact lck svelt Solid la vagonata di di roba che c'è notate che c'è che non c'è angular ad esempio Comunque noi abbiamo react Scendete e la prima cosa che ci interessa è questa qua ci interessa questo comando quindi noi lo Copiamo in realtà poi lo andiamo a modificare Aprite il terminale Quindi fate CMD Quindi andate a fare tasto Windows in Basso sinistro vi dovrebbe comparire io non ho la barra degli strumenti qua sotto ma sulla barra degli strumenti vi compare la barra di

ricerca eccetera scrivete CMD letteralmente così CMD vi compare il Prom dei comandi lo Aprite avete copiato quello giusto quel comando quindi tasto destro qua andiamo a mettere via View andiamo a scrivere react Ecco qui e qua togliete questo qua che è il nome dell'applicazione E scrivete corso react Se volete voi Mettete corso react Edoardo Midali magari state seguendo più corsi di base abbiamo npm che abbiamo ricevuto grazie a node se non lo conoscete Node ancora non preoccupatevi non è un problema quindi Node ci ha dato tante robe tra cui dei comandi per installare pacchetti nel

nostro ambiente per lavorare più facilmente Quindi questa roba qua ci arriva grazie a node e gli diciamo Ehi Node creami vit latest quindi stiamo dicendo mi crei un progetto di vit che è Il sito su cui eravamo at latest vuol dire con l'ultima versione il mio progetto me lo chiami corso react Dopodiché come template Quindi come punto di partenza vogliamo react ti sto dicendo di base Node creami un progetto init basato su react che si chiama corso react punto facciamo invio Giustamente io ho sbagliato L'ho messo in Edoardo Mannaggia a me quindi fatemi fare contrl

C riparto faccio CD desktop Ecco qua quindi adesso sono nel desktop Rifacciamo Scusatemi mi son confuso mentre spiegavo e qua possiamo sceglierci fa scegliere lo stesso ci vede che non ci ha preso react non è un problema noi scegliamo lo stesso e facciamo react ci chiede un po' di cose vogliamo lavorare con typescript vogliamo lavorare con JavaScript vogliamo lavorare con JavaScript + svc eccetera probabilmente potreste non conoscere tre delle quattro opzioni che abbiamo disponibili typescript è Un'evoluzione di JavaScript al momento non ci interessa quindi saltate tutta la parte di typescript noi lavoriamo con JavaScript svc

dovrò andare a fare un tutorial a parte Perciò per ora non lo conoscete non l'ho mai trattato non lo tratterò ancora per molto Ci limitiamo a lavorare solo in puro JavaScript Quindi cerchiamo prima di capire react in puro JavaScript poi eventualmente con typescript quando saprete typescript e poi potrete aggiungere svc non ve lo Spiego nemmeno cosa vuol dire inutile confonderci andiamo avanti Quindi fate invio su JavaScript e vedete che ha già fatto quindi scaffolding Project ha già creato il progetto adesso ci dice e lo possiamo fare da qui vedete ci dice di fare cd che

è Change Directory Che vuol dire cambia cartella corso react vi faccio vedere CD corso react posso fare così vedete che sono dentro Poi faccio npm Install npm randev io non lo faccio qui perché lo facciamo direttamente in Visual studio quindi io chiudo questo abbasso vi sposto la cartella corso react lo vedete Vi ho spostato la cartella corso react tasto destro Fatelo anche voi Apri con code dovreste averlo Se non ce l'avete non è un problema Aprite Visual studio intanto vedete che qua son finito in Visual studio qua in alto Apri cartella selezionate la vostra cartella

non è un problema io però vi ho fatto installare Visual studio nel modo in cui Ve l'ho fatto installare per Avere la bellezza di aprire una cartella direttamente da lì chiudiamo questa parte che non ci interessa Non preoccupatevi se non avete magari il mio stesso tema gli stessi colori le stesse icone e quant'altro molti vedono magari la mia cartella pun Cod vscode che è una cartella nascosta si spaventano o perché tu ce l'hai o no non è importante le cose importanti ve le ve le Cito Sempre se trovate cose non importanti è Perché come potete

vedere io ho tante cose Vedete ho tante cose programmo da più tempo di voi eccetera quindi naturalmente c'è dentro una parte del mio lavoro di altre estensioni che ho eccetera ma se non sono importan tanti e non ve le Cito non vi deve interessare va bene quindi piccolo disclaimer Un'altra cosa adesso che abbiamo Visual studio code Installiamo delle estensioni per react quindi scrivete react Eccolo qui vedete S7 react redax react react Native snippet questo può tornare utile Quindi installate questo e poi ci sarebbe di bello anche simple react snippet snippet sono i suggerimenti se vedete

qua sotto Vi basta scrivere imr ci importa react e altre cose però lasciate perdere Non è importante aggiungerete poi quando sarete più esperti in base alle vostre esigenze Quindi abbiamo installato anche un'estensione per react Ci mancherebbe il developer tool di react che però Vedremo nel video in cui ne parliamo Quindi l'estensione Chrome la Vedremo nel video dedicato per ora abbiamo questo progetto nel prossimo video lo spieghiamo Tuttavia dobbiamo fare un'ultima cosa che è control o accentata oppure Apri Aprite qui se non lo vedete terminale nuovo terminale Vi si apre vi faccio vedere che se chiudo

apro qui terminale nuovo terminale si apre altrimenti potete fare tranquillamente control o accentata Adesso fate npm i oppure Install non c'è differenza fate Npm Quindi cosa stiamo facendo Stiamo installando i pacchetti vedrete che qua arriverà una nuova cartella che è Node modules quindi fatemi capire abbiamo utilizzato un comando npm che vi ho detto arrivare con Node e guarda caso arriverà una cartella chiamata Node modules va bene non ve la spiego ancora quello che stiamo facendo Però al momento è Installare tutti i pacchetti va bene quindi Qua abbiamo una serie di pacchetti vedete che devono esserci

per Far funzionare ma c'è stato solo detto che ci serve non è che ci vengono consegnati Perché Perché pesano tanto quindi vit ci ha solo creato la la mappa ci dice ok Questo è il progetto in iniziale ti installi i pacchetti noi facendo npm Install abbiamo automaticamente installato tutti i pacchetti che erano qua dentro che è più facile per noi scaricarli adesso che non per vit crearci il progetto con i pacchetti eccetera va bene Ci sono molte Più diramazioni di Così cerco di tenerla semplice Quindi abbiamo installato i nostri pacchetti adesso se vi ricordate ci

diceva di fare npm Run Dev faccio invio e lo trovate qua in alto vedete script questo qua è tutto Node questo pacchetto qua Questo package Jason esiste perché abbiamo Node Ok nei vostri progetti HTML vedete abbiamo un Index HTML come potreste aver avuto voi nel vostro sitaro iniziale HTML CSS JavaScript però questo Pack json rymy Eccetera non esistevano Ne parleremo a brevissimo se io adesso prendo potete premere control e cliccare e come vedete ho incollato local host due punti 5173 e questo è la nostra applicazione react iniziale va bene dovreste avere esattamente la stessa cosa

A meno che avete seguito questo corso a qualche mese di distanza e hanno cambiato leggermente in vit e react il il placeholder Questo è un boiler plate Quindi è un progetto iniziale potrebber Aver cambiato qualcosina ma probabilmente ci sarà il count i Logi eccetera quindi questo è per cominciare Abbiamo tutto ciò che ci serve nel prossimo video parliamo della struttura del progetto perché non possiamo saltarla Ci vediamo tra poco episodio 3 del corso di react oggi vediamo la struttura del progetto nell'episodio precedente abbiamo installato Node abbiamo creato il progetto in react abbiamo installato Visual studio

code L'estensione eccetera eccetera abbiamo installato poi pacchettini e mandato a schermo la nostra applicazione vedete banalissimo boiler plate iniziale di vit più react e questo è il progetto che abbiamo ereditato lo vedete allargo un in realtà non cambia niente Questo è il progetto che abbiamo ereditato cerchiamo di adesso capire un po' di più che cosa abbiamo perché ci sono tante cartelle e tanti file Innanzitutto partiamo dal basso Questo è il terminale integrato di Visual studio code potete averne di più non è un problema vedete ve li gestite così potete scrivere quello che volete i vari

comandi che avete a disposizione sul computer eccetera Se poi non conoscete Visual studio farò eventualmente un un video di un'oretta per impararlo in generale detto questo nel nostro terminale abbiamo fatto partire con npm randev e quindi la nostra applicazione sta andando vedete è in continuo movimento di conseguenza la Vediamo e possiamo lavorarci tutto questo ripeto è grazie a node quindi il modo in cui possiamo far partire tutta sta roba direttamente sulla nostra macchina come se fosse un server è grazie a node perché molto probabilmente voi AV avete utilizzato JavaScript esclusivamente in una pagina web quindi

prendevate qualcosa cambiava il colore eccetera non avete mai utilizzato JavaScript come se fosse un linguaggio server invece in cesso Lo possiamo fare Non stresserò più il concetto di Node Perché Perché chi già lo conosce sa cosa fa chi non lo conosce capite bene che ad una certa io vi spiego react Ma subito dopo dovete andare a capire che cos'è Node quindi saranno sarà questo probabilmente l'ultimo video in cui vi ricorderò di Node eccetera Dopodiché lo darò per scontato che react funziona perché c'è Node Adesso vediamo il il nostro progettino abbiamo un po' di cartelle un

po' di file partiamo Dall'alto Node modules giustamente Node modules comincia con Node e è una cartella che è arrivata prima non avevamo se tornate indietro di qualche minuto o Provate a ricreare un nuovo progetto notate che non c'è quella cartella Questa cartella l'abbiamo ottenuta facendo npm i che equivale a npm Install Che vuol dire npm per favore Installami i pacchetti necessari dove li ha presi Adesso ci arriviamo anche se ve ne ho già parlato nell'episodio Precedente e ho detto ok Devo installare un po' di pacchetti e questi sono tutti i pacchetti che ha installato quindi

per far funzionare questo boiler plate semplicissimo di react vit vedete che non fa praticamente niente se non contare quante volte clicchiamo serve tutta sta roba Ok quindi Node arriva dice Ah ok Devo installare dei pacchetti l' installo adesso funziona tutto bla bla bla e grazie a quello funziona Se provate a cancellare la cartella e fate Ripartire per chiudere Vi basta fare contrl C vedete Se provate a cancellarle fate ripartire quindi tastino su npm randev con l'invio vi darà problemi perché Perché servono i pacchetti Non preoccupatevi avete un problema non vi Trova un pacchetto rifate npm

installed vi dovrebbe reinstallare tutto a volte può succedere che si corrompe qualcosa detto questo Quindi questi sono i pacchetti necessari per funzionare punto abbiamo poi Public Public è la cartella Di tutte quelle risorse che saranno pubbliche sul sito dobbiamo avere la sitemap molto probabilmente sarà qua dobbiamo avere il file robots Tix sarà qui qui vit è molto probabilmente adesso la vedremo l'icona di vit che è utilizzata non solo qui ma anche qua in alto vedete come favicon Attenzione sto parlando di setmap robots txt favicon eccetera le do per scontate questo non è un corso da

HTML se non sapete cos'è sta roba canale roba gratuita di HTML CSS Eccetera oppure se volete essere di livello non iniziale ma veramente avanzato i miei corsi di HTML CSS sono 15 e 20 ore ciascuno sul mio sito cg.mad abbiamo Source e qua è il Source è la fonte dove andiamo a lavorare col nostro codice quindi questa è la fonte Dove troviamo il nostro codice adesso ci arriviamo perché come vedete c'è tanta roba ne parliamo a brevissimo abbiamo poi is lint RC Cjs va bene is lint può essere json.js tante cose in questo caso abbiamo

cjs e qua dentro abbiamo una cosa che risalta subito all'occhio è rules Per farla breve Sint sono un insieme in realtà è uno strumento JavaScript che va a forzar a scrivere il codice in un certo modo non siamo obbligati a rispettare le regole possiamo modificarle possiamo cambiarle eccetera ma Ci obbliga a dire certe cose ad esempio una regola che potremmo avere Che potremmo scrivere è non lasciare spazi bianchi Tra le parentesi graffe e i valori all'interno Giusto per farvi capire Quindi Y elint non fa altro che costringerci a rispettare certe regole di scrittura codice non

siete obbligati a farlo ma se le regole ci sono siete obbligati a farlo quindi molti problem problemi che potreste avere se vi dice Yes elint li Risolvete cambiando le regole modificandole a piacere togliendole e quant'altro non è un corso Di Sint perciò la lascio così va bene il discorso è che vi forzate vi date voi praticamente delle regole per non avere un codice scritto male quindi magari abbiamo una cosa che è così vedete poi Qua c'è spazio qua non c'è spazio qua però c'è spazio qua ce n'è solo uno qua magari la prima riga va

a capo le altre no io torno indietro ok e siamo a posto quindi Yes lint ripeto è più una questione di stile effettivo di scrittura del codice chiudiamo abbiamo Git ignore e Git è uno strumento che ci serve per salvare il nostro codice fare il backup mandarlo online condividerlo per altre persone eccetera ho già un corso su Git dove lo spiego bene in un'oretta se non mi sbaglio ma qua dentro in sostanza stiamo dicendo Ehi Git che dovresti mandare il codice condividerlo eccetera non mi condividere alcuni file che non devono essere presenti una cosa che

vi dicevo vi ricordate che vi ho detto la mia Cartella pun vs code che è nascosta però la gente sui miei altri corsi dove non l'ho spiegato impazzivano eccetera Questa cartella mostra semplicemente è nascosta Quindi qua non la vedete mostra semplicemente le opzioni di Visual studio code che abbiamo Al momento in questo progetto punto quindi è ovvio che non volete mandare a vostri compagni di Team eccetera o nel backup le vostre impostazioni di Visual studio code chi se ne frega Ok allo stesso modo dist che Poi vedremo Che cos'è ma soprattutto Node modules come vedete

Adesso ce l'ho però non lo mando ed effettivamente quando vit mi ha creato il progetto non mi ha messo Node modules perché perché ripeto è pesante adesso un po' meno ma nei progetti arriva a essere anche 300 MB 600 1 GB cioè pensate a spostare voi ogni volta 1 Gig eccetera Certo voi Mi direte abbiamo connessioni sempre più forti e sempre più veloci però il discorso è che si può anche fare a meno C'è un dibattito sul fatto se vale o no non farlo eccetera però non entro nel discorso al momento come si lavora nella

maggior parte delle casistiche è Node modules non lo devi passare te lo tieni tu ogni volta la persona che poi copia il progetto lo installa eccetera si installa Node modules con npm va bene quindi Git ignore non è relativo al progetto ma è relativo alla condivisione del progetto al backup eccetera Quello che in realtà si chiama version La chiudo qua proseguiamo abbiamo il nostro Index HTML che è la base di tutto nel prossimo video Parleremo della sintassi di react quindi che cos'è sta roba Che cos'è sta roba eccetera eccetera Per ora mi limito a dirvi

che questo è la pagina che noi vediamo quindi la pagina che avete qui questa qua è l'index HTML come ben sapete senza un Index HTML non andiamo da nessuna parte in un sito di conseguenza ci serve il nostro entry Point iniziale il nostro Punto d'entrata dopodiché abbiamo package Jason e package lock Jason Allora package Jason è la versione che noi andiamo a modificare abbiamo il nome vedete corso react è private True la versione Se volete magari avete un'applicazione che mandate fuori eccetera cambiate le versioni i moduli non entriamo nel discorso abbiamo gli script che sono

i comandi che lanciamo in questo caso noi abbiamo lanciato npm Run che cosa Run uno di questi script e Mettete il nome dello script quindi npm Run Dev oppure npm Run Build npm Run lint e vedete che parte is lint che abbiamo già visto qui insomma questi sono i comandi dopodiché abbiamo le dependencies e le Dev dependencies le dependencies sono quei pacchetti che sono fondamentali affinché il progetto parta senza questi il progetto non parte le Dev dependencies sono quei pacchetti che sono fondamentali per sviluppare il progetto quindi per gli sviluppatori is Lint serve a noi

per scrivere bel codice quando poi finiremo il nostro sito e lo metteremo onl al server di avere is lint non gliene frega niente quindi quando poi andremo a mettere il nostro sito sul server che sia in locale in produzione quello che volete ma non ci lavoriamo più su quella versione Bisogna installare solo queste Queste sono le dependencies fondamentali va bene È un po' come dire per fare la pasta le dependencies fondamentali sono pasta Acqua sale e una pentola basta le Dev dependencies possono essere a il mestolo in legno il mestolo in metallo il mestolo con

la con la presa riscaldata le poi vuole qualcuno magari vuole le presine per non scottarsi con i coniglietti sopra eccetera è irrilevante la pasta si fa lo stesso con o senza coniglietti sulle mani però il discorso è che queste sono le Dev dependency servono a noi che facciamo la pasta Chi effettivamente la pasta la mangia gli Interessa semplicemente la pasta il sugo un piatto e una forchetta va bene per farla molto semplice però vedete che queste dependencies non corrispondono a tutte queste quindi package Jason prende semplicemente ciò che a noi interessa direttamente in un progetto

react ci interessa react react Dom eccetera nel package lock invece ed è lock perché lock vuol dire bloccato vuol dire chiuso Abbiamo tutto ciò che Node modules Quindi tutta quella roba che questi Utilizzano come base Perciò noi non andiamo a dire che react deve utilizzare Babel che deve utilizzare a sua volta è tutto babble qua porca miseria quindi lasciate perdere che deve utilizzare Babel plugin transform poi Bubble parser eccetera no io installo react e react si porta tutto il resto quindi il package lock è l'insieme vero di di tutti i pacchetti che ci servono questi

sono quelli che invece utilizziamo noi in modo diretto Ah mi serve react e react Si porta tutto il resto dopodiché abbiamo il file rmi questo è semplicemente un file del progetto quindi quando andate su github e vedete il progetto con una descrizione la descrizione del progetto è presa qua dentro il file.md è un file di markdown Quindi questo è un H1 potrei fare anche un H2 H3 eccetera farò poi un corso di markdown questo è un file che possiamo avere Come non avere non è non è importante Fatemi tornare indietro che Non voglio salvare dopodiché

abbiamo Vit config js quindi vit è tra virgolette il motore di Build del nostro vi faccio vedere Pack Jason se faccio Build vedete vit Build Ma anche se faccio Run parte vit quindi vit è il motore che sta dietro al nostro progetto di conseguenza potremmo andare ad aggiungere ehm dei plugin potremmo andare ad aggiungere delle altre dipendenze altre cose che potrebbero servirci in relazione però a Vit va va bene Anche qua bisogna entrare Poi nel dettaglio con un corso vit perché vit è l'avete visto quante cose possiamo fare react preact Solid Quick eccetera c'è tantissimo

di cui parlare Però sappiate che è legato al motore di costruzione e di Build del del progetto l'ultima cosa che ci rimane è di base la cartella Source che abbiamo già visto ma qua c'è il nostro codice tutto quello che c'è fuori a parte Index HTML è una preparazione del progetto è una Build del progetto una spiegazione del Progetto è l'entry Point del progetto sono le risorse pubbliche del progetto sono i pacchetti del progetto ma il progetto effettivamente Qual è il codice è tutto questo quindi abbiamo gli asset vedete che abbiamo react SVG e react

è un asset perché è utilizzato solo internamente qui mentre invece l'abbiamo messo abbiamo messo il logo vit fuori perché ci serve come favicon Ok poi lo vedremo meglio quando parleremo del codice nel prossimo episodio Resta il Fatto che qua abbiamo gli asset quindi immagini file o altre cose che potremmo voler utilizzare dopodiché che abbiamo quattro file che sono app CSS jsx che vanno vedete stesso nome quindi probabilmente vanno in coppia Così potreste dedurre abbiamo un Index CSS che probabilmente è accoppiato Index HTML e main.js jsx non lo conosciamo ma conosciamo js quindi presupponiamo che jsx

sia una versione più di js così si desume quando c'è una x in giro È Sempre una versione più dopodiché abbiamo il main e questo main di solito main vuol dire principale quindi si desume che questo sia un file principale in una versione molto più bella di JavaScript Questo è quello che possiamo dedurre ed effettivamente per noi che non sappiamo ancora leggere in jsx non si capisce niente va bene però va bene così Quindi questi sono effettivamente i file di progetto ne parliamo meglio nel prossimo video dove vediamo la sintassi Base di react quindi ci

vediamo tra poco episodio 4 del corso di react vi ho lasciato parlando della struttura del progetto abbiamo visto che dentro questa Source ci sono dei file l' abbiamo nominati Ma oltre quello non siamo andati e non siamo andati perché perché dobbiamo parlare della sintassi di react e soprattutto di come funziona il giro all'interno dei vari file perché Perché non è niente come può sembrare e all'inizio è veramente confusionario Qualsiasi framework all'inizio è confusionario semplicemente perché arrivate da una mentalità se avete fatto il percorso classico ripeto HTML CSS JavaScript più diretta Quindi siete abituati a lavorare

più direttamente con le vostre pagine col vostro codice col vostro codice di stile eccetera non siete abituati a questo giro incredibile che è veramente confusionario all'inizio perciò partiamo dal nostro Index HTML che vi ho detto che è l'entry Point del Sito lo sapete se avete fatto già siti Index HTML è l'entry Point quando andiamo su ad esempio che abbiamo qualcosa a schermo intanto sto spostando Visual studio ma vedete che abbiamo qualcosa a schermo abbiamo due loki abbiamo una scritta abbiamo un bottone con un counter abbiamo sotto qualcos'altro eccetera Qua non abbiamo niente nel body abbiamo

Sì ok Abbiamo la favicon vedete vite SVG che è questa qua in alto abbiamo il titolo che è quello In alto della della tab Ma la cosa muore lì qua dentro Poi abbiamo un DVD root e uno script SRC jsx che già abbiamo visto se io vado qua e faccio F12 andiamo qua dentro a prendere tutto abbiamo Body ok e abbiamo vedete div root e il nostro main apriamo e dentro c'è roba che nel nostro codice non c'è appunto qual è questo giro molto confusionario che sta facendo Allora abbiamo il nostro div ID root root

vuol dire radice è la radice di tutto è la base di tutto è un ID Perciò è univoco Sapete bene che gli ID non possono esserci due Rot c'è un solo un Rot un po' come il vostro codice fiscale di conseguenza potete capire che da qui parte tutto E l'avete visto anche sulla pagina Ve l'ho fatto vedere con F12 da qui parte tutto ma quindi si desume che qua dentro venga iniettato qualcosa va bene come viene iniettato viene iniettato grazie al nostro codice jsx Quindi abbiamo la nostra pagina entry Point con un elemento vuoto in

cui Poi viene caricata della roba la Avete visto perché qua non c'è niente ma qua c'è roba quindi si resume che venga caricata dopo Quindi arriva la pagina una volta che arriva l'elemento vuoto viene letto questo main jsx che ripeto è una versione più carina di js quindi di JavaScript e una volta che legge jsx ci butta dentro il contenuto ma avviene quando la pagina è già arrivata Attenzione Se state guardando questo corso molto più avanti rispetto alla Data di registrazione c'è una buona possibilità che sul mio mio sito cgm.it non solo trovate HTML CSS

JavaScript e altra roba ma anche un masterclass di web Development quindi parlerò di ssr parlerò di min mern vari Stack gemsch eccetera è un corso che vi consiglio caldamente perché qua le cose già nel momento in cui avete deciso di imparare Rea diventano difficili alla svelta vi consiglio quel masterclass genuinamente non volete farle altre cose nessun Problema Quello ve lo consiglio particolarmente perché ve lo consiglio perché la pagina arriva vuota e poi viene caricata ed è un Mod completamente diverso rispetto ciò a cui eravamo abituati quindi ecco perché parlavo di quel masterclass ma torniamo a

noi quindi abbiamo il nostro elemento vuoto e dentro viene caricato qualcosa Grazie a main jsx andiamo nel nostro main jsx quindi si desume che il main è il principale e qua dentro abbiamo un po' Di roba qua dentro abbiamo degli Import viene importata della roba ad esempio importiamo react dal pacchetto react che abbiamo qua dentro se io vado giù andiamo alla r vedete che abbiamo react react Dom e vedete che abbiamo react e react Dom Se io apro abbiamo react Dom client che è esattamente questo Quindi cosa sta succedendo stiamo importando dentro il nostro file

jsx Ricordatevi che comunque è sempre JavaScript un po' più bello dentro il nostro file JavaScript stiamo portando del Codice da quei pacchetti che abbiamo installato le abbiamo installato per un motivo per poterli utilizzare Dopodiché importiamo app jsx adesso ci arriviamo e index.css e adesso ci arriviamo la cosa importante è che noi prendiamo react Dom il Dom Se vi ricordate è document object Model che è quello che ci permette di aggiungere elementi dinamicamente in HTML con JavaScript e diciamo guarda react mi devi creare la rout di cosa Dell'applicazione react quindi react crea la sua stessa rout

e di dice mi prendi Get Element by D root che è questo e qua dentro crei l'inizio di tutta l'applicazione react Quindi prendi questo elemento che è un banale elemento HTML ma qua dentro visto che tu sei react crei la base per te stesso per lavorare quindi fai a fare render render vuol dire mandare a schermo e di conseguenza cosa manda a schermo ci manda a schermo app e app l'abbiamo Importato da da qui quello che sembra un elemento rispetto a noi conoscevamo P conoscevamo H1 a eccetera abbiamo questo tag strano In realtà abbiamo anche

questo tag strano Abbiamo due tag strani che non esistono in HTML uno ci arriva con react ed è strict Mode e semplicemente ci permette di ottenere molti più riferimenti di errori avvisi eccetera in sviluppo questa cosa qua non compare nel sito non è che dovete toglierlo quando lo mettete online non Preoccupate è di react e funziona solo nello sviluppo perfetto ed è fondamentale averlo Ma la cosa veramente importante è che questo elemento strict Mode comprende questo elemento app che non esiste in HTML come facciamo ad averlo ce l'abbiamo perché abbiamo importato app da App jsx

che guarda caso è una cosa che abbiamo qui quindi se apriamo app jsx attenzione abbiamo un po' di roba Abbiamo una function app che guarda caso si chiama esattamente come Il file che guarda caso si chiama esattamente come il nome qui e qua dentro abbiamo dell'html che però non è vero HTML è un HTML contenuto in un Return di una function Quindi noterete come in react non si lavora con l'html puro come si fa in angular Come si fa in svelt ad esempio e poi si mette insieme il codice JavaScript in react è tutto JavaScript

semplicemente Scriviamo qua dentro dell'html che viene Riconosciuto come tale ma in realtà poi viene costruito come JavaScript quindi viene poi creato un elemento div in cui poi viene creato un elemento a un altro elemento a eccetera eccetera Quello che c'è di sotto noi lo vediamo come html in realtà è document Get Element by D document create Element document append eccetera eccetera eccetera Se conoscete il lavoro che c'è sul Dom di JavaScript quello che noi vediamo qua in realtà viene tradotto poi in quello di base Abbiamo una funzione app quindi un componente è una funzione li

potreste scrivere anche come classi ma è stata superata come cosa quindi i componenti non sono classi ma sono funzioni abbiamo una funzione che ritorna semplicemente dell'html almeno dal nostro punto di vista visivo in realtà ripeto sotto banco react va a utilizzare document create document Get Element document attribute get attribute eh Class names eccetera eccetera Ok non torniamo su Quello quello che noi vediamo È HTML quindi react prende tutta sta roba e la manda a schermo è l'unica cosa che ci interessa il discorso è che abbiamo qua un elemento vuoto di cui parleremo più avanti abbiamo

poi qua il nostro div quindi se ci fate caso abbiamo un div con dentro due link che guarda caso è immagine vit logo e immagine react logo al momento lasciate perdere sta cosa ne parleremo quando spieghiamo jsx Però potete capire che questa immagine c'è il Logo di vit questa immagine c'è il logo di react sono entrambi due link e poi sotto abbiamo vit + react Sì e poi abbiamo un div con dentro il bottone vedete button on click fai qualcosa account is e poi abbiamo Edit e click se io mi sposto è esattamente il contenuto

quindi possiamo dedurre che Index è la pagina che arriva l'utente main è ciò che permette a react di partire ho cambiato qualcosa ok Sì avevo scritto qua delle cose dicevo main è ciò che Permette ad index di cominciare a prendere contenuto e dice react Mettiti in moto react deve avere la sua applicazione Qua Qua stiamo solo facendo partire react è un po' come un motore Facciamo partire il motore ma poi non abbiamo la macchina il motore sta lì fermo tut tut Sì ok sta sul tavolo che si va bene ma senza una macchina app è

la nostra macchina effettiva è la nostra applicazione Quindi qua dentro abbiamo ciò che effettivamente vediamo a schermo Che viene esportata perché deve essere poi importata qui eccetera eccetera abbiamo poi state che vedremo più avanti le cose che ci interessano sono Abbiamo qua i due loghi abbiamo state che ci permette di utilizzare state quindi tut Allora questo non ci interessa ancora questi due sono banali lghi che abbiamo importato quindi uno da vit vedete slash Vit va subito nel Public l'altro è Slash assets E questo ce l'abbiamo qui nel Public ripeto perché ci serve come Favicon vedete

e qua il nostro nostro Index non accede dentro a Source accede direttamente a Public Poi vedremo quando faremo la build in sostanza Ma al di là di questo la cosa che ci interessa è app CSS Perché Perché se io vado a toglierlo e faccio partire abbiamo no stile abbiamo una base di stile ma non c'è ciò che mette react al centro vedete non l'abbiamo al centro i lghi non girano se passo sopra non c'è un overlay non c'è niente Se invece lo riporto indietro Vediamo che cosa ci ridava scusate in questo stile Ci ridava vedete

il logo che gira se passo sopra crea questo effetto abbiamo tutto al centro è stilato con la grandezza giusta eccetera eccetera quindi possiamo capire che ci basta importare lo stile andando a mettere l'import e importiamo CSS tendenzialmente gli date lo stesso nome del del vostro componente quindi già questo è un componente Poi ne parliamo nel prossimo video di cosa sono i Componenti Però sappiate che se andate a creare una navbar e volete stilare la navbar avrete navbar.js e navbar.css se andiamo quindi a aprire CSS abbiamo lo stile del componente app e in Index CSS invece

abbiamo lo stile di tutto quindi vi faccio vedere che se vado a cambiare il background color da 24 24 24 a Red faccio così tac apriamo vedete è diventato tutto rosso togliamo sta roba che mi stanno morendo gli occhi perfetto Salvo è tornato come prima andiamo però A cambiare App CSS e magari facciamo background color Red andiamo a vedere vedete che è diventato solo questa parte quindi Index CSS Controlla tutta la pagina Index HTML app CSS Controlla esclusivamente ciò che è legato ad App jsx che è tutta sta parte Ok questa è la base più

becera di react se capite il giro del fumo è un ottimo punto di partenza perché poi in realtà molto D jsx lo vedremo nei prossimi video si capisce i componenti si capiscono Diventa più complesso da metà corso in poi ma già potete far tanto con le conoscenze da zero a metà corso non potete fare un progetto intero vero Ma potete far tanto quindi dovete essere già orgogliosi che pian piano stiamo aggiungendo roba non perdiamo tempo e parliamo di componenti ci vediamo tra poco episodio 5 del corso di react oggi dobbiamo parlare dei componenti perciò Introd

iamo il concetto di componenti vediamo cosa sono come crearli e via Discorrendo chiaramente lasceremo fuori molte di quelle che sono le proprietà dei componenti ad esempio i props appunto che sono le proprietà le vedremo più avanti però dobbiamo introdurre il concetto di componenti Perché Perché se arrivate semplicemente dal backend o arrivate da pur HTML CSS JavaScript il concetto di componenti non è una cosa che probabilmente avete dentro di voi potreste averci pensato in un modo nell'altro senza sapere che sono Componenti però il modo in cui vengono approcciati su react o comunque il discorso di componenti

nei framework JavaScript potrebbero confondervi Quindi facciamo un passo indietro e utilizziamo il nostro Index HTML e parliamo di ciò che eravamo soliti fare in puro HTML prima di sbarcare sui framework perché dovremmo usare componenti Cosa sono e quant'altro se se voi pensate a una pagina HTML Index html abbiamo il nostro Body lasciate perdere queste due righe Ma Seguitemi un attimo abbiamo il nostro Body magari abbiamo la nostra Nav dentro la Nav abbiamo una hul che sarà il nostro menù il nostro menù ad esempio ha tanti l eccetera eccetera ogni le potrebbe avere un drop down

e quant'altro poii Potremmo avere il nostro main dentro al main Potremmo avere delle card le card sono dei div con però dentro degli altri div e però qua dentro c'è un'immagine e poi qua sotto in invece abbiamo un p con la Descrizione giusto per fare un esempio qua dentro Potremmo avere invece il footer lo Potreste avere qua oppure fuori quindi facciamolo qua fuori abbiamo il footer e Potremmo avere più o meno una cosa del genere facciamo un po' di spazio per vedere tutto bene e non è niente diversa da una pagina HTML che potreste aver

già fatto in vita vostra ora Se però noi andiamo a creare Ad esempio la pagina contatti proviamola a creare contatti HTML voi non fatelo Perché non è un problema scrivo HTML faccio così e vado ad inserire ciò che è ad esempio già presente in HTML semplicemente la parte del main cambia magari Qua abbiamo un p che parla dei contatti eh Poi abbiamo il form e via discorrendo Però come vedete la navbar è ripetuta il footer è ripetuto andiamo a fare un'altra pagina abbiamo lo stesso problema Dobbiamo creare degli articoli Abbiamo la stessa cosa per caso

qua nel nella navbar Cambia il nome del logo Cambia l'immagine che punta al logo cambiano i lì non abbiamo più tre ma ne abbiamo 4ro Oh mio Dio vai in tutte le altre pagine a cambiare il numero di lì facciamo così perfetto vai in tutte le altre pagine a cambiare il numero di lì vai a togliere ad esempio il footer che non ci serve più allora devi toglierlo a tutte le pagine Vai a controllare che questo form funzioni che è esattamente uguale sulla pagina contatti Ma anche sulla pagina consulenza e via Discorrendo così come ad

esempio pensate che abbiamo una card che spiega i nostri servizi abbiamo 10 servizi Perfetto Quindi 1 2 3 4 5 6 7 8 9 10 sono 10 e e sono card piccoline vedete perché sono un solo div con un altro div qua con un'immagine quindi è lo stesso codice ma cambia solo il Source dell'immagine perfetto e cambia eventualmente la descrizione con un banale loremipsum.net in cui di base cambia semplicemente L'immagine ed il testo e E queste sono solo le card torniamo più semplicemente al concetto di navbar Ok abbiamo il nostro menù e dobbiamo gestirlo in

ogni pagina sicuramente avrete già pensato nella nostra vita ma non c'è un modo per creare la navbar una volta e importarla in tutte le pagine senza capire che la navbar fosse un componente perché magari il concetto di componente non ci avete pensato che si possa definire componente sapete che un componente però boh non lo So una cosa del genere in programmazione però Avete pensato Cavolo ma non sarebbe bello avere un solo file che si chiama magari navbar HTML C la ficco qua dentro e semplicemente qui io vado a fare eh Cosa ne so importa navbar

HTML una cosa del genere No pensate sto inventando la sintassi Ma è giusto per farvi capire no fate una cosa del genere dite Ah cavolo Quindi non devo F Così poi posso farla stessa cosa con il footer oppure tutte queste card sono uguali Allora faccio Così importo la mia card HTML e semplicemente gli dico che l'immagine deve essere che cosa l'immagine deve essere un qualcosa punto PNG ehm eventualmente la descrizione descrizione descrizione deve essere uguale a qualcos'altro l'or mips ta ta ta quindi avendo no poi importato la nostra card HTML diciamo guarda a sto punto

visto che hai fatto una cosa del genere la moltiplico 10 volte cambio poi il contenuto della nostra immagine Cambio la descrizione sono a posto questo è un componente e quello che abbiamo fatto questi qua saranno i props Ok quindi cose del genere ci sono in react questa cosa qua non è distante da come funziona react perché Perché react è semplicemente un modo in cui andiamo a risolvere queste problematiche Quindi tutti noi svil sviluppatori web abbiamo sti problemi Oh mio Dio devo farla nabar ogni volta Oh mio Dio c'ho 10 card uguali ma non sarebbe bello

avere un Modellino unico da personalizzare Oh mio Dio vorrei potergli passare i dati e lui si gestisce automaticamente quindi sono tutte cose che quando abbiamo cominciato avremmo sempre voluto avere e pian piano la risposta è arrivata in view react svelt angular e quant'altro in questo caso con react quindi react è la risposta a queste problematiche e questi sono i componenti quindi Che cos'è un componente un componente adesso poi arriviamo in react un componente è di Base un file A parte che definisce una volta quello che è il nostro componente e noi lo importiamo la navbar

sarà uguale per tutti quindi la importiamo una volta in tutte le pagine sarà sempre quella Ma come vedete qua abbiamo il componente card e card hai bisogno di una card con un'immagine diversa benissimo Io ti importo il io ti importo il componente card semplicemente ti dico guarda che immagine diversa guarda che la descrizione è diversa di conseguenza Automaticamente il componente Card che non abbiamo creato che cosa andrà a fare ok Sono stato importato qua però mi è stato detto di avere un'altra immagine e un'altra descrizione Quindi al posto di MG SRC metto questa e dentro

il P vado a mettere questa Ok quindi componenti alla fine sono file riutilizzabili che ci vanno a semplificare di molto la vita perché Perché li gestiamo in un unico punto quindi scriviamo il codice dice una volta ad esempio vogliamo qua più lì Vado a mettere più lì e nel momento in cui salvo automaticamente essendo importato io troverò già tutto a schermo Intanto fatemi fare MPM Rand Dev Perfetto Quindi i componenti alla fine sono semplicemente questo Ora vado a eliminare tutta sta roba che ho fatto perché una volta che avete capito il discorso di componenti Ecco

qui una volta che avete capito il discorso di componenti in generale per come vorremmo che fossero li vediamo come sono Effettivamente in react e e potrei aver sminchiato i tempi verbali eccetera ma ma pazienza quindi apriamo questi componenti per ora che componenti abbiamo abbiamo il componente app perché lo vedete perché se vado nel main vedete abbiamo il componente app che questo è quello che abbiamo creato noi in realtà c'è stato già dato Ma potrebbe anche essere qualcos'altro potrebbe non chiamarsi app mentre invece react strict Mode è un componente che non possiamo Cambiare se Se lo

volete inserire è react strict Mode non potete react strict Mode 2 ok mentre invece app lo possiamo cambiare abbiamo Quindi il Tag App Si vede che non esiste in HTML lo importiamo dal file jsx e Qua abbiamo jsx in react i componenti non sono HTML ma sono funzioni JavaScript quindi sono funzioni JavaScript che generano poi un HTML l tornando qua dentro È come se noi anziché il tag specifico della navbar che viene importata avessimo una cosa Del genere tipo abbiamo il nostro function function genera navbar una cosa del genere è quasi l'equivalente di conseguenza ogni

volta che che entra nella pagina dice Ah function genera nabar dove la vado a prendere Facciamo che sia qua Ah c'ho qua la mia navbar questo è quello che devo mandare a schermo Perfetto Quindi genero Creo tutto quello che devo creare ti mando a schermo il risultato Infatti vedete che abbiamo il Return Quindi ogni componente È una funzione che prende un po' di roba vedete c'è qua uno state di cui non abbiamo ancora parlato eccetera ma prende delle cose e ci manda poi a schermo il risultato finale HTML i componenti sono semplicemente funzioni pure se

non conoscete il concetto di funzioni pure lasciate perdere Non è non è un problema il discorso di funzione pure eccetera L'importante è che capiate che i componenti sono funzioni pure che non fanno altro che ritornare Dell'html che viene mandato a schermo punto Questa è l'unica cosa che dovete ricordarvi dei componenti in react attenzione componenti come funzioni in realtà c'è anche il concetto di componente come classe fino a non molto tempo fa potete scriverlo ancora Anche se ormai è ind disuso i componenti anziché essere function app poteva essere un Class app che estendeva componente se se

non sapete ancora programmazione ad oggetti eccetera Non Preoccupatevi voglio solo dirvi che l'approccio per i componenti può essere sia come funzioni che come classi ma tanto ormai le classi sono in disuso perciò che sappiate o meno il concetto di classi non è un problema anche se vi consiglio di imparare la programmazione ad oggetti per una cosa vostra perché qualsiasi cosa può essere programmazione ad oggetti abbiamo queste funzioni che ritornano dell'html sotto sotto non è pur HTML noi lo vediamo come HTML ma in Realtà sono una serie di funzioni JavaScript che vengono utilizzate per generare l'html

però non ce ne frega al momento di quello che c'è sotto banco in react quello che ci interessa è che noi scriviamo quasi HTML quasi dico perché Class name non è HTML dovrebbe essere Class ma non è un problema e dovrebbe essere Class perché perché abbiamo sempre scritto Class ma non possiamo farlo perché qua non siamo in HTML siamo in JavaScript quindi Class è una parola Chiave vedete riservata in JavaScript come potrebbe ere essere const quindi io non posso mettere qua dentro const va bene È una parola chiave riservata che lo sappiate o meno è

in rilevante semplicemente È questa la motivazione non siamo in HTML dove ha accettato Class siamo in JavaScript e class in JavaScript è una parola riservata perciò non la possiamo usare ed è l'unico motivo perché c'è Class name qua anziché Class quindi ricapitoliamo i componenti Servono per semplificarci la vita scrivere le cose una volta moltiplicarle in base alle necessità e e a volte le possiamo anche personalizzare lo vedremo lo vedremo più avanti i componenti non sono altro che delle funzioni che vengono generate che restituiscono un HTML da mandare a schermo punto adesso che abbiamo visto tutta

la parte teorica dei componenti sapete cosa sono i componenti capite perché possiamo utilizzare i componenti dobbiamo andare A creare il nostro componente perciò Fatemi aprire Riprendiamo il nostro Oh mio Dio che schifo vado a togliere lo stile qui Eccolo qua Riprendiamo il nostro progettino questo è ciò che abbiamo rimetto tutto schermo per vedere meglio e quello che facciamo è creare il nostro componente personalizzato che cosa potremmo voler fare molto semplicemente proviamo a fare un esempio di menù niente di che ma è la cosa più semplice da capire come componente un Menù che è su tutte

le pagine Al momento abbiamo una sola pagina però rende molto l'idea quindi che cosa facciamo Andiamo a creare un nuovo file. jsx se volete potete creare una cartella componenti potete potete gestirvi Come volete poi vi consiglio di guardare le best practices su react scrivete react react best practices Chiedete hgpt a Barda quello che volete potete Gestire come meglio credete la questione componenti e tutte le cose che vedremo per ora Facciamo così e qua dentro Io vado a creare navbar jsx molto bene se volete potete associare già un file CSS quindi andiamo a creare navbar.css Se

volete avere del codice esclusivo per la navbar in realtà potreste gestirlo anche dall'indice e quant'altro Qua invece è solo per navbar CSS che cosa facciamo Togliamo questo che non ci interessa e Proviamo a crearlo copiando da ciò che abbiamo qua quindi sappiamo che abbiamo una function perciò andiamo a creare una function che si chiama esattamente come il file proviamoci e allora abbiamo function nav bar molto bene abbiamo la nostra function sappiamo che abbiamo un Return e poi sappiamo che dobbiamo esportare quindi Export default in questo caso navbar altrimenti il nostro componente Non può essere esportato

giusto Cioè non può essere importato Quindi Nav navbar Ecco qua quindi questo è il nostro primo componente non fa ancora niente quello che vogliamo mandare a schermo non vi spiego ancora il discorso delle parentesi eccetera Perché lo vediamo nel prossimo video parlando di js per ora voglio solo farvi vedere i componenti nel prossimo video parliamo della sintassi di jsx eccetera che comunque fa riferimento ai componenti quindi molte cose riguarda i componenti Verranno poi rese più chiare Nel prossimo video perciò cosa facciamo Facciamo un Return di una hul dentro questa hul mettiamo dei le Se volete

mettiamo degli href nessun problema mettiamo qua degli href Facciamo così anche se non andiamo da nessuna parte perciò non è un problema e scrivo Ciao moltiplichiamo Un po' di volte Salviamo abbiamo la nostra navbar e adesso la importiamo qua dentro Ah giusto dobbiamo anche importare il CSS Quindi importiamo il nostro CSS della navbar quindi Andiamo qui e anziché app facciamo navbar CSS Ecco qua qua dentro potremmo dire che vogliamo che la ul deve avere un color du punti Red Salvo quindi la ul avrà un color Red probabilmente non sarà così ma mi prenderà tutti lì

ma va bene lo stesso è irrilevante voglio solo farvi vedere il codice quindi Salviamo e adesso voglio utilizzarla qua dentro perciò importiamo Import apriamo e prendiamo componenti vedete cosa ho fatto ho detto col punto voglio stare in Questa cartella in cui sono che è Source vedete Io sono in app voglio restare in questa cartella andare dentro componenti quindi faccio puntino slash componenti e da qua vado a prendermi navbar se non conoscete i percorsi tornate indietro a imparare percorsi assoluti e relativi che sono fondamentali perché vedete che va tutto a a percorsi praticamente adesso che abbiamo

il nostro componente navbar dobbiamo solo inserirlo qua dentro e qui andiamo a fare Nav bar Ecco Qua vedete ce l'ha preso direttamente chiudo Salvo vediamo risultato Eccolo qua vedete Questa è la nostra navbar molto semplicemente se vado qua Faccio ispeziona abbiamo il nostro hul colorato di rosso Poi qua viene gestito diversamente lo stile dei link Non preoccupatevi Vedete se tolgo sto colore qua vedete qua abbiamo ul le e abbiamo questo stile che è esattamente quello che abbiamo messo noi semplicemente è stato è stato sovrascritto non è un Problema ma abbiamo esattamente la nostra hul Eccola

qua Hull con dentro lì con dentro scritto Ciao cos'è cinque volte Yes scritto Ciao cinque volte Perfetto Quindi il nostro componente ha funzionato e come vedete abbiamo messo un componente dentro un componente perché app è a sua volta un componente va bene adesso quello che potremmo fare magari qua dentro è avere il componente per i link perché magari vogliamo che i componenti della dei link della navbar Siano particolari abbiano tutto il drop down eccetera eccetera potremmo creare un componente link ad esempio quindi link o navbar link Io mi limito a fare Così jsx copio velocemente

Giusto per non perdere tempo non faccio neanche il CSS a sto giro perché non mi interessa Voglio semplicemente chiamarlo link Copiamo incolliamo e quello che voglio fare è avere l'acf già modificato quindi faccio così ci interessa esclusivamente la in questo caso posso avere tutto su Una riga ne parlerò meglio nel prossimo video come vi dicevo Quindi abbiamo il nostro Ciao Lo lo vado a modificare con Ciao da link magari Ciao da link Salvo adesso lo importo qua dentro quindi Import e andiamo con link Ecco qua e qua dentro abbiamo tanti lì cosa potremmo dire che

io anziché ogni volta scrivere a hrf eccetera eccetera Ho semplicemente il mio link chiaramente è molto semplificato qua Voi potreste dirmi perché non fare un href anziché avere il Link eccetera potrebbe essere molto più complesso Ado così sarà molto più complesso di così chiaramente il discorso è che voglio dimostrarvi Come possiamo avere componenti dentro componenti e se i vado a schermo abbiamo una situazione con link vediamo un attimo Qual è il problema secondo me non mi ha trovato il componente link come questo No Io voglio link come questo Ah giustamente non avevo importato Import link

from link Scusatemi vedete Qual è Il mio Import precedente avendo copiato da navbar ho tralasciato che cosa il fatto di importare effettivamente il componente da utilizzare ok Quindi mi raccomando fate attenzione a queste cose non me ne sono neanche reso conto e se adesso andiamo a vedere vedete che abbiamo Ciao da link Tutto ciò per dimostrare come un componente più componenti possono trovarsi all'interno di altri componenti ma un'altra cosa che possiamo fare è avere dentro questi tag Non siamo obbligati ad avere i tag vuoti se ci fate caso per ora abbiamo semplicemente link link navbar

così app in realtà non fa assolutamente niente Dov'è main main ha app che tra l'altro si chiude da solo quindi un elemento vuoto e anche questi qua praticamente sono elementi vuoti quello che possiamo fare è avere qua dentro robe Quindi nel caso volessimo personalizzare un componente in base alle necessità potremmo tranquillamente avere un p con Dentro qualcosa ad esempio querty così semplicemente non verrà devo metterlo a lato non verrà mandato a schermo perché non basta Questo per andare lo schermo perché lui mi dice ok c'ho dentro questo componente Ma questo qui che cos'è questo qui

è un figlio all'interno del componente ok Quindi non è semplice come l'html HTML Avete visto che se io ho un le ho una hul con dentro dei li con dentro il componente me lo manda a schermo però qua invece tra i tag del Componente che è una cosa che non abbiamo mai fatto non abbiamo mai visto in tutto il file di react che abbiamo a disposizione non abbiamo mai visto questa cosa un tag pur HTML o degli altri componenti dentro i tag del componente Ok abbiamo visto semplicemente navbar dentro app ma non link qua dentro

compreso tra i tag di navbar Ok era incluso ma non fisicamente dentro come facciamo a mandare a schermo sta roba dobbiamo utilizzare i props che Vi spiegherò più avanti ma in sostanza dobbiamo mandare qua vado a prendere children poi tutta sta cosa ve la spiegherò come lo inserisco ve lo spiegherò meglio nel prossimo video faccio così vado a mettere children Salvo e vedete che ho querty Avete visto Magari non era buona cosa avere il P potevo mettere solo querty così il risultato è praticamente il medesimo e qua dentro Potreste avere quello che volete quindi contatti

Potreste avere About Potreste avere Shop sop Va bene va bene sop e poi Potreste avere iscrivetevi al mio canale TAC Salvo e vedete come adesso abbiamo di base i figli di questi componenti che si trovano direttamente nel pseudo HTML che abbiamo qua a schermo questa cosa qua è un po' più avanzata Ma ve la volevo spiegare perché Perché potreste scrivere qualcosa qua dentro e non capire perché non va a schermo ma finché non arrivavo al video in cui ve la volevo spiegare Diventava un disastro Perciò ho detto ve lo anticipo anche se per ora non

non siete pronti per coglierlo effettivamente perché tutta sta parte qua non siete ancora pronti per quello che ho fatto ci arriveremo a breve Però avete visto che abbiamo diversi modi in cui possiamo utilizzare i componenti se questa parte così non vi è ancora Chiara Non preoccupatevi quando arriveremo i prop diventerà molto molto più chiara per ora potete utilizzarli come abbiamo Fatto così quindi avete qua la navbar con dentro dell'html eh chiamiamolo così statico Avete poi magari il footer avete Magari però le varie card non potete ancora le comunque quei blocchi di codice che sono fissi

non personalizzabili create per ora i componenti così poi pian piano andiamo ad aggiungere le personalizzazioni buttare fuori più componenti insieme eccetera capirete come potete sfruttare react al meglio ma Fondamentalmente react e tutti gli altri framework frontend che potreste incontrare sulla vostra strada servono a ste cose qua a semplificarci il modo in cui scriviamo l'interfaccia dell'utente quindi evitare di ripeterci questo è l'obiettivo finale va bene direi di non perdere altro tempo e andiamo avanti col prossimo video dove facciamo un introduzione a jsx ci stiamo lavorando ma molte cose non le sappiamo Ci vediamo tra poco episodio

6 del corso di react Oggi voglio farvi un'introduzione un po' più dettagliata a quello che è jsx e le sue particolarità come vedete abbiamo già lavorato un po' con jsx abbiamo creato un nuovo componente in realtà da due componenti li abbiamo mandati a schermo li abbiamo utilizzati però vi ho detto alcune cose negli episodi precedenti di far finta di non averle viste questo perché oggi ve le avrei spiegate altre arriveranno ancora più avanti ma oggi vediamo una buonissima Parte di ciò che è compreso dentro jsx cominciamo a guardare la cosa più ovvia tra link e

navbar sono entrambi due componenti in realtà sono due funzioni che poi vanno mandare a a schermo il corrispettivo in HTML quello che potete vedere è che qua abbiamo un solo a Quindi abbiamo un link più che altro senza le parentesi tonde mentre invece Qua abbiamo le parentesi tonde E questa cosa come vedrete a brevissimo va poi a degenerare in altre fondamenta Importanti di jsx Allora innanzitutto Qua non abbiamo bisogno delle parentesi tonde perché stiamo ritornando una sola riga di codice Mi spiego meglio se io vado qua avanti e continuo a mettere div vedete per ora

ho un problema che sarà noto a breve vedete che torno indietro finché tengo così non è un problema non mi dà problemi nel momento in cui salvo succede qualcosa automaticamente viene formattato e vengono aggiunte le parentesi ora molto di quello che viene Fatto viene fatto da Visual studio code automaticamente che riconosce react e jsx il discorso è che finché il codice È su una riga semplicemente quando Salvo viene formattato Non ci posso fare niente Vedete se Salvo viene automaticamente formattato in più righe per leggibilità il discorso è che se HTML si trova su una Sol

riga quindi avete un div che porta dentro a che porta dentro tanta roba eccetera ma è su una sola riga non avete bisogno delle Parentesi le parentesi servono nel momento in cui avete più righe di codice non tanto che avete effettivamente una wul conon dentro più lì ma che il Return è su più righe lo vedete se io avessi messo tutto su una riga e avessi salvato me l'avrebbe autoformato Se non avessi l'aut formatter potevo avere h lì lì lì lì lì tutto su una riga tutto su questa riga e non sarebbe stato necessario avere

le parentesi tonde le parentesi tonde servono quando abbiamo del codice Di Return che va su più righe se siete abituati a JavaScript Di solito il Return era un valore poteva essere la variabile X poteva essere essere 4 + 10 poteva essere un oggetto può essere quello che volete ma era qui su una sola riga va bene di conseguenza è strano avere un Return di più righe non succede spesso e queste parentesi tonde ci aiutano per avere effettivamente il nostro Return su più righe dice guarda faccio un Return ma tutto quello che è Tra parentesi è

ciò che devi mandare a schermo questo perché è su più righe altrimenti cercherebbe solo una riga Ma avrebbe problemi Qua invece siamo su una riga di conseguenza Poo non mettere le parentesi tonde un'altra cosa importante è che alla fine bisogna ritornare un solo root Element quindi mi spiego meglio il Return deve avere un unico elemento di entrata root non sarebbe entrata ma è radice ma voglio spiegarvelo in questo modo se ci fate Caso in Return è un elemento ul con dentro degli elementi lì Questo qui è un elemento a Potrei avere un elemento di div

con dentro altra roba nel momento in cui però io vado a mettere facciamolo qua vicino nel momento in cui io vado a mettere div così vedete che si spacca il problema è il Return il Return deve essere un unico elemento questo qua non è un unico elemento è un div e un ull insieme sarebbe buono Se io avessi div e questo div va a contenere attenzione div E ull vedete finché ho un unico elemento radice che poi ha dentro la Madonna veramente potreste metterci dentro qualsiasi cosa ma dovete aver dentro un unico elemento radice oppure

avete semplicemente un elemento se avete un elemento con dentro altra roba È molto facile solo questo elemento è facilissimo se avete tante cose un main con un articol eccetera Se avete solo il main non è un problema perché il main è il principale è l'unico elemento L'importante è che ci sia un elemento che poi abbia dentro tutto il resto questa è la cosa fondamentale ora non sempre avremo il main molto spesso utilizzeremo il div o lo span per avere questo elemento radice ma questo va a generare delle pagine HTML che hanno div in ogni punto

Perché avremo la nostra navbar che avrà magari il div in realtà sarà molto più semplice avrà Nav Ok però poniamo il caso che è una navbar più complessa ha Nav Però anche una Qualcos'altro eccetera molto probabilmente sarà un div Quindi così che contiene la Nav che contiene poi una ul per alzare i motivi eccetera tutti questi div lo fate per la navbar lo fate magari per i link lo fate per altre cose alla fine abbiamo 10 20 30 strati di div singoli questi qua che non servono a niente e ci servono esclusivamente per far contenti

react perché perché se noi togliamo sta roba capite bene che si spacca lo vedete si spacca quindi react Ci mette a disposizione una cosa che si chiama frammenti e se ci fate caso dovremmo averci Eccoli qua Questi qua vuoti sono i frammenti sono quindi dei tag vuoti vedete che vengono riconosciuti come un tag elemento effettivamente ma essendo vuoti non vengono renderizzati dall' HTML di conseguenza questo frammento è una bellissimo escamotage per dire Mi serve un unico elemento vedete in questo caso è un frammento vuoto quindi il frammento Vuoto serve per far contento react semplicemente essendo

vuoto non viene renderizzato mentre invece il div verrebbe effettivamente izzato vi faccio vedere Salvo ricordatevi di fare MPM randev E se io contrl B per avere più spazio vado qua F12 andiamo a vedere tutta sta roba vedete che abbiamo un div con Nav con ull esattamente come ho fatto qua nel momento in cui vado a fare un bellissimo fragment vedete che il div è sparito questo div che andava a Prendere nave hul adesso abbiamo semplicemente Nav che è esattamente dentro DVD Rot Quindi questi frammenti giusto per ricordarvi un'altra volta che questi frammenti vengono tra virgolette

letti dal Return Ah ok c'è Un solo elemento benissimo Io sono contento però in realtà non vengono renderizzati quindi molte volte andrete ad utilizzare i frammenti sempre per il discorso che abbiamo bisogno di un elemento di entrata dentro fate quello che volete ma Avete bisogno di un elemento di entrata dopodiché abbiamo la necessità di chiudere qualsiasi elemento chiudere veramente qualsiasi elemento altrimenti si spacca jsx vedete abbiamo Nav qua e se non lo chiudo dà problemi però questo è banale HTML ma mentre in HTML non ci dà errore non si spacca semplicemente Si si svacca letteralmente

tutta la pagina vengono fuori cose assurde Qua abbiamo la necessità di chiudere ogni tag e voi Mi direte Sì Edo però IMG non si chiude In realtà Si in realtà automaticamente si chiude pur di far contento jsx ma non abbiamo IMG IMG non esiste abbiamo una cosa del genere però vedete che si spacca Quindi automaticamente dobbiamo andare a chiudere il tag Qua abbiamo un altro errore che manca l'alt Non preoccupatevi vedete qua c'è l'alt non fatevi fregare a volte dagli errori che compaiono eccetera Perché se voi avete un'immagine senza Alt ci dovrebbe essere un'estensione probabilmente

anche quella Di react che ce lo ricorda e ci dice guarda che jsx immagine vedete intrinsic Element IMG necessita di cosa di Alt quindi vi ricorda che le immagini hanno bisogno dell'alt se non ve lo ricordate era una questione di accessibilità eccetera sul mio sito Cod grind c'è un corso da 15 ore dovrebbe essere di html in cui parliamo di tutta sta roba di accessibilità detto questo dovete ricordarvi di chiudere se sono elementi vuoti che non hanno tag di chiusura Mi Raccomando Lo slash per chiuderli questa cosa è fondamentale mentre in HTML Potete essere un

po' più coraggiosi evitare queste cose eccetera a volte può succedere qua non scappate quindi è fondamentale capire questa cosa dopodiché abbiamo un'altra cosa è il fatto è che molte proprietà che magari sono Dash quindi pensate a areia Label eccetera vedete queste cose qua in realtà l'abbiamo visto anche con Class ad esempio ma Class è un altro discorso Adesso lo riprendiamo molti attributi diventeranno Camel case Quindi potremmo avere attributo personalizzato così attributo personalizzato vedete una cosa del genere anziché avere ATR pers per personalizzato uso attributo personalizzato come per dirvi vale per tutti in realtà vedete il

discorso è che tutti gli attributi che hanno il Dash Potreste avere problemi oppure potreste non trovarli Perché Perché in JavaScript Abbiamo un problema e il problema è che Non ci sono variabili Se vi ricordate in JavaScript col trattino Ma abbiamo solo variabili Camel case classname è una cosa simile ma non uguale Ve l'ho già spiegata Class name se la riprendiamo Dov'è Eccola qua Class name rispieghi un'altra volta è per il fatto che Class è una parola chiave di JavaScript quindi se noi andiamo a creare una classe la creiamo con Class prova vedete abbiamo la nostra

Class prova e Class è una parola chiave utilizzata da JavaScript Non possiamo utilizzarla per altro Perché indica che c'è una classe ma non è la classe di CSS Sono due cose ben diverse quindi se noi andiamo a scrivere Class così abbiamo un problema perché questa è una parola chiave che è riservata in JavaScript per creare questo tipo di cose di conseguenza quello che poteva sembrare un po' più intuitivo è stato fare vabbè io non scrivo Class Ma magari scrivo Class name dovete Perciò sto tornando indietro per Non dover salvare dovete perciò ricordarvi che Class name

equivale semplicemente alla lista di classi che potete dare a un elemento mentre l'ID Dov'è l'ID Vabbè facciamolo qua Mentre l'ID non ha problemi perché ID è ID lo possiamo utilizzare non è una parola riservata Class C di conseguenza Class è diventato Class name benissimo torniamo su nabar e adesso parliamo dell'utilizzo delle parentesi graffe all'interno di codice jsx come vedete in questo link Che cosa abbiamo fatto abbiamo mandato a schermo questa cosa children children è un prop ci arriveremo quando parleremo dei prop Non preoccupatevi ma in sostanza io ho mandato a schermo un link una href

e dentro c' ho messo un valore non ho scritto effettivamente quti contatti eccetera Gli ho passato un valore dinamico e me l'ha mandato a schermo questo perché in jsx noi possiamo utilizzare qualsiasi valore ad esempio const X = 30.000 Perfetto io Posso prendere questa X vado qui faccio così Adesso ne parliamo mando a schermo x e vedete che abbiamo 30.000 questo tipo di sintassi per mandare a schermo i valori in modo dinamico lo vedrete su selt lo vedrete su Astro lo vedete su talmente tanti framework che l'ho imparato una volta sembra che ogni framework abbia

il suo modo di fare le cose in realtà in molti punti si ritrovano quindi quando vi dicevo che quando imparate react in realtà state Imparando tre quarti dell'ecosistema JavaScript non scherzo perché nonostante le loro diversità molte cose vengono fatte allo stesso modo Quindi utilizzando le parentesi graffe stiamo dicendo Guarda che mi isolo un attimo dal puro dall'horror Ho dei valori che che derivano da puro codice JavaScript Anzi forse messo così non conviene semplicemente in questa Nav magari capite se lo prendo da un altro Angolo in questa Nav Voglio un valore questo valore non è scritto

a mano da me Dipende da una variabile dipende da una funzione dipende da quello che volete o può dipendere da cose un po' più complesse in JavaScript quindi vi faccio vedere che se io ho X ma potrei avere x + 2 quindi se Salvo vedete che ho 3002 perciò una variabile una costante oppure un espressione non fanno differenza potrei avere X Facciamo così X Mag 10.000 Quindi vado a usare un ternary Operator mi mandi a schermo sopra 10.000 Vabbè sopra 1000 va bene Sì dai sopra 10.000 else Facciamo sotto 10.000 perfetto l' importante è che

si capisca vedete sopra 10.000 se io vado a mettere 1 abbiamo sotto 10.000 quindi qualsiasi cosa abbiamo utilizzato effettivamente ente in JavaScript in tutta la nostra vita lo possiamo riutilizzare all'interno delle graffe quello che stiamo dicendo è che queste graffe devono restituire un valore Potrebbe esserci anche una funzione Calcola somma Calcola somma che manda poi a schermo la somma Calcola somma però manda ritorna un valore di conseguenza quello che avremo qua dentro è un valore abbiamo errore perché perché non abbiamo la funzione Calcola somma ma per farvi capire come ternary operator ritorno delle funzioni variabili

costanti Oppure potremmo avere una stringa punto qualcosa vedete potremmo fare TAC to fixed Ecco possiamo fare Così to fixed vedete che qualsiasi cosa Intanto salvato così random vedete che funziona qualsiasi cosa che ci viene in mente che ritorna un valore in questo caso ritorna X to fixed magari 2 Ecco e abbiamo 1.00 Quindi ripeto qualsiasi cosa che alla fine ci ritorna un valore lo possiamo utilizzare capite bene che non siamo costretti ad utilizzarlo solo qua come valori da mandare a schermo Ma possiamo tranquillamente utilizzarlo per le immagini di conseguenza potremmo dire Che Source vedete faccio

così in realtà Fatemi creare una const eh IMG vado a prendere un'immagine a caso Copiamo questo anche se è nostro voglio solo farvi vedere che lo possiamo utilizzare come variabile io faccio così vado poi a buttarci dentro IMG e se Salvo vedete che ottengo la stessa immagine potrebbe essere un'immagine che abbiamo negli asset potrebbe essere un'immagine URL potrebbe essere quello che volete oppure potreste fare un'altra cosa che è Abbiamo vit qua punto SVG non ci interessa e dite ok io faccio così quindi template literals e dico che voglio slash Poi apro ci metto la mia

IMG e poi faccio punto SVG perché tanto so che sono tutte SVG e vedete che la ottengo lo stesso se avessi altre immagini lì Mi basterebbe cambiare da vit a react e vedete come l'immagine viene dinamizzata facilmente Vedremo Poi che possiamo avere le doppie parentesi graffe Ma le doppie parentesi graffe le Utilizzeremo ad esempio per oggetti ci saranno situazioni in cui ad esempio nello Style vi faccio vedere qua nello Style Come andiamo a mettere lo stile lo stile in jsx è un oggetto con un insieme di proprietà di conseguenza lo vedremo nel prossimo episodio io

posso andare qui creo Allora le prime parentesi servono per scrivere codice JavaScript Il secondo è l'oggetto stile di conseguenza io metto eh height Ecco qua due punti e scrivo 200 pixel Salvo e Vedete che l'ho ingrandita Ma questa doppia parentesi vedete questa qua gialla indica che sto creando un oggetto parleremo meglio dello stile nel prossimo video ma vi fa capire come le doppie parentesi le prime indicano qua dentro scrivo codice JavaScript le seconde indicano Questo è un oggetto attenzione Sono due cose molto diverse Poi più avanti vedremo i vari casi d'uso delle doppie grafe ci

capiterà di utilizzarle comunque in giro quindi Questa è un'introduzione a jsx tutte quelle che sono le basi Le abbiamo viste adesso capite il perché di tanta roba che c'è ad esempio qua in app jsx di ciò che ho fatto qua coi link capite praticamente tutto a parte questo discorso children però non è ancora finita perché molti utilizzi di jsx li vedremo ma mano adesso Direi di lasciare un attimo perdere il mondo react da questo punto di vista e entriamo in uno o due video dovrebbero essere di stile Perché voglio subito partire con lo stile Perché

sì ok sappiamo scrivere react ma le cose che sappiamo fare sono abbastanza minime quindi parliamo di stile per poi tornare con delle ottime basi su quelli che sono gli altri Fondamenti di react Ci vediamo tra poco episodio 7 del corso di react oggi parliamo dello stile CSS avremo poi un un altro video per quanto riguarda il CSS Oggi dobbiamo fare un'introduzione perché che sappiamo già creare dei Componenti mandare qualcosa a schermo ma lo stile in realtà non è semplicemente quel file CSS per ogni componente che abbiamo visto c'è un po' di più Così è come

abbiamo accennato allo Stile Adesso vediamo tutto Non preoccupatevi molte delle cose però diventeranno più interessanti quando parleremo degli Stati di un componente perciò vediamo tutto quello che è lo stile però poi andremo ad aggiungere partti pi piano Quindi state vedendo Come è strutturato Questo corso essendo tutte cose concatenate tra di loro devo fare una cosa alla volta e poi ci torniamo quando apportiamo nuovi nuovi concetti quindi stile CSS Allora abbiamo il nostro Index CSS lo vedete Quindi se io tolgo questo lo commento faccio così apro qua a lato vedete che non è più rosso vado

a metterlo in Index CSS Salvo vedete che è stato colorato chiaramente amente qua è viola per una questione di link ci sono dentro link se io vado a togliere i link Questo problema non si pone più eh Facciamo magari navbar jsx E anziché avere il link provo a mettere un banale p e vedete che è tutto rosso Quindi posso tornare indietro lo vedete che è colorato di rosso perciò possiamo avere lo stile qua nell'indice SS Ma possiamo avere lo stile in ogni file dei componenti se io vado a riprendere il nostro navbar CSS vado a

rimettere lo stile Salvo Abbiamo la stessa cosa al momento però questa wol che è colorata Di rosso si trova in navbar jsx quindi noi diamo per scontato che navbar CSS va a darlo stile a navbar jsx in realtà se io vado in app che è ben fuori navbar Perciò qui vado a creare velocemente una hul con dentro dei le e scrivo ciao e lo moltiplico vedete qua sotto che anch'esso è rosso Perché Perché prende lo stile di navbar CSS possiamo quindi dedurre che nonostante vi ho detto di creare uno stile per ogni componente questo stile

non è circoscritto al Componente lo vedete perché ully Red se io vado a metterlo in green va a cambiare vedete anche qua sotto di conseguenza possiamo dedurre che questo stile nabar CSS non è locale ma è globale quindi è stile CSS che viene importato come tutti gli altri e che poi viene preso anche da App jsx qua dentro Ora come possiamo rendere il nostro codice CSS locale per un componente perché è bella l'idea di avere dello stile CSS che è solo Applicato alla navbar di conseguenza se ho qua Una hul Ma per il fatto che

è dentro la navbar e io ho il mio file navbar CSS lo stile viene applicato solo al componente abbiamo due alternative una la lascio perdere perché non è interessante Come approccio quello di cui vi voglio solo accennare non ve lo faccio vedere perché altrimenti entriamo in una tana proprio del del Bianconiglio che è veramente veramente profonda rischiamo di star qua una vita solo Sullo stile sono gli Style components Style components vedete ci permette di avere CSS per il componente quindi per L'Era dei componenti potete quindi capire che utilizzando Style component che si installano con npm

Install Style component poi vi guardate la doc vedete come possiamo creare un bottone styled button e dentro andiamo a mettere lo stile del bottone quindi possiamo andare a creare degli stili per ciascun componente e mantenere lo stile CSS All'interno di quel componente se al momento è una strada che volete percorrere potete tranquillamente guardare poi Style component ve li consiglio magari andate un pochino avanti con react Giusto per continuare a fare un po' di pratica se non vi sentite sicuri Appena vi sentite pronti o se già vi sentite pronti controllate gli Style component che sono una

bellissima alternativa per gestire vedete quanta gente lo usa Spotify wish github zillo C'era anche Tinder Insomma è pieno di di aziende che utilizzano gli Style component li chiudiamo Per ora e proseguiamo a parlare dello stile perché c'è un po' di roba che dobbiamo vedere tolgo Magari qui la Sidebar per avere un po' più di spazietto e abbiamo Perciò visto che possiamo avere i file CSS da importare che però sono globali quindi per ora come andremo a gestire le classi facciamo tutto in Sì possiamo avere diversi file o abbiamo tutto nel Index Semplicemente dobbiamo andare a

creare le classi giuste da segnarle eccetera però la cosa che ci interessa al momento è lo stile legato a cosa legato a jsx abbiamo già visto che possiamo creare stile in linea che non è diverso dall'avere il corrispettivo HTML che è Style così e qua dentro mettevamo background color così mettevamo il nostro 21 21 21 una cosa del genere andavamo avanti e poi avevamo cosa ne so font Family banale in linea se non Conoscete ste cose qua Per favore tornate indietro sul CSS Perché non potete lavorare su react cioè sui framework frontend senza saper sta

roba Quindi stoppate il video tornate indietro e e riparti La capo Quindi Ste in linea CSS abbiamo detto che questa è la versione basica di HTML abbiamo il corrispettivo in react Fatemi aprire perché sennò c'è veramente poco spazio abbiamo il corrispettivo In react che è il seguente ed è Style apriamo Perché Perché non accetta dei valori tutti letterali come lo Style in linea dell'html ma accetta un oggetto quindi dobbiamo per forza aprire le parentesi graffe per dire Guarda che in questo Style qui vado a inserire del del JavaScript e ciò che vado a inserire di

JavaScript è un oggetto quindi lo stile nei componenti negli elementi jsx è un oggetto è un oggetto che dice background color voglio questo font Family voglio questo di conseguenza lavoriamo con un Oggetto JavaScript non siete obbligati a scriverlo qua dentro in linea perché diventa problematico quello che potreste fare è avere const questo qua cos'è ok IMG Style quindi stile dell'immagine e andiamo a creare un oggetto quindi questo lo possiamo praticamente togliere inseriamo IMG Style e qua dentro potremmo dire height così E mettiamo 300 pixel giustamente Abbiamo un problema perché Perché è un oggetto vedete quindi

Dobbiamo trattarlo così oggetto JavaScript non possiamo avere il punto e virgola perché non stiamo lavorando col CSS ma stiamo lavorando appunto con un oggetto quindi punto e virgola Potremmo avere Border radius Voi stareste tentati di scriverlo così come se fosse CSS in realtà abbiam detto che è un un oggetto JavaScript perciò non possiamo utilizzare i trattini i Dash e ne abbiamo parlato anche con con jsx che dobbiamo avere tutto ciò che è in Dash Diventa Camel case quindi Border tutto attaccato la prossima parola con la lettera maiuscola Border radius e andiamo a mettere qua il

valore e mettiamo anche qua 30 pixel magari Quindi abbiamo una cosa del genere E anziché avere le doppie parentesi graffe qua dentro ne abbiamo solo una e gli stiamo passando una variabile le altre parentesi graffe sono quelle dell'oggetto che sono qua Se io salvo e vado a prendere vedete Questa è la Nostra immagine ispeziona e vedete che è stato applicato lo stile vedete height 300 pixel e Border radius col ino possiamo provare ad aumentarlo vediamo un po' Cosa succede se lo aumento vedete che pian piano si sta vedete pian piano sta diventando circolare proviamo fare

100% ok Abbiamo una cosa del genere rimod ifi Amola da qua quindi anziché 30 pixel facciamo 100% Io Salvo e abbiamo il risultato di prima Vedete Border radius 100% Quindi così possiamo andare A aggiungere stile in linea Se vogliamo aggiungere una classe è molto semplice l'abbiamo già visto anziché avere lo stile in linea andiamo a aggiungere un Class name perché ripeto non possiamo avere la parola Class e magari mettiamo immagine arrotondata perfetto come Class name quindi vuol dire che prendiamo magari navbar CSS andiamo a creare immagine arrotondata attenzione che questo è CSS Quindi in realtà

possiamo fare anche Così se volete perché tanto è un valore letterale non è JavaScript Quindi in realtà possiamo lavorare così Anche perché preferisco avere le classi così in CSS prendiamo tutta sta parte qui vedete anale CSS lo inseriamo qua dentro Chiaramente si spacca cosa si spacca il fatto che abbiamo le virgole anziché i punti e virgola Ecco qua e poi si spacca il fatto che abbiamo Border radius in Camel case anziché come una semplice regola CSS io salvo Direi che posso Salvare qui magari nascondiamo IMG Style per far vedere che non è quello E giustamente

vedete che non viene applicata Qua c'è scritto immagine arrotondata ma non la trova perché perché spostandola qua ho dimenticato il puntino Spero che ve ne siate accorti voi nel frattempo se io riapro abbiamo un altro errore vedete abbiamo le virgolette perché perché non ho tolto le virgolette Quindi vedete qua c'è il valore con le virgolette che non va Assolutamente bene perché non è un oggetto JavaScript dobbiamo avere il valore in CSS torniamo e vedete che è esattamente uguale a prima quindi vedete Quante differenze ci sono tra il passare dallo stile In jsx che è di

base un oggetto JavaScript e passare uno stile CSS che è CSS quindi vi dovete ricordare il puntino il Camel case Ah Scusatemi non il Camel case se non vi interessa togliere le virgolette dove non servono togliere il Camel case qua eccetera Eccetera e quindi abbiamo aggiunto la nostra classe fin qua niente di che quindi stile in linea e classi sappiamo come applicare lo stile anche in generale ul lì quindi senza applicare classi né ID né niente Ora però dobbiamo utilizzare il vero potere di react perché sta roba qui cioè nel senso sì non è non

è diversa da quello che avremmo potuto fare in HTML CSS la cosa interessante Adesso è che possiamo aggiungere classi ostile in linea in Modo dinamico quindi l'abbiamo già co aggiunto in modo dinamico con IMG Style va bene quindi avremmo potuto fare che eh height avremmo potuto dire se eh 5 min di 10 ad esempio faccio esempi stupidi lo sapete faccio esempi stupidi giusto per dimostrare un concetto Se 5 è min di 10 mi fai 300 altrimenti mi fai 500 pixel banalmente E questa qua È chiaramente una costante perciò facciamo X quindi vedete che se x

è min di 10 mi mandi a schermo 400 altrimenti 500 che Viene aggiunto a height questo è tutto JavaScript come al solito Dopodiché prendiamo questo Style e lo mettiamo dove lo mettiamo nello Style quindi facciamo così tac tac e io vado a aggiungere IMG Style e di conseguenza giustamente Porca miseria non me lo prende perché l'ho messo tra virgolette ok Quindi vedete che questo qua è puro JavaScript però ci permette di rendere il nostro stile in linea dinamico se non avessimo voluto farlo lì l'avremmo Potuto fare anche qua banalmente una height E mettiamo esattamente la

stessa cosa Quindi abbiamo una proprietà CSS che è dipendente da una variabile se una variabile è così o se si avvera una condizione fai così altrimenti fai Qualcos'altro ed è molto comoda questa cosa perché se una persona Clicca vogliamo cambiare lo stile in base magari a ciò che è stato cliccato c'è un valore o qualcos'altro eccetera vedete come diventa molto molto semplice Però Vabbè lo stile in linea Ok è banalmente un oggetto che possiamo andare a modificare quindi a dentro jsx eccetera ma se io volessi mettere delle classi in modo dinamico per esempio voglio aggiungere

una classe Se una variabile Ad esempio se is online voglio aggiungere la classe che mette il il pallino verde e altre cose quindi potrei avere necessità di avere classi messe in modo dinamico Perciò lo facciamo e andiamo a mettere magari non su MG Perché sta diventando un disastro ma facciamo un div Voglio un div e qua dentro scrivo Ciao il nostro div Magari ha un ID di box Perfetto Quindi ha un ID box che andiamo a creare Eh no non così ma ID box e sarà banalmente height 300 pixel 300 pixel punto e virgola Facciamo

la stessa cosa con la W molto bene e gli diamo un background Uh non me lo prende perché qua c'è il più mettiamo un background TR color 2 punti Red vediamo Perfetto abbiamo il nostro quadrato l'immagine La nascondo quello che voglio fare è aggiungere una classe in modo dinamico o Anzi più più class in modo dinamico Quindi voglio aggiungere la Class rounded Perciò vado qui e creo la Class rounded che non fa altro a sto giro di aggiungere i bordi arrotondati perciò Border radius andiamo a mettere 30 pixel TAC Salvo Ma prima devo ricordarmi il

puntino oggi mi sto dimenticando i puntini Mannaggia a me e Se non salvo poi Perfetto Quindi vedete che abbiamo il nostro box che ha lo stile dell'id box quindi base 300x 300 Quindi è un box rosso ma poi a rounded andiamo a aggiungere dell'altro stile CSS che potrebbe essere rotate perfetto potremmo fare rotate 30 deag Ok Voglio una cosa del genere vedete abbiamo aggiunto rotate 30 deag e semplicemente l'ho girato di 30° Perfetto Volevo fare una cosa del genere e Magari potremo aggiungere anche un Background color blu Ecco qua quindi voglio avere questa classe che

vado a mettere in modo dinamico Quindi se X x è min di 10 applico questa classe altrimenti non lo faccio dunque dunque se abbiamo più classi è molto semplice avremo qua rounded e poi avremo magari rotated una cosa del genere e qua andiamo a creare la nostra Class rotated e andiamo a mettere rotate 2. 30 deg e aggiungiamo background color E per cambiare far vedere che non è Legato a quello che abbiamo fatto prima andiamo mettere Orange così tac dobbiamo applicarla giustamente quindi andiamo qui rotated e devo solo salvare mi mi sto dimenticando di fare

le cose giustamente non viene applicato il colore perché Perché l'ID vale molto di più di una classe e a sto punto non facciamolo come ID ma facciamolo come classe Quindi abbiamo un box rotated e rounded perciò andiamo qua su navbar e andiamo a prendere il nostro box e lo Facciamo così di conseguenza adesso sono tutti uguali a livello di specificità ed essendo l'ultimo verrà preso l'arancione vedete che viene preso l'arancione e il rosso sovrascritto Quindi ho iniziato con l'ID Ma avrei potuto farlo direttamente come classe sottigliezze la cosa importante che vedete che Ho applicato tre

classi e Ho applicato tre classi come con Class name e qua le virgolette Ora io voglio fare in modo di avere queste tre classi di cui rotated Solo se attenzione X è minore di 10 altrimenti non la metti come facciamo allora vedete che qua abbiamo un problema perché io non posso andare a scrivere x 10 non me lo trova non me lo trova E me lo va a leggere effettivamente come una classe Quindi la prima cosa che dobbiamo fare se vogliamo avere dentro le classi qualcosa di dinamico per in qualsiasi situazione possiate pensare la prima

cosa che facciamo è dire Guarda ti sto passando Dei valori Perfetto Quindi adesso se io probabilmente vado a scrivere X min di di 10 due punti Ok abbiamo la possibilità di scriverlo è ancora un disastro perciò togliamo e lavoriamo con la base abbiamo dei valori che sono letterali Quindi se vogliamo letterali e espressioni dentro dobbiamo utilizzare che cosa dobbiamo utilizzare i template literals perciò Alt 96 e abbiamo esattamente la stessa cosa di prima se io salvo vedete che abbiamo la stessa Identica cosa Ora io voglio trasformare rotated legato a cosa ad un ternary operator di

conseguenza andiamo a mettere qua dentro l'espressione l'espressione è se x è min di 10 mi mandi a schermo cosa mi mandi a schermo rotated altrimenti mi mandi a schermo niente Quindi se io salvo ottengo rotated perché mandiamo la schermo alla X magari perché X mandiamo a schermo così e facciamo x e e qua dentro metto x vedete x è 1 di conseguenza è arancione Se io però vado a mettere x = 11 vedete che x è 11 di conseguenza x è Mag 10 non viene applicata la classe perciò vedete come abbiamo trasformato Class name da

semplice stringa l'abbiamo trasformata in un'espressione jsx e stiamo dicendo qua dentro voglio mettere jsx Dopodiché abbiam detto questo è un template literals quindi avrò dentro sia stringhe ma avrò anche dentro delle espressioni JavaScript di conseguenza io apro la mia espressione JavaScript all'interno del Mio template literals che è una cosa che sappiamo già fare che all'interno di jsx che abbiamo imparato a fare praticamente qualche episodio fa e qua dentro vado a mettere se x è min di 10 che cosa fai Mi mandi a schermo la stringa rotated quindi in questo caso si trasforma così Ah x

è min di 10 allora questo è il risultato perfetto vedete senza chiaramente le virgolette Quindi questo è il risultato finale Altrimenti se x è magore di 10 mi mandi a schermo una Stringa vuota una stringa vuota di base è niente perciò abbiamo solo box e rounded provare per credere vedete box e rounded c'è solo questo nel momento in cui Io trasformo x = 1 vado a prendere vedete che abbiamo box rounded rotated perfetto ricapitoliamo un attimo questo video che siamo andati abbastanza lunghi sappiamo che possiamo avere l'index CS S Ma possiamo avere anche dei CSS

con lo stesso nome dei componenti e li possiamo importare nei componenti Avete visto Però questi file CSS non ci garantiscono lo stile locale quindi questo stile abbiamo visto come si va a propagare anche in app jsx ad esempio per avere lo stile locale Se volete lavorare a questo livello Potete utilizzare una libreria chiamata Style components che vi consiglio se volete lavorare in quel modo certo potrete utilizzare bootstrap tailwind e quant'altro se non li conoscete Non preoccupatevi sono framework CSS ho già fatto i corsi Eccetera arriveranno anche i corsi avanzati sul sito detto questo avete tanti

modi in cui potete approcciare il CSS la cosa che ci interessa di più al momento legato a react che è puro react è lo stile di base sia in linea che classi ma dinamico quindi dinamico in base a delle espressioni JavaScript di conseguenza Qua abbiamo visto che abbiamo messo dello stile in linea che però dipendeva da cosa Da un ternary operator e poi abbiamo fatto la stessa Cosa con le classi abbiamo perciò modificato la classe rotated l'abbiamo aggiunta o meno in base a un valore di X quindi questa è la vera cosa importante perché perché

più avanti vedremo come cambiare i valori grazie agli stati in modo dinamico Se premo un bottone X mi diventa Non 1 ma mi diventa 20 di conseguenza Vedrete come dinamicamente andrà a ruotare il il quadrato al di là delle animazioni ma potrebbe essere un qualcosa a livello interfaccia grafica Viene mostrata una zona anziché un'altra Quindi queste sono le verie cose che ci interessano legate a jsx e legate a react nel prossimo video vediamo come installare tailwind e utilizzarlo anche con queste cose qua con react perché tailwind a me piace molto lo utilizzo tantissimo è in

forte crescita e merita velocemente un un'introduzione giusto come installarlo che può essere complesso perciò non indugiamo e ci vediamo dopo episodio 8 del corso di React oggi vediamo come installare tailwind In modo da utilizzarlo appunto con react ve lo faccio vedere perché per che ci sono un po' di parti che differiscono per ogni framework che utilizzate così come tailwind è un framework abbastanza particolare richiede determinate cose di conseguenza volevo fare un video doc e in realtà lavorando con le classi poi applichiamo quello che abbiamo fatto prima con il ternary operator quindi per avere classi Dinamiche

lo facciamo anche con tailwind Basta che andate su tailwindcss.com se non vi interessa tailwind potete saltare in realtà tailwind è in in forte crescita discutibile o meno a qualcuno non piace il suo approccio eccetera ho comunque già un corso sul canale abbastanza lunghino entra abbastanza nel dettaglio Ma poi farò a breve questione di pochi mesi un corso nel dettaglio su cgm.it di tailwind detto questo andate su tawin css.com andate su Docs e Partite da installation Siete già qua ora sembra molto facile in realtà voi dovete andare su framework guides e Cominciate a cercare react notate

che react non c'è Abbiamo solo create react app Il problema è che noi non abbiamo utilizzato questo per creare la nostra applicazione ma abbiamo utilizzato vit quindi possiamo capire come la nostra applicazione si utilizza react Ma alla base a vit come Builder quindi noi cerchiamo vit adesso saltiamo create Your Project non ci interessa ci interessa l'installazione di T Win CSS Perché Perché il nostro progetto questo qua l'abbiamo già fatto vi ricordate qua Ci siamo già spostati non ci interessa quindi andiamo a installare questo di conseguenza prendiamo la nostra finestra del terminale ne apriamo un'altra potete

farlo anche con qua già aperto ma se volete chiudete con contrl C potete lavorare qua dentro fate MPM Install Men D quindi va nelle Dev dependencies non Vi spiego tutta la parte di tailwind aspettiamo che installi intanto prendiamo il secondo comando per fare ginit di tailwind non ha ancora finito ok Ha finito giusto in tempo incolliamo faccio invio Magari apriamo la Sidebar perché ci serviranno vedere Eccole qua vedete che è comparso tailwind config molto bene Adesso dobbiamo aggiungere questa parte nel nostro tailwind config.js stavo per dire jsx quindi Aprite tawin config e content lo Sostituite

con la parte che abbiamo copiato in realtà non avendo dentro niente potevate copiare tutto Ecco qua salvate quindi gli abbiamo detto di lavorare con il file Index HTML che è quello che abbiamo più tutti i file JavaScript typescript jsx che è JavaScript x e typescript x che si trovano dentro Source Quindi vedete come questa parte del contenuto è fatta ad hoc per react adesso dobbiamo andare a creare un altro file No in realtà ce L'abbiamo già Index CSS Copiamo questa parte in Index CSS lo mettiamo in alto per importare tailwind Ecco qui E adesso cosa

ci manca dobbiamo solo far partire MPM randev e poi cominciamo a scrivere in tailwind Quindi io mi sposto di qui torno nel mio progetto MPM randev eh Eccolo qua aspettiamo che riparta il progetto è ripartito Avete visto ora scriviamo in tailwind tailwind di base sostituisce lo stile con classi Perciò se volete un'altezza di 20 no facciamo Un'altezza di 80 pixel Vi basta scrivere h-20 Se non capite quello che sto facendo e siete interessati andate a fare il corso di tawin quello che mi interessa è che una volta che avete fatto quel corso e tornate qui

c'è già l'installazione pronta sapete già come installarlo quindi che cosa abbiamo box e rounded sapevamo che box è 300 no era 300 300 Red perfetto facciamolo quindi andiamo a metterli qua vicino tolgo la Sidebar faccio così andiamo a togliere Le classi Quindi queste Class name non ci interessano Ripartiamo dalla base e facciamo Class name BG Red 500 Perfetto poi mettiamo magari rounded LG e poi andiamo a mettere with era 300 Vabbè facciamo 50 cosa abbiamo a disposizione with vediamo un po' vediamo un po' vorrei qualcosa più vicino a 300 sto guardando qua in basso a

destra vedete più vicino vicino a 30080 no facciamo wid 72 height 72 Salvo e vedete che abbiamo esattamente la Stessa cosa Non della stessa altezza ma vi dimostro come lo sto modificando direttamente col tawin con le classi che ci ha dato e abbiamo il nostro quadrato molto bene Adesso voglio aggiungere rotate Perciò vado qua con rotate Ecco qua perfetto vedete che lo sto Ruotando Vediamo se possiamo aggiungere più gradi vorrei girarlo di 45 perfetto ma voglio girarlo di 45 solo se e voglio cambiare il background solo se x è min di 10 di conseguenza andiamo

a trasformare tutta Sta roba come abbiamo fatto già prima quindi togliamo questa parte Andiamo a rendere tutto che cosa un template literal quindi facciamo così molto bene e adesso vogliamo andare a mettere rotate e BG Red Scusatemi BG Sky altrimenti facciamo BG Red solo se attenzione x è minore di 10 quindi andiamo qua e lavoriamo x 10 giustamente Scusatemi devo fare l'espressione Eccola qua quindi se x è min di 10 punto di domanda Che cosa mi mandi a schermo mi Mandi a schermo BG Red molto bene BG Red and voglio rotate 45 quindi lo mettete

così così vedete che tanto era tutto prima una stringa perciò non dovete separarli in alcun modo altrimenti cosa mi mandi a schermo mi mandi BG Sky 500 ma non metti nient'altro perché rotate non lo voglio Quindi vedete il modo diverso in cui stiamo lavorando con le classi utilizzando tailwind qua di default non c'è niente come BG e rotate se x è minore di 10 metto il bg Red Quindi metto lo sfondo rosso e lo ruoto di 45° altrimenti ho solo lo sfondo Sky e vedete che così funziona nel momento in cui vado a mettere 11

vedete che è cambiato quindi questo modo di approcciare è comodissimo in CSS in generale ma utilizzando tailwind diventa un gioco da ragazzi la facilità con cui abbiamo modificato l'interfaccia semplicemente con due classi letteralmente e un'espressione un operatore ternario all'interno di di Class name potremmo andare più nel dettaglio di tailwind ma in realtà questa era la parte che mi interessava per cominciare quindi l'installazione vedere come si utilizza e soprattutto vedere come possiamo sfruttare la potenza di jsx con tailwind non perdiamo tempo ripeto se volete entrare più nel dettaglio di tailwind potete partire dal corso di YouTube

oppure vedere su cgm.it se ho già fatto il corso avanzato di tailwind come lavorate con tailwind Potreste utilizzare anche bootstrap eventualmente quindi più avanti potrei andare ad aggiorn tornare questa playlist con bootstrap adesso però voglio passare ai props li abbiamo già visti li abbiamo già visti qua con link chren non sappiamo cosa sono e Dobbiamo cominciare per forza a utilizzarli perché sono un componente fondamentale di react Ci vediamo tra poco episodio 9 del corso di react oggi dobbiamo parlare finalmente dei props dei componenti Quello che facciamo prima è pulire un po' tutto in realtà voglio

togliere la navbar i link voglio praticamente ripartire da zero e poi dobbiamo togliere la navbar da qua perfetto togliamo qua la navbar e Ripartiamo da zero perché perché andiamo a fare con questo video e prossimi video in realtà andiamo a creare qualcosa Un po' più simile a delle card eccetera Insomma dobbiamo andare a creare qualcosa che sia di più facile comprensione però Adesso che abbiamo pulito parliamo di Cosa sono questi props Innanzitutto props si scrive così giusto Yes e props è il diminutivo di Pro Che vuol dire proprietà un sinonimo di proprietà è attributi attributes

giusto che conosciamo eventualmente come at qua in codice ora se io vi dico attributi che cosa vi viene in mente perché magari come props come properties non vi viene in mente niente ma se vi dico attributes guardate qua in basso Href Non è per caso un attributo dell'elemento a target Non è per caso un attributo dell'elemento a oppure Source SRC Non è per caso un attributo dell'elemento IMG o dall'altra parte Class o in questo caso Class name e alt non sono per caso degli attributi dell'elemento immagine in realtà Class lo può essere di qualsiasi cosa

però quando parliamo di attributi parliamo a livello visivo di questa cosa qua su Visual studio code chiaramente Azzurrina Con un uguale E poi un valore abbiamo visto come il valore su react può essere dinamico quindi possiamo inserirlo noi tramite codice con le parentesi graffe oppure in HTML generalmente è semplicemente una stringa comunque sappiamo che questo è un attributo e se vi ricordate In realtà ho fatto qualcosa di simile recentemente simile a questo ma avevo messo qualcosa a caso L'avevo chiamato tipo title o altre cose negli episodi precedenti possiamo quindi Capire come properties e attributi sono

di base la stessa cosa solo che attributi sono nativi html in questo caso mentre invece i props sono specifici di react quindi sono una componente importante di react che possiamo utilizzare gioco di parole sui componenti quindi vediamo cosa sono i props come li possiamo usare eccetera Allora cominciamo a creare un nuovo componente e il componente che chiamiamo Magari è card Card.js X una card di solito è un pezzo di interfaccia grafica che ha un'immagine un titolo una descrizione magari delle icone eccetera pensate alla lista de film su Netflix Quelle sono card alla lista dei prodotti

di Amazon Quelle sono card quindi le card in realtà hanno tante forme tanti stili eccetera però concetto è sempre card Ora cosa vogliamo fare vogliamo creare il nostro componente card Vi ricordate come si fa function card apro Return apro Perché ci sarà dentro un po' di roba e comincio a scrivere Non solo abbiamo bisogno di un bel Export default card molto bene e qua nel nostro div andiamo a scrivere per ora Ciao Sono una card dobbiamo sempre verificare di essere sul pezzo direi che noi possiamo mettere qui la nostra card Spero me la faccia importare

automaticamente no magari mi dà una mano correzione rapida Oh non me la importa maledizione Allora Import card from TAC components Ecco card Salviamo Facciamo partire e il risultato che abbiamo vedete Ciao Sono una card Questo è il nostro componente chiaramente Qua abbiamo rovinato tutto lo stile Direi che possiamo togliere quantomeno questo ok Quindi abbiamo la nostra Card che andiamo a moltiplicare per far vedere che ha un componente utilizzabile eccetera Eccola qua questa è la nostra card Ora andiamo a fare qualcosa di un po' più complesso con la card perché è generalmente una card Ripeto può

avere un'immagine un titolo una descrizione delle icone eccetera perciò andiamola a creare Vi ricordo che stiamo già lavorando con tailwind quindi non siete obbligati a creare il CSS a parte e possiamo fare un IMG Source adesso la scegliamo ci chiederà un alt sicuramente Facciamo così poi abbiamo un altro div div qua e poi qua dentro mettiamo magari un H2 e poi scriviamo titolo e poi qua dentro abbiamo un p Dove metto UPS non mi ha Preso il P molto bene e qua scrivo Lorem 30 ok no 30 parole son tante Sì magari facciamo così questa

è la descrizione Qua abbiamo l'immagine Ok vado vado adesso di classi se non conoscete tawin Non preoccupatevi non è questo Lo scopo del video voglio solo creare una card ve lo faccio vedere ma la cosa muore qua quindi potrei fare un Flex Flex call Qua invece sul div potremmo fare Class name rounded MD vediamo un po' Come viene ci serve Però Un'immagine Andiamo su pixabay magari Anzi Andiamo su un Splash ci serve un'immagine Ok sì Questo mi piace andiamo Qui no no no non si vede non si vede bene allora scriviamo Tokyo che è sempre

una delle immagini più belle che ci sono di solito Ecco qua perfetto abbiamo tokyio mi piace come al solito copia indirizzo immagine andiamo Qui inseriamo qua dentro l'indirizzo dell'immagine che è bello lunghino Vediamo un po' ok Abbiamo le immagini Dobbiamo sistemarle quello che facciamo è andare in app qua andiamo a creare un bel div che le contenga quindi facciamo così abbiamo il div Class Flex Flex Row Gap 10 Flex wrap Yes Vediamo un po' anziché Flex facciamo Grid Grid Calls 4 Gap sempre 10 perfetto abbiamo le nostre card vedete potrei togliere anche il resto sotto

quindi il resto in realtà Togliamo questo Togliamo questo lasciamo solo sotto il count quindi Tolgo i Logi e tolgo la scritta vit più react e poi tolgo questo qua R the Dox non mi interessa Quindi abbiamo rivediamo le nostre card le vedete andiamo andiamo però ad aggiungere un background potremmo mettere quindi BG facciamo Zinc 99950 molto bene fanno schifo ma molto bene voglio dare solo qua un padding 4 perfetto abbiamo un po' di padding e anche se non sono rounded chi se ne frega onestamente qua in alto la L'immagine non ha non sembra avere i

bordi arrotondati da qua sotto Sì ma sopra no pazienza Comunque questa è la nostra card Voglio solo fare un'altra modifica qui quindi abbiamo Class text Mettiamo 2 XL andiamo a mettere magari qua Class text text Grey 500 non penso sia al massimo Sul nero così ma va bene e poi la descrizione Sì forse il GAP Possiamo metterlo a c per avere un po' più di spazio text White e poi font Bold Vediamo molto bene sono soddisfatto Queste sono le nostre card quindi pensate a un sito in alto avete la Hero section quello che volete arrivate

qua sulle Card che possono essere i nostri servizi disponibili Oppure può essere una Dashboard un'applicazione con i vostri Server Minecraft che avete aperti eh possono essere un'applicazione che gestisce le scuole Queste sono quattro scuole che avete può essere un forum Queste sono le sezioni potete fare Quello che volete queste card qua rappresentano qualcosa di cliccabile e soprattutto di univoco quindi poniamo il caso che siano quattro città diverse avremo quindi l'immagine di Tokyo la scritta Tokyo la descrizione di Tokyo però poi dall'altra parte abbiamo New York magari abbiamo Milano magari abbiamo Sydney fate quello che volete

il discorso è che al momento come potete vedere la nostra card è Arco data Giusto Quindi la nostra card ha sempre titolo Ha sempre questa descrizione cominciamo intanto a rendere dinamico il il testo le informazioni che abbiamo Quindi da Qui cominciamo quantomeno a creare un const title Ecco non così const title e andiamo a mettere magari Tokyo perfetto dopodiché moltiplichiamo abbiamo description e prendiamo questa descrizione ecco qua abbiamo Ovviamente un problema di righe se io faccio così non abbiamo più il problema abbiamo la nostra description Potremmo avere Immagine quindi IMG IMG URL quello che volete

andiamo a copiare questo In realtà vado a tagliare direttamente Abbiamo qua l'immagine Quindi quelli che sono i tre dati che ci interessano immagine eh titolo e descrizione quantomeno sono variabili se io vado qua perciò posso fare eh title così molto bene posso andare qua dentro dove c'è la Source e e mettere IMG ORL e dopodiché posso andare qui e mettere cosa description quindi questo è il primo Passo giusto quantomeno adesso questa card è dinamica in base a ciò che c'è qui il problema è che ogni card Ha un titolo che è Tokyo descrizione che è

loremipsum.net questo componente io gli devo dire l'immagine è questo link Il titolo è questo la descrizione è quest'altra E allora andiamo a utilizzare quelli che sono i props le proprietà Perché Perché queste qua sono proprietà giustamente perché devono essere dinamiche devono Essere cambiate perciò sappiamo che la proprietà la card ha fondamentalmente tre proprietà il titolo la descrizione e l'immagine Ed ecco che noi ci spostiamo di qui ne abbiamo quattro Sì ne abbiamo quattro va bene e cominciamo Allora perciò facciamo che il titolo quindi title è uguale a cosa in questo caso mettiamo Tokyo così poi

nei prossimi video renderemo il tutto ancora più dinamico Non preoccupatevi seguo per chi è la prima volta che mi segue vado con Questo filo logico magari un po' più lento magari un po' più tirato magari un po' più semplice in certe parti la capire Ma è proprio questo lo scopo cioè farvi partire per cose talmente ovvie che costruendo sull'ovaio molto Ovvio a cose che magari potrebbero non essere capite va bene quindi abbiamo title che è Tokyo description description lasciamola perdere perché perché tanto usiamo sempre l'or Ipsum ok Quindi fate finta Che stiamo prendendo description quello

che mi interessa è quantomeno l'immagine e dopodiché abbiamo IMG URL che sarà un disastro perché è lunga da far schifo però noi lo prendiamo e facciamo così molto bene Mamma mia com'è lungo ma non è un problema Dopodiché dobbiamo dobbiamo fare la stessa cosa sugli altri quindi prendiamo qui e facciamo il title che non sarà Tokyo andiamo a prendere magari qua New York qua mettiamo Rome scriviamo tutto in inglese che va bene e Poi facciamo un bel Paris Adesso andiamo a prendere le immagini Quindi sempre su Splash Ah T Ref avevo letto da qualche parte

nope dicevo sempre su Splash cercate le immagini di New York Parigi e Roma ci vediamo quando abbiamo finito ed eccomi qua con Parigi MG URL metto dentro e siamo a posto anche con Parigi Salviamo quindi che cosa stiamo facendo Stiamo dicendo a react Guarda che questo componente ha Questo attributo chiamiamolo attributo Perché sembra Molto simile a quello che avevamo nell'immagine oppure al Class name e quant'altro sembrano molto simili se ci fate caso Giusto giusto quindi sembra che stiamo facendo la stessa cosa solo che non abbiamo mai visto IMG or volete chiamarlo Source è come se

avessimo IMG giusto imgs RC Quindi fate questa similitudine tra proprietà e attributi gli attributi sono in realtà quelli veri di HTML questi qua sono prop sono proprietà che diamo noi personalizzate Adesso che abbiamo passato sta roba noi possiamo andare a richiamarla abbiamo diversi metodi per farlo chiaramente il solo passare non ci dà la sicurezza che l'ha preso cioè Ok L'abbiamo scritto ma non l'abbiamo inserito quindi dobbiamo dirgli di prendere questi props E come facciamo abbiamo diversi metodi cominciamo dall'inizio con props scrivete props qui perfetto e adesso a titolo associamo props title vedete che ce l'ha

trovato Dopodiché andiamo ad associare qui props IMG URL Eccolo qui per la description non lo facciamo semplicemente perché non l'abbiamo passata la teniamo così com'è Ma se io salvo L'errore che ci dà qua non preoccupatevi è di es lint non ci interessa ehm semplicemente è molto stretto yasel in a sto giro potremmo anche lasciarlo un po' più tranquillo Qua ci dà un po' di rotture Non preoccupatevi a sto giro non è Importante quello che conta invece è il risultato vedete che cosa è successo si vede abbiamo le card personalizzate quindi la card di Tokyo Ha

l'immagine di Tokyo e il titolo di Tokyo New York stessa cosa Rome e Parigi se io riprendo il codice avevamo quattro card e abbiamo passato roba dinamica in realtà qua l'abbiamo a codata l'abbiamo scritta noi a mano ma nella singola Card Perché è sempre lo stesso coso cioè ogni card fa riferimento a questo componente Semplicemente ti sto dicendo Guarda che con la card Ti passo dei props Ti passo delle proprietà queste proprietà sono props tile Si vede che è qua e props imgurl che a mia volta vado a utilizzare come valori inseriti al posto del

testo o della proprietà o dell'attributo Source dell'immagine va bene quindi quindi i props sono veramente così semplici non c'è niente di che però andiamo a complicare un filino la cosa per semplificarci in realtà la vita Quindi complichiamo per semplificarci come vi dico in ogni mio corso con la programmazione ci complichiamo la vita in certe parti impariamo qualcosa di più scriviamo un pelino più di codice ma nel nella visione generale nel lavoro generale in realtà ci semplifichiamo la vita perché perché qua ogni volta scriviamo props title props gw eccetera in realtà JavaScript ci fornisce una cosa

bellissima che è il destructuring assignment possiamo quindi dire visto Che tanto props riguardate props Che cos'è props di base è un oggetto che contiene title imgurl E tutto quello che vogliamo aggiungere Giusto Quindi abbiamo probabilmente il nostro props vediamo un po' il nostro props in realtà è title due punti qualcosa IMG URL due punti qualcosa spiego sta cosa perché magari non la sapete non avete visto il mio corso giornato di JavaScript quello avanzato Non sapevate di ste cose in quello iniziale che ho fatto molti anni Fa non ne ho parlato perciò Magari potreste non saperlo

in JavaScript visto che abbiamo un oggetto del genere In realtà possiamo associare velocemente le proprietà a delle variabili non siete obbligati a far costanti Però potremmo dire title così si fa per indicare che è un oggetto lo si può fare anche con gli Array title virgola IMG URL è uguale a cosa è uguale a questo oggetto che mi arriva quindi di conseguenza viene creata una costante title che è uguale a Questo stessa cosa di m jur Qua non abbiamo questo ma abbiamo props Giusto Quindi questa parte non ci interessa sto mis cliccando in modo pesante

oggi abbiamo una cosa del genere facciamola di conseguenza La facciamo qua in alto e quindi sostituiamo a props mettiamo direttamente title e IMG URL di conseguenza stiamo dicendo Guarda che in questa Card io ti passo un oggetto che contiene title e IMG URL automaticamente scomponi le In cosa invariabili di Conseguenza vedete che qua title è diventato vedete rosso perché Perché è già stato dichiarato un identificatore title di conseguenza sta roba qui non ci serve più perché Perché title Adesso è già parte integrante adesso abbiamo il rosso perché non viene mai utilizzato questo eslint lo vedete

Non preoccupatevi di ste cose Se vedete eslint Non preoccupatevi Ok abbiamo title e imgw e vi faccio vedere come se io Salvo non cambia assolutamente niente Ed ecco qua non cambia assolutamente niente Quindi il modo più bello più pulito per scrivere i props non è neanche mettere qua props punto qualcosa vedete Quali sono i vostri props da qui e semplicemente dite Guarda che io ti passo questo e questo tra parentesi chiaramente graffe perché è un oggetto i props sono degli oggetti quindi io dico mi prendi il title mi prendi mgurl dopodiché li potete già utilizzare

e questi sono i props in react sono Facilissimi ma soprattutto questi sono i props scritti bene direi in modo pulito in realtà avete difficoltà a utilizzarli così nessun problema scrivete direttamente props tile props description props imgur chi se ne frega va bene conta il modo in cui voi vi trovate bene o eventualmente il team se lavorate in team però non è finita attenzione perché perché se vi ricordate abbiamo utilizzato in link SEO mi sbaglio una cosa del genere children Giusto giusto però questo children Se vi ricordate Noi non l'abbiamo mai scritto qua in link Avevamo

solo il link vuoto ma non abbiamo scritto My children avevamo però scritto dentro tra e due tag Se vi ricordate qua dentro avevamo link e avevamo scritto qua dentro che cosa sta succedendo Edo adesso potete capirlo meglio di quanto abbiamo fatto negli episodi precedenti una cosa che abbiamo è la possibilità non solo di avere nel componente vedete possiamo Importare altri componenti qua dentro potrei avere una navbar fare quello che volete eccetera perché l'abbiamo visto che in un componente possiamo importare componenti certo assolutamente se vado a prendere App jsx App jsx è un componente function app

Export default app Eppure qua dentro abbiamo card Quindi questo è un modo ve lo già fatto vedere quindi possiamo avere componenti dentro componenti Tuttavia attenzione tra i tag del componente cosa che non abbiamo qui Invece vedete app non ha niente qua dentro ma invece in card Potremmo avere qualcosa quindi potremmo inserire del testo qua dentro e a volte può tornare utile cioè se abbiamo tanta roba soprattutto se abbiamo dell'html che è dinamico ad esempio ponete il caso che questa roba qua cambi da card a card Cosa possiamo fare potremmo avere qua dentro della roba tra

i tag Il Disc corso è che questo non viene renderizzato vi faccio vedere se io vado Qui prendo sta parte la taglio Anzi la commento copio e la commento quello che mandiamo a schermo è puramente un fragment vuoto per ora e qua dentro nella Card io vado a mettere questo stile va bene Lasciamo perdere un attimo la Source così e l' andiamo a mettere a mano quindi vado a mettere a mano sta roba molto bene qua dentro scrivo toky e qua dentro metto Lorem 10 perfetto le altre card per ora le commento adesso vedrete perché

e vado A moltiplicare questa card Ok la moltiplico due volte e qua dentro Salvo quindi che cosa abbiamo abbiamo una card che in sé non ha dentro niente ritorna un fragment Ma voi Mi direte Edo Però io ho messo l'html in questo caso jsx quello che è dentro la mia C quindi mi aspetto che abbia lo stesso risultato Beh non l'ho messo qua dentro ma l'ho messo qui non c'è differenza vero in realtà c'è differenza perché qua San dicendo che Devi ritornare niente e questo qui è solo html dentro un altro componente vi faccio vedere

Non abbiamo assolutamente niente quello che dobbiamo fare è utilizzare il children perché perché tra i due tag di un componente automaticamente si crea un prop che non è qui sul componente Ma è dentro il componente quindi improvvisamente se io aggiungo qua children e ve l'ho fatto apposta col contenuto della carta anziché far solo il testo come abbiamo Fatto per i link qualche episodio fa volevo farvelo con tutta sta roba dentro perché a volte può succedere che utilizziamo un componente Come come wrapper come scatoletta ma poi in realtà ci mettiamo dentro qua roba Poi magari ce

l'abbiamo anche qua della roba dentro ma vogliamo cambiare tra i tag magari vogliamo metterlo in modo dinamico può tornarci utile in certe circostanze senza andarvi a complicare la situazione vi dico che può succedere non è una cosa Così eh strana di conseguenza se io vado qui e scrivo children attenzione che prendiamo dall'alto Eccolo qua improvvisamente abbiamo le nostre card non solo Vi faccio vedere come essendo qua posso tranquillamente modificarlo Quindi come titolo posso mettere New York e tranquillamente potrei andare a cambiare l'immagine di New York Io incollo Salvo e ottengo lo stesso risultato Ma questo

risultato Attenzione Non è automatico qua dentro tramite i Componenti tramite i props eccetera prende solo il prop children Quindi tutta sta roba per farvi vedere il prop children perché ciò che si trova tra i due tag di un componente quando viene usato perché qua stiamo usando card qua lo stiamo creando stiamo dicendo che tutte le card devono essere così Qua invece stiamo dicendo me Usi questo componente card fino qui ma dentro ho dei children ho dei figli ma questi figli sono un prop sono una proprietà Quindi affinché io li possa vedere devo renderizzare va bene

tornando un attimo a semplificare il tutto abbiamo le nostre card dobbiamo andare a riportare indietro sta roba molto bene riportiamo indietro aggiungiamo comunque children perché magari vogliamo aggiungere qualcos'altro ad esempio passa la description qui se abbiamo una description di 30 e passa parole eccetera può essere tediosa giusto al momento Noi l'abbiamo giustamente messa Qui ma non saranno mai tutte uguali giusto ma mai nella vita Quindi da qua la togliamo e la description in realtà potrebbe essere banalmente un children Quindi potremmo avere quanto segue in realtà questa parte qua potremmo andare ad esportare Poi dipende dalle

casistiche cioè le casistiche sono infinite in base a quello che dovete fare ma il discorso è che potremmo avere la nostra card con title e mgl visto che sono due cose abbastanza semplici ma Dentro la card Potremmo avere se me lo prendi per favore Grazie qua dentro Potremmo avere Lorem 10 e se io salvo Questo qua è testo compreso tra i tag della Card che viene utilizzata di conseguenza è un Children di conseguenza io la metto nel p come se fosse la descrizione nel momento in cui apro vedete che me l'ha presa va bene il

concetto di children Forse è la cosa più difficile di tutto sto video ma solo perché dovete imparare a fare la Differenza tra ciò che c'è qua dentro e ciò che c'è qua dentro quando Cominciate a fare progetti a vedere Ah ok Ho questo ventaglio di possibilità posso metterli qua dentro posso metterli come props props children eccetera eccetera Cosa faccio lo fate in base alle necessità la parte più difficile ripeto sono i children i props normali se vi atten a questa regola qua li capite in modo molto molto rapido direi di non perdere tempo perché dobbiamo

fare il rendering Condizionale e poi dinamico dei componenti ci vediamo tra poco episodio 10 del corso di react oggi parliamo del rendering condizionale dei nostri componenti oppure parti di componenti intanto vedete che abbiamo le nostre card ho tolto tutto quello che c'era a parte il count che lascio qui perché ci servirà quando tra qualche episodio parleremo degli state dei componenti Perciò voglio tenerlo lì come ultimo rifuso di di quello che c'è rimasto del Dell'app iniziale abbiamo le nostre Card che vorrei intanto finire quindi aggiungiamo sempre la stessa descrizione loremipsum.net Innanzitutto to render vedetela come un

tra virgolette mandare a schermo renderizzare a schermo quindi calcolare mandare a schermo generalmente il render è associato al 3D quindi stiamo renderizzato un modello 3D una scena 3D eccetera in realtà qua nel 2D vuol dire di base calcolare quelle che sono le Card la larghezza l'altezza i colori eccetera e poi effettivamente avere a schermo la card perciò Ah ok Tokyo il testo deve essere alto tot deve essere in Bold deve essere bianco poi c'ho qua sotto in grigetto la descrizione i bordi devono essere arrotondati lo spazio deve essere tot eccetera eccetera ciò che abbiamo a

schermo finale il render finale è la card però giustamente possiamo renderizzare in modo condizionale possiamo dire se una cosa è Così me la mandi a schermo altrimenti no perché perché magari potremmo avere delle card ad esempio che hanno vediamo un po' uno span con scritto già visto visitato stiamo parlando di città perciò Potremmo avere vediamo un po' una cosa così spunta benissimo e qua scriviamo visitata oppure al contrario Potremmo avere una X Eccola qua con scritto Non visitata per or l'abbiamo questo vedete li abbiamo entrambi come mandiamo a schermo uno anziché l'altro è molto Semplice

Allora la prima cosa che potremmo fare è all'interno questo qua è JavaScript all alla fine Potremmo avere degli if perciò dobbiamo dire se è stata visitata mi mandi a schermo questo altrimenti mi mandi a schermo qualcos'altro Il fatto è che non sappiamo se è già stata visitata o meno perciò probabilmente sarà un prop che passiamo is visited molto bene e da qua dobbiamo passare se è stata visitata perciò facciamo is visited ce l'ha già Preso e qua mettiamo magari True Facciamo così per non complicarci la vita vedete che è un booleano quindi Tokyo l'abbiamo già

vista New York adesso mettiamo false Roma l'abbiamo già vista e Parigi mettiamo false perciò passiamo True false True false qua dentro prendiamo il nostro is visited E potremmo dire In realtà qua in alto if is visited Parto dalla soluzione più ampia più brutta al momento e poi andiamo a fare qualcosa di un po' più Pulito Allora se è già stata visitata Anzi lels non ci serve In realtà quindi if is visited prendiamo questo Return Ecco qua e mettiamo visitata altrimenti non visitata sistemiamo il codice andiamo a vedere e come potete ben notare abbiamo che Tokyo

è visitata New York non visitata Roma visitata e Parigi non visitata però vedete che il codice è abbastanza grosso cosa abbiamo fatto nella nostra funzione il Return dipende da un if Quindi se è visitata e entra Qua dentro manda il Return di conseguenza poi esce dalla componente card e ci ha mandato a schermo questa parte con visitata non arriva neanche qua potevate farlo nell' else if else era la stessa roba oppure si può scrivere anche così tanto entra in questo if solo se è visitata E questa parte non la raggiungerà mai per via del Return

stessa cosa due modi praticamente uguali di scrivere la stessa cosa Il problema di questo approccio è che come Vedete essendo tanto codice stiamo di base duplicando la card per nessun motivo perché andare a duplicare 1 2 3 4 5 se righe di codice per una sola allora possiamo prendere un altro approccio ad esempio quindi non solo abbiamo la possibilità di avere l'if lì prima del del Return e quindi gestire Return in base a quello ma abbiamo anche la possibilità di fare qualcosa qua dentro così come in realtà if is visited vi faccio vedere possiamo anche

fare un bel Return null Quindi se io salvo noterete che non abbiamo le card perché perché possiamo andare a dire che se qualcosa non ci va a genio Non mandare a schermo niente questo Return null non va a produrre delle altre card vi faccio vedere Abbiamo solo due card vedete questo rounded MD è la card questo rounded è l'altra card le altre due non ci sono non sono state nemmeno generate sono state messe dentro dal codice qua ce l'abbiamo in m Scusatemi ce l'abbiamo In app ma col fatto che è false no col fatto che

è True abbiam tolto quelle True col fatto che è True dice Ah ok c'è questo però noi mandiamo a schermo null di conseguenza la va a vedere però poi la Zompa perché dice ok Return null io non mando a schermo niente va bene quindi non solo possiamo andare a mettere l'if e gestire if else else if bla bla bla qua e mandare diversi Return Ma addirittura possiamo mandare Return null dopo che vi ho fatto vedere questa Cosa cerchiamo di pulire invece questa parte il modo in cui possiamo pulire questa parte è diverso lo possiamo fare

in diversi modi Allora il primo modo in cui potremmo fare è ad esempio così quindi abbiamo il nostro elemento e facciamo is visited molto bene punto di domanda quindi stiamo faccendo un ternary operator diciamo guarda che se è visitata mi mandi a schermo questo altrimenti mi mandi a schermo quest'altro elemento benissimo quindi Adesso noterete come vedete col ternary operator abbiamo mandato a schermo Comunque la stessa cosa Quindi vedete che io apro ancora le parentesi graffe per mettere dentro del del JavaScript dentro questo HTML dico guarda che se è visitata mi mandi a schermo span visitata

altrimenti mi mandi a schermo span non visitata Qual è il fatto che è di base la stessa cosa in realtà cambia semplicemente queste due cose qua però volevo farvi vedere come potete avere Delle parti specifiche di componenti dentro comunque ad un ternary operator un'altra cosa che potremmo fare ad esempio è togliere la parte extra e lavorare qua dentro quindi potremmo dire se is visited punto di domanda TAC visitata Facciamo così else andiamo a mettere X molto bene non visitata Salvo devo aver fatto del danno vediamo un po' ok Mi D prer problemi ecco qua vedete

abbiamo ancora lo stesso risultato E allora vediamo cosa possiamo Fare d'altro questa qua è una stringa in realtà cosa potremmo dire potremmo andare qua sopra e fare const visited Label TAC e Allora potremmo prendere sta roba qui tagliarla metterla qua sopra e dire visited Label molto bene Salviamo e abbiamo ancora lo stesso risultato potete capire quindi che possiamo raggiungere lo stesso risultato in 100 e passam modi diversi Chiaramente in questa situazione è molto semplice perciò qualsiasi sia L'approccio che prendiamo otteniamo sempre lo stesso risultato a volte potrebbe essere che vogliamo salvare la Label dentro una

variabile e mandarla a schermo Avremo sempre uno span a volte però i due span saranno talmente diversi che magari avremo span diversi vedete avremo uno visitato e uno non visitato perché magari uno rosso però magari è rosso coi bordi arrotondati L'altro invece è verde coi Bordi Non arrotondati Giusto per non avere le le classi ehm Dinamiche con con CSS Class name eccetera come vi ho spiegato qualche video fa e quant'altro i modi sono praticamente infiniti Certo se dovete cambiare una grande parte di card molto probabilmente non avrete una cosa del genere avrete qualcos'altro Adesso però

andiamo a vedere una cosa che troverete spessissimo e la troverete anche in svelt la troverete in Astro la troverete un po' ovunque è l'utilizzo dell'operatore end e questa cosa qua può Un pochino Come si chiama confondere perché va contro Alcune Alcune logiche che potremmo avere imparato all'inizio e di conseguenza ci va un po' a sfidare dire Ok cosa sta succedendo qua vi faccio vedere poniamo il caso di cancellare un attimo sta roba aprire qua e dire is visited and and mettiamo Ris dato finale quindi abbiamo span TAC così con dentro andiamo a mettere visitata faciamo

così questo non ci serve più vediamo qual è il risultato vedete Abbiamo una cosa del genere che cosa è successo È successo che è stato mandato a schermo solo visitata non abbiamo la controfferta di base non abbiamo il non visitata andiamo ad analizzare il codice Questo è un tipo di sintassi che vedrete spesso Mol molto controintuitivo ma molto utilizzato Bisogna solo prenderci un attimo la mano e come l'ho utilizzato per l'elemento lo potete utilizzare anche per ciò che c'è qua dentro va bene non lo potete utilizzare per il testo lo Potete usare per qualsiasi cosa

ve lo sto facendo vedere Per l'elemento completo stiamo dicendo che se è visitata quindi è True questo end non vuol dire che se è visitata e è questo elemento fai qualcosa ma vuol dire che se è visitata mi mandi a schermo dire amente questo va bene questo end end è da interpretare come se è visitata E allora mi fai questo identificat l'o così in italiano è la cosa che ha più senso perché sarebbe un end e questo ma Non è e questo è letteralmente se è visitata E allora essendo visitata mi mandi a schermo Questo

è il modo più semplice in cui posso tradurli questo concetto dall'altra parte Potremmo avere per semplificarci la vita una cosa del del genere quindi se non volete gestire col ternary operator con altri defs Potreste avere una cosa del genere e si trova in giro È un altro modo di approcciare la situazione quindi facciamo una X io vado a mettere non Visitata E giustamente ottengo ancora una volta lo stesso risultato Quindi come potete vedere questo è il rendering condizionale abbiamo mandato a schermo elementi diversi span con dentro contenuti diversi oppure abbiamo cambiato solo il contenuto abbiamo

cambiato solo la stringa in base ad una condizione la condizione qua era semplice potrebbero essere chiaramente più complesse e questo vi dà la capacità di avere elementi diversi a schermo una Situazione che potreste pensare ad esempio in base a quello che abbiamo è queste card Voi siete gli utenti che siete sul sito e avete queste città e ognuno di voi ha diverse città visitate non visitate eccetera eccetera Ma voi vedete solo questo Io magari vedo le le stesse card quindi lo stesso codice Ma non essendo is visited Ma magari essendo is admin se io sono

amministratore non solo vedo Tokyo visitata eccetera ma magari vedo qua in alto modifica card Cambia immagine Elimina città capite Quindi come la stessa card potrebbe avere Ad esempio se è is admin quindi is admin Quindi se io sono un amministratore potrei avere Rimuovi città e se rimuovo la città chiaramente Ups ho mi cliccato ma pazienza se rimuovo la città vado a eliminare il dato sul database e via discorrendo stessa card abbiamo diversi tipi di props che arrivano e in base ai prop io vado a mandare a schermo diverse cose Va Bene sempre lo stesso componente

questo rendering condizionale È potentissimo Spero si sia capito se non si è capito dovete solo fare una cosa tornare indietro per ogni volta che vi spiego una parte ne abbiamo visto un po' stoppatore quelli non preoccupatevi perché poi Uh chiaramente avere qua in alto if else else if eccetera può essere meno pulito del di questo coso qua può essere meno pulito del ternary operator eccetera Però in realtà Al momento il Codice deve funzionare una volta che prendete dimestichezza chiaramente con react arriva poi il dire Ah Ma così è più pulito così è meno pulito eccetera

va bene quindi per il rendering condizionale è tutto Adesso dobbiamo vedere come fare il rendering dinamico quindi utilizzando di base dei cicli perché perché al momento noi Ste card le mettiamo a mano ma se ne avessimo 100 con questa domanda Ci vediamo dopo episodio 11 del corso di react oggi Arriviamo ad un punto important issimo Per quanto riguarda il rendering a schermo dei componenti e parliamo del rendering di liste perciò andiamo a mandare a schermo componenti ripetuti e quale occasione migliore per andare ad utilizzare le card che già avevamo vedete che ne sono comparse Un

po' su diverse righe questo per farvi vedere diversi concetti visto che molto probabilmente scrivendo il codice eccetera saremo andati lunghi mi sono Già portato avanti vi faccio vedere e ho già creato della roba ho già creato dei dati che adesso vi farò vedere e ho creato diversi tipi di modi in cui mandiamo a schermo la roba va bene Quindi questi qua per ora non Fateci caso partiamo un attimo da quello che abbiamo qua Giusto Perfetto allora ragioniamo un attimo abbiamo quattro Card che sono esattamente lo stesso componente Ma fortunatamente abbiamo già estratto il componente di

conseguenza il Massimo che facciamo è andare a ripetere card il numero di volte che ci interessa abbiamo inserito gli stessi prop vedete che abbiamo is visited per tutti title imgurl e poi vabbè abbiamo la descrizione che Può variare L'unica cosa appunto che cambia è la descrizione e il valore dei prop Quindi abbiamo lo stesso componente questo qua ripeto ripetuto al momento quattro volte con dati inseriti diversi ora finché son solo quattro voi potete capire che va bene Sono quattro Può servire se magari all la home page di un sito i miei servizi vado a moltiplicare

sta roba per quattro consulenze corsi online Io poi potrebbe essere canale YouTube live Twitch va bene cosa così molto semplice ma poniamo il caso che sia Netflix la lista dei loro film oppure la lista dei prodotti Amazon Oppure la lista appunto delle città che abbiamo visitato o la lista dei vostri siti comunque qualcosa che può essere da zero a 1000 elementi 10.000 elementi 20.000 elementi Ma anche se fossero 50 vi mettete a farli a mano pensate a molti moltiplicare St roba per 50 e modificarli a mano ma soprattutto è molto improbabile che non avrete questi

dati salvati da qualche parte sia un Jason sia un database sia che avete i file col lavorate col gemsch tutto quello che volete ma è molto improbabile che abbiate questi dati salvati su Excel e li andate a mettere a manina è molto più probabile che essendo programmatori Li prendete da qualche parte qua ho un esempio e li mandate a schermo chiaramente andiamo a provare a fare questa cosa qua vedete che ho Cities ho città se avessimo una cosa del genere Ok vado qui anziché avere title arcodato vado a prendere Cities vado a prendere lo zero

che è Tokyo lo so per certo e vado a mettere il name l'ho chiamato name perché mi sono dimenticato che era title pazienza Non preoccupatevi Dopodiché qua andiamo a mettere Cities 0 is visited qua Facciamo la stessa cosa ma per l'URL UPS senza parentesi non va assolutamente bene quindi per l'URL di conseguenza IMG URL e poi qua dentro abbiamo Che cosa che cosa abbiamo vediamo un po' la description se io mando a schermo vedete che comunque abbiamo tokyio Ops Qua c'è un problema Sì perché non l'ho messo così ci si ci si rende conto subito

delle vaccate se si fanno molto bene e se Guardate abbiamo tutto ma questa qua questa Tokyo Che è la prima l'abbiamo ottenuta dai dati che avevamo Quindi fate finta che questo oggetto questo Array di oggetti l'abbiamo ottenuto dal nostro database ho preso il primo che è lo zero Quindi Cities z0 ho preso tutta sta roba e l'ho messa qua dentro Perfetto Quindi abbiamo sfruttato anche i dati benissimo ma noi non sappiamo se ne abbiamo una una città due città 100 città quindi questo modo di lavorare non va bene non va bene perché è tutto fatto

a mano E allora Dobbiamo parlare di come sfruttare togliamo magari queste commentiamo e togliamo anche quelle sotto Eh voglio togliere questo qua perfetto che cosa facciamo Andiamo a utilizzare un metodo degli Array che potreste conoscere Se conoscete bene JavaScript che è Map e con map possiamo passare in rassegna ad un Array fondamentalmente passiamo in in rassegna ad un Array e andiamo a prendere il singolo elemento e lavoriamo col singolo elemento di conseguenza Stiamo mandando a schermo vedete che ho solo una card ma ho quattro risultati Perché Perché Map passa in rassegna a Cities quindi le

nostre città Cities è un Array di oggetti va bene di conseguenza Map passa dal primo riconosce che ogni elemento è una città L'ho chiamata City va bene Apriamo le parentesi tonde esattamente come quando stavamo mandando a schermo è qui vedete quindi parentesi tonde e qua dentro mettiamo il valore di ritorno il valore Di ritorno altro non è che quello che facevamo prima qui vedete che avevamo le parentesi e dentro avevamo i div con le card eccetera non è cambiato niente semplicemente abbiamo racchiuso questa parte che già abbiamo visto manca solo Return davanti ma abbiamo questa

freccia che indica il Return l'abbiamo racchiusa dentro il Map di conseguenza ogni città sarà un elemento di questo Array si parte dallo Zero dall'uno 2 e via discorrendo e ad ognuno possiamo Accedere al nome Alla descrizione all'immagine e is visited e vedete che ognuno è diverso di conseguenza riapriamo di là vedete che ottengo esattamente lo stesso risultato Quindi questo è fondamentalmente il rendering delle liste e si fa con map e vedete che è molto più comodo chiaramente qua è un Array di oggetti Potreste avere un Array normale oggetti più complessi quello che volete non cambia

il fatto che questo è la l'approccio da seguire una cosa Importante che però potete notare se scendiamo è un prop che prima non avevamo e che non abbiamo mai utilizzato prima d'ora e che persino Qua non abbiamo in quelli arcati ed è il prop Key la Key o la Ke se la volete pronunciare all'italiana è la chiave se io lo tolgo cassa vedete ci dà problemi e non era solo perché c'era lo spazio bianco ma ci dice missing Key prop for Element in iterator quindi vuol dire che manca il prop Key com'è possibile Noi Non

l'abbiamo mai mai mai mai utilizzato non ce l'ha mai chiesto il prop Key improvvisamente quando andiamo a iterare vuole una chiave questa chiave è il corrispettivo di un ID la chiama chiave perché perché la chiave generalmente è univoca Se pensate alle alle chiavi delle varie cassaforti una chiave per cassaforte Ognuno in in banca al proprio mini cavon sotto nei sotterranei c'è il cavo ognuno ha la propria cassetta c'è una che chiave per ciascuno in questo Caso Pot chiamarlo ID Potete chiamarlo quello che volete han scelto chi va bene lo stesso ora Qual è il discorso

che questa chiave deve essere univoca non può essere uguale per tutti nel momento in cui vado a fare uno Salvo Abbiamo un problema vedete qua in console qua non ci dà niente non si spacca niente funziona tutto Se premo vedete il Counter funziona eccetera ma qui come vedete ha trovato due children due figli con la stessa chiave Mentre invece le Chiavi devono essere univoche perché il componente deve mantenere la sua identità attraverso ogni update Quindi vedete che ogni volta che io premo cosa sta succedendo sta succedendo un update vedete che qua aumenta di di tre

ogni volta il primo ID che è uno quello di Tokyo va bene ma tutti gli altri sono ripetuti e non vanno bene quindi vedete che ogni volta che premo su count che va a Aggiornare l'applicazione qua aumenta il Warning di tre Perché New York Rome e Paris non vanno bene Vuol dire quindi che abbiamo bisogno di di un quindi arcod darlo così non va bene e quello che ho preso è l'ID che ho aggiunto per le nostre città ed è una cosa molto probabile che avrete lavorando coi dati perciò non è niente di incredibile Se

per caso state lavorando con qualcos'altro magari un Array che non ha ID che non ha roba univoca potrebbe essere anche titoli eh potete avere anche cioè se avete le città e non avete Due New York va bene cioè l'importante è che sia qualcosa di univoco spesso e volentieri potreste utilizzare lo uu ID c'è un pacchetto che si chiama u ID E questo uuid va più che bene noi fortunatamente abbiamo già l'ID perciò Lo sfruttiamo basta molto molto bene E questa di base è la spiegazione del dell'iterazione mandare a render delle liste però non non è

finita qua perché perché le nostre liste potremmo volerle filtrare giusto magari abbiamo la nostra Lista di città quindi ci arriva da database la lista di città però diciamo se premi su un bottone quindi immaginate che qua ci sia un filtro Mi mostri solo le città anzi torniamo su proprio sull'applicazione Fat finta che ci sia un bottone Se premo Mi mostri solo le città visitate in quel modo lì dobbiamo andare a nascondere dobbiamo filtrare i nostri dati quindi andremo a filtrare le nostre città di conseguenza non dobbiamo per forza filtrarle fuori o richiedere Al database a

volte non c'è necessità una volta che abbiamo già chiesto i dati e non cambiano possiamo lavorare direttamente qua in frontend e dire ok Io ho tutte le città le V vedere tutte perfetto le vuoi vedere filtrate nessun problema io ti mando a schermo la lista delle città filtrate te la mando a schermo con map vedete stesso discorso di prima ma in aggiunta prima di Map le filtro perciò vediamo prima il risultato ho detto prima troppe volte in un minuto Vedete che abbiamo Ops Ecco qua non aveva aggiornato vedete che abbiamo solo due città perché perché

se andiamo a vedere i dati anche qua gli arcati avevamo che visitata era Tokyo e Roma di conseguenza abbiamo Tokyo e Roma se io vado qua sotto ad invertire dico non voglio le città visitate e vedete che son cambiate analizziamo un attimo la sintassi anche se mi aspetto che lo conoscete già Filter e Map ma Vediamola un attimo per sicurezza perché magari Nell'ambiente react vi causa un po' di confusione Abbiamo qua le città facciamo punto Filter andiamo a prendere ciascuna città quindi Filter passa in rassegna a tutte le città che abbiamo Quindi ogni oggetto nell'array

e dice Mi ritorni in questo Array filtrato solo le città dove is visited è false perché stiamo negando il contrario quindi City visited True no me lo neghi voglio solo quelle con false di conseguenza Questo è un Array filtrato che non ha effetto su questo Qua eh Non preoccupatevi Quindi abbiamo filtrato il nostro Array e quello che l'array nuovo filtrato che otteniamo lo ma piamo va bene niente assolutamente di complesso se andiamo a rivedere il nostro risultato è il seguente quindi una lista di città semplicemente non visitate Quindi quando parliamo di rendering di liste Ricordatevi

Mi raccomando il classico Map per lavorare Certo il Filter che è una cosa fondamentale che potreste fare spesso e Volentieri ma soprattutto la chiave tutto il resto è esattamente uguale semplicemente stiamo iterando di conseguenza andiamo a sfruttare il nostro componente E anziché arcod darlo quattro volte lo riutilizziamo in base alle necessità basta Non dovete ricordarvi d'altro direi che va bene così non stressiamo oltre questo argomento fate delle prove anche perché più di così sì potranno cambiare le vostre necessità le cose potranno essere Un po' più complesse Ma alla fine questo è mandate a schermo una

lista e siete a posto nel prossimo video Dobbiamo cominciare a parlare degli eventi perché non sappiamo ancora gestire gli eventi siamo ancora nella prima parte del corso prima metà del corso Addirittura quindi insomma Ne abbiamo di video Non perdiamoci in chiacchiere e andiamo avanti ci vediamo tra poco episodio 12 del corso di react oggi parliamo della gestione degli eventi Se conoscete JavaScript Vanilla quindi JavaScript nel suo formato basico avrete sicuramente lavorato con gli eventi giusto per rivederli un attimino si tratta quando premo sul pulsante succede qualcosa lasciate perdere il fatto che l'incremento qua che abbiamo

nel bottone è generato dagli state quindi dagli Stati del l'applicazione dei componenti che vedremo meglio nel prossimo video e allargheremo poi eh più avanti non è tanto lo state quindi l'incremento del Bottone che ci interessa ma cosa deve succedere quando premiamo sul bottone quindi la gestione dell'evento Quindi tornando sul nostro codice potete vedere che sul bottone abbiamo on click e poi succede qualcosa questo è ciò che viene fatto quindi questa è la parte State che non ci interessa Perciò noi semplicemente duplichiamo e sul bottone anziché scrivere count eccetera scrivo Alert e qua dentro cosa mando

a schermo mando a schermo un alert e scrivo Ciao Torniamo sul codice e come volete vedere Se premo vedete che parte l'alert Quindi in realtà niente di che Mi raccomando che l'alert deve essere all'interno di una funzione anonima in questo caso è una Arrow function anonima anonima perché non ha un nome Arrow function perché ha qua il il Return fatto con Arrow altrimenti vi bastava aprire le parentesi Gra e poi come volete scrivere un altro paio di maniche Ma abbiamo una funzione anonima Arrow e dentro abbiamo L'alert se io non andassi a mettere l'ar function

e facessi partire solo l'alert l'alert verrebbe chiamato subito vedete che se io faccio partire la prima cosa che arriva è l'alert vedete ed è il risultato che noi non vogliamo quindi Ricordatevi sempre che se avete qualcosa in linea che andate a fare deve essere dentro una funzione però in realtà una cosa del genere la evitiamo facilmente andando a inserire il nostro Alert dove all'interno di un'altra funzione che Richiamiamo qua dentro quindi l'idea è creare una funzione handle click ad esempio che andiamo a creare Perciò qua in alto andiamo a creare una function no non così

ma handle click apriamo e dentro vado a mettere il mio Alert adesso che cosa ho fatto Ho creato una funzione che gestisce handle vuol dire gestire maneggiare quindi maneggio Il Click in qualche modo Ok mi arriva un click cosa faccio mando a schermo l'alert se scendiamo abbiamo che on Click molto semplicemente è praticamente uguale a quello che facevate in pur HTML on click uguale metto dentro però codice JavaScript grazie a jsx e qua dentro richiamo la funzione Mi raccomando a non mettere le parentesi qua Questo è sempre JavaScript Vanilla se avete difficoltà con gli eventi

ste cose qua eccetera valutate diverse possibilità riguardare la documentazione inglese o cioè su Code grind quindi sul mio sito Cod grind it in italiano c'è il mio corso gratuito Qua su YouTube di JavaScript c'è anche probabilmente a breve il mio corso avanzato su Code grind di JavaScript andate su qualsiasi altro tutorial che volete basta che imparate queste cose perché le do per scontato a questo livello cioè l'utilizzo di JavaScript con react lo do per scontato se siete nella condizione in cui io devo spiegare queste cose è meglio prendere atto che non siete pronti per lavorare

con react tornate indietro bagno di umiltà Ripartite da zero cercate di capire bene questi concetti e poi fate react va bene perché c'è tanta disinformazione sembra che una persona appena sa sputare due cose di HTML CSS e sa scrivere const x = 1 improvvisamente deve maneggiare i framework non è assolutamente così prima imparate le basi serie e poi provate i i framework detto questo abbiamo l'on click handle click che è la nostra funzione togliamo le parentesi quindi Salviamo E se io vado a prendere UPS Questo non doveva succedere aggiorniamo ma è un refuso di prima

se io premo su Alert Eccolo qua vedete niente di che Ora proviamo a utilizzare ad esempio altri eventi magari non sul bottone ma facciamolo su un input perché perché abbiamo più eventi un input che voglio farvi vedere Scusatemi un evento di cui voglio parlarvi è l'evento Quello sugli input Perché Perché nei prossimi video Forse tra 4 o c arriveremo sui Form e tutte ste cose qua di che stiamo citando Adesso saranno il pane quotidiano del video dei form Perciò voglio che arrivate già non tanto preparati ma con un po' di conoscenza Ah sì questa cosa

l'abbiamo già fatta Ok diventa molto più facile capire un argomento dei form i form sono sempre pesanti perché c'è sempre tanta roba da vedere gli input e poi cambiano i valori eccetera eccetera quindi noi on Change on Change vedete ci suggerisce tutto nel momento in cui facciamo on abbiamo una vagonata di roba On Change facciamo handle change non siete obbligati ad avere la roba così cioè sempre questo nome handle Change handle click e quant'altro È solo dimostrativo uso questi nomi perché sono riportati molto spesso nelle documentazioni di conseguenza è per essere paripasso con le altre

risorse su cui potreste studiare chiaramente Potreste avere on Change nome però è bello oppure handle Change nome chiaramente Si si tende a fare Riferimento perché perché se scrivo handle Change nome e questo è un input Type text name nome ad esempio no qua è text ma è nome oppure abbiamo password cognome eccetera è giusto avere un nome che richiama e molto spesso è handle Change dove nome cognome password Quindi abbiamo l' handle Change e quello che andiamo a fare non è un alert ma un console.log per ora di Ciao molto semplice quindi andiamo di qua

e se io apro comincio a scrivere cose a caso Vedete che ogni volta mi manda schermo Ciao in questo caso 31 volte perché ho scritto 31 caratteri Ora voglio mandare a schermo il valore di input di questo qua come facciamo on handle Change lo chiamiamo solo su questo input se poi fosse handle Change nome sarebbe proprio handle Change nome di conseguenza Noi andiamo qui e prendiamo la nostra e o event chiamatelo Come volete Resta il fatto che questo parametro è l'evento Perciò se io mando a schermo la e Ottengo tutto l'evento facciamolo un attimo andiamo

a vedere e io tolgo tutta sta roba e scrivo vedete che ogni volta che scrivo Compare questo log che è tutto l'evento che abbiamo se io voglio andare a prendere direttamente il valore farò e pun target C'è sempre un target questo è banale JavaScript Value Facciamo così torniamo di là andiamo ad aggiornare un po' tutto benissimo e scriviamo Ciao vedete che ad ogni input che faccio ogni volta che cambia l'input Abbiamo che mi manda a schermo il valore corrente Quindi all'inizio ovvio che se scrivo Ciao prima avrò solo la c poi la C I poi

c i a poi c i a o va bene Al contrario Vedete se vado all'indietro per cancellare mi manda comunque a schermo i valori dell'input la cosa non è finita perché Perché Innanzitutto abbiamo molti più eventi cioè Potremmo avere on mouse proviamo on mouse down mouse Enter mouse leave mouse Move insomma siamo pieni Quindi se volete Testarli fate pure non li guardiamo tutti qua perché non ha senso potremmo stare un'ora a parlare di tutti gli eventi possibili ma in realtà le cose da capire sono sono altre e una delle cose da capire È il prevent

default perché perché sicuramente conoscerete il fatto che il form Ad esempio può inviare dei dati e quando inviamo dei dati con un bottone submit che cosa succede si aggiorna la pagina Adesso vi faccio vedere abbiamo il nostro form e noi Mettiamo che on submit Eccolo qua andiamo a gestire handle submit Chi l'avrebbe mai detto che l'avrei chiamato così quindi handle submit e dentro abbiamo un button Type sub chiaramente dovete far finta che ci sia tutto il resto del form eh giustamente qua dentro potremo avere nome cognome password conferma password check della privacy check Hai letto

i termini di servizio check ti mandiamo qualsiasi tipo di informazione per spillarti i dati Eccetera ma poi abbiamo il nostro button Type submit e qua dentro Sarebbe buono scrivere magari Invia Ecco qua Salviamo andiamo a vedere È successo qualcosa giustamente non abbiamo la funzione bravissimo Edo Quindi se io faccio così vado a mettere handle Change Perfetto Se volete mandare a schermo l'evento del del submit non è un problema Noi andiamo qua puliamo e sull'invio vedete che non solo non abbiamo a schermo la roba ma si è Aggiornato Quindi se io scrivo qua qualcosa Ma faccio

poi invia scompare tutto perché la pagina viene aggiornata si vede qua in alto si vede in alto qua dove c'è vit react si vede qua dentro nella console qua dentro si vede ovunque Ogni volta che faccio invia si aggiorna la pagina non è però il risultato che noi vogliamo soprattutto in react o angular o svelt perché perché sono framework che si basano sul principio della creazione quantomeno inizialmente Di quelle che si chiamano Spa spa single page application sono applicazioni web che stanno dentro un'unica pagina noi non vogliamo mai lasciare la nostra Index faremo finta col

routing di lasciare l'index ma non la lasceremo veramente mai Quindi in realtà se noi facciamo invia e si aggiorna la pagina Noi perdiamo quello che è è lo state della nostra applicazione quindi lo Stato dell'applicazione e come vedrete dal prossimo video lo Stato Dell'applicazione Vediamo se io vado qua vedete Questo è lo stato il conteggio al momento è 10 se faccio invia si riparte da zero noi non vogliamo queste cose noi vogliamo che io ho magari 10 ok Quindi questo è lo stato del conteggio ma Se premo su invio semplicemente magari cambia la percezione che

sia cambiata la pagina ma il conteggio di qualcosa è sempre 10 quindi questo è il principio su cui si basa basano le single page application deve essere tutto su una Pagina all'utente sembra di cambiare pagina perché l'utente non sa cosa c'è dietro ma in realtà non la cambia mai lui ha solo questa sensazione di reattività di dinamicità istantanea e questa è la cosa bella però non possiamo vedete non possiamo aggiornare la pagina perché la pagina non dà questa sensazione di reattività da Ah ok ho aggiornato la pagina quindi capite che questo on submit così non

funziona Cosa possiamo fare possiamo prevenire il eh Behavior non mi viene in italiano il comportamento di default quindi possiamo andare a dire eh evento prevent default questa cosa qua però è banale JavaScript perché se avete lavorato con JavaScript l'avete probabilmente già visto e allora se io faccio così e faccio invio vedete che mi compare tutta la roba in in console e non si aggiorna la pagina Se io aumento il count continuo a fare invio Lo stato rimane esattamente quello perché perché abbiamo prevenuto il Default e il default è l'invio della la pagina questi fondamentalmente sono

gli eventi sono molto semplici non c'è niente di che gli eventi sono sempre i soliti eventi li mettete qua Aprite le parentesi graffe Se volete li gestite qua dentro altrimenti funzione richiamate la funzione dentro la funzione fate quello che dovete fare Se volete avere accesso all'evento mettete l'evento prendete il valore Se avete necessità Eh prevenite il default Insomma fate quello che volete Però alla fine funziona così direi di non chiacchierare ulteriormente perché perché dobbiamo andare a parlare degli stati quindi si entra nella parte un po' complessa diciamo così di di react Ci vediamo tra poco

episodio 13 del corso di react oggi entriamo nella parte di react un po' più interessante cominciando a parlare dello state dei componenti in realtà lo state dei componenti è semplicemente lo stato dei Componenti diventerà poi lo stato della dell'applicazione comunque si passa da qua è un discorso complesso oggi parliamo dello stato in tutto quello che possiamo vedere adesso poi nel corso dei prossimi video andremo ad allargare lo scope di di di questo discorso andremo a vedere come risolvere determinate problematiche eventuali pacchetti esterni eccetera quindi è un argomento che vediamo adesso nel suo concetto nel suo

utilizzo più basico ma poi la cosa Soprattutto nelle grandi applicazioni e Cambia Cambia drasticamente l'utilizzo di conseguenza ne andremo a parlare mentre finiamo il corso Comunque siamo a metà del corso perciò ce ne vuole ancora cominciamo a parlare degli state oggi e poi ripeto pian piano Costruiamo su quello che abbiamo imparato oggi lo state È quella cosa che ci permette il react vedete di fare il count Quindi da zero continuare a premere e il count aumenta Voi potreste dirmi posso solo Contare No in realtà potete fare tutto quello che volete semplicemente la versione più basica

che ci viene data da react è questo count se noi andiamo a prendere il codice vedete che abbiamo questo set count e abbiamo qua Us state adesso ne parliamo di di tutte queste cose La domanda è chiederci Che cos'è uno state di un componente o di un'applicazione si tratta di dati interni all'applicazione che possiamo utilizzare in vario modo uno dei modi Più Secondo me facili da capire è utilizzare Visual studio code prendete Visual studio code se voi ce l'avete esattamente come me in questo caso quindi non connesso a un vostro account Visual studio code non

non avete niente c'è solo Visual studio code Eppure se io premo contrl B vedete che scompare la Sidebar eh Se premo qua in alto compare il terminale Se premo qua compare un altro terminale quindi vuol dire che la finestra di terminale era uno adesso Diventano due Se chiudo qua la finestra del terminale è ancora una aperta vi faccio vedere premendo qua sotto il terminale è ancora una aperta Semplicemente ho nascosto la finestra Se premo qua a lato mi compare questa zona laterale Se premo qui vedete che compare e scompare la la Sidebar questa cosa qua

siamo sempre nella stessa pagina di visualizzazione lo vedete siamo sempre qui oppure il numero di Tab aperte le Tab sono sempre queste quattro ma io mi Sposto da una all'altra Però sono sempre queste quattro ne vogliamo aprire un'altra eccola qui vedete che c'è una sorta di Innanzitutto il conteggio Quante Tab sono aperte oppure Quante finestre di terminale sono aperte conteggio molto simile a quello che stiamo facendo qua oppure eh quali sezioni sono aperte è aperta la sezione del terminale è aperta la sezione navbar è aperta la sezione a destra che tipo di visualizzazione stai usando

Che tipo di Tema stai usando Cioè ci sono tutte queste possibili scelte che rappresentano lo stato di Visual studio Code in questo momento Visual studio code ha lo stato in cui si trova vedete Lo Stato come Qual è il tuo stato fisico in questo momento sei ammalato non sei ammalato hai il raffreddore eh hai la varicella stai bene Hai solo mal di testa ci possono essere tanti stati sei stanco sei affaticato sei riposato la stessa cosa è lo stato di Visual studio Code Visual studio Code in questo in questo momento ha quattro Tab aperte Io

sono concentrato su app.jsx c'è un terminale aperto Però la finestra del terminale è chiusa vedete la finestra qua a lato adesso è aperta adesso è chiusa la Sidebar qua a sinistra è aperta Quanto è larga la Sidebar vedete Quanto è larga la finestra ognuna di queste piccole cose è uno stato la Sidebar che stato è aperto o Chiuso il terminale è aperto o chiuso la finestra del terminale che è aperta ha dentro qualcosa o no Quante Tab ho aperto Qual è il conteggio delle Tab aperto e via discorrendo ognuna di queste cose è uno stato

insieme fanno in generale lo Stato dell'applicazione di Visual studio code se approcciate questa cosa sia come lo stato vostro mentale lo stato vostro no fisico ma anche lo stato di Visual studio code vedete che il concetto di Stato Diventa molto semplice Perché perché anche noi potremmo avere qua ad esempio una Side bar aperta Se premo qui Voglio che si apra qua sulla destra a lato il dettaglio di Parigi Parigi è una città bellissima che hai visitato nel 2022 ta ta ta oppure sta indicando lo stato del conteggio io premo e sta conteggiando Ha i tot

Tab aperte non abbiamo effettivamente le tab Ma stiamo premendo e Stiamo aumentando un conteggio che non è diverso dal premere sui file di Visual studio code e Aumentare le Tab che abbiamo aperte così come anziché avere le le card così potremmo avere un tipo di visualizzazione diversa sapete che c'è o la visualizzazione in card o magari c'è la visualizzazione ad elenco quel tipo di scelta di visualizzazione è spesso e volentieri uno state quantomeno lo state di visualizzazione della galleria delle delle città Quindi alla fine lo stato è questo non ho un modo più semplice per

spiegarvelo è lo stato delle cose All'interno di un'applicazione react ma un'applicazione è formata da componenti perciò potete capire come il singolo componente può anch'esso avere un suo stato ad esempio fate una classe di studenti Ognuno di loro può essere ammalato Quindi ogni studente può essere o ammalato a casa ammalato oppure sano a scuola ma dopodiché abbiamo lo Stato generale della classe Com'è la classe lo Stato dice che abbiamo tre persone al momento le altre 17 sono a casa quindi C'è lo Stato dell'applicazione come classe di studenti ma poi abbiamo lo stato dei singoli componenti come

singoli studenti va bene non ho più metafore da fare a riguardo se non avete capito il concetto di Stato con questa cosa qua Provate a leggerlo sulla documentazione ufficiale provate a vedere altri video perché più di così non non riesco a semplificarvi lo Provate a riguardare il video O semplicemente arrivate fino alla fine e Probabilmente diventerà molto più semplice quando lo mettiamo in pratica vediamo Come si utilizza questo stato Allora qua siamo in app jsx ma non fa assolutamente differenza con card jsx Potremmo avere lo stato delle card in questo caso abbiamo app jsx analizziamo

questo qua come vedete abbiamo use state che viene importato da react quindi avete Import use state ed è importante la parola chiave use che stiamo usando cosa lo stato da dove Da react va bene In questo caso state si chiama Hook ne vedremo tanti Hook dovrebbe essere amo quindi prendere all'amo In sostanza useremo tanti Hook In react che ci permetteranno di agganciarci a altre funzionalità di react va bene quindi in questo caso ci agganciamo al look use state per utilizzare lo stato non ci sono altri modi in cui possiamo settare lo stato in react nativamente

senza terze parti eh Se non utilizzando Us state vedremo tanti altri tipi di di Hook però è importante capire questo questo concetto appunto degli Hook detto questo abbiamo Us state e andiamo a creare una variabile la variabile che andiamo a creare è count va bene quindi che cosa facciamo Andiamo a prendere da Us state stiamo dicendo Us state valore di partenza Zero quello che Us state ci rimanda è il nome della variabile a cui possiamo fare riferimento quindi ci manda indietro un valore che noi identifichiamo come count e una funzione Per settarlo vi faccio vedere

se io faccio console log di Us state 0 ottengo due elementi andiamo a vedere F12 come vedete abbiamo un Array di due elementi Il primo è il valore iniziale lo vedete quindi il primo elemento dell'array è il valore il secondo elemento è una funzione vedete F con le parentesi Che cosa fa questa funzione ci per permette di modificare questo valore tornando un attimo senza parlare un attimo della funzione torniamo un attimo Quindi qua Ogni volta che noi chiamiamo Us state qua dentro Potreste avere anche un Array va bene o un oggetto un Array di oggetti

una solo una stringa quello che volete In questo caso abbiamo Zero avendo Zero questo qua diventa un Array quindi Us state 0 viene tradotto in un Array di due valori Il primo è il valore di partenza il secondo è una funzione che modifica questo valore poi spiegheremo perché la utilizziamo quindi se noi andiamo a distruggere questo Eh questo Array invariabili come abbiamo fatto qua con le card vedete che abbiamo distrutto questo oggetto e abbiamo tirato fuori il title mgl is visited the chren questo è puro JavaScript il fatto di distruggere di fare la decostruzione distruzione

Chiamatela Come volete in italiano di un Array quindi il primo elemento di Us state che è un Array sarà sempre il valore dello stato di quella variabile mentre invece il secondo valore sarà sempre una funzione per modificare Quello stato di conseguenza voi potete andare a chiamarlo Come volete generalmente se questo rappresenta il conteggio avete che la prima variabile si chiama conteggio in inglese count e la funzione che lo modifica è set count perché set vuol dire andare ad impostare e quando diciamo settare è l'italianizzazione di set Quindi quando andiamo a settare qualcosa andiamo a impostare

qualcosa quindi quando vado a settare il count lo faccio tramite Questa funzione Se per caso Avessi un'altra variabile che magari è name quindi nome ho name che sarà il nome e poi abbiamo set name vedete come le cose combaciano e la prima cosa che vado a fare è ad esempio mettere Edoardo come nome quindi vedete come tranquillamente abbiamo due variabili state e una potrebbe essere quella che si occupa di capire se la Sidebar qui è aperta e l'altra potrebbe essere di capire se l'altra Side barra destra è aperta va Bene quindi non è strano avere

più variabili Certo potremmo in realtà avere un unico grande oggetto poi vediamo Un esempio però Potreste avere tranquillamente più variabili potremmo fare qualcosa del genere quando lavoreremo ad esempio con i form e questo è banalmente il nostro stato che in realtà avete già visto in in azione Ma parliamo un attimo di questa funzione perché vabbè il valore ok Ho il valore del mio stato quindi il conteggio parto Da zero e ogni volta lo incremento Ma come lo incremento lo incremento esclusivamente andando a settarlo tramite la funzione è importante che capiate che il concetto di Stato

nelle applicazioni questa cosa funziona in flutter funziona in svelt funziona ovunque Quando utilizzeremo redax eccetera negli Stati quindi poniamo il caso che abbiamo il conteggio Ok Si parte da zero il conteggio dello Stato non viene modificato Quindi da 0 a 1 ma Viene proprio sovrascritto quindi si passa da Zer tutto quello stato viene buttato via e viene rimpiazzato va bene È come se avessimo un foglio di carta questa metafora qua è stupenda per farvelo capire ponete il caso che il vostro stato dell'applicazione vi viene stampato su un foglio e quindi avete che è la Sidebar

aperta sì no eccetera eccetera ma abbiamo anche il nostro il nostro conteggio Quindi abbiamo sul nostro foglio di carta stampato Conteggio count è uguale a Zer cos'è Che fate voi dite Ah vabbè io traccio una sullo Zer e metto l'un non vale questa cosa qua non vale dovete stampare un altro foglio con il valore 1 Non preoccupatevi di sta roba perché Perché è gestita automaticamente da Us state Us state Cosa fa non va a correggere zero con uno quindi con sul vostro foglio di carta count 0 traccia una riga a penna e ci scrive uno

che brutto così Cosa fa vi stampa un nuovo foglio con scritto count UG 1 questo concetto è un concetto di sovrascrittura dello Stato lo Stato precedente viene buttato via a favore di un nuovo Stato va bene perché lo Stato direttamente non è modificabile questo concetto è fondamentale e funziona così in tutta la programmazione dove si parla di stati della programmazione si utilizza questo concetto pensate sempre al vostro foglio di carta con scritto tutto lo stato viene buttato via il foglio di carta e viene aggiornato voi Mi direte Sì ma se per caso cambia un valore

su 100 nuovo foglio di carta con tutti gli altri 99 valori uguali il centesimo valore che è stato modificato è l'unica cosa diversa se se lavorassimo così con la carta sarebbe uno spreco fuori di testa mentre invece qua è una sicurezza aggiuntiva di conseguenza il nostro set count serve per dire Ehi react ti ricordi che stai tenendo traccia di questo Us state benissimo me lo aggiorni Come me lo aggiorni mi butti Via lo Stato precedente crei un nuovo Stato col valore aggiornato Questa è la mentalità che c'è dietro se avete capito che cos'è uno stato

e come funziona sottobanco avete fatto di base il 90% e adesso vediamo come funziona ora se io vado qui on click abbiamo la nostra funzion Cina Arrow anonima che richiama set count e dentro count riprende il count quindi prende il valore precedente e lo aumenta di uno voi Mi direte Ah ma non lo sta non lo sta semplicemente Modificando No perché prende lo Stato precedente lo aumenta di uno però poi lo Stato precedente viene buttato e questo nuovo stato viene messo al suo posto va bene quindi si fa riferimento chiaramente al foglio di prima guardo

Ah cos'era il foglio di prima zero quindi sul nuovo foglio io scrivo uno Ok il foglio di prima ci serve come riferimento ma una volta che abbiamo il nuovo dato stampiamo il nuovo foglio e l'altro viene buttato Ok ora voi Mi Direte perché tutta sta roba vi faccio vedere perché che se noi avessimo una variabile chiamata semplicemente conteggio La chiamo in italiano Giusto per farvi capire che è la stessa cosa ma non è uno stato quindi let conteggio e io faccio conteggio uguale a 0 quindi conteggio uguale a 0 Noi andiamo qua duplichiamo questo bottone

per ora E mettiamo che count is conteggio perfetto e qua scriviamo conteggio molto bene la cosa che Facciamo è anziché set count eccetera facciamo semplicemente conteggio più più di logica Voi potreste dirmi Ah Se premo on click conteggio più più qua io prendo conteggio fa riferimento a questo conteggio mi aspetto che aumenti giusto vediamo Andiamo qui prendiamo vedete che conteggio x0 continuo a premere viene premuto effettivamente ma non succede niente se invece premo sul count aumenta Se premo sull'altro non succede niente vi faccio vedere che funziona con un Banale console.log quindi vediamo insieme il nostro

conteggio più più Salvo torniamo indietro io premo su conteggio vedete che conteggio in sé aumenta lo vedete da 0 11 eccetera ma non viene modificato Se invece premo di qua viene aumentato il count perché questa cosa perché dobbiamo utilizzare lo state e un banale JavaScript un giro logico di JavaScript non funziona il fatto sta in Come viene renderizzato il componente di react e Come react funziona che ripeto non è diverso da flat Quindi se arrivate da flut oppure avete intenzione di andare prima o poi su flut è esattamente la stessa cosa quindi lo state È

una un concetto che utilizzate trasversalmente in molti linguaggi il discorso è che il nostro componente react andiamo a vedere quindi la nostra applicazione react viene renderizzata giusto nel momento in cui succedono cose Va bene Succede del JavaScript ma non è abbastanza affinché L'applicazione venga riaggiornato va bene quindi succedono cose ma react ha già renderizzato l'applicazione nel momento in cui succede qualcosa in realtà react ha già renderizzato il il componente e il componente è una funzione Se ogni volta che cambia qualcosa dobbiamo aggiornare quindi dobbiamo far ripartire tutto Voi capite che riparte la funzione Giusto Quindi

poniamo il caso abbiamo mandato a schermo la nostra roba giusto Con il conteggio conteggio è zero io premo devo essere aggiornato quindi vuol dire che l'applicazione deve essere riend zzata quantomeno questa function app quindi vuol dire che riparte nel caso la funzione function app Ma la funzione function app ha conteggio uguale a 0 quindi vuol dire che ogni volta che viene aggiornato il componente si riparte D let conteggio Zero di conseguenza non importa quante volte clicchiamo ma se per caso noi Aggiornasse ripartirebbe comunque da zero ma non è così che funziona react react Aggiorna il

componente solo quando c'è un cambio di St quando vede che c'è effettivamente un aggiornamento di Stato dice Ah ok allora provo a riend erizzo che se riend eriza conteggio riparte da zero mentre invece lo state è tenuto a mente Ok Faccio ripartire la la mia function app però lo state È come se fosse tenuto a mente come se dicesse a un amico anziché ricordarmelo io però Ogni volta volta che riconteggio che provo a riconteggio riparto da zero dico al mio amico Ricordami che eravamo a cinque quindi per caso si aggiorna qualcosa io mi distraggo Oh

mio Dio devo ricominciare a contare dov'ero arrivato il vostro amico è lo state che è tenuto a parte che vi dice da cinque Ah ok perfetto mentre invece ogni volta che voi vi distraete no mi son distratto dov'ero arrivato Vabbè fammi ripartire da zero Fammi ripartire da zero è la Stessa cosa che succederebbe qua dentro perché Perché conteggio ogni volta viene settato a zero Qua invece Diciamo che lo state parte da zero se non esiste Ma se esiste Quindi se il nostro amico eventualmente se chiediamo dov'ero arrivato Se il nostro amico non fosse uno state

o non fosse stato settato Zero Ok va bene ma nel momento in cui noi settiamo lo stato ad esempio come cinque Lui se lo tiene mente perché è l'unica cosa che si deve ricordare Noi invece Ah Ok Mi sono aggiornato e è stato risetta il conteggio a zero qual era Scusami Io riprendo lo state che è il mio amico il mio amico mi dice er arrivato a cinque Ah ok perfetto di conseguenza viene riend zzato tutto ma in questo caso il mio amico mi dice che count è uguale a 5 a differenza di conteggio che

è stato risetta da qua ok Quindi react in realtà non fa tutta sta roba ogni volta semplicemente Aggiorna il componente quando si rende conto che ci sono degli Update ogni volta che noi cambiamo uno stato del nostro componente viene riend erizzo il componente mi dice Ah è stato cambiato uno stato probabilmente c'è qualcosa a schermo che è stata che deve essere aggiornata quindi fa ripartire tutto e mi dice è stata cambiata sta roba Ok Allora cambiamo solo quella Va bene basta dovete vederla così potremmo andare molto più nel dettaglio sul funzionamento del di come vengono

renderizzate le applicazioni react Eccetera però dovete saper questo Quindi il motivo per cui non possiamo utilizzare questo banale giro Ho una variabile e l'aumento non funziona perché giustamente react va a perdere il filo ogni volta ma oltre che perdere il filo qua viene risetta Cioè se la funzione venisse rilanciata ogni volta l'ed conteggio sarebbe sempre zero invece dicendo a react di utilizzare Us state stiamo dicendo react per favore tieniti a mente di sta cosa la prossima Volta che renderizza questo componente Ricordati che count non è 0o è 5 conseguenza possiamo richiamarlo e automaticamente viene aggiornato

qua dentro appunto abbiamo set count Che cosa fa set count set count Va semplicemente a modificare quello stato a buttare via quello precedente e a riprendere l'altro ok Quindi questo è il funzionamento basico degli Stati tuttavia non abbiamo finito finché non vi faccio vedere come possiamo Modificare altri tipi di stati può essere uno stato che è un Array quindi facciamolo Potremmo avere 1 2 e 3 ad esempio e allora abbiamo items e poi set items e poi vi faccio vedere semplicemente un un oggetto abbiamo perciò qua dentro vedete il nostro stato che è un Array

e qua dentro possiamo andare a fare const Aggiungi item e quindi facciamo una funzione anonima che associamo direttamente a cosa ad una costante Diciamo che il nuovo valore che Aggiungiamo è nuovo item UG a 4 Dopodiché facciamo set items E cosa andiamo a fare andiamo a fare questo e vi spiego perché TAC T TAC items virgola New non New Scusatemi ma nuovo item cerco di parlare mezzo italiano Mezzo inglese alla fine faccio i disastri quindi che cosa sta succedendo che quando chiamiamo Aggiungi item Questo è il nuovo item che vogliamo aggiungere quindi 1 2 3

vorremmo il 4 ma vi ho detto che se noi andiamo a settare item Solo con quattro questo viene sovrascritto perché viene buttato via il lo Stato precedente e viene sovrascritto con col nuovo valore quindi dobbiamo premurarsi gestirci noi lo Stato precedente dobbiamo dirgli no no no mi prendi lo Stato precedente Questo è lo spread operator Mi raccomando che se non lo conoscete è importante se scrivete spread operator oppure y6 New operator Cioè se cercate Comunque questo è JavaScript moderno ormai non Non più così tanto moderno Perché è uscito da 6 anni e passa se non

mi sbaglio però magari essendo un po' più nuovo un po' più recente potreste non averlo visto nel mio corso avanzato se è già presente lo troverete di sicuro il discorso stiamo dicendo con questa scrittura mi prendi items che è questo che è in realtà questo e me lo spalmi qua dentro spalmandolo diventa così 1,23 vedete che è esattamente la stessa cosa più nuovo item quindi facendo così Puntino puntino puntino items Quindi con lo spread operator item stiamo dicendo mi prendi l'array che c'era qui ma non è che mi butti dentro un Array con dentro un

altro Array di items e poi gli aggiungi il quarto vedete sarebbe un altro R No no i tre elementi che avevi prima non è solo perché ho tre puntini Eh ma gli elementi che avevi prima li prendi e me li incolli qua dentro è esattamente la stessa cosa dovete interpretarla proprio così me li spalmi Come se fosse marmellata sul sul pane me li spalmi in questo nuovo Array e mi aggiungi anche nuovo item facendo così quando poi andiamo a chiamare Aggiungi item Potreste avere qua il bottone che lo richiama e mandate a schermo il valore

potremmo fare un bel console log cosa facciamo eh items quindi items così ma facciamo anche console.log items qua perfetto eh Dobbiamo salvare ma prima sul bottone Copiamo Eh facciamo prova e qua dentro Andiamo a mettere Aggiungi item Salvo codice vedete che abbiamo qua i nostri valori rifacciamo Abbiamo qua il nostro Array vedete è lo stesso 1 2 3 quando premo su prova vedete che prima ci rimanda subito 1 2 3 perché non ha fatto in tempo ad aggiornare ma è il funzionamento dello Stato appena lo stato è aggiornato vedete che ce lo manda a schermo

aggiornato quindi è stato sostituito questo con questo Avete visto molto semplice andando a spalmare Cosa lo Stato precedente quindi una cosa fondamentale di cui dovete ricordarvi è che a questo livello dovete gestire voi lo Stato precedente e richiamarlo ogni volta se vi dimenticate E non fate questo questo lavoro vi faccio vedere otteniamo un risultato non desiderato Qua abbiamo 1 2 3 premo su prova vedete che è diventato quattro perché non abbiamo richiamato 1 2 3 facciamo un ultimo test che è quello dell'utilizzo magari l'ho già preparato di un utente Quindi vado qui abbiamo il nostro

utente user set user abbiamo Alice G anni 30 con nome età e qua dentro Potremmo avere la copia incollo perché tanto Avete già capito il concetto andiamo a fare l'update dello username quindi andiamo ad aggiornare ad esempio il il nome e come vedete nell' update dello dell'utente abbiamo update user Quindi abbiamo creato un oggetto che va a spalmare l'oggetto precedente che è questo e in più va a sostituire il name Quindi in realtà spalmiamo questo però poi stiamo sovrascrivendo il name con Bob e va bene così Quindi in realtà lui dice Ah ma name c'è

già Io butto solo l'età ok è esattamente lo stesso discorso una volta che abbiamo il nuovo oggetto utente set user col nuovo oggetto user va bene Questo è il concetto dello Stato ora lo Stato vi rendete conto che potete passarlo vi faccio vedere potete in realtà tranquillamente passarlo anziché title Qua City cosa facciamo lo mettiamo come count vediamo un po' e vedete che abbiamo qua count io aumento vedete come ho passato il conteggio a Card che non è proprio il componente che aveva quello state ma l'ho passato perciò viene aggiornato ovunque perché perché viene aggiornata

tutta l'app vengono aggiornati anche vengono aggiornate anche queste card prendono count e via discorrendo Quindi come vedete poi lo state lo possiamo utilizzare eh Dove Volete ora il discorso è che qua abbiamo già fatto una cosa molto importante abbiamo già lavorato con un tipo di Stato a livello tra virgolette globale a livello applicazione perché app ha poi dentro tutto cioè app è il componente principale che poi ha dentro tutto il resto perciò card poi se l' se l'è preso in pancia e abbiamo fatto quello che si chiama Lift The State app abbiamo lo Stato Lift

The State app vuol dire alzare Lift The State lo Stato app su di Di qualche livello e l'abbiamo messo nell'app se voi pensate allo stato del mio Visual studio code tutte le Sidebar eccetera sono gestite dalla tra virgolette dalla function app div Visual studio code Ma noi in realtà potremmo avere lo stato Us state della card le card potrebbero avere i loro stati e E potremmo passarlo a un componente che è dentro le card va bene Quindi in realtà possiamo darlo con prop a dei componenti figli quello che non possiamo fare così Semplicemente ci sono

degli stratagemmi li vedremo poi nel prossimo video è mandare lo Stato dal figlio al genitore Quindi se abbiamo uno stato qua dentro è dura mandarlo qua sopra così come se abbiamo lo stato in card qui ma abbiamo poi un altro componente vicino a card non possiamo mandarlo da card a un componente che è vicino a card di conseguenza cioè come mandereste da card a un componente magari bottone non potete farlo L'unico modo è avere lo Stato nel componente che ha sia uno che l'altro Ecco perché Lift state up alzare lo stato di un livello o

di più livelli perché vogliamo che lo Stato condiviso sia vedete qua dal bottone e poi l'avevamo messo qua nel titolo sia condiviso dal componente che li tiene entrambi Perché senò non possiamo comunicare Va bene Fate finta che siete fratelli Eh Avete un fratello una sorella quello che volete ma non Potete comunicare perché magari non avete il Numero di telefono eccetera dovete comunicare per forza tramite i vostri genitori I vostri genitori sono appunto i componenti genitori e hanno l'accesso sia a voi che a vostro fratello stesso discorso qua quindi molto spesso si tenderà ad avere lo

stato dell'applicazione a livello superiore non sempre l'avete nella function app che è quella che gestisce tutto a volte Sarà semplicemente in Card che gestisce altri componenti ma Potreste avere Sicuramente e succederà tante volte uno stato che dovrà essere utilizzato da tutta l'applicazione nel prossimo video vedremo come mandare uno stato da un componente figlio sopra di un livello Perché da qua saliamo di una e andiamo in app per ora abbiamo lavorato con una cosa già che si dovrebbe fare che è componente su lo mandiamo poi giù dalla dalla scala gerarchica passandolo per prop però capite che

questa cosa qua se io devo arrivare a card e card ha dentro Un altro componente poniamo il caso che qua dentro ci sia un componente eh conteggio così io devo passare Poi il prop ad esempio count lo devo passare qua quindi se è nell'applicazione qua in app lo devo passare a card quindi passerò qua dentro count che poi entra qua dentro prende count da qui e lo butta qua dentro Cominciate a vedere quella che è una catena una Chain di passaggi Quindi da un componente al figlio al figlio al figlio al figlio ad Esempio il

il bis bis nonno che deve parlare col bis bis bisnipote E allora devo parlare con il bisnonno parla col figlio che parla col nipote che parla col pro nipote che parla col pro pro pro nipote perché il bis bis nonno non può parlare col pro pro nipote va bene stessa cosa dei componenti Quindi allora abbiamo già questo problema che risolveremo più avanti di Ah ok Io ho lo stato a questo livello se voglio farlo avere a il componente conteggio che si Trova nel componente Card devo passarlo prima a card qua dentro che poi a sua

volta lo passa a conteggio una una matriosca su robe di piccolo livello non è un problema perché i passaggi sono pochi ma ponete il caso che avete tre 4 5 10 componenti Uno dentro l'altro Ogni volta dovete ricordarvi di passare ad esempio da App a card conteggio paragrafo testo bam bam bam fino che poi lo avete a schermo questo problema Ve lo dovete ricordare perché lo risolveremo Più avanti con uno stato ancora più globale di quello che abbiamo adesso per ora Questo è e abbiamo visto come mandare stato da un componente genitore A un componente

figlio la domanda è Ma se io avessi uno stato che deve essere per forza qua dentro Com'è che aggiorno poi app che aggiorna a sua volta magari un altro componente che è fratello di card ne parliamo nel prossimo video episodio 14 del corso di react oggi dobbiamo parlare di come possiamo Mandare i dati da un componente figlio ad un componente parente abbiamo prima Visto il contrario dal parente quindi da un componente più grande a uno più piccolo quindi uno in realtà contenuto Ad esempio in app che era card tramite i prop Questi sono i prop

che inseriamo in ogni Card che poi riutilizziamo e li mettiamo dinamicamente con il nostro Map andiamo a togliere un attimo questa cosa qua e vado a togliere i commenti perfetto questo qua lo cancello il Discorso che vi voglio fare oggi è Ecco qua aggiorniamo è quello di aggiungere un form in realtà fittizio che va a fare cosa che va ad aggiungere una card alla nostra lista e il nostro form sarà un componente in realtà l'ho già creato questo qui E adesso vi faccio vedere il discorso è di avere qua il nostro componente card form e

adesso lo vediamo quindi io vado qua card form Salvo devo togliere un attimo eh Long click qui che potrebbe dare errori e se io faccio così Notate come abbiamo un altro componente quindi andiamo a rivedere e adesso ve lo spiego abbiamo la nostra app jsx che ha il form in cui possiamo Aggiungere una nuova città e poi abbiamo dentro la lista delle città giusto lasciate perdere i bottoni qua sotto dimostrativi dello Stato eccetera Anzi se volete li li nascondiamo anche non è non è un problema qua poi abbiamo il nostro form il nostro form è

semplicemente un div con display Flex in colonna con dentro Tre input che al momento non utilizziamo e poi un bottone Aggiungi card questo form visto che non abbiamo ancora parlato di form non sarà funzionante L'unica cosa che è Fante è Aggiungi card quindi il risultato è fittizio vedete abbiamo qua il nostro form qua ci sarà nome per per la città descrizione e abbiamo qua questa e poi abbiamo l'URL del dell'immagine Se volete possiamo aggiungere visitata o non visitata però di default potrebbe essere non visitata Il discorso è che noi facciamo Aggiungi card automaticamente deve aggiungere

qua sotto un dato qual è il problema ed è di base la lezione è che noi siamo qua dentro come prendiamo dei dati che sono qua dentro o in generale in card form e li facciamo uscire a ritroso in app jsx perché non abbiamo qua app jsx in cui mandarglielo come prop tipo dati del form di conseguenza dobbiamo andare a ritroso Mentre qua è più facile perché da App jsx metto qua i props e vado Dentro in card form o in card jsx non posso fare il contrario ma c'è uno stratagemma per farlo Poi più

avanti vedremo come fare la gestione degli stati a livelli globali e quant'altro per però comunque anche se ce la caviamo con redax e altri tipi di di gestione degli Stati è comunque una cosa che dovete che dovete imparare questa che di base sono i prop al al contrario come la gestiamo Allora innanzitutto È importante capire che quando andiamo ad Aggiungere una nuova card automaticamente alla alla alla premuta del bottone deve aggiungere una nuova card il problema di queste card è che sono hard codate in una costante le vedete costante Cities che non è uno stato

quindi non si aggiornerà mai automaticamente come il pulsante count che avevamo di conseguenza dobbiamo renderlo uno stato ma fortunatamente negli episodi precedenti in quello precedente vi ho fatto vedere come Salvare uno stato che è un Array e anche degli oggetti in realtà li mettiamo insieme abbiamo un Array di oggetti che è esattamente questo quindi proviamoci andiamo qua parentesi quadre Cities set Cities molto bene e poi chiaramente Qua abbiamo use state apriamo e qua dentro adesso abbiamo un bellissimo stato che ogni volta quindi stato che sono le città che parte con queste quattro città se io

vado di qui vedete che non succede assolutamente niente di diverso L'unica Cosa sono i console log là in alto che mi danno fastidio Ecco qua e abbiamo il nostro stato delle città Eccole qui adesso cosa dobbiamo fare Dobbiamo aggiungere un elemento a queste città giusto perfetto come lo facciamo Beh Qua abbiamo use state questo Array e qua l'abbiamo fatto vedete quindi proviamo a ripetere una cosa del genere const potete scrivere Aggiungi città Aggiungi City facciamo un attimo ad City è irrilevante per ora il discorso italiano Inglese non mi interessa lo uso a piacimento per far

capire i concetti quando mi serve più italiano uso più italiano quando posso cavarmela con l'inglese vado con l'inglese Quindi ad City voglio aggiungere ad City città e cosa andiamo a fare andiamo a prendere una città in entrata che ci verrà passata e questa città l'andiamo ad inserire in set items che non sarà set items ma set Cities il discorso è che qui avevamo fatto prima delle modifiche Avevamo items così Perfetto andiamo a fare la stessa cosa quindi prendiamo non sarà set items chiaramente Ma sarà set Cities non sarà items Ma sarà Cities Perfetto Quindi riprendiamo

lo Stato precedente Ma allo stato precedente gli aggiungiamo City Se non vi piace averla qui facciamo qua sotto alziamo lo stato delle delle città e andiamo a metterlo qua sotto perfetto Salviamo e adesso dobbiamo trovare un modo per chiamare questa funzione Ma da dove Dal Car form Perché Perché card form non è in grado di gestire lo stato di App jsx card form c'ha il suo stato è un suo componente a parte di conseguenza noi dobbiamo trovare un modo di passare questa funzione come riferimento e dire a cform Chiamami questa funzione che va a settare

le città va bene che va ad aggiungere di base una città come possiamo fare indovinate un po' come possiamo fare con i prop quindi noi mandiamo giù la funzione il riferimento Alla funzione Dopodiché gli diciamo su Long click mi chiami handle click che sarà una funzione che faremo qui e su quellle click mi chiami questa funzione che ti ho passato come prop può sembrare complesso vediamolo insieme allora Add City e passiamo ad City Quindi vedete che stiamo passando un prop che si chiama ad City gli passiamo come riferimento vedete che non la stiamo attivando così

gli passiamo come riferimento questa funzione quindi la Mandiamo giù di un livello e gli diciamo Ehi ti sto mandando giù di un livello in riferimento a questa così adesso anche tu la puoi chiamare anche se non è qua dentro di conseguenza qua dentro possiamo prendere ad City molto bene e qui sul button andiamo a gestire Long Click on click andiamo a mettere una funzione che andiamo a gestire quindi const handle click e sull' handle click che cosa andiamo a fare andiamo a chiamare Add City e gli passiamo una Città la città che gli passiamo è

una const City che creiamo noi adesso a mano ad hoc in realtà questa città che cosa sarà sarà una città che avrà i tre input e magari se volete anche visitata o non visitata quindi handle Click Chiama poi poi poi rivediamo tutto il giro non preoccupatevi endle click andiamo a creare la nostra città fittizia che Copiamo In realtà quindi ci serve un ID 4 Ok perciò abbiamo il nostro gettone lo Vedete con i D4 la città potrebbe essere Sydney molto bene la descrizione è la stessa dobbiamo andare a prenderci un'immagine Quindi andate su un Splash

scrivete Sydney e prendete quella che volete senza starci troppo questa va assolutamente più che bene copia indirizzo immagine risposti amci e qua dentro dentro benissimo incolliamo la nostra immagine adesso abbiamo un problema qua che c'è la virgola anziché il punto è virgola funziona tutto Salviamo testiamolo proviamo ad aggiornare dovrebbe funzionare tutto se faccio Aggiungi card avete visto è stata aggiunta ogni volta che premo in realtà poi ci darà problemi sulla K perché Perché è sempre quatt vedete Però quella lì si può sistemare facilmente Ma viene aggiunta se aggiorniamo Abbiamo ancora quattro che è lo stato

iniziale Aggiungi card abbiamo Sydney una volta che impostate questa cosa cioè che il form poi è dinamico poi nel prossimo video Vediamo come dinamizzare il form e prendere i dati eccetera avete finito cioè potete crearvi già una Todo list potete creare l'inserimento di qualche altro tipo di dati eccetera eccetera non sapete ancora lavorare con il database però funziona rifacciamo un attimo il giro perché è bellissimo vederlo Anzi prima rivediamolo che è bello Ah che soddisfazione detto questo Quelle sono le cose belle della programmazione Ma andiamo a vedere il giro del fumo che è Che è

lo sbatti Allora card form non può gestire lo stato di App jsx perché ha il suo stato non può mandare i dati ad App jsx come prop non può chiamare le funzioni di App jsx giusto L'unica cosa che può fare card form è ricevere prop giusto giustissimo quindi noi cosa facciamo Innanzitutto abbiamo fatto diventare le nostre città uno stato Perché Perché al fine di vedere le card che automaticamente si aggiornano Non può essere arcod dat come una costante e Basta o anche come una let come una semplice variabile Ma deve essere uno stato Quindi ogni

volta che si aggiorna l'applicazione Ah lo stato è lì a parte so che è stata aggiunta una una città perciò la aggiungo adesso che abbiamo queste questo Us state di città abbiamo città e set città perfetto da qui abbiamo creato una funzione che ci permette di riprendere tutte le città che avevamo in precedenza in qualsiasi momento e aggiungere la nuova città che Ci arriva che prendiamo da qua Giusto giusto adesso prendiamo riferimento a questa funzione e diciamo a cform te lo passo come prop il riferimento Adesso anche tu puoi chiamare adsit È come se passassimo

il numero di telefono di ad City a a card form che in realtà non potrebbe fare non potrebbe chiamarla direttamente diciamo guarda ti passo come prop il riferimento il numero di telefono a questa funzione Adesso anche tu la puoi chiamare e diventa tutto Molto più semp semplice perché andiamo in card form prendiamo il nostro prop che è un riferimento il numero di telefono della funzione abbiamo il nostro bottone on click handle click da qui abbiamo la nostra funzione handle click benissimo e qua dentro abbiamo hard Codato Chiaramente la nuova città sarà sempre id4 Sydney eccetera

eccetera Se volete potete mettere qua Mat Random ma sarà comunque quindi avete l'ID che cambia ogni volta con Mat random o uno YuYu ID fate quello che volete ma avrete sempre Sydney finché non impariamo a gestire i form che sarà nel prossimo video a prescindere da questo più avanti prenderemo i dati adesso è arcodato non ne prendiamo questa città e la inseriamo qua dentro Chiamando ad City di cui adesso abbiamo il numero di telefono per farlo di conseguenza verrà chiamata questa funzione con una città la città è questa quindi la città a 4 Sydney verrà

poi aggiunta insieme alle altre Cities Che sono queste essendo uno state viene notificato react Ehi lo state è stato aggiornato rivaluta l'applicazione di conseguenza app jsx che è tutta l'applicazione fosse solo un piccolo componente verrebbe rivalutato solo il componente Ma qua app jsx è di base il componente di tutta l'app viene rivalutato il componente app jsx ma stavolta Cities ha un'aggiunta in più che abbiamo chiamato veramente pochi secondi fa che è Sydney dico conseguenza Vengono riend zzate tutte le card con Sydney va bene questo è quanto e il risultato rivediamolo godiamo insieme Ah che bella

soddisfazione quindi questo è il giro del fumo abbiamo mandato i dati da un componente figlio ha un componente parente e l'abbiamo fatto metaforicamente dando il numero di telefono o il riferimento si chiamerebbe così abbiamo mandato come riferimento come prop di una funzione del componente parente basta una volta che chiamiamo la Funzione del parente stiamo lavorando nel parente punto Questo è quanto io spero sia chiaro è fondamentale impararla come tecnica perché è una tecnica che va saputa perché magari in certe applicazioni non avrete gli stati grossi come vedremo più avanti avrete qualcosa di semplice così come

i prop questa è una piccola tecnica una piccola componente di react che va imparata prossimo video abbiamo i form Perciò ci vediamo tra poco episodio 15 del corso Di react arriviamo finalmente a capire come lavorare con i form e in realtà sfruttiamo tutto ciò che abbiamo costruito recentemente negli ultimi episodi per andare a creare qualcosa di un po' più interessante Nel senso che vedete che abbiamo il nostro form che fa molto schifo lo andiamo a rendere completo per aggiungere di base infinite card perciò tutta la parte di Aggiungi card e la renderizzazione delle card funziona

quello che vogliamo fare adesso È rendere questo form effettivamente utilizzabile perché al momento non lo stiamo utilizzando se non il bottone finale quindi dobbiamo andare a fare un po' di modifiche la prima cosa è avere un form benissimo Dopodiché andiamo a mettere on submit e andiamo a gestire l' handle click o handle submit Se volete possiamo cambiare il nome Cambiamo il nome Ma sì dai handle submit che andiamo a cambiare qua in alto molto bene il nostro bottone diventa quindi di Type Submit non vi dovete più preoccupare del del bottone e adesso lavoriamo Sul sui

campi i campi saranno e lo sappiamo UPS ce l'abbiamo qua l'ID Se volete abbiamo poi il nome quindi il nome ci interessa la descrizione l'immagine e se è visitato quindi l'ID verrà poi calcolato dopo ci interessa nome descrizione immagine e visitato Quindi sarà inut input text area Scusatemi input text text area input text e checkbox questo è quanto Allora non ci interessa niente di Rispettare l'accessibilità e quant'altro non è questa la sede per occuparci di ste cose voglio essere veloce perché sennò ci impieghiamo mezz'ora per spiegare una roba che può stare tranquillamente in 20 minuti

non che 20 minuti siano pochi però insomma allora abbiamo la nostra Label che è qua dentro e mettiamo ad esempio Nome città Se volete così Dopodiché andiamo a duplicare questa cosa in realtà ci serve il name scusatemi ci serve il name che Mettiamo come name quindi che sarebbe il nome città oppure title in questo caso name e name perciò chiamiamolo name abbiamo il Type text ci servirà poi il Value e l' Change per ora saltiamo andiamo a duplicare questa cosa in realtà per quante volte abbiam detto nome descrizione immagine di url e checkbox quindi description

in realtà questa è una text area che non ha bisogno del Type però comunque bisogno del name abbiamo poi Quindi descrizione descrizione in realtà città qua non ci serve abbiamo poi immagine immagine Quindi qua possiamo mettere IMG URL Se volete e poi abbiamo la checkbox quindi input Type checkbox E mettiamo is visited Perfetto Quindi visitata punto di domanda visitata Sì no possiamo fare salva vediamo quello che abbiamo ok Abbiamo questa cosa possiamo sistemarla in realtà e Cosa facciamo Andiamo semplicemente a fare un Class Flex Flex Call e lo facciamo Su tutti i div giusto velocemente

giusto per renderlo un po' più carino vedete com'è molto semplice con Wind sistemare le cose Perfetto Quindi descrizione nome descrizione immagine visitata punto di domanda se proprio proprio vogliamo andiamo a mettere un BG zyc magari in 900 Vediamo se cambia qualcosina perfetto e magari un padding quindi un padding generale di 5 e poi rounded magari LG Salviamo torniamo Ancora perfetto Questo è il nostro form e qua c'è il nostro bottone che faremo un pelino più scuro quindi button Type andiamo a mettere un bel Class name spazio e andiamo a mettere un BG Zinc 950 e

adesso dovrebbe essere visibile Perfetto Quindi questo è il nostro form fa schifio non c'è nessun problema L'importante è che funzioni Allora innanzitutto la prima cosa che facciamo è creare uno stato quindi vi ricordate come si fa dobbiamo importare lo state Com'è qua vedete Import you state from react quindi copiatelo non c'è nessun problema nel copiarlo Ecco qua abbiamo il nostro state e adesso andiamo a creare lo stato iniziale del nostro form di conseguenza const abbiamo form data form state chiamatelo Come volete ricordatevi di avere le parentesi quadre e poi abbiamo set form data benissimo e

andiamo ad utilizzare use state Eccolo qui e partiamo con lo stato del nostro form che cosa abbiamo Beh all'inizio Abbiamo il nome il name che sarà due punti vuoto giusto Yes stessa cosa La descrizione Quindi abbiamo description stessa cosa IMG ORL e poi abbiamo la checkbox giusto Scusate che non è checkbox ma è is visited partiamo con false quindi di default È false l' aggiungiamo giusto perché magari vogliamo visitarla non perché l'abbiamo visitata per forza quindi che cosa stiamo dicendo stiamo creando uno stato per questo form facendo così possiamo in Realtà collegare direttamente il valore

che c'è qua dentro al valore qua vi spiego Se io qua ho Value così ci vado a mettere dentro form datata punto Dov'è name perché formdata name perché form data è la variabile se fosse singola Sarebbe solo form data ma chiaramente è un oggetto perciò formdata name se io salvo chiaramente qua non ho niente ma come tutti gli altri però abbiamo un errore Non preoccupatevi quello che mi interessa è andare a mettere qua dentro Qualcosa quindi nel momento in cui io faccio così vedete che ho già dentro qualcosa sto andando a collegare lo stato con

il valore dell'input e viceversa se cambia il valore dell'input perché ci scrivo dentro cambia anche nello stato se cambia lo stato cambia anche il valore dell'input va bene quindi questo è il il discorso essendo doppio collegato di conseguenza noi potremmo avere uno stato iniziale Pensate se cambiate il vostro profilo Instagram tiktok YouTube Facebook o quello che volete non partirete mai da un form vuoto il vostro nome sarà già automaticamente compilato con i dati che avete messo durante l'utilizzo di Facebook giusto o durante l'utilizzo di Instagram ci sarà già il vostro nome utente la vostra email

quindi ci saranno casi in cui il form in cui andate a modificare i vostri dati li andate a modificare quindi i dati sono già di partenza all'interno del form va bene e Questo è un modo per gestirli facilmente all'interno di react adesso che abbiamo il nostro form data Cosa facciamo Andiamo a collegare Chiaramente tutta sta roba Dobbiamo però fare un'aggiunta on Change dobbiamo aggiornare cosa dobbiamo aggiornare il nostro stato perciò andiamo a fare l'handle non del submit ma dell'input Change perciò andiamo a gestire handle gestiamo input Change handle input Change e Cosa facciamo Andiamo a

creare Una funzione per gestire handle input Change e lo facciamo qui quindi const handle input Change andiamo Qui apriamo facciamo il solito e poi lo gestiamo per ora va bene così quello che mi interessa è andare a copiare tutta sta roba la copiate qua sulla text area e cambiate qua in description dopodiché abbiamo l'immagine di url perciò cambiate form form data Ops Ho mis cliccato Yes MG URL e poi abbiamo la checkbox e la checkbox sarà invece non Value attenzione intanto Facciamolo Non sarà Value Ma sarà checked perché giustamente la checkbox non ha il valore

in sé così ma ha checked Per il resto non cambia assolutamente niente Dobbiamo solo aggiornare qua in is visited Facciamo una prova salvando se io vado qui Vediamo se mi dà ancora problemi ok Non mi dà problemi vi faccio vedere che cambia is svitata faccio vedere se io vado qua in alto al momento ci stan dando problemi ma è assolutamente Normale se io vado qua su automaticamente è già cecata vedete Quindi questo è il buono del dello Stato torniamo indietro con false e adesso dobbiamo andare a creare la nostra handle input Change perché perché al

momento è praticamente vuota come la gestiamo allora abbiamo messo la stessa funzione su tutto il form non siete obbligati a gestirlo così Potreste avere un handle name Change handle descrizione Change handle immagine Change perché Magari l'imm volete mandarla a schermo come preview eccetera Io vi sto facendo vedere solo un modo ottimizzato per tutti visto che andiamo a fare la stessa cosa ottimizziamo così Potreste avere una gestione del Change per ogni valore dico tutte queste cose qua Qualcuno di voi già ci arriva ma lo dico perché molti principianti che seguono i miei corsi prendono alla lettera

in modo biblico tutto quello che io dico nel senso che se io un form lo approccio in Questo modo tutti i form loro li li approccerà in questo modo e non va bene perché ogni form ogni situazione può avere necessità diverse quindi è importante capire che non troverete mai un tutorial per ogni singola casistica che avete nella vostra applicazione Anche perché magari lavorate coi codici fiscali magari Nessuno ha mai gestito il codice fiscale su YouTube o su Stack overflow Giusto per farvi un esempio quindi non prendete alla lettera tutto Vi sto faccendo vedere come gestire

i form ma visto che tanto sapete fare le funzioni sapete che possiamo averne di diverse per ogni on Change basta È questo il discorso ok Qua mi torna comodo farlo uguale per tutti però spieghiamolo perché perché comunque farlo così non è semplice perché è abbastanza eh come si può dire astratto Cioè non è specifico per ognuno è uno per tutti Io ho un evento quindi quando c'è l'on Change che Cosa prendiamo l'input quindi sull'inps event è quello che succede il target è il nostro campo quindi sappiamo che dal nostro event target vi faccio vedere e

target cosa possiamo prendere possiamo tirare giù ad esempio il name giusto il Value il Type eventualmente checked Perché Perché Value è per gli altri Quindi se c'è lo va a prendere e poi abbiamo checked Quindi se check se c'è il checked in questo caso per la checkbox lo va a prendere quindi stiamo Prendendo le proprietà dell'input in discussione Ok che può cambiare in base al target chiaramente perché chiamiamo questa funzione da diversi input ora il nostro obiettivo è aggiornare questo oggetto con il Value per tutti gli input oppure con il checked per la checkbox quindi

noi prendiamo const input Value Qual è l'input Value l'input Value qua è Value per description è Value per text im IMG è Value Ma attenzione per la checkbox è checked quindi gli dobbiamo Dire che il valore dell'input attenzione dipende da se Type Type qui è text mi prendi il Value Oppure mi prendi se è una text area è È comunque text quindi mi prendi il Value Mentre invece se è di Type checkbox non mi prendi il Value mi prendi checked Quindi se Type è UG V uguale a checkbox cosa fai Mi prendi checked benissimo Altrimenti

mi prendi Value quindi ricapitoliamo se questo Type dell'input è checkbox mi prendi checked qua altrimenti mi prendi il Value una volta che abbiamo fatto questo dobbiamo andare a fare set form data che otteniamo dallo Us state di conseguenza apriamo e qua dentro Cosa facciamo andiamo a mettere dentro tutto il form data che già avevamo Dopodiché andiamo a sovrascrivere cosa andiamo a sovrascrivere quella proprietà che si chiama nome così e la facciamo diventare cosa input Value Salviamo perfetto ha riformattato Quindi abbiamo preso tutto il form data precedente che è questo Dopodiché abbiamo preso una proprietà di

cui non sappiamo cos'è perché questo name può essere name può essere description può essere IMG URL può essere is visited a seconda di quello che è questo name verrà messo qua dentro va bene e poi prenderà l'input Value Quindi se è name is Visible ci sarà is Visible Scusatemi is visited questo qua due punti l'input Value che sarà preso dal checked che sarà o True o false e lo farà per tutti gli input che abbiamo Messo nel nostro form una volta che abbiamo questo si tratta poi di andare ad aggiornare lendle submit perché una volta

che abbiamo lendle submit andiamo a fare un magari Mat Random in realtà e teniamolo così giusto per avere un ID diverso Mat Random scusatemi però almeno questo Ok quindi facciamo Mat Random per avere un ID casuale ogni volta al momento non è importante come name andiamo a prendere formdata name poi come description Questo qua però ce lo ce lo Copiamo o se volete Vabbè dai Facciamo così Chi se ne frega come description andiamo a mettere volevo risparmiare C un po' di tempo ma pazienza description e chiaramente come immagine URL andiamo a mettere form data.img URL

E poi giustamente come is visited facciamo formdata is visited di conseguenza stiamo Oh manca qua la virgola stiamo facendo riferimento allo state che è stato a questo state che è stato Aggiornato qui che poi viene preso qua dentro viene mandato ad AD City e si ritorna a fare esattamente quello che che abbiamo fatto nel video precedente adesso Salviamo perché siamo pronti andiamo Apriamo un Splash io come immagine Sydney facciamo qualcos'altro facciamo magari Florence Sì Florence Ah ho scritto florance Scusatemi Florence eccola qui quindi apriamo copia indirizzo immagine qua dentro mettiamo Florence descrizione bellissima Firenze di

giorno Prim devo scrivere giornata Vabbè primaverile ma pazienza descrizione triste metto l'ur dell'immagine visitata Yes Aggiungi card abbiamo una situazione cosa abbiamo dimenticato l'avete visto si è aggiornata la pagina Cosè successo Cosè successo molto semplicemente ci siamo dimenticati di mettere qua sull lendle submit non abbiam preso l'event e non abbiam fatto event Prevent event default perché perché prima utilizzavamo il bottone e basta adesso abbiamo il submit proprio del form quindi andiamo qua Rifacciamo tutto Florence bellissima Firenze in una giornata prima primaverile andiamo poi a mettere qua dentro l'ho visitata Yes Aggiungi card e vedete che

abbiamo Florence bellissima Firenze in una giornata primavere Poi per il resto copio Qui Benissimo ed è visitata aggiungiamo un'altra mettiamo eh Barcellona Ok copio la descrizione Perdonatemi ma mi fa schifo Non l'ho visitata andiamo qua e inseriamo Barcellona me la trova anche se non mi cliccato Yes aspettiamo che si carichi prendiamo un'immagine che si capisca che è Barcellona questa qua Penso proprio di sì Copiamo l'indirizzo dell'immagine Cosa facciamo Andiamo qui inserisco Aggiungi card e mi sono dimen ok Sì ho fatto non visitata esattamente come volevo e vedete che Barcellona è stata inserita Ecco qua chiaramente

se aggiorno perdo lo Stato Perché Perché in una cosa del genere manca ancora il salvataggio su database ma questa è la gestione del form abbiamo creato ripeto uno stato per la gestione del Form che ci semplifica molto la vita abbiamo poi gestito il l'input Change per ognuno per collegare ogni input allo stato potevate Avere così astratto per tutti potete farne uno specifico mettete che è il codice fiscale volete valutarlo validarlo volete valutare se lo username o la mail è già stata presa le cose sono pressoché infinite che potete fare qua l'abbiamo semplificato abbiamo aggiornato eh

form data abbiamo poi preso sul submit abbiamo prevenuto il comportamento di default abbiamo compilato la nuova città con i dati dello stato del form l'abbiamo poi messo In ad City che abbiamo chiamato se vi ricordate in upjs perché Perché ce lo siamo mandati qua come riferimento in un prop Questo è quanto avete visto che funziona chiaramente ripeto Non è permanente perché non è nel database però c'è e questo è assolutamente importante con i form abbiamo finito il mio consiglio è di provare le Select provare le radio perdete C un po' di tempo prima di passare

al prossimo video giusto per imparare a gestire Velocemente i form Provate a fare un form con 10-20 campi Provate a inserire la vostra anagrafica tutti i vostri dati che avete provate a farlo codice fiscale eccetera tutto per capire Ah sto mancando qualcosa e quant'altro quando siete pronti e avete capito come gestire form Passiamo al prossimo che dobbiamo parlare del react developer tool Ci vediamo tra poco episodio 16 è abbastanza veloce del corso di react oggi parliamo del react developer tool Che è uno strumento molto molto importante per andare a fare il debug della nostra applicazione

react Se siete da Chrome e scrivete react developer tool o tools lo trovate come primo giustamente Google Chrome Google Aprite fate Installa e una volta che avete fatto Installa siete praticamente a posto la scheda che vedete qua è Barcellona per fare poi l'aggiunta di di altre card detto questo ci spostiamo sulla nostra applicazione fate F12 ve lo Dico che sarà molto molto veloce come video andate e premete su componenti Eccolo qua c'è poi la sezione profiler che non vedremo ci interessa la sezione componenti perché perché abbiamo tutti i componenti e il loro stato fondamentalmente È

questa la parte che ci interessa potrei poi fare un video soprattutto ci sarà nel corso avanzato dove spendiamo 20-30 minuti a parlare solo del del react per tool varie casistiche e quant'altro al momento non È non è cosa voglio solo darvi un'infarinatura e voglio farvi vedere che abbiamo app come componente Quindi vedete che sono listati tutti i componenti che abbiamo se andiamo a premere su ogni componente Non solo ci viene mostrato lo vedete quindi Passando sopra ci viene mostrato in aggiunta sulle card abbiamo le Ke perché ci chiede la chiave per questo motivo perché Perché

quando abbiamo qua react che è quello che vede react Fondamentalmente abbiamo quattro card come le riconosciamo le riconosciamo da la chiave vedete molto semplicemente passandoci sopra chiaro passandoci sopra Andiamo su quella card Lì però noi le riconosciamo dalla chiave di conseguenza Se clicco su una qualsiasi card Adesso vediamo cosa esce qua sotto esce premiamo vedete abbiamo l'ID e sotto abbiamo i props i props eran giustamente le proprietà che ci vengono passate da App Quindi abbiamo come prop children se Ci fate caso sì che era la descrizione che abbiamo messo dove qua dentro ecco qua children

perché perché abbiamo le nostre card con dentro tra i due tag la description e non viene passato come prop description vedete che non c'è un prop description Ma viene passato in mezzo ai tag quindi children e allora abbiamo prop Children che è la descrizione abbiamo poi l'URL dell'immagine abbiamo poi is visited e il nostro title stiamo lavorando con la 1 quindi New York vedete che è non visitata ho accesso diretto vado a cambiare qua lo Stato vedete e adesso è visitata premo ancora non è più visitata abbiamo perciò veramente accesso diretto a quelli che sono

i prop e lo state adesso lo vediamo del dell'applicazione ci dice Da cosa viene renderizzato vedete quindi viene renderizzato dal dal componente app perché è quello in cui ci troviamo dentro direttamente come primo viene renderizzato da create Rot che Avevamo visto quando veniva creato react E chi se ne occupa se ne occupa il il pacchetto react Dom che avevamo installato con npm in realtà fa tutto automaticamente abbiamo poi la Source app jsx proviamo andare su un'altra card è esattamente uguale cambia semplicemente il i dati dei prop passati Oh Scusatemi ho fatto un disastro benissimo ma

la cosa che mi interessa è andare su Card form card form è più interessante perché Perché è una cosa Che non abbiamo qua sulle card vedete che è sotto una sezione chiamata hooks vi ne ho parlato degli hooks giusto sono gli ami a cui facciamo presa per utilizzare altre funzionalità di react oltre la semplice renderizzazione a schermo che cosa abbiamo come prop abbiamo ad City che se ci fate caso è una funzione ed è vero perché gliel'abbiamo passata da App a card form per poi contattarla chiamarla come avevamo detto e poter effettivamente Cambiare lo stato

di App dopodiché abbiamo lo Stato effettivo del form vedete qua abbiamo lo state possiamo avere più state vedete che qua c'è uno ma potremmo avere più state se andiamo su App ci darà più state vedete abbiamo state zero che era il nostro count state 1 2 3 che è il nostro Array di prova abbiamo state Age 30 Alice che era il nostro oggetto di prova quando abbiamo parlato degli state E lo state 4 che è esattamente le città di base Ok non ci Dà il nome dello state perché lo state in S non ha un

nome abbiamo preso noi il valore che c'è dentro e gli abbiamo dato il il nome ora torniamo un attimo su Card form e abbiamo quindi lo state abbiamo poi il name proviamo a mettere magari Barcellona direttamente da qua Benissimo Ecco qua vedete che è comparso Barcellona abbiamo poi la descrizione inserisco Dategli mezzo secondo vedete che si è aggiornato immagine di url andiamo a copiare inserisco guardate qua In basso mentre inserisco ho inserito tempo qualche secondo perfetto è stato aggiornato lo Stato is visited lo teniamo false Se volete possiamo premere e avere poi True in questo

caso va bene niente e adesso sto per fare invio Direi che possiamo spostarci qua su App prendiamo lo state 4 vedete dove abbiamo le nostre quattro città io faccio Aggiungi card e vedete che è comparso un nuovo oggetto che è esattamente la nuova Card che cosa è rimasto è rimasto qua Sopra la i dati della Cart che abbiamo appena aggiunto e si vede anche dallo state vedete che è rimasto lo state Barcellona eccetera e Uno potrebbe dire magari non ci fate caso qua in alto dal form non ci fate caso Perché l'avete appena compilato ma

da qua si vede perché dite cavolo lo state però del form è Barcellona quindi vuol dire che dobbiamo ripulire lo state banalmente Se c'è un problema di dati eccetera li controllate qua avete lo stato di App lo Stato di card Scusatemi di card form card non ha chiaramente uno stato Questa è la chiave vedete che è stata generata con Mat Random In sostanza da qua possiamo vedere tutto quello che ci interessa i prop che arrivano chi renderizza In che file si trova i vari stati Quindi tutti gli stati che abbiamo vedete che vengono Aggiornati in

tempo reale Praticamente abbiamo la visione completa di quello che succede su react E allora se noi volessimo pulire lo Stato potremmo andare su Card form e dire che una volta che io chiamo ad City che cosa facciamo Andiamo a fare form data set form data in realtà e lo potremmo rimettere a cosa lo potremmo rimettere allo stato originario che è questo qua quindi togliamo tutta sta parte Possiamo cancellare il form data precedente perché non ci interessa prima di salvare vorrei salvarmi almeno l'immagine di url per non dover continuare a fare avanti e indietro Quindi Salviamo

Adesso torniamo qua aggiorniamo la pagina e reinseriti però teniamo un occhio con lo stato qui Perfetto Allora mettiamo immagine Yes visitata Yes nome Barcellona perfetto Barcellona ok e poi andiamo a copiare la descrizione perché siamo pigri benissimo quindi abbiamo il nostro stato guardate qua e guardate qua in alto io faccio giungi card vedete che è stato pulito È stato pulito anche qua C'è voluto qualche secondo per vederlo ma abbiamo la nostra card con la chiave generata con Mat Random È stato pulito anche il form Perché Perché abbiamo visto dallo stato del developer tool che era

ancora riempito Quindi abbiamo risetta set form data praticamente a zero questo è in sostanza e in brevissimo il developer tool di react abbiamo una visione completa Chiaramente la nostra è un'applicazione al momento perciò Questo è quello che abbiamo però Abbiamo visto gli stati di App che sono tanti lo stato di card form che è uno stato diverso rispetto chiaramente ad App abbiamo visto come gli state sono degli Hook ma potremmo avere più a differenza di state abbiamo visto tutto ciò che ci interessa prop le chiavi e quant'altro Ripeto È un'applicazione perciò abbiamo letteralmente due cose

Se volete potete andare a prendere vedete potete prendere da qua con col picker sono gli stessi picker cioè alla fine Non cambia assolutamente niente potete selezionare potete andare a vedere direttamente in HTML se non mi sbaglio qua vedete fate in inspect vi porta direttamente al corrispettivo in HTML Insomma non è niente di complesso è importante però che ci facciate voi un giro io ve l'ho spiegato perché all'inizio magari può sembrare chissà cosa in realtà non è non è niente di che questo è il developer react tool proseguiamo perché siamo di base Nella Seconda metà del

corso Ci siamo appena arrivati con questo video abbiamo ancora alcune cose di cui parlare si fa un po' più complesso Però in realtà penso che sia tutto abbastanza chiaro Insomma stiamo andando veloci però stiamo prendendo tutto a piccoli a piccoli Bocconi perciò non credo ci siano grandi problemi se avete difficoltà documentazione sul sito di code grind oppure Andate sul sito ufficiale react.dom 17 del corso di react oggi Introduciamo look use Effect e non look ma è l'apostrofo Hook quindi riparliamo degli Hook esattamente comera Us state vedremo altri modi di gestire gli stati ma use Effect

serve per gestire appunto gli effetti in questo caso gli effetti collaterali capirete nel corso della lezione Cosa sono gli effetti collaterali ma comincio a spiegarvelo in in modo teorico Allora se vedete bene react sostanzialmente si occupa Quindi tutta sta roba che facciamo si occupa di Mandare a schermo roba L'unica cosa che fa react è prendere componenti scritti in jsx e mandarli a schermo Grazie allo Us state che però è un Hook quindi non è semplicemente mandare a schermo roba possiamo nascondere qualcosa cosa possiamo incrementarlo eccetera eccetera però quello lì è già un Hook di base

react semplicemente prende il nostro HTML scritto in jsx per semplificarci la vita ad esempio questo qua anziché moltiplicare le città farle noi a mano Eccetera utilizziamo Map e siamo a posto mandiamo a schermo qualcosa se qualcosa è True o false oppure se 10 è minore di 100 o cose del genere quindi react semplicemente manda a schermo qualcosa però poss possono succedere tante cose in un'applicazione Pensate se vogliamo fare una chiamata http per chi non sapesse che cos'è Che cosa sono le chiamate http consiglio di andare a vedere cosa siano Ma nel caso andiamo a fare

una chiamata al database andiamo a Fare una chiamata degli api questi dati anziché averli qua salvati noi a mano Nel programma li prendiamo da un database li prendiamo da un altro servizio prendeteli da chi volete ma è molto improbabile che ce li avremo qua dentro questi dati se sono i dati dell'utente ogni utente ha le proprie card e quant'altro potremmo andare a modificare alcune parti del Dom specifiche e lo facciamo quello è un effetto collaterale potremmo andare a Fare temporizzazioni di vario genere quindi creare dei dei timer degli Interval dei countdown quello che volete potremmo

andare a gestire i cookie il local storage del browser potremmo potremmo addirittura fare animazione e transizione anche se ci sono diversi modi per farle insomma gli effetti collaterali sono quelle cose che accadono in un componente react che esulano dal semplicemente mandare a schermo roba in questo caso stiamo Prendendo dati per poi mandarli a schermo stiamo salvando cookie per poi riprenderli e in base ai cookie mandare a schermo qualcosa pensate al cookie del del login se la persona al cookie del login Mi fai vedere questa pagina altrimenti mi fai vedere qualcos'altro quello è un Side Effect

è un effetto collaterale perché perché ripeto non è semplicemente mandare a schermo roba è mandare a schermo roba presupponendo che ci si sia un cookie che io devo prendere Capire eccetera eccetera e poi mandare a schermo quindi gli effetti collaterali sono qualsiasi cosa che non è ripeto in react il semplice mandare a schermo qualcosa che poi facciamo delle operazioni e mandiamo a schermo qualcosa è un altro paio di maniche ma vedete che passiamo da una semplice attività a due attività quell'altra attività Extra È appunto un Side Effect un effetto collaterale come vedete qua ho già

creato un componente di example lo Avrete già notato quando ho aperto il browser perché volevo risparmiare tempo e adesso lo vediamo quindi detto in brevis Che cos'è use Effect andiamo a vedere io ho messo qua example quindi ho creato un esempio l'ho importato niente di che ve lo faccio vedere ma ormai dovreste saperlo fare Import example from componenti example se lo avete altrove mettete il vostro percorso spostiamoci su example jsx che è il nostro componente vedete qua una parte Commentata attenzione che è la parte giusta e questa è la parte non non commentata che è

la parte che saremmo portati a fare al momento non conoscendo use Effect quindi andiamo a vedere e se io premo su incrementa prima non c'era vedete questa parte qua l'abbiamo ottenuta grazie ad example se io incremento aumenta questo conteggio ma aumenta UPS vedete anche questo conteggio questo qua in alto non sono sincronizzati ma al momento non ce ne Frega niente quello che mi interessa come risultato vedete Sto aggiornando il titolo del documento quindi sto aggiornando il titolo che viene visto nella Tab quindi il titolo proprio della pagina e questo è un teoricamente un Side Effect

che però attenzione stiamo trattando come se fosse una normale funzione perché vedete che io ho on click sul bottone vedete ho poi il mio handle click ho il mio handle click vado a settare il count molto bene e vado ad Aggiornare il document tile per sapere ste cose qua dovete conoscere JavaScript se non le conoscete tornare indietro e ripassare JavaScript perciò perciò prendiamo il documento che è la nostra pagina e andiamo a cambiare il titolo che diventa conteggio due punti il conteggio attuale non sono sincronizzati perché perché in quel momento viene settato lo state vedete

quindi set count che è questo viene poi refresh tutto ma una volta che viene refresh prima che Venga refresh viene settato subito il titolo quindi viene refresh ma lo state nuovo non è ancora disponibile di conseguenza vado a mettere lo Stato non aggiornato l'avete visto il titolo era sempre uno indietro perciò capite che non solo abbiamo non solo non sarebbe il modo consono di gestire una cosa del genere serve use Effect ma abbiamo anche un problema non è sincronizzato a maggior ragione dobbiamo utilizzare use Effect quindi ricapitoliamo un attimo on Click apro handle click ho

creato il mio handle click gestisco vado a settare il count banalissima funzione di Us state Vado a fare count + 1 banalmente dopodiché abbiamo document punto title uguale vado a cambiare e ci metto dentro il mio conteggio attuale non credo sia niente di che però non è corretto lo avete visto non è corretto il vero modo di andare a fare un'operazione del genere è utilizzare questo qua che è use Effect perciò adesso analizziamolo use Effect non va solo a gestire gli effetti collaterali ma in realtà va anche a simulare quello che è un ciclo di

vita del componente perché noi possiamo far andare use Effect in base a determinate condizioni e si chiamano dependency si chiamano le dipendenze Noi diamo delle dipendenze ed è questa parte qua la vedremo meglio tra pochissimo ma in sostanza potremmo dirgli ogni volta che il componente si aggiorna mi fai questo use Effect oppure me lo fai solo la Prima volta la prima volta che viene caricato il componente oppure me lo fai solo quando viene aggiornato il count oppure me lo fai quando viene aggiornato il count e qualche altro tipo di state di base stiamo dicendo al

nostro componente che questa funzione deve essere gestita automaticamente ogni volta che cambia una di queste dipendenze Basta lui sta all'ascolto di queste dipendenze e si aggiorna quindi vediamo Com'è strutturata abbiamo use Effect che non è diverso da Us state come potete ben vedere avete qua vedete use Effect in giallo e poi le parentesi di use Effect che sono quelli in rosa esattamente come Us state La differenza è che anziché avere il valore nel dello Stato abbiamo una funzione una funzione anonima in questo caso Arrow function vedete e poi abbiamo un altro valore vedete che c'è

la funzione virgola un altro valore che in realtà è un Array analizziamo la nostra funzione è quella Che effettivamente va a fare il cambio del titolo ma così il codice non è completo perché perché manca una cosa cosa manca manca qua la funzione che va a settare potevamo farlo nellle click eh per carità Però visto che è solo una una riga di codice possiamo in realtà farla così vedete quindi on click faccio set count count + 1 prende di base lo Stato e Me lo aggiorna + 1 in questo momento Nel momento in cui viene

settato il Count attenzione abbiamo la dependencies Che punta account e stiamo e stiamo dicendo attenzione ogni volta che in questo Array di dipendenze viene aggiornata tale dipendenza in questo caso abbiamo solo il count Quindi quando viene aggiornato lo Stato count mi devi rifar partire questa funzione Quale funzione questa qua di conseguenza ogni volta che il count viene settato nuovo dice di base a use Effect Ehi ho aggiornato il count sai cosa fare Cosa Devo fare questa funzione Cosa comprende questa funzione cambiare il document title in conteggio uguale dollaro count dollaro aperta count se io salvo

attenzione la situazione diventa incredibilmente diversa vedete come è sincronizzato 4 4 non abbiamo alcun tipo di problema Questo è il discorso degli use Effect adess Adesso faremo qualcosa Magari con il local storage ma voglio prima parlarvi non tanto della funzione perché nella funzione Cioè nel senso una Funzione è una funzione fate quello che avete bisogno di fare non non c'è molto da dire a riguardo poi avremo un video dove parleremo solo delle chiamate http non volevo buttarlo qua dentro perché magari qualcuno vuole studiare use Effect però Cerca il video poi apposta Come fare le chiamate

in react e volevo ci fosse un video ad hoc quindi in questo caso visto che abbiamo tempo non dovendo trattare quella parte saltiamo un attimo qui e andiamo Sulle dipendenze Vi faccio vedere una cosa che possiamo fare Intanto è un bel console.log e vi ho detto che le dipendenze intanto scriviamo Ciao da use Effect molto bene e possiamo avere qua vuoto quindi potremmo non avere le dipendenze di conseguenza stiamo dicendo che deve essere eseguito ogni volta che viene aggiornato il componente se non abbiamo delle dipendenze specifiche ci va bene tutto ogni volta che il componente

viene aggiornato che che sia aggiorniamo il Count che sia aggiorniamo Un altro stato che sia qualsiasi cosa ogni volta che il componente viene rivalutato da react per essere aggiornato per qualsiasi motivo questo use Effect viene rilanciato andiamo a vedere se io apro ispeziona console come potete vedere Andiamo magari ad aggiornare come potete vedere Abbiamo qua Ciao da use Effect e non ho ancora fatto niente Ho solo aggiornato la pagina e il componente è stato inserito proviamo a f qualcosa proviamo Premere vedete ho fatto incrementa è stato aumentato un è stato aumentato qua e mi ha

fatto Ciao da use Effect Allora mettiamo qui Qua non abbiamo fatto niente Insomma come come può aver qualcosa a che fare con con questo proviamo aggiungo card Ah Attenzione è stata aggiunta una card ma vedete che qua è arrivato un altro use Effect prima era uno Adesso ne ha messi due quindi vuol dire che ne è stato aggiunto un altro voi Mi direte Com'è possibile che Cosa c'entra lo use Effect di questo componente con la card il form e quant'altro c'entra perché come vi dicevo è legato al fatto di non avere dipendenze se io non

ho delle dipendenze specifiche detto dipendenze suona male nel modo negativo in cui lo teniamo in italiano ma se non abbiamo qualcosa a cui far riferimento Ci affidiamo a qualsiasi tipo di update del componente ogni volta che il componente viene aggiornato A noi va bene se invece Andiamo a mettere un Array vuoto stiamo dicendo che vogliamo che questo use Effect venga lanciato solo la prima volta che il componente viene caricato quindi solo quando il componente viene caricato la prima volta capite Quindi come va a simulare il ciclo di vita di un componente perché un componente nasce

o viene renderizzato viene aggiornato e muore Pensate se noi abbiamo un componente non siamo ancora arrivati a tutte ste cose Ma pensate se io Cambiassi pagina ho una pagina componente qua e ho un'altra pagina per magari cambiare le impostazioni dell'account sono due componenti diversi Questa sarebbe la mia home page ad esempio o inserimento delle card e poi ho un'altra pagina per cambiare le impostazioni account contatta a supporto Elimina account Disattiva eccetera eccetera quando io mostro quel componente là questo viene praticamente distrutto perché perché viene nascosto e Questo è il ciclo di vita un componente nasce

che viene mostrato cambia come in questo momento vedete questo componente viene cambiato e poi muore Nel caso venga rimosso allo stesso modo abbiamo che possiamo lanciare use Effect senza niente Quindi ogni volta che il componente viene aggiornato noi lo lanciamo Oppure diciamo guarda Lanciami il componente solo quando viene caricato la prima volta e io vi dimostro che se torno qui pulisco aggiorno vedete che è Stato caricato e quindi me l'ha messo Ma se premo come un forsennato non succede assolutamente niente in questo caso avete visto che non succede niente se io vado qua e inserisco

un'altra card non succede niente se vado ad aggiornare abbiamo ancora Ciao da use Effect perché Perché con un Array vuoto gli stiamo dicendo che mi fai partire questo use Effect esclusivamente quando quando carica il componente Pensate se dobbiamo caricare Dei dati all'inizio e poi non dobbiamo ricaricarli successivamente solo all'inizio potremmo farlo qua quindi lo carichiamo solo la prima volta con le chiamate http sto sto sto dicendo poniamo il caso invece che dobbiamo caricare ogni volta dei dati quando cambia uno stato e allora metteremo che il nostro use Effect verrà chiamato ogni volta che cambia qualcosa

Pensate se avete un pulsante aggiorna ad esempio ogni volta che premete aggiorna Aggiorna Sì Aggiorna Sì Aggiorna Sì Aggiorna Sì ogni volta che viene aggiornato lo stato di Aggiorna quindi che voglio aggiornare Stiamo chiedendo di riscaricare i dati una cosa simile esattamente quello che abbiamo fatto qua quindi di conseguenza ogni volta che io premo vedete che posso premere all'infinito continuo a avere Ciao da use Effect ma ho messo solo count di conseguenza se io vado qua e inserisco una card non succede niente perché perché abbiamo limitato il lancio Di questo use Effect esclusivamente al cambio

di count non lo fa ogni volta che aggiorniamo il componente non lo fa quando carica il componente lo fa esclusivamente quando cambia count però è un Array lo vedete e un Array vuol dire una lista di elementi di conseguenza io posso andare qua e aggiungere Cosa potrei aggiungere una altro cambio di Stato Quindi potremmo passare eventualmente il nostro Cards uguale ci buttiamo dentro Cities molto Bene anzi chiamiamolo Cities Perfetto Quindi io passo Cities da qua vado a prendere Cities e ogni volta che Cities viene aggiornato andiamo a vedere Ci aspettiamo che parta use Effect quindi

aggiorno ok Questo è use Effect Perché Perché il contage è stato messo a zero benissimo incremento parte inseriamo una card aggiungo vedete che aumenta anche qua perché andiamo a vedere perché ho passato qui potevamo avere anche un altro state qui non siamo obbligati solo Che al momento non volevo creare un altro state Qua l'unico state che abbiamo eh di serio è la card che viene creata qua che viene aggiunta a Cities che è uno stato di conseguenza quando avendogli laela passata adesso gli ho passato il riferimento a quello stato Perciò ogni volta che viene aggiornato

Cities automaticamente viene passato qua dentro aggiornato di conseguenza Lui dice Ah attenzione dovevo far riferimento a count e a Cities count è Cambiata no Cities è cambiata Sì E allora rifaccio partire Tutto quanto va bene questi sono gli use Effect in modo molto molto semplificato non voglio andare avanti per le lunghe ma voglio solo farvi vedere come potreste tranquillamente usare Local storage punto eh set item e qua dentro andiamo a mettere count Facciamo così e ci buttiamo dentro count pun2 String TAC Salviamo E se io torno è solo per far vedere che possiamo lavorare anche

con Il local storage del browser con i cookie e quant'altro per prendere il local storage prendete archiviazione locale quindi storage archiviazione locale è questo vedete che abbiamo count già a due Se io tolgo Ho tolto aggiorno count 0 vedete è stato già messo E allora faccio incrementa vedete mi viene aggiornato incrementa incrementa incrementa non solo viene aggiornato qua in alto ma anche qua dentro come abbiamo applicato questo concetto ripeto del Local storage della modifica del document title eccetera potete prendere elementi dallo storage cookie settar prenderli potete prendere database e quant'altro eccetera Vedremo Poi le chiamate

http dovrebbe essere il prossimo video o comunque a breve Questi sono gli use Effect utilizzate questi anziché le funzioni funzioni normali funzioni normali servono per altro gli effetti collaterali veramente importanti soprattutto legati a delle dependencies O al ciclo di vita del componente devono essere gestiti appunto da use Effect direi di non andare oltre e noi ci vediamo tra poco episodio 18 del corso di react oggi vediamo come possiamo fare chiamate http utilizzeremo degli api esterni quindi servizi esterni che ci aiutano non avremo Perciò il nostro backend voi Potete utilizzare firebase un vostro backend in Node

laravel quello che volete però oggi ci limitiamo a fare la svelta con dei servizi esterni ed il Servizio che utilizziamo è il seguente ve lo vado a prendere Eccolo qua jsonplaceholder.typicode.com venite in realtà in questa pagina e poi se andate su guide avete tutta la guida su come fare Ci sono tanti pacchetti che potreste utilizzare per fare delle chiamate http in react noi Ci limitiamo ad utilizzare cosa ad utilizzare fetch perché Perché fetch fa parte dei web api che abbiamo a disposizione in JavaScript di conseguenza partiamo con questo Se Poi volete usare Axios o quant'altro

non è un problema Quello che mi interessa è mettervi nelle condizioni iniziali per partire come poi voi lavorate da qui in poi è una questione vostra perciò mi aspetto che fetch lo sappiate usare Voglio solo farvi vedere come si utilizza fetch di base con con react Non sto qua spiegare a rispiegare tutto insomma come dico sempre Mi aspetto che JavaScript lo sappiate Se fate react se non lo sapete dovete tornare indietro Necessariamente non non si scappa Quindi cosa andiamo a fare Voglio andare a fare una prova e possiamo fare così lo eseguiamo solo una volta

voglio andare a commentare tutto Yes e qua dentro andiamo a fare un bel fetch qua dentro andiamo a mettere l'URL che ci interessa Dopodiché prendiamo la risposta che ci torna quindi Response e con la risposta Cosa andiamo a fare la convertiamo in Jason molto bene questa è roba proprio Standard eh ripeto dovreste averlo già nei meccanismi A meno che avete cominciato veramente da poco perciò se non vi ricordate tutta la sintassi non è un problema L'importante è che lo capiate diventa un problema se capite i passaggi che sto facendo Allora lì sì che dovete tornare

indietro ma se semplicemente non vi ricordate non è un problema da qua andiamo a settare i dati quindi facciamo un bel set data che Non ho ancora fatto come come si chiama come Stato però non è un problema Ops sbagliato set data e qua dentro mettiamo data Quindi adesso rivediamo cosa sta succedendo facciamo un attimo così giustamente manca qua l'URL perciò facciamo così perfetto e qua dentro dobbiamo duplicare il nostro stato e andare a creare il nostro data partiamo con nal Oppure potremmo avere un Array vuoto un oggetto quello che volete noi per ora ci

limitiamo a creare null perciò partiamo senza dati abbiamo poi Data che è la nostra variabile che andiamo a utilizzare in giro e poi abbiamo set data poi ci sposteremo in app adesso stiamo facendo solo una prova qua il link che voglio che andiate a prendere è il seguente faccio copia incolla è semplicemente un solo post Ecco qua prendiamo il primo post quindi use Effect Facciamo partire la funzione dentro la lo facciamo solo al caricamento attenzione del componente di conseguenza fetch URL che vogliamo Andare a fetare in questo caso andiamo a prendere i post ma vogliamo

solo il primo la struttura qua si impara facilmente con gli api perché viene spiegata Eh ogni volta vedete come possiamo prendere una risorsa otteniamo il primo adesso otterremo esattamente lo stesso valore Li vogliamo tutti slash posts questo tipo di linguaggio degli api lo imparate in due modi a vi costruite voi degli api lato backend Quindi se già arrivate dal backend Non è Roba nuova questo tipo di costruzione degli Ur o degli end point o b lavorando con questo genere di api Perciò se avete dei back un backend fatto da qualcun altro che conoscete del vostro

Team un vostro amico oppure lavorate con servizi esterni noterete che più o meno la struttura degli end point questo è l'endpoint è l'URL è sempre la stessa Perciò in realtà sarebbe buono anche se siete solo front-end developer imparare a costruire degli api anche banali ho un Corso su Code grind da 4 ore per mettere api su Node da Zero in produzione in 4 ore e potete imparare lì come farlo e poi potete approfondire più avanti la struttura degli URL fare una cosa del genere vi permette poi facilmente quando poi lavorate come frontend developer sapete cosa

c'è dietro anche se non ci avete buttato 25 ore 1000 ore 100 ore quello che è ma sapete quantomeno Cosa state facendo va bene perché qua vedete una struttura totalmente diversa che Potreste non capire almeno che avete lavorato con gli api In un modo o nell'altro Quindi o frontend o backend di conseguenza rivediamo un attimo Eh facciamo la funzione facciamo il fetch chiamiamo il nostro end point vogliamo tra tutti i post quello con id1 Den Giustamente è asincrona una volta che ha finito questa aspettiamo con Den quando ha finito perché Den vuol dire dunque dopo

Allora prendiamo la nostra risposta che ci arriva da qui e la convertiamo in Jason Dopodiché la portiamo qua perciò facciamo un altro Den prendiamo il nostro Response Jason che corrisponde di base ai data ai dati che vogliamo e li andiamo a ficcare dove In set data di conseguenza questo data improvvisamente diventa questo data se io allora vado a creare un altro pione attenzione e vado qua a mettere Deta Facciamo così salviamo avrei potuto anche fare un console log perché no Perciò allarghiamo qua un filino molto bene Andiamo a Settare i dati ma facciamo anche Conso

log di cosa di Deta Salviamo molto bene già andato a capo Anzi non mandiamo a schermo il P qua non ci interessa mi accontento del console Log spostiamoci e quello che vedete è che ci è arrivato il nostro post con user D1 abbiamo appena fatto una chiamata http e l'abbiamo fatta banalmente tramite cosa tramite use Effect vi faccio vedere che andiamo ogni volta a fare una chiamata quando quando andiamo a modificare il count Quindi per farvi vedere che effettivamente le dependencies funzionano vedete ogni volta che io premo va a chiamare il nostro dato capite bene

che questa cosa se sapete un po' di JavaScript come mi aspetto e state imparando react potete renderla qualcosa di molto più potente in pochissimo tempo proviamo a prendere Invece tutti i post Magari li vogliamo tutti e vediamo un po' Abbiamo 100 post Ecco qua Abbiamo 100 post che sono Sempre dello stesso user Quindi ogni user ha nove post sembra circa più o meno quasi Ognuno ha un ID e ci servirà e poi c'è effettivamente un titolo che cosa facciamo allora andiamo a prendere il il nostro use Effect qua molto bene e lo Copiamo in app

jsx qua in realtà possiamo commentarlo a sto giro perché non mi interessa possiamo farlo tornare esattamente com'era perché voglio lavorare con App jsx perché perché qua mandiamo a schermo roba e allora andiamo A prendere use Effect Possiamo metterlo Qua abbiamo il nostro use Effect abbiamo dei problemi perché dobbiamo importare la roba Perciò use Effect questa cosa probabilmente non ve l'ho fatta vedere quando abbiamo creato quando ho creato example l'avevo lasciato qua di default ma non è un problema perché come abbiamo importato Us state possiamo anche importare use Effect Anzi non è che possiamo dobbiamo abbiamo

una situazione non abbiamo il nostro state Perciò lo Andiamo a prendere da qua non ci serve neanche più dall'altra parte Quindi app jsx Torniamo sul nostro state Ecco qua data sarà poi Allora facciamo così mettiamo un Array vuoto preferisco e qua dentro andiamo a fare esattamente la stessa cosa quindi moltiplichiamo molto bene qua dentro Non è Cities ma è data attenzione e lasciamo City no lo chiamiamo item molto molto bene oppure potrebbe essere posts Perché giustamente stiamo prendendo dei post Però al Momento non allarghiamo non andiamo a chiamare un componente creato da noi perché non

ce l'abbiamo perciò ci limitiamo ad avere un div perciò div come Ke andiamo a mettere item.id e dentro Cosa possiamo fare un bel P E mettiamo eh user ID due punti e prendiamo item punto user me lo trova user Fatemi vedere Scusatemi eh user ID ok con la I maiuscola perfetto sospettavo è che io di solito scrivo sempre così perché leggo subito l'ID Quindi questi qua han fatto così non mi piace vedete che suona male ID solo con la I maiuscola anziché ID perciò item ID perfetto Vi faccio vedere allora l'ID ci serve questo per

la chiave perché sennò ci fa rogni vedete che è diverso per ogni post lo user ID non è un problema perché Perché io potrei aver postato nove stati diversi è così come Facebook posso avere molti più stati chiaramente ognuno ha il suo ID e poi che cosa abbiamo abbiamo il body e il title ok Quindi andiamo qua dentro moltiplichiamo Non scriviamo neanche title a sto giro potremmo usare un H1 potremmo usare tawin per fare qualcosa di un po' più bello in realtà a sto giro non me ne frega assolutamente niente voglio esclusivamente avere item tile

e poi item Body L'unica cosa che andiamo a fare È eventualmente un Class background no BG BG slate 400 magari e poi andiamo a mettere rounded LG E poi un padding interno facciamo di Tre Speriamo venga qualcosa di carino vediamo un po' come potete vedere abbiamo i nostri post vedete abbiamo il nostro user ID abbiamo il nostro titolo facciamo che andiamo a modificarlo perché così è osceno va bene Scusatemi ho tirato un po' troppo la la corda Allora user ID magari Class text lo facciamo normale semplicemente text Red Ok Poi qua mettiamo un H2 con

Class name text XL va bene text XL e color va Assolutamente bene così e poi abbiamo il nostro Body quindi Class name con text Grey e facciamo un pochino più scuro giusto per cambiare un pochino potremmo mettere in realtà Un MB di3 qua qua Potremmo avere un MB di1 giusto per fare un qualcosina un po' più carino da vedere e se noi andiamo Esatto vedete il risultato abbiamo lo user ID quindi chi l'ha pubblicato abbiamo il titolo e abbiamo il post abbiamo letteralmente preso dei dati da degli api voi Sostituite questo Concept con eh come

si chiama il vostro server gli api a cui fate riferimento e avete visto quanto è semplice senza andare a fare no effettivamente il lavoro di eh modifica Delete e post quindi inserire dati vediamo un po' come verrebbe ad esempio una Delete se vogliamo cancellare ad esempio un post molto probabilmente andremo a dichiarare l'ID del post che vogliamo eliminare se gli api sono fatti così Prima abbiamo preso solo un post Adesso potremmo voler cancellare un post qua dentro nella fetch Cosa andiamo a aggiungere un altro parametro in questo caso un oggetto e semplicemente mettiamo Method delete

delete di conseguenza se è fatto bene Già solo con questa chiamata Qua dice Ok Post 1 cancellare capisce Già il metodo lo cancella Dopodiché nel den non andate a prendere il json Ma prendete semplicemente la risposta e verificate se il Response Quindi farete un if con Response status UG UG 200 mandate a schermo è stato eliminato Altrimenti c'è stato un errore andrete poi a prendere oltre il Den farete un bellissimo Catch quindi toglierete il secondo Den che non ci serve avrete banalmente un Catch Quindi se la risposta stato è 200 Perfetto se non è 200

ma è altro c'è stato un errore se c'è un errore che viene preso dal Catch c'è stato comunque eh un errore va bene quindi questa è la Delete ve lo faccio solo vedere ripeto Perché qualcuno può andare nel panico in realtà è banale JavaScript che poi qua dentro cambiate uno stato quindi potreste avere lo stato del messaggio cambiate lo stato del messaggio viene mostrato quello che volete non cambia niente da quello che abbiamo imparato abbiamo poi post e put che in realtà sono o patch che sono praticamente la stessa cosa inserimento o modifica dati Vi

basta mettere post qua però cambia non ci basta solo il metodo perché qua Non abbiamo esclusivamente questo non dobbiamo fare riferimento a un ID ma tutti i post post voglio aggiungere un post Allora quaa indecente Potremmo avere uno users perché magari vi confondete Quindi voglio aggiungere un utente perciò metodo post che cosa faccio Devo andare ad aggiungere un body alla chiamata il body È quello dove dentro ho i dati perciò andiamo a fare un bel ad esempio json stringify che cosa andiamo a stringify di base mettere Come stringa mettete dei dati che andate a prendere

da qualche parte Potreste avere qua dentro un oggetto Dopodiché ci mancano le headers le headers sono le parti che vengono aggiunte alla alla testa della chiamata servono per passare altri dati che non fanno parte di quelli che vogliamo inserire servono proprio per la chiamata in sé e qua dentro avremo content Che bello che non mi suggerisce niente content Type e poi ci spostiamo e mettiamo ve lo copio così Facciamo la svelta application Jason eventualmente charset utf8 e così ve la cavate dopo che avrete la vostra risposta la risposta chiaramente torna con un Jason perché perché

se inserite un utente magari ci rimanda indietro qualcos'altro vogliamo mandare a schermo i dati dell'utente magari abbiamo aggiunto dei dati quando è stato aggiunto l'ultimo login o altre cose perciò prenderemo il nostro Jason probabilmente ci torneranno dei dei dati Col Den avremo poi un Catch finale e quant'altro se non è post è put Ma attenzione che put e patch vanno a modificare uno user o un post specifico di conseguenza qua avrete qualcosa in modo dinamico Ricordatevi ce l'avrete così Perciò qua dovrete andare a fare che cosa Alt 96 e quindi qua avrete l'ID dell'utente che

vorrete modificare eh ID utente che sarà dinamico mettete il put passate poi i dati e siete a posto ottenete la stessa roba e quant'altro Questo è un banale fetch ma avete visto come in use Effect è semplicissimo utilizzarlo sempre un fetch come abbiamo sempre fatto ma attenzione una volta che abbiamo questo andiamo a modificare se vogliamo lo Stato Perché giustamente se passiamo dati da una parte all'altra modifichiamo gli stati e così abbiamo connesso di base fetch con react semplicemente utilizzando fetch dentro use Effect va a modificare dei dati uno state Scusatemi che viene poi preso

in Giro e in tutto ciò abbiamo poi le nostre dependencies se lasciate così viene eseguito solo al caricamento se Aggiungete delle dependencies viene viene fatta la chiamata ogni volta che viene modificato qualcosa se non mettete proprio niente come abbiamo visto viene eseguito ogni volta che c'è un aggiornamento di base dovete lavorare con queste cose ma avete visto quanto è semplice direi di non perdere tempo perché dobbiamo approfondire nei Prossimi tre video la gestione degli Stati Perché come vedete è la parte più complessa Perché nello Stato ci sono dati C'è tutto ciò che con concerne la

dinamicità dell'applicazione perciò i prossimi tre video sono dedicati a rendere sempre più complesso ma comodo da gestire il nostro stato Ci vediamo tra poco episodio 19 del corso di react oggi parliamo di un altro Hook che è Us reducer e Us reducer potete vederlo come un'evoluzione di Us state evoluzione Quindi non vuol dire che tutto ciò che faremo d'ora in avanti sarà use reducer e lasceremo perdere lo state È semplicemente un modo diverso è semplicemente un insieme di strumenti impacchettati per gestire stati più complessi più velocemente va bene finché abbiamo semplici state mostra la barra

laterale Sì no O banalmente un oggetto semplice o un Array o altre cose vedete qua dei dati Insomma possono essere diverse situazioni ma per molte cose Utilizzeremo ancora gli state ma per altre quando vi troverete ad avere difficoltà semplicemente con Us state probabilmente è arrivato il momento di utilizzare Us reducer e vi parlo di probabilmente andate molto a sensazione eccetera Perché su queste cose non ci sono delle regole la la programmazione avete 100.000 modi diversi per gestire un'applicazione alcuni un po' più semplici alcuni meno semplici alcuni più complessi Altri meno complessi e Quant'altro perciò capirete

voi quando farete la vostra applicazione con l'esperienza che cosa dovrete utilizzare anche perché nel n prossimo video parleremo dei context api che è un altro modo per gestire lo state E nel prossimo video ancora quindi nel 21 parleremo di redax che è un altro modo è una libreria esterna per gestire ancora meglio eh gli stati perciò In realtà io ho sempre voluto fin da subito parlarvi di redax ma abbiamo delle eh come si chiama Funzioni tra virgolette funzionalità Native di react di cui dovevo parlarvi che sono appunto Us state Us reducer context api per poi

arrivare a redax questo non vuol dire che l'ultima versione che vi spiego è sempre migliore rispetto alle altre vuol dire che va risolvere dei problemi su grandezze di applicazioni più grosse rispetto ad altre va bene più l'applicazione diventa complessa più molte di queste cose dovranno essere gestite con l'ultima tra Virgolette evoluzione degli Stati ok Questo non vuol dire che non potrete avere in grandi applicazioni Us state ok Non è assolutamente detto ma magari anziché avere 30 Us state avrete dei Us reducer o i context Api o addirittura redax ok È importante che capiate questa cosa

sono tanti strumenti diversi uno sempre più potente dell'altro che abbiamo a disposizione in base alle necessità utilizziamo questo quindi spiegato questo concetto che era Fondamentale per capire poi la serie di video che arriveranno parliamo di questi reducer per parlare dei reducer vi faccio un esempio di gestione di un form Tuttavia per non perderci non va vado a utilizzare card form Va bene vado a creare un form direttamente qua in app jsx Quindi vado a creare un form qui lo gestiamo qua dentro e utilizziamo qua dentro use reducer perciò Seguitemi quello che sarà il risultato avremo

comunque qua un altro form o magari Sotto che potrebbe fare la stessa cosa vediamo nel durante il video cosa fare magari va a inserire anchesso una una card ma il discorso è che lo andiamo a fare direttamente in app jsx perché perché qua avevamo il passaggio dei props Dobbiamo chiamarla funzione ea eccetera voglio tenere sapete il più teoricamente e praticamente semplice per spiegare il concetto poi lo complicate in base all necessità è molto più facile complicare un concetto capito anziché io Che vi mostro qualcosa già fatto e finito per la produzione ma non lo capite

non siete in grado di utilizzarlo Questa è e sarà sempre la mia filosofia Se volete roba fatta nello specifico o aspettate i video grossi da 2 3 4 6 ore dove facciamo un'applicazione insieme oppure ci sono i miei corsi avanzati su CoD grind dove Entriamo nel dettaglio di ogni singola cosa detto questo Torniamo sul codice e andiamo a creare un form perciò scendiamo e ci serve un form Facciamolo qua sotto dai allora form cominciamo così lo sapete fare Vi copio la parte di codice che ho già preparato così la Saltiamo e ve la spiego Ecco

qua che cosa abbiamo Allora abbiamo il nostro form abbiamo poi un div che va a tener dentro la Label HTML for perché perché la Label in P HTML sarebbe for così Label for l'ID del campo ma abbiamo un problema con jsx che for non ce la prende di conseguenza for così come Class Class che diventava Class name Questo diventa HTML for non ve l'avevo mai spiegato Adesso ve l'ho spiegato perciò abbiamo nome email poi lo convertiremo eventualmente in quello che ci interessa abbiamo il nostro input il nostro input è un Type text l'ID è name

perché abbiamo il nome ma lo facciamo in inglese il name è name il Value fa riferimento al form state Se vi ricordate avevamo una cosa molto simile qua in alto Esatto vedete form data non form state è esattamente uguale ma Avevamo il nostro form state oppure form data name come Value se scendiamo vedete avevamo esattamente la stessa cosa qua è form data di qua è form state differenza di scritta mi raccomando Io sono stato disallineato tra le due cose voi se fate un applicazione coerente Io sto solo spiegando Ma se fate un'applicazione coerente sempre o

form data o form state Mi raccomando mi raccomando a queste cose dopodiché abbiamo che in on Change abbiamo la nostra funzione di handling E Che cosa va a gestire va a gestire il campo a cui passiamo il nome che è questo e il valore Ok come gestite poi la funzione la potete fare a cavolo vostro non è questo che mi interessa quello che mi interessa è la parte dopo ci manca ancora il bottone e abbiamo qua il bottone con on click reset form perché questo bottone va a resettare il form non abbiamo il click potremmo

fare qua landle submit lo possiamo fare se lo volete completare in realtà quello che Voglio fare è on click per ora Questo lo tolgo e qua sarebbe Invia quindi avremmo Resetta e invia reset al form e facciamo solo reset e invia Così sembra che abbiamo effettivamente il form completo manca solo qua in alto l'handle del del form andiamo a creare Quindi la nostra funzione di handle Change Build e poi ci serve il form state Allora in realtà Cominciamo con lo state andiamo nel nostro state ma stavolta lo state è diverso perché abbiamo const e abbiamo

Form state E fin qua niente di che si chiamava form data prima nessun problema ma adesso abbiamo un'altra cosa non è più set qualcosa ma è dispatch dispatch potreste chiamarlo solo dispatch ma noi lo chiamiamo dispatch form state così dispatch vuol dire tipo rilasciare richiamare nel senso che stiamo andando a richiamare un'azione adesso la capirete perché andiamo a chiamare un'azione da rilasciare sul form state perciò andiamo solo a settare lo Stato Andiamo proprio a chiamare una funzione che non sistema solo il valore vedete come fa qua set user update user in base a un'altra funzione

ma quella che abbiamo qua è una funzione che può essere molto più complessa Perciò per ora vedetela così quello che facciamo è uguale a use use reducer perfetto dovrebbe avermelo importato verificate molto bene abbiamo user reducer e qua dentro andiamo a prendere form reducer quindi dobbiamo andare poi a chiamare Effettivamente la funzione che facciamo e lo state iniziale lo state iniziale Potete chiamarlo come costante a parte oppure lo inseriamo qua dentro quindi fatemi finire un attimo il giro del e poi vi vado a spiegare tutto nel dettaglio Allora email Facciamo così che cosa abbiamo abbiamo

quasi la stessa cosa dello state semplicemente cosa è cambiato anziché use state use reducer non abbiamo più solo il valore iniziale che è questo lo vedete name email che è Ciò che abbiamo nel nel form ma abbiamo anche una funzione in più non solo anziché set user è diventato un altro tipo di funzione questa qua di conseguenza non solo Abbiamo cambiato il nome ma abbiamo cambiato due tipi di funzioni qua ne abbiamo aggiunta una e qua l'abbiamo cambiata Quindi adesso andiamo a lavorare su tutta sta roba perché perché dobbiamo aggiungere il reset dobbiamo aggiungere lle

Field Change e dobbiamo aggiungere il form Reducer Allora cominciamo con const handle Field Change Ecco qua quindi cosa succede quando cambiamo il campo in entrata otteniamo il campo e il Value adesso rivediamo tutto Non preoccupatevi Field e Value Ve lo ricordate Perché Perché se io vado qua sotto on Change Quindi quando quando scrivo dentro questo campo mi chiami la funzione che ho appena fatto e mi passi il nome del campo e il valore del campo Mi raccomando Perché potevamo fare handle Email Field Change handle name Field Change potevate farlo singolo Se avete necessità si poteva

far singolo in questo caso chiaramente lo facciamo tutto uguale quindi dobbiamo passare che campo abbiamo modificato Eccolo qui email email e poi il valore del campo che prendiamo dall'evento di cosa D Long Change sto andando molto lento sulla spiegazione di ste cose perché non tanto perché penso che non Sappiate queste cose in JavaScript o non mi abbiate Seguito negli episodi precedenti Ma perché come vedete stiamo aggiungendo tanta roba per fare sti reducer i reducer non sono semplici in termini di codice come gli state portano con sé un po' di roba aggiuntiva di conseguenza non voglio

perdervi Perciò vi spiego ogni singola vaccata che troviamo e son proprio vaccata perché sono sempre le stesse cose però ripeto mentre le facciamo ci possiamo perdere quindi quando facciamo il cambio vogliamo Andare a modificare cosa Questo questo name era vuoto se io comincio a scrivere Edoardo nel campo voglio che qua venga scritto Edoardo l'email ta ta ta ta ta choca Gmail e via rcorr vogliamo Perciò lo stesso effetto che avevamo qua con Us state dove andavamo a modificare ogni singolo momento il valore del dello state però abbiamo dispatch form state di conseguenza Dobbiamo richiamare dispatch

form state Eccola qua e qua dentro attenzione non passiamo più solo Il valore come facevamo qua dentro perché Perché set user andava a modificare questo va bene ma adesso use reducer ha due cose quindi noi chiamiamo attenzione la modifica la modifica però non avviene tramite dispatch Perché dispatch fa solo appunto Il dispatch sta chiamando la modifica chiamo la modifica la modifica avviene tramite il form reducer perché perché questa non può far molto vedete che anche qua set user gli passiamo una cosa ma non abbiamo dentro La nostra logica quindi noi diciamo guarda devo chiamare la

modifica la modifica che faccio è la modifica di questo campo punto di conseguenza dispatch Chiama poi form reducer e dentro form reducer c'è la logica per modificare questo va bene se sembra un giro del Signore lo è diventerà veramente semplice in qualche oretta di lavoro ma soprattutto diventerà fondamentale più andate avanti con applicazioni grosse E questi concetti di State Store reducer e e quant'altro in realtà vengono ripresi dal context api vengono ripresi da redax non è niente di che questa cosa c'è anche in angular c'è anche in qualsiasi alro quasi in qualsiasi altro framework questo

concetto di gestione stati quindi non state imparando una cosa Oh mio Dio us reducer è solo per react No no trasversale una volta che capite questa mentalità la la difficoltà è capire la mentalità poi la sintassi Vabbè ogni Linguaggio si adatta un pochino c'è un po' di roba più o meno e quant'altro ma cosa importante la portare a casa è il concetto di dispatch Il dispatch Chiama poi una funzione generazione e quant'altro Vediamola Quindi dispatch cosa Vado a fare il dispatch vado a fare il dispatch di un oggetto che ha Type non siete obbligati a

farlo così ma è buona norma Perciò vi dico imparatelo così in questo caso facciamo Change Field potreste anche scriverlo in Italiano Quindi cambiamo il campo cosa stiamo dicendo voglio fare il dispeo di un'azione per il mio stato qua dentro dico Ok Voglio che Che tipo di azione è voglio fare un'azione di modifica del campo perché Perché io potrei modificare questo campo potrei resettare questo campo Oppure potrei resettare interamente il form se io andassi a premere Qua sotto e poi lo gestiremo io faccio reset non voglio ripulire solo un campo o aggiungere una e voglio proprio

Che entrambe vengano ripulite Ok quindi capite come su un form possiamo modificare un campo pulire interamente un campo verificare un campo resettare tutto il form Abbiamo tante azioni che possiamo eseguire capite quindi che abbiamo bisogno di una funzione che è il nostro form reducer che va a gestire questa logica Ma cos'è che vuoi fare Vuoi cambiare il campo vuoi resettare il campo vuoi resettare il form intero cosa vuoi fare dimmelo chi è che glielo dice Il dispatch state che è il nostro tramite e gli dice guarda io sono dispatch from state Il tipo dell'azione che

faccio è solo una modifica del campo che cosa gli passo nella modifica nel campo gli passo il campo che devo modificare e il valore Perfetto Quindi adesso abbiamo gestito la modifica del campo andiamo a gestire la il reset del form quindi facciamo reset form Eccolo qui e che cosa andiamo a modificare in realtà non non andiamo a prendere il Campo e il valore perché perché vogliamo mettere a zero tutto quanto giusto quindi ci limitiamo a fare un dispatch eh form state E in questo caso vogliamo fare un reset form attenzione che quello che scrivete qui

Ups ho fatto the zoom quello che scrivete Qui non è eh limitante Nel senso che non è che se volete fare il reset dovete scrivere reset form potete anche scrivere Pippo e ve lo prende lo stesso finché mettete Pippo nelle varie zone ve lo riconosce Come Pippo Ah Pippo voglio resettare semplicemente giusto per non diventare Scemi con nomenclatura errata utilizziamo dei nomi che abbiano senso va bene non dobbiamo passare dei valori Perché diciamo solo Fammi reset del form ed è molto semplice adesso che abbiamo gestito queste due dobbiamo gestire il form reducer quindi andiamo qua

e facciamo function form reducer perciò una funzione che gestiamo noi non esiste gli diciamo Ehi use reducer ti ho creato Questa funzione a Doc per per gestire questo stato Usala e form reducer si baserà sulle azioni che vengono mandate dal dispatch il dispatch è quello che dà gli ordini Adesso cosa mi fai form reducer io ti faccio il dispatch ti do l'ordine di farmi una modifica del campo quindi Type Change Field ti do il campo da modificare e il valore da aggiungere reset form ti faccio il dispatch ti emano un ordine Ecco dispatch più come

emanare non mi veniva ti faccio un ti Emano un ordine per il form state E ti dico reset form di conseguenza viene preso dall' reducer che dice Ah form reducer c'è un ordine da eseguire avanti Quindi il form reducer dice ok Io sono form reducer che potete F così benissimo apriamo function o potevate mettere come const è irrilevante scegliete voi solo che qua avevo function mi son fatto prendere dal function qua dentro tutte const ho scritto tutte con cercate di Essere un po' più lineari su ste cose e prendiamo cosa uno state e una Action

questa cosa qua non preoccupatevi vedete che qua non viene noi form reducer non lo chiamiamo mai viene gestito automaticamente automaticamente questo form reducer prende lo state Che è questo e una Action che è quella passata qua dentro qua dentro c'è la nostra Action e la Action è di tipo Change Field oppure reset form e ho dei parametri aggiuntivi va bene quindi Queste due variabili sono passate automaticamente come se qua dentro lui facesse Ah form reducer io ti prendo questo come state benissimo e come Action Ti passo questa funzione lo fa automaticamente react perciò non dovete

preoccuparvi Adesso andiamo a fare un bello switch quando vi spiegavo gli switch in JavaScript o altri linguaggi che non li capiva perché F lo switch perché abbiamo Action Type l'action è passato Automaticamente la riceviamo dal patch form state quindi prendiamo il Type e Allora diciamo che copio case Change Field facciamo un Return di cosa dello Stato modificato perciò riprendo il mio state che riprendo da qui ma attenzione vado a modificare il campo specifico l'abbiamo già fatta la modifica dei campi in modo dinamico con Alice Vi ricordate questa qua l'avevamo fatta dov'è qua dentro penso no

Non l'avevamo fatta così complessa forse l'avevamo Fatta in un altro episodio non ce l'ho più qua sotto Peccato vabbè non è un problema ve la rispiego quindi che cosa andiamo a fare prendiamo tutto lo stato precedente ma poi sostituiamo la proprietà che ci interessa che è cosa Action Field e andiamo a inserire Action Value Quindi qua dentro Action Field non è un Array questo eh mi raccomando è come se scrivessimo qua name così ok semplicemente non possiamo utiliz iare il punto fuori perché il Punto non ce lo prenderebbe vedete Quindi così due punti il suo

valore è Action Value così abbiamo modificato il valore dopodiché abbiamo chiaramente bisogno di un altro case e andiamo a mettere reset form e se reset form noi ci limitiamo a rimandare che cosa lo Stato interamente finito così Dopodiché facciamo default se avete mandato un'azione che non è riconosciuta che non è gestita io non vado a riscrivere tutto ti rimando lo stato così com'è anziché Fare danni faccio così e siamo a posto verifichiamo se abbiamo errori qua avevamo sicuramente errori si aggiorna non ne abbiamo più Voglio solo fare un'altra cosa che è la gestione del onclick

giustamente onclick Send form che andiamo a gestire Quindi così non chiamiamo il dispatch giustamente non ci interessa ma voglio solo fare console.log e andiamo a prendere form state basta Salviamo andiamo a vedere Ecco qua il nostro form Edoardo faccio invia abbiamo chiaramente un problema prendiamo la nostra e e pun prevent default Dovremmo aver sistemato prova invia perfetto vedete che abbiamo il nostro state Quindi ogni volta che io vado a inserire qualcosa me lo sta aggiornando Si vede che me lo sta agando perché se faccio invia me lo prende quindi lo stato è stato aggiornato con

cosa con ogni volta che faccio il Change qua va chiamare handle Field Change non me lo prende qua che va a fare il Dispatch quindi emana l'ordine di questa Action è un'azione di tipo cambia il campo con questo campo con questo valore che a sua volta chiama il reducer Eccolo qua che prende lo Stato precedente Questo è quello di default ma può essere cambiato giustamente e prende l'azione che gli viene passata se l'azione di tipo Cambia campo mi prendi lo state precedente ma modifichi il field che ti ho mandato col valore che ti ho mandato

altrimenti Attenzione Se io faccio reset Vedete che è stato resettato abbiamo chiaramente un problema perché Perché non mi ha fatto il prevent default Perciò lo facciamo qua così molto bene passiamo qua la e e se noi andiamo di qui io passo faccio reset vedete che stato resettato quindi faccio così tac invia e vedete che il campo è vuoto faccio invia ancora adesso è vuoto scrivo qua dentro invio c'è scrivo qua dentro ancora così invio c'è ancora faccio reset invio per vedere lo Stato e Vedete che è vuoto quindi questo è il reducer il reducer Sostanzialmente

è questa parte la parte veramente interessante del reducer è la funzione di reducer che gestiamo noi e ci permette di avere tutta la logica di gestione dello Stato di questo stato quantomeno qua dentro senza avere vedete Aggiungi item update user prima qua era tutto Vabbè queste sono due cose diverse Aggiungi item era questo update user era questo ma di questo passo avremmo avuto Elimina item modifica item Riordina item oppure qua Elimina user Aggiungi user pulisci tutti gli utenti e quant'altro anziché avere tante funzioni qui noi facciamo solo il dispatch dell'azione Specifichiamo cosa vogliamo con il

payload eventualmente automaticamente viene gestito da qua va a chiamare la cosa importante che è la funzione di reducer che è questa e qua dentro abbiamo tutta la logica anziché avere i nomi delle funzioni diverse e Aver tante funzioni abbiamo una sola funzione e i nomi delle azioni diverse ok Questo è fondamentale non tanto perché è react user user Ma perché lo vedrete in giro ovunque nella gestione degli Stati imparate questo questo giro del fumo Appunto perché è trasversale noi ci vediamo nel prossimo video con i context api A tra poco episodio 20 del corso di

react oggi dobbiamo parlare dei context api che sono un'altra funzionalità già integrata dentro react Che ci permette di gestire in modo ancora più semplice quello che è lo stato Perché prima o poi arriverà un momento come vi dicevo di applicazioni abbastanza grosse di tanti componenti che necessitano magari di stati un po' ovunque e soprattutto una gestione abbastanza complessa quindi context api è l'ennesima evoluzione che abbiamo a disposizione Vedremo Poi nel prossimo episodio redax che è secondo me lo step ancora successivo e molto probabilmente Nella quasi totalità dei casi di applicazione di un certo livello che

andrete a fare la vostra scelta predefinita Allora parliamo di context api ho cercato delle immagini Giusto per farvi vedere vi faccio vedere i crediti quindi topal scaler tecom Moro e quant'altro adesso ne parliamo hanno fatto dei bellissimi schemini che rendono abbastanza bene l'idea su cosa siano i context api Dunque Apriamo la prima Vedete che abbiamo la scelta tra Without context api Quindi come funziona la nostra applicazione senza e come funziona con allo stesso modo abbiamo senza e con due modi diversi di interpretarla abbiamo poi la visione finale di com'è con E questa ci arriviamo all'ultimo

Ma prima voglio che guardiate qua a destra Perché Perché c'è una cosa che si chiama prop drilling drilling è di base trivellare quindi pensate a quando si cerca di trivellare nel terreno per arrivare al petrolio È Esattamente quello che abbiamo sempre fatto fino adesso con i prop quindi prop drilling di base è quella fase di trivellazione in cui andiamo a passare i prop Nel senso che come vedete dalla gerarchia abbiamo il nostro componente principale il nostro container è l'app che ha a sua volta dei sottocomponenti Qua è tutto molto simmetrico questo non vuol dire che

tutte le applicazioni siano così potremmo averne 3 4 5 27 Child component e via discorrendo ma per Farvi capire il discorso con il prop drilling che è ciò che abbiamo sempre fatto passavamo i dati o il nostro stato come prop al componente e se eran necessari nei nipoti quelli che sono quattro passavamo dal Child con i prop ai nipoti Pensate se avessimo tre 4 C file di gerarchia andremmo a fare veramente la trivellazione dei prop quindi Passiamo dall'alto e arriviamo verso il basso il problema con questo approccio è Che poniamo il caso che il nostro

secondo nipote Questo qua Child component ha bisogno di un dato che è presente nello stato in app jsx noi glielo passiamo lo passiamo tramite questo quindi tramite il figlio che lo passa al nipote giusto Tuttavia magari al figlio a questo qua non interessa quindi noi dobbiamo andare a far passare come il telefono senza fili il gioco Se vi ricordate un prop per nessun motivo Lui ha sto prop che non usa il cui Compito è semplicemente passarlo quindi immaginate utilizziamo tutti Google Drive abbiamo dei file che dobbiamo tutti scaricare io devo chiedere io sono il nipote

devo chiedere permesso a voi che dovete chiedere permesso a lui di scaricare il file Quindi lui lo scarica per me che lo manda a voi che lo mandate a me un disastro un disastro soprattutto con certi tipi di applicazioni e con tanti passaggi diversi in certe situazioni lavorare col solo passaggio Di prop non conviene vi passerete sempre i prop perché se pensate alle Card che abbiamo creato i dati li passiamo tramite prop non ci sono altri modi Quindi in certe situazioni prop li utilizzerete sempre dove non utilizzerete i prop sono appunto queste situazioni di prop

drilling dove dovete avere gli stessi dati in più punti diversi e non potete stare a fare Ripeto il telefono senza fili tu lo passa a lui che lui lo passa a me che io lo passo a Qualcun altro eccetera eccetera Non conviene è confusionario richiede troppo codice e quant'altro Quindi vedete che qua abbiamo lo stesso discorso Si passa senza context api dobbiamo passare da product list che passa a Car allo stesso modo si vede qua Questo qua è lo state Scusatemi app jsx con lo state che passa a questo che passa agli altri con i

context api è diverso perché andiamo a creare la gestione dello Stato noi la facciamo molto più semplificata in Questo video Ma andiamo a creare questo contesto che viene implementato da App e nel momento in cui app va ad ad utilizzare questo contesto tutti i suoi figli ne hanno accesso a prescindere basta È un po' come se fosse il Family Plan di qualcosa pensate abbiamo tutti Steam o abbiamo Netflix ponete il caso che voi siate tutti i miei figli io Pago Pago io l'accesso a Netflix e voi potete guardare avete i vostri account ma Potete utilizzare

lo state di Netflix e Guardarvi indipendentemente i film mentre invece senza il context api io ho pagato Netflix io gestisco Netflix voi dovete passare sempre tramite me quindi pensate siete il primo Edo mi attivi l'account oppure guardiamo insieme questo film che voglio vederlo Quindi devo essere sempre presente io in un modo o nell'altro e passarvi l'account Vuole vederlo qualcun altro Ah senti Marco Chiedi a Edo se ti passa Netflix che poi tu lo passi a me che voglio Vederlo va bene invece dall'altra parte abbiamo una cosa del più Signori ho comprato Netflix Questi sono i

vostri account è fa sempre riferimento a me l'account di Netflix vedete Io sono app jsx Ma voi siete i componenti finché io ho accesso al contesto al context api voi avete accesso senza passare da me a me non interessa se voi in questo momento state guardando un film o meno non mi interessa perché è perché siete nel contesto Questa è una bellissima Metafora e come vedete si applica la stessa cosa Quindi avremo il provider Io sono il provider sono colui che ha pagato io sono app jsx Ok sono colui che ha pagato non riesco a

prenderli tutti bene Scusatemi sono colui che ha pagato Netflix ok Voi siete i sottocomponenti non tutti di voi magari guarderete Netflix a qualcuno non piace No io le serie TV I film non mi piacciono preferisco stare a far musica o giocare leggere andare fuori viaggiare quello Che volete ma ci sarà qualcuno che sarà un consumer quindi qualcuno che vuole consumare il servizio che io ho messo a disposizione quindi to provide è fornire mettere a disposizione Ci sarà qualcuno di voi che su Netflix ci vuole stare ma non è che chiede più il permesso a me

risalendo la gerarchia Semplicemente ha il suo account o ha gli accessi questo è Netflix in versione famiglia avete accesso e siete a posto ok io posso accedervi lui può accedervi lui può Accedervi chiunque può accedere purché fa parte del contesto in questo caso secondo la metafora il contesto familiare qualcun altro un mio vicino non può accederci perché perché non l'ho inserito nel mio Family Plan di Netflix presupponendo che esista un Family Plan di Netflix Non mi ricordo più se ci sono Forse dei sotto acccount Vabbè non divaghiamo detto questo dovreste aver chiaro il concetto di

context questo non vuol dire che il Family Plan di Netflix Funziona col context Fi Mir comando era solo una metafora torniamo perciò a noi e quello che voglio fare è convertire questo conteggio lo voglio convertire utilizzando cosa utilizzando appunto Il context quindi questo conteggio lo utilizziamo poi in giro per tutta l'applicazione ma fa riferimento al context E allora facciamolo Andiamo di qua e la prima cosa che facciamo è creare una cartella Store non siete obbligati ma vi renderete conto che Potete avere tanti Store abbiamo lo store che si occupa dell' authentication quindi out ath Potremmo

avere lo store che si occupa delle preferenze dell'utente e Vuoi per caso vedere l'applicazione in Dark Mode o Light Mode Vuoi per caso vedere queste questi dati questi qua le città come card o come elenco Vuoi per caso vedere le icone grandi o piccole Insomma ci possono essere miriadi di opzioni che possiamo andare a settare quelle potrebbe essere Il setting Store abbiamo l'out Store o l'out state Il setting state Potremmo avere e tutto lo state che si occupa dei dati quindi capite bene che una cartella Store ci permette poi di aver dentro che cosa più

Store effettivamente Quindi in realtà potrebbe essere stores Scusatemi potrebbe essere stores e qua dentro noi andiamo a creare il nostro prova context Scusatemi se non sono molto espressivo nei nei nomi ma va bene così quindi abbiamo prova context qua dentro andiamo A fare Import create context quindi andiamo a creare il contesto andiamo ad esportarlo export const prova context che andrà a fare create context molto bene e qua dentro ci mettiamo un valore iniziale in questo caso il default Value vedete lo mettiamo così salviamo e abbiamo di conseguenza un oggetto vuoto e abbiamo creato il nostro

context il nostro context di prova però è totalmente inutile finché è così Dobbiamo andarlo ad implementare che Cosa sappiamo sappiamo che se guardiamo questo schemino abbiamo il nostro context che abbiamo creato anche se al momento Noi abbiamo un valore vuoto abbiamo un oggetto vuoto perché perché questo valore che poi verrà passato qua In realtà noi lo passiamo Come state Quindi qua dentro in app jsx Noi abbiamo già uno state che gestivamo come St come use state o use reducer va bene Poi più avanti Se volete lo potete esportare qua dentro la gestione dello Stato quindi

il Contesto per ora ci fornisce appunto il contesto l'ambito in cui lavorare in realtà poi possiamo prendere Veramente lo state che avevamo e gestirlo tutto nel contesto è un qualcosa di un po' più grande Se volete fare la svelta a vedere com'è Vi basta poi andare su cgpt Bard o quello che è E scrivete Chiedete di generar VII un context api in cui c'è dentro lo state e vedete come ve lo fa giusto se siete curiosi non voglio andare così troppo avanti perché Perché Il context api lo useremo in realtà fino a un certo punto

passeremo in realtà oltre come vi dicevo su redax Quindi voglio solo farvi capire il il concetto del contesto e poi passiamo oltre In realtà quindi questo qua è un video è più uno step forzato per farvi capire visto che è a disposizione ma in realtà poi ci spostiamo su altro di conseguenza Noi andiamo qui e cosa facciamo dobbiamo Innanzitutto importare Import prova context e poi dobbiamo usare un altro Hook che è use context Quindi come avevamo create context qua dentro qua utilizziamo use context giustamente adesso Cosa andiamo a fare andiamo a fornire il provider vi

ricordate riprendiamo abbiamo il provider il context che abbiamo creato adesso dobbiamo fare il provider e poi abbiamo il consumer ma il consumer è semplicemente un componente che utilizza il valore niente di che facciamo questo provider vedete che qua abbiamo un un Frammento vuoto un fragment Possiamo metterlo qua dentro anziché avere il fragment e poi dentro qualcos'altro andiamo direttamente a mettere provac context provider e vi ho detto che serve un Value giusto nel Value potremo mettere un valore arcato quindi lo mettiamo a mano noi in realtà noi cosa andiamo a mettere questo qua count e set

count quindi gli passiamo uno state perché alla fine tutta sta menata è per gestire gli stati E allora anziché Passare lo state Come facciamo prima come abbiamo sempre fatto con i prop vedete che li passavamo qua dentro e anche qua Cities ad City eccetera eccetera andiamo qua e mettiamo Guarda io ti passo count e set count nell'oggetto quindi di default di qua era vuoto ma qua abbiamo passato count che è lo state e set count che è la funzione di set state del count adesso che abbiamo fatto il provider e abbiamo passato i valori se

noi andiamo in Examples andiamo a vedere examples ha Se vi ricordate un count ma utilizza Us state perciò andiamo a togliere tutta sta roba molto bene Vedete che qua abbiamo count e set count come lo prendiamo questo count e set count visto che abbiamo eliminato lo use state quindi questo state era diverso da questo qua vedete che sono due u state diversi sono lo stato del componente singolo Ma noi vogliamo prendere ciò che è dentro context api che in realtà è ciò Che è gestito qui da App in realtà ripeto questa parte qua potreste portarla

in prova context perché Che brutto avere prova context con dentro niente e poi devo andare in App jsx e poi devo spostarmi eccetera eccetera è più bello avere tutto in un unico posto ma esorto voi a farlo perché in realtà Poi ripeto passiamo a redax quindi noi andiamo qui e togliamo sta parte che non ci interessa più qua dentro dobbiamo utilizzare ancora use context mto bene e Poi chiaramente dobbiamo importare cosa importare prova context abbiamo accesso E allora andiamo a fare un bel const andiamo a prenderci i nostri valori count e set count da dove

li prendiamo da use context cosa prova context perché abbiamo fatto una cosa del genere perché noi qua dentro li passiamo vedete come oggetto quindi andiamo a distruggere questo oggetto questo è banale JavaScript andiamo a prendere count e set count da prova context di Conseguenza io faccio use context prova context e mi estrapolo count e set count in realtà potreste anche fare una cosa del genere Prova context così e poi accedere dentro con provac context count eccetera vedete che abbiamo accesso potete scegliere come approcciare la cosa in questo caso non ha senso ripetersi perciò andiamo a

estrapolare direttamente le cose il resto è praticamente uguale ma se io Salvo andiamo a vedere funziona praticamente Lo stesso vedete che si incrementa qua in alto adesso andiamo a sfruttare questa cosa del del Contest del context e la spostiamo dove la spostiamo Mag nel card form e il card form è questo qua vedete che non ha assolutamente niente non c'è motivo per cui ci debba essere un counter lo inventiamo noi Te lo do io il motivo perciò card form andiamo qua in alto sostituiamo qua Us state use Effect non ci interessa abbiamo già importato quello

che ci serve e adesso Stesso discorso prendiamo questo se volete prendere set count va bene ma non siamo Non siamo obbligati scendiamo magari set count lo togliamo prendiamo solo count e qua dentro Mettetevi dove volete Mettiamoci in descrizione Io butto dentro count Ricordatevi che count viene estrapolato da dov'è Dov'è dov'è qua viene estrapolato da prova context prova context è stato gestito in app vedete col provider abbiamo passato qua per la prima volta questo stato quindi Di base prova context sta gestendo cosa lo state Va bene nient'altro gliel'abbiamo passato e lo sta gestendo ed è accessibile

grazie al context Ovunque se noi andiamo a vedere vedete che qua abbiamo sette vedete che prima non c'era aggiorniamo ta ta ta ta ta vedete si aggiorna qui e si aggiorna Qui non c'è stato prop drilling nessuno ha passato dei prop l'unico modo in cui accediamo a questa cosa è dire Ehi voglio fare l'utilizzo del contesto Voglio utilizzare il contesto voglio utilizzare questo contesto estrapolando queste variabili questi riferimenti chiamateli Come volete In modo che vi aiuti tutta sta roba è stata provide è stata fornita dove qua dentro sulla base chiaramente con questi valori sulla base

di cosa di questo context che è stato creato va bene Questo è il giro del fumo la parte che mi interessava era farvi capire il concetto di provider consumer Store e questa cosa che abbiamo Da qualche parte un file che si occupa esclusivamente della gestione dello stato al momento ripeto Siamo stati un po' grezzi per necessità del video Anzi per non necessità del video e abbiamo mantenuto qua lo Stato eccetera nessuno vi vieta di portare tutta la gestione dello Stato all'interno dei diversi Store Potreste avere il cart context per la gestione del carrello all'interno dei

degli e-commerce Potreste avere l'out context per gestire app appunto se una Persona è loggata o meno se è amministratore un normale utente un cliente quello che volete potete avere le preferenze dell'utente Store tutto quello che volete il concetto è sempre lo stesso l'idea è estrapolare questa logica noi l'abbiamo lasciata qua per pigrizia per non necessità estrapolare questa logica dai componenti i componenti si devono limitare a fare i componenti ovvero ricevo dei dati mando a schermo dei dati premo su un bottone Ok quando premo su un bottone deve cambiare vedete quando premo su un bottone Yes

setto il count ma il count è gestito dal context quindi se ne occupa il context Cominciate a dividere questa cosa qua dalla logica l'abbiamo visto anche con use Effect use Effect non è semplicemente react Ma è un Hook dobbiamo dire use Effect è un effetto laterale Perché react i componenti quantomeno si devono occupare di mandare a schermo roba ricevo dei dati li mando A schermo premo succede qualcosa qualcun altro cambia i dati use Effect un altro file quello che volete io sono semplicemente un componente cominciate appunto a distinguere questa logica perché perché l'applicazione di un

certo livello io dico sempre certo livello Ok non è il sit Rello fate una Dashboard per qualcosa fate un piccolo gestionale fate una Tod list avranno tutte una gestione più o meno simile Quindi quando dico certo livello vuol dire un Progettino da una settimana e più ok o anche un mesetto avrete per forza questa gestione separata i componenti fanno i componenti visivi e al massimo gli eventi il resto si deve occupare della logica che ci sta dietro Perché Perché avere a schermo tutta sta roba vedete Quanto è grande e questo componente è piccolino abbiamo prova

con dentro questi pochi componenti Ma abbiamo una vagonata di roba diventa un casino da gestire Quindi il nostro obiettivo è Sempre distinguere la logica in generale che può essere lo state i dati la chiamata di i dati use Effect quello che volete quindi separare questa parte da questa parte Ok questa è la cosa più importante che vi dovete portare a casa da questo video noi vediamo tra poco che parliamo di redax episodio 21 del corso di react oggi vediamo Come combinare react con redax non sarà di base un corso su redax perché come potrete vedere

già lavoreremo con redax più un Altro pacchetto redax toolkit il che vi fa capire quanto l'ecosistema solo attorno a dax sia grande di conseguenza quello che trattiamo oggi è cercare di capire come mettere insieme react e redax vi ho preparato già poi adesso vedremo la lezione in modo semplice per capire e scalate su quella una volta che capite questo concetto potete scalarla Poi però dovete tornare indietro a studiare redax se volete conoscerlo proprio nel dettaglio andrò poi a fare Un corso sempre qua su YouTube introduttivo solo dedicato a redax verrà fuori un'ora 2 ore 3

ore quello che è e poi farò su CoD il corso avanzato Quindi redax è un mondo a s stante e non possiamo dentro react almeno visto che stiamo facendo un'infarinatura veloce portare via 27 ore solo per redax perché perdiamo poi quello che è il il fulcro che è di base react allora redax abbiamo detto che è una libreria esterna Intanto vi prendo Questa vedete react e redax Perché giustamente c'è il pacchetto di redax per react è una libreria esterna che ci permette di utilizzare ancora meglio in modo ancora più semplice lo stato lo store vedete

che qua si parla di Store abbiamo poi reducer che abbiamo visto abbiamo lo state gli Slice che non abbiamo visto ma adesso ne parliamo si parla di provide si parla di consume tutte cose che abbiamo già visto con il context api use reducer Us state Niente Di nuovo m'ha messo tutto insieme vi parlo di questo sito perché Perché è quello ufficiale poi farò la documentazione in Ital Liano anche su Code grind però questo è quello ufficiale react redax Se invece andate solo su redax chiaramente potete capire quella che è il suo funzionamento in modo più

generale rispetto a react Ma noi interessa questo e se scendiamo Abbiamo qua quello che è il tutorial che vi faccio vedere ma io l'ho arricchito L'ho arricchito con le nostre città Quindi questa parte qua e tutto quello che vedete è già stato sistemato da me con redax quindi usiamo questa base ma aggiunto appunto le città in modo che vi faccio vedere come scalare velocemente questo concetto visto che abbiamo poco tempo faciamo il prodotto finito ve lo spiego lavorate poi su quello quando Cominciate bene a capire il funzionamento tornate indietro e potete capire molto di più

Map state to prop Map dispatch e quant'altro Ci sono tante cose che redax offre che non riusciamo a vedere in questo momento perché dobbiamo fare un corso specifico di redax detto questo la prima cosa da fare è fare un bel np PM Install quindi copiate questo andate su Visual studio code dovreste saperlo vi Aprite un nuovo terminale e incollate qua oppure scrivete npm Install Io intanto chiudo perché l'ho già fatto ne parliamo qui andate a mettere npm Install E cosa Installiamo Allora redax js toolkit una cosa aggiuntiva e poi react redax si tratta di due

pacchetti uno è redax esclusivo per react mentre invece l'altro è redax ma con l'aggiunta di kit e toolkit ci dà delle cose aggiuntive Soprattutto molto molto comodo per la configurazione di Slice E reducer allora lascio perdere questa pagina adesso la potete usare come riferimento studiare tutorial iniziale eccetera ma noi torniamo sulla nostra applicazione vediamo un attimo la Nostra applicazione ho tolto le cose che non ci interessavano ho sistemato qua il conteggio incrementa e decrementa vedete incremento e decremento e mi prende il conteggio benissimo Ho sempre le mie card voi non voi non vi vi siete

resi conto di niente praticamente solo che se passo sopra vedete Si si allargano quindi c'è lo scaling come effetto ho aggiunto questa piccola cosa per far vedere che ci passo sopra ma se vado a aggiungere nome descrizione togliamo L'immagine faccio Aggiungi card vedete che viene aggiunta effettivamente una card proviamo solo con i numeri per verificare che funziona Perfetto vedete che funziona ciò che c'è dietro però in realtà è redax vediamoli insieme allora ho pulito tutto dove non servivano più gli state li ho tolti ho pulito tutte le varie cose cominciamo a studiare prima redax redax

ha il suo Store lo store è dove immagazziniamo la roba quindi che cosa abbiamo abbiamo configure Store per Andarlo a configurare va bene e lo importiamo da toolkit o poi gli Slice gli Slice altro non sono che le singole parti di uno Stato Se vi ricordate Vi ricordate quando avevamo gli stati composti da da Oggetti potevamo avere una cosa tipo counter con le varie cose poi Cities solo che ogni volta volta che andavamo a modificare magari counter +1 dovevamo riprendere sempre lo stato delle Cities vi ricordate era state City su una cosa del genere diventa

un Disastro Se dobbiamo gestire noi a mano tutto lo stato ogni volta vi ricordate che ogni volta che andavamo a modificare una cosa tutto il resto Doveva restare immutato Ma dovevamo ricordarci noi di aggiornarlo con gli Slice è molto comodo invece perché andiamo Slice vuol dire fetta pensate alle fette di una torta andiamo a lavorare con la fetta dedicata al counter la fetta dedicata alle città di conseguenza ogni Slice Ogni fetta si occupa di qualcosa e il resto Se io Modifico il Counter le città automaticamente restano immutate Perché vengono gestite in modo separato da toolkit

e soprattutto vengono gestite in fette in Slice Questa cosa è molto buona poi quando faremo il corso che sia introduttivo avanzato di Red dax passeremo dalla parte basica fino a Come si arriva a una cosa del genere importante è che voglio che capiate che questa conformazione ci permette di evitare a noi lo sbatti e lo chiamo Proprio sbatti perché è quello che è di stare a vedere lo store ogni volta ok Hai cambiato il Counter Ma ti sei ricordato di tenere le siti come erano prima hai modificato però i settings dell'utente Ma ti sei ricordato

di mantenere uguali le opzioni i dati eccetera eccetera Si si diventa scemi alla svelta soprattutto se avete uno Store abbastanza ampio di conseguenza questa qua è una bellissima trovata e adesso vi farò vedere che cosa sono Questi Innanzitutto abbiamo il nostro configure Store che è una banale funzione la esportiamo per poterla utilizzare e abbiamo dentro un oggetto questo oggetto nella sua forma più basica prende un reducer questa proprietà reducer poteva banalmente essere con la s perché ne abbiamo di più vedete non è solo uno andiamo a mettere il nome del reducer in realtà il nome

della proprietà dello Stato abbiamo le città abbiamo il Counter non lo Chiamiamo counter reducer ma importiamo counter reducer che adesso vi farò vedere quindi stiamo dicendo Questo è il mio Store il mio Store avrà queste proprietà sono qua nel reducer e ci sono dei reducer specifici che vanno a gestire lo Stato i reducer sono quelli che si occupano di gestire il cambio dello Stato Se vi ricordate prendono l'azione che è stata fatta con dispatch la gestiscono mandano fuori il nuovo risultato dividendoli così noi ci Occupiamo dei singoli pezzi adesso vedete che qua non ho più

la cartella Store ma l'ho chiamata redax potete chiamarla Come volete perché perché ho store In realtà potresti avere redax con Store poi una sottocartella slices e potresti avere poi actions reducers poi più diventa grande più Potreste avere file separati al momento siamo fortunati perché abbiamo solo counter Slice e Cities Slice andiamo a vedere che cos'è counter Slice abbiamo create Slice Quindi crea una fetta dello Stato come se fosse una torta che ci viene fornito da toolkit solo redax non ce la dà questa roba è per questo che abbiamo già tool kit in saccoccia perché ci

semplifica la vita e che cosa abbiamo abbiamo la nostra counter Slice Quindi in realtà noi potevamo importare da qua counter Slice punto e potevamo prendere punto reducer va bene però come vedrete abbiamo fatto qualcosa che ci ha semplificato la vita poi sotto quindi Qui abbiamo il nostro counter Slice che è uguale a create Slice fatto da qui e dentro abbiamo un oggetto che lo va ad impostare abbiamo detto che una Slice è che cosa una fetta dello stato più grande dedicata solo a qualcosa di specifico in questo caso ci dedichiamo al counter perciò la nostra

fetta la chiamiamo counter abbiamo un valore iniziale dello state del counter quindi il Counter Partirà da zero va bene Abbiamo perciò l'initial state con Valore uguale a 0 basta dopodiché abbiamo i reducer Quindi vedete come tutta questa cosa che noi eravamo soliti dividere in reducer initial state eccetera in realtà sono tutti compressi dove nella Slice nel nella fetta dedicata al counter va bene quindi adesso tutte queste funzionalità non sono divise per initial state abbiamo lo stato iniziale del counter delle Cities dei settings dei dati del tema di quello che volete ma ogni Slice ha il

suo Initial state perché perché ogni fetta è trattata separatamente ne volete modificare più insieme nessun problema ma Ogni fetta dello Stato Ricordatevi sempre la torta è gestita separatamente perciò abbiamo il nome counter lo stato iniziale che ha un valore di zero giustamente Cominciamo a contare da zero e abbiamo poi una lista di reducer i reducer Se vi ricordate sono le azioni o le funzioni che andiamo a fare quindi voglio fare increment prendo lo stato Che qual è È quello iniziale o quello che abbiamo in questo momento è tutto fornito da toolkit vedete come noi non

dobbiamo più di base andare a specificare quasi niente Ci limitiamo a specificare lo stato iniziale il tipo di reducer che vogliamo mettiamo tutto insieme e siamo a posto abbiamo increment quindi la funzione che vogliamo eseguire è increment e prende lo Stato e l'aumenta di uno abbiamo decrement giustamente per andarlo a Ridurre di uno e lo stiamo appunto riducendo di uno abbiamo poi un esempio qua increment by amount perché perché Potremmo volerlo l' incementare di 2 di 3 di 4 di 5 e questa la conoscete bene abbiamo lo state precedente l'azione e all'azione andiamo a mettere

il payload potremo aumentarlo ripeto con questa azione Se vi ricordate avevamo il tip di azione ma anche il payload il payload è di quanto lo vuoi aumentare Infatti vedete che lo state Value viene Aumentato di quanto lo vogliamo aumentare andiamo poi ad esportare le varie azioni queste qua sono le azioni vedete come counter Slice Action quindi counter Slice punto actions ci va a pescare queste ed esportiamo increment vedete increment decrement e increment by amount E questa cosa ci servirà per chiamarle nei vari componenti i bottoni che avete visto qui adesso lo vedremo fanno in increment

e decrement Potremmo avere il bottone di incrementa by amount E andrebbe a chiamare quell'azione Va bene quindi queste azioni È importante che vengono buttate fuori poi abbiamo Export const counter reducer come counter Slice reducer potreste voi trovarlo magari nel nel tutorial come Export default così in realtà vi potrebbe dar problemi quindi Ricordatevi che se non ve lo trova come Export di default lo rinominate counter reducer va bene perché perché lui poi quando lo vai a importare in giro va ad importare Counter reducer qui vedete l'abbiamo chiamato counter reducer Ma se non ve lo trova come

Export di default intanto Scusatemi torno indietro UPS forse un po' troppo se non ve lo trova dicevo come counter reducer lo andate a rinominare voi Mi raccomando non fatevi fregare da sta roba è una sottigliezza molti Magari da principianti andrebbero a scrivere C eccetera semplicemente se non trova il nome counter reducer glielo date voi il nome counter reducer quindi Export const counter reducer ed esportiamo cosa la funzione di reducer e Qua abbiamo le nostre azioni la stessa cosa identica l'ho fatta per le città Ho creato una Slice cioè l'ho importata l'ho creata L'ho chiamata Cities

giustamente il valore iniziale è il valore che gli ho messo qua dentro chiaramente potremmo prendere robe con use Effect http tirarle giù andare a settare l'initial state Anzi initial state probabilmente sarebbe vuoto Andiamo poi a inserire i valori presi da una chiamata http in questo caso non la stiamo faccendo per Super complicare la situazione partiamo già con delle card preimpostate da noi il discorso è che abbiamo un unico reducer che è ad in questo caso potremmo averne tante altre Rimuovi filtra Azzera tutto quello che volete e in questo caso cosa facciamo abbiamo lo state con

l'azione e noi prendiamo lo state Value state Value quindi va a prendere questo Value e va a Fare un bel Push di cosa Action payload quindi la città che gli andiamo a spingere buttiamo fuori ad e poi Cities reducer Cities reducer e counter reducer vengono poi importati qua in Store Ecco qua che vengono poi utilizzati qua dentro e abbiamo il nostro Store configurato il nostro Store sa che abbiamo counter e Cities sa quali sono le azioni sa quali sono gli stati iniziali sa cosa dobbiamo fare punto Adesso dobbiamo effettivamente impl ent Are lo store Perché

esiste ma non nell'applicazione esiste solo in codice Quindi voi sareste propensi ad andare qua in app jsx e mettere qua il provider no ci spostiamo in main jsx e come vedete provider Store la conoscete già sta roba perché l'abbiamo già vista col context api è leggermente diverso nel nome qua era Value Se vi ricordate Qua è solo provider che importiamo vedete da react redax quindi il componente lo stiamo importando dal pacchetto Noi non Dobbiamo F niente ci chiede poi un prop come Store lo store lo importiamo da redax Store pensate sia importato da dove da

chissà che pacchetto in realtà redax Store è la mia cartella vedete redax Store è questo qui abbiamo esportato Cosa questo qua viene esportato come default perciò gli possiamo andare qualsiasi nome gli sto dicendo Guarda che l'export di default che mi butti fuori io te lo chiamo dove sono qua te lo chiamo Store quindi lo Passo qua dentro vedete come pur utilizzando redax lo state eccetera eccetera In realtà i prop li usiamo ancora il fatto di usare gli gli gli state redax reducer e quant'altro non vuol dire che non utilizziamo più ad esempio i prop o

fare un po' di prop drilling e quant'altro ogni cosa al suo posto nella giusta dose Quindi abbiamo il nostro provider abbiamo passato lo store l'ho chiamato come Store potevate chiamarlo Pippo quindi passavamo Pippo Al prop di Store del provider adesso l'App è in grado di di consumare Se vi ricordate consume i valori che sono forniti dal provider e i valori sono parte dello Store benissimo andiamo in app in app non c'è praticamente niente Scusatemi Ecco qua se non l'utilizzo delle città vedete perché avevamo qua lo state Vi ricordate che poi è diventato reducer o quello

che era non mi ricordo come abbiamo fatto il giro del fumo nei video precedenti Ma le città sono sempre Cities Map ma sto giro Cities deriva da un Hook che ancora non conosciamo use selector che ci viene fornito gentilmente da react redax E allora che cosa abbiamo react redax sa già che use selector fa riferimento ad uno state particolare Va bene e che selettore prendiamo prendiamo Cities quindi stiamo dicendo Guarda voglio utilizzare use selector sa già quindi dove deve andare a prendere dallo state Mi prendi Cities mi prendi Value ma sta roba Dov'è Ragioniamo un

attimo lo state Dov'è salvato nel nostro Store js perfetto Eccoci qua poi abbiamo Cities Eccoci qua dopodiché abbiamo qui state è in Store Cities l'abbiamo visto c'è scritto Cities Value molto semplice guardate qua name Cities Value è questo chiaramente si parte dall' initial State Ma l'initial state viene poi cambiato nello state normale di conseguenza quando noi scriviamo you automaticamente lo store dice Ah ok Vado In Cities Eccolo qui prendo lo Stato prendo il Value Quindi tutta sta roba viene portata dove viene portata dentro Cities io poi passo qua e faccio Cities Map e guarda caso

poi mando a schermo con i prop e ottengo esattamente la stessa roba ve lo dimostro che il giro del fumo è questo prendo Tokyo e la vado a chiamare Tokyo 33 quindi Tokyo diventa Tokyo 33 andiamo a vedere e vedete che è Tokyo 33 la prende esattamente da lì benissimo Però torniamo indietro perché Tokyo 33 è un po' bruttino mi Salviamo e continuiamo a parlare perciò in app Avendo noi già il provider ciè bastato fare il selector dello Stato che vogliamo utilizzare volete utilizzare Cities altrove utilizzate la stessa sintassi la mandate a schermo Come volete

fate il Map mandate a schermo in String quello che volete Ma si usa sempre la stessa riga di codice e lo stesso Import Avete visto quanto è stato facile due righe un Import una riga e Poi l'abbiamo mandata a schermo basta andiamo avanti perché dobbiamo parlare dell example jsx che è il nostro counter Quindi qua che cosa abbiamo abbiamo importato increment e decrement se vi ricordate dalle azioni del counter Slice quindi counter Slice increment decrement che erano queste due che cosa facciamo importiamo anche da react redax use selector che abbiamo già visto e use dispatch

perché in questo caso col selector consumiamo un valore Ehi voglio Prendere uno stato Scusatemi voglio prendere un valore dallo Stato con use dispatch vi ricordate dispatch che è mandare un ordine stiamo dicendo Ehi voglio essere in grado di mandare degli ordini e gli ordini che ti mando sono ordini di modifica voglio eseguire un'azione sullo stato non voglio solo leggerlo voglio fare qualcosa voglio modificarlo resettarlo quello che volete E allora qua sotto abbiamo che il nostro counter o il nostro count il nostro Conteggio è uguale a You selector di state counter Value che guarda caso è

counter prendiamo lo state counter Value perfetto lo andiamo a mandare a schermo in conteggio niente di più semplice l'abbiamo già fatto milioni di volte Dopodiché diciamo use dispatch e creo un riferimento dispatch quindi andrò a chiamare questa funzione e sto dicendo quando quando premo sul bottone incrementa onclick mi chiami dispatch di increment Vedete Questo increment è di base una funzione contenuta in una funzione che chiama una funzione dentro un'altra funzione è un disastro Se siete appena arrivati in JavaScript e siete subito passati a react vi sta esplodendo il cervello e vi sta bene perché non

dovevate essere qui in questo preciso momento ve lo dico subito dovreste tornare indietro fare un po' di pratica inj e imparare a digerire meglio queste cose se invece è solo la prima volta in React e basta queste cose qua non vi sorprendono è un giro del fumo un po' lungo da questo punto di vista per chiamare una funzione però alla fine vedete Com'è comodo una volta che avete impostato dispatch la funzione anonima è qua la R function eccetera dispatch chiamate la vostra azione che è qua in alto e fa tutto da solo perché perché va

a chiamare increment ma increment sa già che è state Value + 1 noi non facciamo Niente abbiamo impostato l' incremented user e abbiamo chiamato questa funzione tutto il resto l'aggiornamento dello Stato è gestito da redax e redax toolkit con lo Slice che figata Si può dire sì che figata al allo stesso discorso abbiamo decrement Qua abbiamo il count con you selector e siamo a posto Andiamo a vedere poi card form perché Perché è in card form che noi andiamo a chiamare ad City vi ricordate ad per aggiungere una città e dove lo facciamo nel form

Che è quale che è questo qui vedete E allora andiamo in quel componente vediamolo insieme magari vi siete dimenticati card form vado qua dentro Eccomi qui E cosa devo fare in card form in realtà non devo leggere nessuna card perciò non devo leggere lo stato voglio solo modificarlo quando vogliamo modificare e non leggere per leggere è use selector per modificare è use dispatch perciò importo semplicemente use dispatch ma devo eseguire un'azione Che non è in increment decrement o increment by amount Ma è ad da cosa Da Cities Slice Fatemi dire anche Cities skylines che è

appena uscito e continua a Poppi in testa come come cosa detto questo Cities Slice ad io lo ripesco dove lo ripesco qui quindi ho use dispatch e ad vado a creare la mia cons dispatch che fa use dispatch abbiamo poi dispatch che viene utilizzato dove quando faccio handle submit abbiamo il nostro form on submit handle submit ho Tenuto tutto esattamente com'era Semplicemente ho cambiato il modo in cui viene aggiunta una città prima era con lo state ci veniva mandata ad City tramite prop eccetera eccetera a sto giro voglio fare il dispatch di ad che ho

importato tutto dispatch e ad li ho importati dal mio Store aggiungo la città che ce l'ho da come è un oggetto che va a prendere semplicemente i dati del form i dati del form cosa sono uno stato quindi vedete come lo Us state non L'abbiamo mandato in vacanza o in pensione solo perché utilizziamo redax Perché Perché lo stato di un form non ha senso che venga gestito da redax ma non ha proprio senso è qua dentro lo possiamo gestire tranquillamente nel componente E allora utilizziamo poi questo Us state prendiamo i dati li modifichiamo qua dentro

nel cambio degli input li ripeschi vedete form data è questo qua è il nostro state li ripeschi quando ci servono andiamo poi a fare il Set form data semplicemente per ripulire il form esat è tutto esattamente come codice che avete voi questa parte qua semplicemente dispatch Add aggiungo la città e siamo a posto facile semplice e veloce quindi adesso vi faccio vedere il risultato finale Anche se l'abbiamo già visto ma il concetto è che redax più redax toolkit ci forniscono il concetto di Store il concetto di reducer che abbiamo già visto quindi abbiamo lo store

che tiene dentro lo state ma lo State l'abbiamo diviso in Slice in fette per non avere gli sbatti di dovercela altro non sono che le azioni perché vedete che sono le azioni esportiamo tutto Le r importiamo a piacimento andiamo dove ci serve utilizziamo use selector per leggere use dispatch per mandare a schermo non sto entrando nel dettaglio perché perché sapientemente ho messo le lezioni precedenti per introdurvi il concetto di dispatch actions reducer state e Quant'altro Dovrebbero essere cose che già ormai conoscete Ma poi comunque le rivedremo nel corso di redax che dovrò per forza andare

a fare perché un video non si può imparare redax con react insieme bisogna fare un bel corso solo di redax si capisce perché come quando eccetera Perché se lo capite lì poi lo applicate ad angular a View a svelt a quello che volete qua è molto legato use selector e use dispatch sono Hook e sono legati a react redax quindi poi farò Ripeto un corso per imparare dax nella sua forma più primitiva va bene questo è quanto andiamo a vedere il risultato quindi tutto quello che avevamo prima Vedete decremento incremento Questo è il nostro state

counter qua premo e Cosa facciamo Andiamo a fare il Counter reducer increment Azione increment Azione decrement queste card vedete sono use selector di Cities le abbiamo poi mappate a schermo andiamo Qui dove abbiamo use dispatch mandiamo a schermo Qualcosa in questo momento in cui vado a premere mi sta facendo il submit mi fa lendle submit dentro lendle submit mi chiama il dispatch di cosa Di ad Ed eccolo qui automaticamente lo Stato cambia e tutti i componenti che sono automaticamente subscribed quindi è come se foste iscritti a Netflix se vi esce un film nuovo su Netflix

venite notificati se vi esce un video nuovo sul mio canale siete iscritti con la campanellina venite notificati tutti i Componenti che implementano lo Stato o la Slice in questo caso vengono notificati Se non avessimo tutta sta cosa automatica dovremmo fare noi automaticamente la subscription e dire Ehi questo componente si deve iscrivere bla bla bla invece è tutto gestito automaticamente Quanto è bello è bellissimo Va bene vi ricordo il sito che è react rx.sdr se non ho ancora fatto i video di redax Singolo guardateli su udemy guardateli su YouTube da altri non mi interessa ma prima

o poi adesso potete lavorare con questo template che vi ho creato io Dopodiché quando avrete qualche oretta di redax e dovete fare cose più complesse dovete per forza conoscerlo perché altrimenti la vostra conoscenza ha raggiunto il soffitto dovete semplicemente alzare l'asticella Questo è quanto questo è redax ripeto è una forma più comoda e un po' più evoluta di Ciò che abbiamo già visto noi proseguiamo perché in tutto ciò non abbiamo ancora parlato del routing E noi siamo ancora in questa maledettissima singola pagina da 21 episodi quindi parliamo del routing tra pochissimo episodio 22 del corso

di react siamo quasi alla fine di questo corso mancano pochissimi video e perciò è il momento di parlare di routing qualcuno di voi si ha già esperienza in altri framework di programmazione saprà già che cos'è il Routing ma molti di voi anche se arrivate da Java script dopo tanti anni senza avermi fatto dei framework è molto probabile non ne conosciate il il termine o quantomeno l'utilizzo intanto vedete che ho zoomato l'applicazione per farvi vedere un po' meglio e soprattutto ho cambiato un po' di cose il routing è di base l'instradamento perciò la possibilità di andare

ad instradare le persone all'interno della nostra applicazione quelle che in un sito Normalmente sarebbero delle pagine perciò Potremmo avere Index HTML per LP page come abbiamo anche qua in react Potremmo avere contatti HTML quindi andiamo sulla pagina contatti abbiamo about Potremmo avere card TR versione 1 card versione 2 eccetera eccetera vedete che qua ho ricreato un qualcosa di simile vedete che intanto Si si sminchia un pochino solo perché la navbar non l'ho messa in alto però notate che tecnicamente sembra che io stia Cambiando pagina in realtà sappiamo bene che react non cambia pagina perché è

un'applicazione single page Tutto avviene ma veramente tutto se io faccio f122 come potrete ben notare elementi Noi siamo qua dentro Io provo a cambiare vedete che non cambia niente se non il div dentro il div cambia qualcosa si vede ma la pagina è sempre la stessa non viene ricaricata quindi per routing intendiamo esattamente questo L'instradamento degli utenti su quella che in realtà è un'applicazione single page Come andiamo a simulare la presenza di più pagine in una applicazione single page tramite appunto il routing ora potete fare dei siti come ho fatto io ma in realtà Se

mettete sta cosa qua in verticale a sinistra potete tranquillamente creare una Dashboard quindi la applicazione single Page per eccellenza quando Pensiamo ad un'applicazione single page web eccetera Pensiamo a quello menù generalmente sulla sinistra e poi selezioniamo e Cambia solo la parte a destra se imparate questa cosa qua fare una Dashboard non sarà poi un problema quantomeno a livello di layout e di instradamento detto quindi tutto ciò vediamo che cosa ho fatto a livello fisico quindi a livello front-end e poi analizziamo passo passo tutto quello che ho fatto non ho scelto la strada il fare con

voi passo passo perché solo per Preparare sta lezione Io ci ho messo 20 minuti mezz'ora a capire come fare tutte le cose bene come mostrarvele passo passo eccetera Se avessimo fatto dal progetto che avevamo l'avessimo tramutato in questo non solo vi sareste persi Probabilmente perché ci sono stati un po' di passaggi che ho dovuto fare per rifatturazione quindi mi avreste perso lì ma soprattutto ci avremmo impiegato una vita probabilmente un'ora un'ora e mezza tra metti Aggiungi togli Nascondi Elimina e quant'altro perciò vediamo insieme allora questa era la nostra homepage giusto avevamo il nostro conteggio avevamo

il nostro form e le nostre card molto bene le card sono scomparse sono in un'altra pagina Questa è la home page Se clicco Home continuo a tornare qua poi ho contatti ho fatto semplicemente un'altra pagina per far vedere che posso creare una pagina diversa Così come ho fatto about vedete guardate qua in alto continuo a cambiare Tra contatti e about vado in Home torno nella home page molto bene Quindi niente niente di che da questo punto di vista abbiamo solo creato delle altre pagine Dopodiché ho spostato le card come vedete qua dentro pagina con tutte

le card con link a sottopagina che cosa voglio dire voglio dire che in card versione 1 guardate qua in alto ho Cards Se premo potete vedere anche qua sotto il link ho cards sl0 che è l'ID della card Se premo vedete che son finito a Tokyo sono in Cards sl0 che è l'ID di Tokyo torniamo indietro premo uno ho New York questa cosa qua è dinamica come vedrete non è fatta da me Io non ho creato la pagina 0 1 2 3 4 sono tutte dinamiche Quindi abbiamo creato un instradamento che è dinamico non solo

perciò abbiamo la pagina contatti about che sta lì non solo abbiamo card versione 1 ma a prescindere da quante card abbiamo possiamo andare a vedere la card nella sua specifica pagina Ragionatore sul video effettivo il modo in cui si fa quella roba lì è esattamente il modo in cui ho fatto questa pagina arriviamo poi alla versione 2e e adesso premo vi faccio vi do un attimo di suspense Perché Perché quello che vi voglio mostrare qua sotto è l'utilizzo di un outlet eccetera che vedremo a brevissimo Cosa vuol dire ma in realtà il risultato è il

seguente vedete vado a De zoomare un pelino cosa sto facendo vedete che abbiamo il Risultato esattamente in pagina anziché perciò andare a creare per forza un'altra pagina a volte potrebbe essere pensate a telegram o a discord molto spesso voi cliccate su una porzione di menù o su qualcosa e avete il risultato qua vicino quindi una parte del Qua abbiamo un problema perché vedete ci manda un'altra pagina non non l'ho fatto così bene C'è un bug ma non è un problema avrei potuto mettere Un solo elemento eccetera L'importante che mi Interessa è il concetto Perciò questa

parte così in realtà Andava fatta un pelino meglio ma quello che mi interessa è il concetto di avere gli elementi che vengono Mostrati come dettagli dove qua dentro nella stessa pagina anziché dover per forza andare in una nuova pagina quante volte su un'applicazione desktop o web avete aperto e vi Aprire la nuova pagina No ma non me le potevi mostrare a destra o a sinistra non me lo potevi far vedere cioè anziché continuare a fare Così non me lo potevi far vedere semplicemente a lato ed è quello che stiamo facendo in realtà non è a

lato ma è sotto ma il concetto è esattamente lo stesso Perciò torniamo al 100% e spostiamoci dove sul codice Ma prima dobbiamo andare a scrivere react router attenzione che è la libreria che utilizziamo per fare questa cosa ci semplifica la vita se andate qua avete tutte le varie feature che Potete utilizzare avete il tutorial e potete Eventualmente senza di me valutare questa pagina perché ci dà molte più cose che non riusciamo a vedere in questa lezione altrimenti andremmo veramente un'ora 2 ore e quant'altro quindi questa è tutta un'altra libreria e vedete che c'è molta roba

e meriterebbe molto di più di così una cosa che ad esempio non vedremo che potrete aggiungere voi banalmente sonoo gli errori 404 perciò io vi faccio vedere tutta la parte vi faccio vedere La parte più corposa Soprattutto quella che potrebbe essere più complessa eh con il vedete i routing automatici ma anche quelli innestati Questa è la parte che mi interessava di più perché sono quelli più complessi da capire Poi tornate qua guardate e una volta che avete capito la parte complessa guardare le piccole chicche Diventa molto semplice perciò torniamo indietro e andiamo ad aprire il

nostro codice quello che vedete è un po' complesso che cosa è successo innanz Tutto è comparso qua nei componenti vedete questa navbar.js X Ah giusto Scusatemi prima cosa da fare è installare giustamente non fatevi fregare npm Install react router Dom quello che c'è dopo a noi non ci interessa semplicemente perché qua ve lo installa se seguite tutto questo tutorial ma noi lo utilizziamo solo come punto di riferimento Quindi in realtà il minimo da avere è react router Dom fatto ciò cominciamo a lavorare con ciò che ci Con ciò che ci offre E cosa ci offre

la possibilità appunto di linkare queste presunte pagine questa cosa che vedete qua in alto altro non è che il componente navbar e adesso ve lo dimostro quindi torno indietro ho creato questo componente navbar lo conoscete function navbar ci ho messo dentro un Return ho messo dentro una hul Vedete qui una cosa strana anziché esserci un ahref come potreste essere abituati a vedere in in HTML abbiamo un link questa Cosa qua ve la spiegherò perché perché arriva con react router Dom Però intanto avete visto che questa navbar in realtà è questa dopodiché sono andato in non

main js Scusatemi ma sono andato in app jsx ad esempio vedete in app abbiamo Eh facciamo home e vedete che abbiamo la navbar abbiamo la navbar il conteggio e il form se apro abbiamo navbar conteggio che era example vi ricordate E poi card form se andiamo a prendere about in about abbiamo la navbar e poi abbiamo Class name H1 vedete qua con scritto poi pagina about stessa cosa contatti Quindi qui in realtà contatti about niente di che Sono banalissimi componenti le pagine nuove sono semplicemente componenti non sono pagine vere sono dei componenti che vengono Mostrati

quando finiamo su slash contatti e poi lo vedremo meglio benissimo quindi poi ho creato Eh Come si chiama la pagina Cards dove vado a mostrare tutte le card vedete pagina con tutte le Cards con Link in sottopagina la sottopagina è questa e l'ho chiamata card poi adesso la vedremo meglio il componente Card che utilizzavamo per mandare a schermo effettivamente le card l'ho chiamato card item Giusto per non confonderci con Card jsx che è la pagina della singola card molto bene Quindi card item era card è stata convertita vedete Quante piccole cose abbiamo fatto abbiamo dovuto

fare o Anzi ho dovuto fare per rendere il codice usufruibile capibile Scalabile quindi Insomma ci saremo rimasti veramente una vita dopodiché abbiamo Cards Children che è l'equivalente di Cards ma l'ho chiamato children perché perché perché abbiamo visto che le card compaiono nella stessa pagina va bene card form è sempre il card form praticamente non ci interessa Eh navb adesso la guardiamo app.js Sì c'è la navbar qui non non ci interessa particolarmente quello che in realtà mi interessa è partire da main Jsx Allora una volta che abbiamo installato eh react router Dom abbiamo accesso ad una

vagonata di roba e questa vagonata di roba Ci serve appunto per creare la struttura per far cosa per per mandare a schermo appunto i componenti come se fossero pagine Come facciamo a farlo andiamo a creare una const router in cui utilizziamo create browser router che ci viene gentilmente regalato da react router Dom è una funzione e qua dentro prende un Array di oggetti va Bene questo Array di oggetti altro non sono che i singoli routes quindi le singole strade non userò più il termine Route magari le chiamerò strade perché perché stiamo inrad le per persone

giusto Assolutamente sì e capite che è molto molto molto semplice per ora poi scendiamo ma vedete che abbiamo slash niente che è la homepage dove ci porta su App o potremmo chiamarla homepage nessun problema dopodiché abbiamo slash about dove ci porta sul componente about Che era quel componente che ho scritto sei nella pagina about Dopodiché ho creato slash contatti giusto per far vedere che questa cosa la possiamo duplicare all'infinito e per creare una sorta di sito Poi abbiamo slash Cards dove abbiamo tutte le card molto bene abbiamo poi la singola vedete che qua c'è il

componente Cards qua invece abbiamo il componente card perché andiamo a vedere se io vado su Cards SL Cards mi manda sulla pagina con tutte le Card Se premo mi manda su Cards slid ma il componente richiamato è la pagina singola della card Ok Ripeto si poteva fare un po' meglio questa parte qui ma mi tornava comodo e veloce per farvi vedere il concetto perché perché abbiamo Cards e card rir regioniamo un attimo allora slash Cards mando la pagina Cards in realtà potevamo chiamarla single page card Insomma se trovate dei nomi un po' più di valore

o che vi aiutano di più Utilizzateli non è un problema per ora ho fatto così slash Cards abbiamo tutte le card slash Cards con card ID che sarà 0 1 10 100 1000 quello che volete ci porta su che componente sul componente card quindi la singola card ma non il il componente rettangolare non ho tutta la pagina con tutti i dati di quella carta potevamo chiamarla detail page Se volete CTI detail page avrebbe avuto forse molto più senso anziché Cards poteva essere Cities E questa sarebbe stata City con Cities SL City ID va bene Giusto

per essere specifici con le città ma volevo chiamarla Cards perché perché che mandavamo a schermo tante card E lì invece la singola piccola scelta giusto per tenere le cose un po' generalizzate il mio consiglio è di lavorare lo dico per voi già con le con le città perché è una cosa del genere poi l' applicate per le città per gli utenti per i canali YouTube per quello che volete E allora cosa facciamo abbiamo Path che è sempre Slash Cards slash riesce a capire col due punti qua davanti è una cosa comunissima backend frontend quando si

fa routing è comunissimo abbiamo questo due punti che indica un parametro questo qui è il parametro lo andremo a chiamare cardid lo prenderemo come cardid e stiamo dicendo Guarda che dopo Cards a questo URL a questo percorso c'ho il parametro card ID dovrò far riferimento a quello dopodiché abbiamo la pagina Cards children Cards children L'ho chiamata card children perché perché ha dei children ha dei figli è quella pagina rivediamola dove se io vado a premere mi compaiono dei figli in pagina quindi la descrizione di Tokyo effettivamente dove mi compare nella stessa pagina come se fosse

un figlio e allora l'ho chiamata Cards children giusto per intenderci per far vedere la differenza tra Cards e card ID e poi card children tutto nello stesso posto Vedete come qua Essendo due pagine Diverse la pagina con tutte le card e la pagina con la singola card le ho gestite separatamente più come se fosse un sito che vogliamo posizionare a livello Seo qua invece abbiamo il children quindi è tutto nella stessa pagina perciò avete che in Cards children se premiamo su una delle le card contenute qua dentro che cosa abbiamo abbiamo un altro percorso che

automaticamente Viene aperto nella stessa pagina lo avete visto va bene e allora il percorso sarà esattamente lo Stesso Lo slash viene messo automaticamente non devo metterlo io qua due punti card ID lo stesso percorso si fosse chiamato anche Cards così semplicemente si andavano a sovrapporre le due cose ma se non ci fosse stato questo e lo volevamo fare interno Questo è il corrispettivo interno lo volete fare esterno quello là sopra è il corrispettivo esterno indipendentemente da come volete approcciare la cosa o in un modo a pagine separate o nell'altro Coi dettagli in pagina lo stesso

discorso poi è uguale Abbiamo il componente come Element quindi Path elemento Path elemento Cambia solo il children qua basta basta chiaramente Potreste avere più children perché questo è un Array di oggetti esattamente come è questo qui spero che questa parte non sia molto complessa perché in realtà stiamo solo descrivendo le le varie pagine la parte forse più complessa può essere la questione children dovete solo Farci un po' di pratica e poi i parametri Ma i parametri insomma due punti nome del parametro la cosa va via così è una questione di Se non capite questa cosa

qua è più una questione di approccio a risoluzione del problema perché probabilmente Arrivate o da pure HTML che siete abituati alle pagine fisiche ma qua le pagine fisiche non ci sono non ci sono se arrivate da PHP o cose simili potrebbe essere un po' più PHP nodo o altro Già dal backend Potreste avere molta più familiarità con questa cosa qua ma non preoccupatevi è un concetto difficile perché è un modo di approcciare la cosa che non avete chiaramente mai usato perciò ci vuole pazienza una volta che abbiamo il nostro router chiaramente tutto importato perciò dovete

importare ogni componente che richiamate dovete prendere chiaramente create browser router e router provider perché perché abbiamo react scrip Mode che abbiamo sempre Avuto il provider dello Store che poi vediamo che funziona ancora nonostante il refactor del codice e poi anziché app vedete qua non abbiamo più app abbiamo router provider non dobbiamo più mettere qua app come prima pagina d'entrata Perché Perché router provider che prende come props router che guarda caso è questo ci dice Ok io sono colui che si occupa dell'inr damento Dove stai andando slash Allora ti mando in app slash about E allora

ti mando in about Dico di conseguenza app viene sostituito da questo router provider che è ciò che ci va a fare il provid che è ciò che ci va a fornire il router basta quindi il main ce la siamo cavata così poi questa parte qua sarà molto a vostra discrezione in base al progetto chiaramente una volta che abbiamo fatto il main ci spostiamo nella navbar perché perché voglio essere in grado di spostarmi da una parte all'altra e allora ho creato un componente con una Hul con degli elementi lì ma qua dentro ho preso in prestito

dal react Router Dom l'elemento link il componente link che mi dice guarda non è un href perché href va a puntare a un'altra pagina Noi invece non vogliamo puntare a un'altra pagina ma vogliamo far finta di puntare a un'altra pagina con dei componenti che react router Dom è in grado di capire ti dice Ah questo non è un link vero Sono io che so che quando preme su sta roba devo far finta che sta cambiando pagina E quindi si mette in moto tutta la macchina per far sì che funzioni il to vuol dire verso dove

Quindi da Milano a Torino from milen from milen to Quindi verso dove perciò link verso dove verso il posto in cui dovete andare chiamiamolo Slag abbiamo poi il l'effettivo testo che vedete nel link chiudete e siete a posto qua SL contatti slab SL Cards e SL Cards children niente di che prendiamo poi questa navbar la buttiamo in ogni pagina che ci serve e Adesso card item in realtà non ci serve perché è linkato fuori andiamo a vedere la nostra pagina Cards Eccola qua pagina Cards che vi ricordo che è questa qui Quella che Se premo

punta fuori e allora andiamo a vedere abbiamo la nostra pagina Cards con navbar in alto abbiamo scritto che c'è una pagina con tutte le card abbiamo messo poi la solita griglia l'ho solo trasportata dall'app e ho detto ok Cities Map l'abbiamo sempre fatto card item qua non è cambiato Niente se non due cose la prima cosa è che il card item adesso è wrappato contenuto dove all'interno di link perché Perché è link ciò che ci permette di cambiare da da una pagina all'altra vedete l'abbiamo fatto anche qua quindi io metto il link esattamente lo stesso

discorso degli href su su HTML semplicemente utilizziamo link non possiamo utilizzare href iz zamo link stesso discorso prendo la mia card la butto dentro un link e sono a posto il Link dove punta il link punta a slash Cards SL l'ID della città perché se vogliamo andare su slash card 0 deve essere messo dinamicamente Ok quando io premo automaticamente main dice Ah dove vuoi andare slash Cards in realtà c'è più di così c'è slash card SL qualcosa E allora ti mando in quel qualcosa e adesso lo vediamo nel momento momento in cui capisce che non

è solo Cards ma è Cards più qualcosa sa già che mi deve mandare qua quindi torniamo su Cards E Poi cosa cambia la Key quindi la chiave la Ke pronunciatore dentro Beh perché potrei non voler aver sempre delle card linkate potrei avere semplicemente una card che è lì e se ci premi non deve far niente non è il caso magari ogni Card che abbiamo deve linkare Ma perché rischiare se non siamo sicuri al 100% di avere il link lo metto fuori oppure qua in card Potremmo avere qua un prop is Linked oppure to Potremmo avere

una cosa del Genere to e andiamo a mettere il link e se card item ha questo prop tu allora andiamo in card item E mettiamo il link qua altrimenti mandiamo solo la card i modi in cui possiamo approcciare la cosa sono infiniti ma spetta a ciò che volete fare voi Perciò non vi dovete assolutamente preoccupare Se pensate qualcosa di diverso da me non è un problema la vostra applicazione è diversa dalla mia la mia Innanzitutto è solo dimostrativa la vostra sarà Un'applicazione fatta e finita però è importante che capiate la flessibilità non è che solo

perché io l'ho messo qua allora a vita sarà qua ripeto sempre queste cose perché perché qualcuno di voi si farà trascinare solo da me e se io faccio qualcosa in un certo modo Ah Edo ha fatto così Faccio così Edo Ma perché tu dici così e in un altro video dicono cosà perché va bene anche la stessa cioè perché va bene anche l'altro metodo e tutti gli altri 100 metodi che Potete fare finché va bene a voi ed è coerente con la vostra applicazione con la scalabilità della vostra applicazione potete fare quello che volete va

bene proseguiamo Quindi abbiamo il link alla nostra card quando abbiamo link la nostra card ci manda su SL Cards slid che noi sappiamo che in realtà ci manda sul componente card perciò prendiamo questa pagina card vedete che anch'essa ha la navbar questa va bene perché Perché è una pagina separata quindi va Bene che effettivamente Se premo qua mi manda su un'altra pagina che è effettivamente all la navbar Il problema sta poi nella pagina Children che vediamo dopo perciò abbiamo la navbar dentro abbiamo cosa H1 e tutte le le parti della della C Ma come facciamo

a sapere le diverse parti della città analizziamo cosa abbiamo abbiamo nabar qua in alto nessun problema cioè Siamo solo importando un componente abbiamo use selector nessun problema perché Stiamo utilizzando react redax ormai sappiamo cosa fa e abbiamo questo use params di react router Dom che cosa facciamo nel momento in cui andiamo su questo componente card noi sappiamo che siamo su slash Cards SL un numero giusto Assolutamente sì slash cards SL un numero di conseguenza sappiamo che quel numero è 2e punti card Id il nome non è due punti card ID due punti è per far

capire a react router Dom che quello è un parametro E allora io importo use Params da react router Dom e gli dico guarda che dai parametri mi prendi card ID quindi poi faccio il console di card ID e ottengo effettivamente il numerino E allora andiamo a vedere se io vado qua F12 Andiamo su Console lasciate perdere i Warning ma vedete che abbiamo qua uno se io vado indietro puliamo andiamo qua vedete che ho tre quindi che cosa facciamo tiriamo fuori questo oggetto Adesso vi faccio vedere vedete che questo oggetto è Parigi che è Esattamente ciò

che abbiamo qua E allora chiudiamo un attimo qui ci spostiamo a lato potete vedere come io con Us params tiro fuori il numerino questo numerino che cosa vado a fare Vado a creare una const Cities molto bene o potrebbe essere anche solo City perché in realtà me ne interessa solo una in questo caso ma il discorso è il seguente use selector che cosa voglio fare voglio andare and a prendere Cities nel mio redax giusto nel mio redax Store e Allora dico state Mi vai a prendere state Cities Value che abbiamo già visto e tutte queste

città che tu hai me le filtri stiamo filtrando perciò un Array di oggetti banale JavaScript dove ogni oggetto che si chiama città il City ID corrisponde al card ID quindi di base Vai sullo state del nostro redax No non è qui Scusatemi Vai su Cities tutte queste Vai qui e mi estrapoliamo to String Altrimenti potremmo avere dei problemi e ci viene Estratta la città ma ci viene estratta come giustamente è un Array di oggetti come un Array di oggetti con un solo oggetto potevate mettere qua lo zero e estrapolarne solo una direttamente in realtà volevo

farvi vedere come quello che ci ritorna è un Array di oggetti con dentro un solo oggetto perché non ci sono altre città con questo ID E allora io tranquillamente prendo città che è tutta questa ma ne ho solo uno quindi so che è la posizione zero e dico Ok mi Trovo dove nella città Cities Zero name potevate metterlo qua lo zero potevate già prendere un elemento qua chiamarla questa città insomma gli approcci sono diversi volevo mantenere il discorso di Cities perché l'abbiamo utilizzato fino adesso e allora poi abbiamo Cities Zero visitata non Visitata questa è

di base la card che abbiamo sempre usato L'ho rivista un pochino solo per far finta che questa sia una pagina dettaglio in realtà la base è quella della card Ma Non è questo il problema la cosa che volevo farvi capire è come mi basta premere da una Carda all'altra ed effettivamente vedete com'è dinamica io non ho preparato una pagina per tutte Parigi Tokyo e quant'altro Io ho solo questa pagina in base a cardid io carico la città corretta basta se andate su YouTube e premete su un su un video finite sempre è sempre la stessa

pagina ci avete fatto caso la pagina dei video di YouTube YouTube è sempre la Maledettissima stessa pagina ma nel Player C'è sempre un video diverso il titolo è sempre diverso il canale che la caricato è sempre diverso la data è sempre diversa i consigliati son sempre diversi i commenti son sempre diversi quindi se prendete tre link diversi avete tre video diversi con tre commenti diversi con tre canali diversi e quant'altro Questo è lo stesso discorso adesso che abbiamo visto come creare pagine diverse spostiamoci su Cards Children Cards children segue esattamente la stessa cosa Quindi abbiamo

il fatto che importiamo il link ma importiamo anche questo outlet che non è il posto in cui andiamo a risparmiare per comprare i vestiti ASP che ci sono gli outlet diffidenza Serravalle Brescia quello che è penso si capisca che sono Lombardo Da dove sono posizionato e magari anche dall'accento il discorso è che questo outlet non andiamo a farle compere ma lo Utilizziamo per buttarci fuori i dettagli nella stessa pagina è un outlet una zona in cui buttiamo fuori roba come funziona qui funziona che il link punta sempre a Cards children Mentre qua invece puntava a

Cards Ma nessun problema è semplicemente il modo in cui gestito perché vedete che qua abbiamo Cards children con l'ID qua avevamo Cards con l'ID No non cambia niente a parte il fatto che qua si chiama Cards e qua Cards children per non avere Sovrapposizioni ma il resto è sempre uguale Abbiamo qua la k è di base la stessa cosa ho solo messo Alt un'altro nome qua poteva essere città qua poteva essere utenti il discorso è sempre lo stesso e la differenza sta in due cose la prima è il modo in cui è gestita Ve l'ho

già detto qua Cards e Cards con l'ID sono gestite come due pagine separate mentre invece qua la versione con l'ID è gestita come un figlio quindi vuol dire che ciò che io vado a premere Qua dentro lo manderò a schermo questo componente verrà mandato a schermo in questo componente Quindi vogliamo tutto nella stessa pagina e allora dobbiamo andare a prendere outlet mettetelo dove volete è in rilevante Io l'ho messo sotto lo Potreste avere a lato abbiamo un outlet Quindi io premo su link va su Card children si rende conto che deve restare nella stessa pagina

prende ctd mi prende l'outlet cosa mi butta nell'outlet mi va a buttare nell'outlet Il componente che io ho specificato che è card va bene e card ha suo card ID l'abbiamo già visto come l'abbiamo visto per Cards questo qua è la stessa cosa per card children semplicemente dalla fretta ho gestito tutto con un unico componente potreste farlo meglio perché perché qua abbiamo sempre la navbar Quindi vedete come il fatto di riutilizzare questo componente due volte in realtà abbiamo la navbar dove non servirebbe non è un problema potreste Gestire un qualcosa che se si trova in

card Shield Dren no Car quello che volete lo potete sostituire Potete utilizzare due componenti diversi cosa forse più eh adeguata il discorso è che questo componente viene buttato qua nell'outlet punto Il risultato è ancora questo qua vedete questo è Cards normale questo è card children non importa cosa io vado a premere abbiamo sempre una nuova card e nonostante ho fatto tutto sto giro in realtà vedete che il nostro Stato funziona lo stesso redax continua a funzionare perché Perché ho messo il router dentro lo stato però il conteggio Vabbè succede nella pagina chi se ne frega

la cosa che voglio vedere Davvero è se queste card possiamo aggiungerne di nuove e possiamo farlo perché è questa la bellezza redax non è più legato al componente è legato allo Store che è S stante E allora io vado a scrivere qua Ciao da Edo descrizione bella raga Sono in app che è il componente e faccio Ciao Vabbè C va bene lo stesso la metto come visitata aggiungo card si è pulito esattamente come abbiamo sempre fatto e se io vado in card versione 1 attenzione Ciao da Edo Bella raga Sono in app e faccio cio

mi sposto qua e ho esattamente la stessa roba Se premo vedete che ho la mia card Se premo qua e vado sulla Pag vedete che ho esattamente la stessa cosa tutto in modo dinamico tra Store e routing ben settato abbiamo praticamente finito abbiamo praticamente Finito quindi abbiamo visto come prendere i dati abbiamo visto come fare tutti i vari tipi di layout abbiamo visto non vi ho fatto vedere come fare una Dashboard pazienza Più avanti farò video da due o tre orette dove andiamo a creare applicazioni effettive di react e quant'altro per ora in questo corso

mancano ancora tre video se non mi sbaglio ma tutta la parte l'abbiam visto volete creare le pagine l'abbiam fatto volete creare delle sottopagine Dinamiche l'abbiamo fatto volete creare l'outlet l'abbiamo fatto volete gestire lo Stato l'abbiamo fatto volete aggiungere elementi l'abbiam fatto eliminare elementi l'abbiamo fatto tirare giù dati da internet l'abbiam fatto Insomma tutto quello che dovevate vedere in realtà l'avete già visto Perciò siamo proprio alle battute finali dovete essere orgogliosi se capite questa parte qua il diciamo così il 50% di un'applicazione è andata una volta Che avete il layout e il routing molto di un'applicazione

a a livello visivo è andato poi vabbè c'è il login bisogna proteggere i le varie Route eventualmente con login bisogna poi gestire gli errori Poi ci sono tante piccole cose che vanno fatte ma per un principiante spostarsi di pagine o di sottopagine o avere roba direttamente qua come figlia e avere la gestione dello Store per aggiungere elementi è il 90% di quello che dovete fare io spero Di non essere andato troppo lungo ma presumo che secondo me 25 minuti abbondanti li abbiamo fatti direi di non perdere tempo perché abbiamo ancora pochissimi video per concludere questo

corso Vi ricordo che farò poi un corso avanzato su react sul mio sito cgm.it ma andrò a fare invece su questo canale probabilmente video Come creare una Dashboard in react Come creare una Dashboard in react con redax e cose del genere va bene non perdiamo tempo e ci Vediamo tra poco episodio 23 del corso di react oggi dobbiamo parlare dei Custom hooks quindi la possibilità che ci offre react di crearci i nostri Hook e per ricordarci un attimo cosa sono Ci Basta vedere use selector oppure avevamo Se vi ricordate da qualche parte use state use

reducer Insomma di selector ne abbiamo visti vedete use params e quant'altro E questi Us param e Us selector sono Custom hooks perché che fan parte del react router o react redx Quindi di pacchetti esterni quindi vuol dire che si sono creati i loro hooks da utilizzare però seguono sempre la stessa convenzione che abbiamo visto con gli hooks che ci vengono forniti Effettivamente da react come Us state hanno sempre questo use iniziale Nel momento in cui abbiamo use davanti sappiamo che stiamo lavorando con un Hook che può essere Custom o di react poca Differenza fa per

noi L'importante è che sappiamo che lavoriamo con un Hook E Hook e questo tipo di funzionalità ci permettono di utilizzare della logica sappiamo che use Effect ci permette di utilizzare della logica Us state di utilizzare la logica legata agli stati stessa cosa use reducer e quant'altro perciò la domanda a cosa potrebbe servirmi creare un mio Hook particolare Beh ci potrebbe servire per andare a consolidare in un unico punto della logica che magari andremo a riscrivere più e più volte questo video chiaramente È solo introduttivo nel corso completo e avanzato di react parleremo degli Dei Custom

hooks nel dettaglio come passare i parametri passare eventi eccetera eccetera oggi mi voglio limitare a farvi capire cosa sono i Custom hookes perché utilizzarli e come utilizzarli e vi portate a casa tanto considerato che siete all'inizio di react perciò uno dei motivi per cui potremmo utilizzarli è ad esempio mi vengono in mente due situazioni la prima se vogliamo fare Delle chiamate http pensate abbiamo eh spesso delle chiamate http a un server vogliamo prendere dati quindi andiamo un attimo a prend prendere la nostra pagina siamo nella homepage prendiamo dei dati di vario genere il numero di

utenti gli Analytics dei video oppure Quante vendite e quant'altro Quindi facciamo un po' di chiamate questa logica qua potremmo utilizzarla in use fetch Call ad esempio Us Get data una cosa del genere e quindi possiamo modificarla per Ciascun per ciascuna chiamata che facciamo Voglio gli utenti o i clienti le vendite le fatture messe gli ordini arrivati e quant'altro oppure potremo utilizzare anche solo la chiamata per l'utente specifica quando poi andiamo qua in contatti Prendiamo tutti gli utenti con più roba e quindi vedete come la stessa chiamata per utenti o per più roba l'andiamo a utilizzare

in giro in più componenti però questa logica magari la vogliamo utilizzare in un componente Quando entriamo perciò nelle dependency Se vi ricordate dello use Effect abbiamo perché dentro poi avremo uno use Effect abbiamo l'array vuoto quindi vogliamo lanciare questo Hook solo quando Entriamo nel componente Oppure vogliamo che il componente venga lanciato Scusatemi che lo che lo Hook venga lanciato ogni volta che cambia qualcosa perciò possiamo andare a creare la logica a piacimento e riutilizzarlo dove ci serve anziché scrivere a mano se vi Ricordate la chiamata che abbiamo fatto nel video delle chiamate http che era

a metà corso quindi anziché riscriverla ogni volta ci Basta creare look specifico e semplicemente gli passiamo i parametri che ci servono a ad ogni situazione specifica Quindi questo è un motivo per cui dovremmo utilizzare gli Hook di base quella logica dei componenti che andremmo a ripetere anziché ripeterla andiamo a creare il nostro non components Ma magari una Cartella hooks Facciamo così e qua dentro ci andiamo a creare il nostro Hook specifico che poi importiamo dove vogliamo va bene perciò non siamo limitati a ciò che ci offre react o cercare se ci sono pacchetti già fatti

pacchetti già fatti vanno bene redax router Dom eccetera Ci mancherebbe perché riscrivere roba fatta da altri Assolutamente Però ci sono situazioni in cui alcune cose non sono state fatte da altri per necessità è una cosa nostra Però non ha senso ripetere il codice ci facciamo il nostro Hook siamo a posto ci rendiamo conto che tante altre persone ne hanno bisogno creiamo il nostro pacchetto e lo mettiamo su npm online ad esempio però quelle sono condizioni abbastanza estreme molta roba è già stata fatta ma se trovate dei buchi potete assolutamente contribuire e mandare i vostri Hook

Eh su su npm Quindi questo è più o meno il discorso cosa facciamo noi in realtà a livello di Hook in questo video per far passare il concetto non tanto le chiamate perché poi dobbiamo andare a schermo eccetera eccetera e ci si perde semplicemente andiamo a creare un timer Quindi voglio creare un Hook che andiamo a implementare in ogni componente che vogliamo E cosa succede una volta che entriamo Quindi da quando Entriamo nel componente con la dependencies dell'array vuoto Cosa facciamo fa partire un timer un Interval e ogni Secondo nel console log ci manda schermo

roba è molto semplice questo discorso ma vi fa capire cosa sono i Custom hooks e come farli poi li adeguate le vostre necessità una volta che imparate appunto Il concetto di Cosè è un Custom Hook perché dovrei utilizzarlo come faccio a crearlo poi si adatta velocemente alle vostre necessità detto questo andiamo qua in hooks e andiamo a creare il nostro use counter prova m sì facciamo così a caso andiamo a fare un bel jsx Ecco qua e qua dentro importiamo cosa use Effect di react molto bene e adesso andiamo a creare la nostra function Eccoci

qui mettiamo use counter prova molto bene non passiamo niente perché tanto non vogliamo parametri in entrata Ci limitiamo a fare uno use Effect perché Perché alla fine potevamo scrivere in ogni componente lo vedremo poi use Effect e me lo fai partire mi fai tutta sta roba Ma anziché far questo lo Andiamo a contenere in un nostro Hook così è già tutto fatto quindi vediamo un attimo Seguitemi non dovrebbe essere complesso dovreste sapere cosa sto facendo ma tanto sapete che alla fine poi vi rifaccio rivedere tutto e rivediamo sempre la logica perciò facciamo un bel const

andiamo a creare il nostro eh Interval Potete chiamarlo Interval ID Se volete Cosa andiamo a fare se avete lavorato tanto con gli intervalli eccetera sapete che andiamo a Prendere un riferimento Perché Perché poi nel caso vogliamo pulirlo dobbiamo avere un riferimento Se scriviamo solo set Interval diventa poi difficile da da pulire quindi set Interval e qua dentro andiamo a fare la nostra colb e ogni secondo andiamo a fare quanto c'è scritto dentro i secondi si scrivono in millisecondi poi vediamo tutto Non preoccupatevi per chi magari è un po' più indietro con con le conoscenze const

Random number oppure numero randomico Se Volete scrivere in italiano in inglese quello che volete abbiamo Mat Flor e andiamo a mettere il nostro numero randomico Mat Random Ecco qua e me lo prendi Mat Random per 100 Ecco qua per 100 molto bene Adesso mandiamo a schermo UPS ho sbagliato qualcosina perfetto ma andiamo a schermo un bel console.log di cosa di Random number andiamo poi a fare un Return per eventualmente pulire poi il eh l'intervallo appunto in modo che non Vada avanti all'infinito quindi Clear Interval Facciamo così abbiamo Interval ID molto bene e poi dobbiamo semplicemente

mettere una virgola qui e f così e abbiamo il nostro componente si tratta poi di esportarlo quindi Export default e lo chiamiamo use counter prova Allora prima lo utilizziamo quindi ci spostiamo dall'altra parte Andiamo in contatti andiamo in contatti molto bene importiamo Import eh use counter prova Ecco qua e adesso Ci mettiamo qui e facciamo indovinate un po' use counter prova noi Salviamo andiamo a vedere il risultato qua non succede niente vedete che non succede niente Vado in contatti vedete che parte 80 69 quindi Random number ogni secondo abbiamo un numero casuale vedete Quindi ogni

secondo use counter prova sta faccendo quello che vogliamo mi sposto su about vedete che non continua più perché è stato pulito mi sposto su Card versione 1 non succede niente Vado in Home non succede niente Vado in contatti continua perfetto riparte in realtà da da zero torniamo di qua andiamo sul codice e vediamo che cosa abbiamo fatto quindi questa è la facilità con cui abbiamo creato un Custom Hook e andiamolo a vedere allora use counter prova use l'abbiamo messo davanti perché Perché per scrivere un Hook diciamo use in modo che tutti sappiamo che stiamo utilizzando

un Hook creato da noi fornito da react è irrilevante si vede Dal nome counter prova che molto probabilmente non è fornito da react E che cosa facciamo qua dentro andiamo a fare uno use Effect perché in realtà noi sta roba vi faccio vedere potremmo tranquillamente metterla in about senza fare tutto quel giro di cose abbiamo qua use Effect vado a importare Import use Effect Ecco qua from react mi sposto facciamo pulizia vado in about che prima non c'era vedete qua in about mi sta facendo la stessa cosa mi sposto In contatti non me lo fa

più about Ma me lo fa use counter prova che cosa sta succedendo È molto semplice abbiamo creato qua una logica in about con use Effect che conoscevamo e abbiamo detto senti ho bisogno di fare Ho bisogno di gestire un effetto collaterale quindi non riguarda il componente Cioè è dentro il componente Ma è la logica del componente non è ciò che viene mandato a schermo perciò devo utilizzare use Effect son cose che abbiamo già visto Dentro questo use Effect che cosa facciamo Innanzitutto quando parte questo use Effect questo use Effect parte esclusivamente vedete le dependencies non

è che non c'è niente Perciò ogni volta che viene aggiornato parte ma me lo fai partire la prima volta benissimo l'abbiamo vista sta roba Che cosa succede qua dentro questo è banale già JavaScript quindi non abbiate paura succede che io vado a settare un intervallo e uso JavaScript quindi set Interval è puro JavaScript e dico Ehi ogni secondo mi devi eseguire sta roba e che cosa mi Esegui con Mat mi vai a prendere un numero tra tra 0 e 100 vedete mi vai a prendere un numero tra 0 e 100 me chiaramente me lo vai

a arrotondare Mat Floor non voglio neanche i i numeri dopo la virgola non mi interessano Ho il mio Random number e lo mando in console Log e lo faccio ogni secondo lo vado ad associare ad intervalli D semplicemente perché quando Esco dal componente voglio che venga pulito l'intervallo se io non vado a fare sta roba vi faccio vedere io Salvo Salvo Yes torno su about puliamo torno su about vedete che sta partendo Vado su Card versione 1 e continua quindi quel Return lì ci serve per dire cosa ci serve per dire Ehi signori Guardate che

qui abbiamo un problema quindi puliamo tutto torniamo su about Ecco qua che va e usciamo perfetto Non ho salvato torniamo aggiorniamo about Ok torniamo Indietro perfetto vedete che adesso ha funzionato ci è bastato aggiornare quindi di base io use Effect all'inizio quando entro nel componente dico guarda creami un intervallo ogni secondo mi mandi in console un numero randomico semplicemente te lo associo ad una variabile in modo che quando esco dal componente me lo pulisci e non succede altro quello che abbiamo fatto qua dentro è maledettamente semplice sono cose che conosciamo usef da react e L'interval

semplicemente da da JavaScript abbiamo poi associato questa parte per dire Guarda Puliscimi l'interval che è puro JavaScript però legato al componente basta ora se io volessi avere questa roba di codice che vi ho appena spiegato anche su Contatti cosa avremmo dovuto fare avremmo dovuto prendere copia incolla Lo fai un'altra volta giusto perfetto qual è il problema Che non possiamo stare a scrivere ogni volta oppure copiare e incollare la Stessa roba innanzitutto Che palle ma poi abbiam detto leggibilità di codice ho aggiunto cosa sono 10 righe per nessun motivo perché mi sono andato a ripetere e

soprattutto poniamo il caso che sia about che contatti dobbiamo andare a cambiare la stessa funzione da un secondo ogni 2 secondi oppure Mat Random non è più da un da 0 a 100 ma è a 1 milione vuol dire che io devo andare in tutti i posti in cui ho modificato questo e dire Ehi devo modificare questo Mi devo assicurare che l'ho fatto su ogni componente devo controllare che l'ho fatto su ogni componente che sia stato cambiato che non ci sono errori eccetera Allora cosa facciamo diciamo Scusatemi ma anziché riscrivere tutta sta roba ogni volta

ma perché io non posso andarla a mettere in un mio in una mia funzione di base mi faccio una mia funzione a parte di logica del componente che in questo caso su react si chiama Hook E allora io vado a Crearmi il mio Hook che dice Guarda voglio usare il mio Counter di prova punto dentro faccio la stessa roba ma io richiamo semplicemente questo E allora in contatti ho chiamato questo e fa esattamente la stessa cosa di about semplicemente adesso se io vado ad aggiornare qui e salvo che cosa succede innanzitutto devo importarlo quindi Import

use counter prova se io adesso vado a cambiare qua dentro e dico no me lo fate ogni 2 secondi riporto indietro Perché voglio ogni secondo in modo che si veda Ma se io vado a cambiare ha effetto su tutti non sto a r a r a ricalcare su il fatto di dover il più possibile andare a centralizzare le parti di codice ormai penso che con abbastanza ore tra HTML CSS e JavaScript e react e forse qualcos'altro sapete cosa vogliamo fare ma alla fine gli Hook sono questi un di base in questo caso per use Effect

una sorta di contenitore che dice guarda non sto a riscrivere Tutto un'altra volta mi faccio il mio Hook uso questo sono a posto la stessa cosa la potete applicare per le chiamate http oppure pensate abbiamo fatto il routing eh pensate il caso se alcuni di questi link non possiamo passare se sono eh se non siete loggati al momento non abbiamo visto altri modi per farlo Quindi vuol dire che per come abbiamo o non abbiamo imparato tutto il il router che cosa avremmo fatto su ogni pagina about avremo controllato con un use Effect prendimi il local

storage se c'è dentro il token dell'autenticazione allora va tutto bene altrimenti mi rimandi mi fai un Navigate dove mi fai un Navigate magari all'App al componente app Ok devo farlo su 30 link Eh come faccio scrivo a mano ogni volta use Effect solo all'inizio Prendimi per favore local storage Verifica se è online se non è online Rimandami No andiamo a fare un banale Hook che dice guarda prendi il Local storage Controlla se c'è il token se c'è il token è tutto a posto Se mi mi rimandi potresti fare un Return di is online oppure is

online True altrimenti is online false Chi è qua dentro entro if is online false mi rimandi dall'altra parte Basta Va bene quindi Custom hooks sembrano Chissà che difficoltà a livello basico sono semplicemente questo chiaramente li possiamo complicare di più ma non è la sede in cui voglio trattarlo perché siamo alla fine Praticamente del corso voglio solo lo sapete come sono i miei corsi qua su YouTube voglio darvi l'infarto giustamente per cominciare a lavorare avete praticamente quasi tutti gli strumenti per cominciare a fare le vostre applicazioni Avete tutti gli strumenti di react no ovvio che non

li avete Ma avete l' 80% di ciò che vi serve per fare la stragrande maggioranza di quello che volete fare quando poi volete approfondire avete altri tutorial Andrò a fare i video da 2-3 ore per le applicazione da seguire ci sono altri canali c'è la documentazione altri corsi eccetera e poi andrò a fare il corso completo e avanzato su cgl.it E allora lì sì che andiamo a stressare ogni singola parte Ma quei corsi son pensati son pensati per persone che non hanno paura di prendere 20 30 o più ore mettersi lì studiare eccetera va bene

questo è quanto non abbiamo ancora finito perché nel prossimo video vediamo Come fare il deploy della nostra applicazione react non è una bellissima applicazione Ma dobbiamo capire come metterla online Ci vediamo tra poco episodio 24 del corso di react oggi vediamo come fare il deploy della nostra applicazione deploy vuol dire andare a prendere la nostra applicazione che siede in locale sul nostro computer dove possiamo lavorare in tranquillità e metterla attivamente in produzione Ci sono tantissimi servizi e tecnologie che Possiamo utilizzare per fare il deploy ci sono tanti metodi tante regole che possiamo seguire per lavorare

bene e quant'altro Oggi vi faccio vedere la parte essenziale poi quando farò un corso effettivo su netlify parleremo di netlify nel dettaglio andrò a parlare nel dettaglio di github ho già un corso di Git perché ci servirà in in questo video Quindi andate a vedere Git Necessariamente ma poi farò su cgr.protezionecivile.it un corso che si Chiam eh web developer masterclass dove andremo a vedere le differenze tra i vari siti quindi ssr dinamico statico eccetera netlify versel firebase come deploy come fare tutto insomma quello sarà un corso dove si passa appunto dal locale all'online con tutto

quello che bisogna sapere detto questo oggi ci limitiamo a utilizzare netlify abbiamo due metodi in cui lo possiamo fare il primo metodo che è quello semplice banale vi fa faccio vedere come farlo ma Non lo facciamo quello che ci interessa è fare il percorso serio Quello che probabilmente userete al lavoro o per progetti seri con amici o anche solo per vostri progetti quindi questo è quello più importante Allora prima cosa che serve è Account github gitlab oppure bitbucket ed è la cosa migliore perché perché sono i servizi che sono supportati per loggarsi facilmente su netlify

Io sono già loggato perciò prendo un altro browser se faccio login Vedete che abbiamo github gitlab o bitbucket possiamo anche utilizzare l'email eccetera meglio avere uno di questi tre perché ci servirà per i repository fate l'account con questo lo collegate ed è semplicissimo Non riesco a farvi il giro perché perché c'ho già l'account sfrutto già questo quindi molte molti singoli passaggi ve li devo far saltare Ci sono video online io non li ho ancora fatti singoli su come creare gli account eccetera Potete Farcela tranquillamente so che ce la potete fare quindi il primo step è

far cosa è creare un account github gitlab o quello che volete vi iscrivete e avete un qualcosa del genere con i vostri repository andate su repositories e qua in altro fate New io ho dovuto rir registrare questo video Perciò l'ho già creato Voi andate su New e andate a mettere qua il nome del vostro repository corso react va assolutamente bene pubblico privato non ci interessa Eventualmente aggiungete un ritmi come file di informazioni è o non è necessario non ci interessa create il repository una volta creato il repository vi trovate una cosa simile a questa Ma

non avete tutti i file perché io ho già è la seconda volta che rirgi ho già pushto non preoccupatevi il vostro sarà praticamente vuoto ci sarà ritmi con scritto di base niente ed va bene così Vuol dire che il vostro repository è vuoto questa cosa sarà Simile anche su bitbucket oppure su gitlab chiaramente ogni servizio ha il proprio modo di fare le cose non preoccupatevi una volta che abbiamo il nostro repository assicuratevi di prendere il link qua in alto dentro repository quindi github.com il vostro username SL il nome del vostro repository perché perché adesso andiamo

su Visual studio code dove probabilmente non avete inizializzato un Repo di Git lo vedete qua in basso se non avete main Non lo avete inizializzato Come si Inizializza È molto facile Git init dove init sta per adesso cosa fate fate un Git status per vedere lo stato del vostro Git vedete Io qua ho sistemato tutto perché Perché è la seconda volta che registro perché ho sminchiato il video precedente voi doveste avere tanto rosso tanti file Rossi che sono i file su cui abbiamo lavorato nessun problema Andate qua e fate Git Add tutto a sto giro

Se non Capite quello che vi dico mio corso indietro di Git tipo un'oretta al massimo di introduzione in modo che capiate non posso tornare indietro su questi concetti di base con Git status vi faccio un'introduzione super veloce vediamo quali sono i file che dobbiamo aggiungere o che abbiamo modificato con Git ad punto diciamo guarda Aggiungimi tutti i file che ho modificato a repository Cioè tutta sta roba qua la voglio aggiungere col punto Diciamo Tutto altrimenti potreste aggiungere solo singoli file fate invio Dopodiché andate con un bel Git Commit - m dove m sta per messaggio

E scrivete il vostro Commit potrebbe essere primo Commit con Edoardo Insomma quello che volete fate invio e di base avete committo i vostri salvataggi vuol dire che qua dentro nel vostro Git in locale potete tener traccia dei cambiamenti del codice adesso la cosa che dobbiamo fare in realtà è prendere il nostro Git in Locale e spararlo come ho fatto io qua su github E allora andate a prendere Fatemi riprendere il comando abbiamo questo Git remote ad Origin e il link che vi ho fatto copiare va bene Una volta fatto andate a mettere Git Branch TR

set-upstream tr2 UG Origin main Quindi vogliamo far riferimento che il Branch che stiamo utilizzando qua in locale il main deve essere sincronizzato con il main dell'origine il main dell'origine è Il main che abbiamo qua in alro vedete Questo è il main di github una volta che abbiamo fatto questo andate a fare un bel Git Push Ups Scusatemi c'era ancora quello di prima Git Push Origin main Se per caso vi rogna per un qualche strano motivo Chiudiamo un attimo gli occhi Facciamo una cosa forzata con Git Push sempre Origin main ma tro- Force vuol dire che

stiamo forzando sta cosa tanto è un progettino del cavolo vedete e soprattutto è un repository vuoto Perciò Va assolutamente bene Fate sta cosa fate invio e improvvisamente Fatemi chiudere qua improvvisamente vedrete che se aggiornate Vi si è riempito il repository esattamente come me quindi abbiamo fatto la nostra parte legata a github adesso Andate qui fate login oppure Sign up andiamo a vedere dall'altro browser facciamo Sign up fate Sign up comunque con gitab gitlab o quello che volete In questo caso è github nel momento in cui fate Sign up Vi chiede di collegare automaticamente il vostro

account github su cui dovete essere già connessi Perciò vi comparirà qua sul vostro browser e dovete solo fare connetti siete a posto la la stessa cosa in realtà potrebbe chiedervelo fate il push su github da qua in locale vi chiederà semplicemente di fare il login col browser voi fate Ok vi apre automaticamente il browser su cui avete github collegate e siete a posto niente di che se avete bisogno di sto video Specifico chiedetemelo Una volta fatto ciò molto semplicemente avrete il vostro account Eccoci qua andate su Sites e fate Add New site ma vedete che

qua abbiamo un'altra cosa interessante che è want to deploy a New site without connecting to Git In sostanza non c'hai sbatti di utilizzare Git Drag and drop il tuo site output Folder Che cos'è il site output Folder noi non ce l'abbiamo e dobbiamo generarlo quindi questa è la versione Facile sminchia se volete F le cose alla svelta la versione con Git che vi sto mettendo in in Place in moto è per F le cose fatte bene ma facciamo un attimo questa parte senza Poi completarla se vogliamo trascinare qua dentro la cartella del nostro progetto ci

basta andar qua andiamo su eh Pack Jason e quello che vogliamo fare noi è la Build Quindi vogliamo che tutto questo progetto venga buildato Perciò noi facciamo un bel MPM Run Build vado qua In alto perché adesso vedete che comparirà una cosa aggiuntiva faccio invio vedete che sta Build quindi building for production vi ho già detto questa parola production prod vedete che ha finito e qua in alto è comparsa la cartella dist la cartella dist è la cartella che dobbiamo poi utilizzare perciò prendete Questa cartella e tasto destro Visualizza in Esplora risorse prendete la cartella

dist UPS questa qua e la trascinate qua dentro Io non lo Faccio perché Perché è abbastanza facile vedere cosa Sta per succedere e voglio farvi vedere il procedimento quello lungo il procedimento quello non tanto giusto ma quello che vi risolve tanti problemi perché Perché adesso se poi voi fate delle modifiche e volete ancora aggiornare il vostro sito dovete fare un'altra build prenderlo ancora trascinare aggiornarlo eccetera Noi invece vogliamo fare un qualcosa di automatico perciò Add New site Import an Existing Project che è quello che ci interessa vedete deploy manually qua dentro Star from template non

ci interessa Import an existing Project e come vedete attenzione da dove vogliamo deploy Azure Questo è quello di Microsoft bitbucket Club oppure github noi selezioniamo github ci chiede di collegare github a netlify io autor perfetto molto bene Siamo autorizzati Install Perfetto Adesso vedete che avendo connesso l'account fittizio di Github e netlify ho il mio repository ne potrei aere di più io seleziono corso react se scorro vedete che abbiamo Branch to deploy main che è quello che ci interessa Non abbiamo altri Branch ma quello che ci interessa è proprio il main la roba che è nel

main Che vuol dire principale quella che deve finire in produzione la roba che è su Dev deve finire in testing tutti gli altri non devono finire da nessuna parte Generalmente per convenzione quindi fa MPM Run Build che è ciò che abbiamo fatto noi la cartella è quella dist Quindi in sostanza Net rfy sta andando a eseguire lo stesso procedimento che abbiamo fatto nel locale che cosa è andato a fare va a prendere il comando MPM Run Build che è quello che abbiamo fatto noi se ci fate caso Ecco qua MPM Run Build Dopodiché va a

prendere la cartella che viene generata che è la dist e vedete che qua abbiamo dist se cambiate ste cose Diteglielo nfy è Fondament Ale una volta che avete fatto questo Possiamo aggiungere variabili d'ambiente ma non ne abbiamo E allora deploy corso react non ci serve nient'altro non ci serve nient'altro deploy corso react Aspettiamo che finisca vedete che lo sta creando site deploy in progress qua dobbiamo aspettare vedete qua sotto abbiamo la il deploy vedete era in uploading adesso è in published se io premo abbiamo il nostro progetto online vedete Esattamente quello che abbiamo fatto esattamente

quello che abbiamo fatto ma è online lo vedete che è soft Lollipop bla bla bla nfy basta l'abbiamo sistemato ora come aggiorniamo una cosa del genere voi vi chiederete è molto semplice andate a fare delle modifiche lavorate fate modifiche ad esempio andiamo qua about Cambiamo il nome da About a qualcos'altro perfetto andrete a fare Git status vedrete se ci sono delle cose da Commit al momento ci dice che il Nostro Branch è in linea con Origin Main Ma nel caso andate a fare un Git ad punto andate poi a fare un Git Commit - m

modifica del testo in pagina about questo qua è sono un messaggio per voi fate invio una volta che avete committo fate un bel Git Push Origin Origin main nel momento in cui mettete main verrà Push dove sul Branch main attenzione Branch main che è quello che è collegato attenzione vedete qua main è quello che è collegato con Net se voi Push su Dev Su Pippo Pluto Carlo e quello che volete non succede niente perché noi abbiamo connesso esclusivamente il main quindi Ricordatevi che il Branch main del vostro giub del vostro repository è collegato a netlify

se voi Push lì automaticamente riparte il production deploy e avete poi il sito aggiornato fa tutto in automatico Questo è il percorso che volete creare per fare un un miglioramento automatico del sito la gestione automatica eccetera queste sono Cose importanti da fare basta Questa è la base per deploy su netlify un'applicazione react ci sono tanti altri modi possiamo utilizzare firebase versel Insomma ce ne sono tanti altri per il momento col deploy dell'applicazione react abbiamo concluso questo corso lo andrò poi ad aggiornare andrò poi a aggiungere altre cose eventualmente su richiesta andrò a mettere intenzione di

mettere video un po' più grossi dove facciamo insieme Applic izioni ma soprattutto come vi dicevo andrò a fare poi il corso avanzato su CoD grin.it Per quanto riguarda Cod grind e poi continueremo sempre coi corsi avanzati di typescript di typescript bootstrap tailwind e anche il masterclass di frontend developer Quindi questo è quanto io spero che questo corso sia stato utile l'obiettivo lo sapete su YouTube è darvi la maggior parte di ciò che vi serve alla svelta per cominciare e andare avanti per Vostro conto Se volete di più e volete che io vi tenga per mano

e in ogni singolo Step c'è il mio sito cgm.it noi ci vediamo nel prossimo corso alla prossima e un abbraccio ciao ciao