JavaScript è naturalmente diventato famoso per lo sviluppo front.

Come dicevamo, anche Nell'introduzione è nato proprio per lo sviluppo front-end.

Poi si è evoluto per fare mille altre cose, naturalmente, ma il contesto dello sviluppo front-end è rimasto e naturalmente i framework, ovvero quella serie di librerie, pattern e regole da seguire per creare interfacce utente lato front-end, si sono evoluti notevolmente negli ultimi anni.

Sicuramente il framework più popolare ad oggi si chiama relax relax, è un framework reattivo e vedremo immediatamente cosa significa che è stato creato da Facebook proprio per agevolare i suoi sviluppatori nel creare delle applicazioni molto complesse in una maniera molto più più semplice, o almeno il più semplice possibile.

Poi il fatto che Rick sia semplice oppure no, possiamo discuterne quanto volete, naturalmente, ma dopo un po' di esercizio diventa abbastanza abbastanza simpatico da usare, diciamo così per inizializzare un nuovo progetto che ci sono miliardi di modi, alcuni anche molto complessi.

Per cui il mio Consiglio di utilizzo, quello che si chiama Craigh Re Act up, ovvero uno script che è stato creato dai creatori di relax direttamente, che ci crea quello che si chiama un boiler plight code, ovvero un esempio di codice già pronto.

All'uso possiamo farlo utilizzando ancora una volta Mpx Craig, Real Act Up e il nome dell'app che vogliamo creare.

Facciamo ad esempio Learner recht.

Ci vorrà qualche minuto per installare tutti i pacchetti.

Non vi preoccupate, anche con una connessione internet velocissima.

Purtroppo ci vuole un pochino di tempo almeno la prima volta che installate tutti questi pacchetti.

Una volta installati tutti i pacchetti, come potete vedere se tutto va bene, naturalmente, ma dovrebbe vedrete un asset Created Burnett e il percorso della cartella dove appunto avete installato tutti i vari pacchetti insider Hector Quindi questa che vediamo qui in alto puoi far girare i seguenti comandi Possiamo eseguire i secondi comandi, quindi il PM start, il eccetera ma adesso li vediamo.

Prima di tutto entriamo nella cartella che abbiamo appena creato, Quindi Lerner React apriamola col nostro editor di testo preferito.

Vediamo subito cosa ci troviamo davanti un file Redmi punta MD.

Quindi fai il formato March Down che ci spiega un po' come utilizzare tutto quanto il voler Platt code che abbiamo appena generato.

Molto utile.

Se è la prima volta che installate, vi consiglio vivamente di leggerlo nel file package Jayson.

Vedete tutte le varie dipendenze che possono servire e degli script già pronti.

All'uso.

Proviamo subito con start ne PM Run the Start.

Come vedete verrà lanciata automaticamente una scheda CROM in cui andremo a vedere una preview dell'applicazione che stiamo sviluppando.

Naturalmente non sarà velocissima perché è in modalità sviluppo ed essendo modalità sviluppo, anche gli script che la compongono magari non sono particolarmente ottimizzati.

Questo comunque quello che vediamo quando creiamo una nuova applicazione react.

Vediamo di fare qualcosa, andiamo in src andiamo in punto J S.

Questo è quello che ci troviamo davanti e vedete che è esattamente il contenuto di quello che vediamo qua.

Quindi c' è un logo che gira, vediamo mg logo.

Poi abbiamo edith src apg is save tu reloaded learner che facciamo un esempio qua ci dice sei vetture Lod faccio una prova, eliminiamo tutto, proviamo a fare h una e lo ward salviamo.

E quando torniamo sul browser come per magia, eccolo qua e là ward naturalmente react è un framework molto complesso.

Si possono fare molte cose, ad esempio creare dei componenti, per cui proviamo subito a farne uno.

Creiamo una cartella, la chiamiamo counter componente piu' semplice in assoluto in ex punto J s e a questo punto possiamo fare export function counter con la C maiuscola.

I nomi dei componenti per convenzione iniziano sempre con la lettera maiuscola.

Importiamo un paio di funzioni, vediamo subito cosa servono.

Poi come state recht, ritorniamo html e mettiamo un suo account ti lascio una così e poi e due bottoni il primo decremento il secondo incremento e a questo punto facciamo finta dieci solo per solo per prova.

Ora proviamo a importare counter importiamo counter counter e a questo punto lo utilizziamo come fosse un tag html.

In realtà questo si chiama J a Essex, ma possiamo pensare a joey Essex come una sorta di html in questo contesto specifico, anche se poi è una cosa molto superficiale.

No, non prendetelo per oro colato, ma quando torniamo qua infatti è già stato ricaricato.

Abbiamo decrementi e incremento.

Facciamo in modo magari di modificare count portandola da dieci a nove.

Se clicchiamo su decremento o undici se clicchiamo su incrementi torniamo nel nostro componente.

A questo punto dobbiamo fare coast.

Una parentesi quadra facciamo account set account uguale state e lo stato iniziale che è dieci.

Ora potreste non essere magari cento percento sicuri di quello che significa questa espressione.

Sappiate che quando abbiamo una rai e adesso ve lo faccio vedere se noi abbiamo una reale, ad esempio consta x è uguale a uno due tre possiamo applicare con la procedura che si chiama destrutturazione, ovvero const x una x due x tre è uguale a x.

In questo modo uno o meglio x una verrà legato a una x due a due x tre a tre.

Quindi se faccio x due eccolo qua x uno.

Ancora una volta questo pattern viene usato molto di frequente il act, quindi il destro vectoring, ovvero la destrutturazione degli e degli oggetti e la stessa cosa si può fare con gli oggetti.

Viene usata molto il re act perché permette di avere delle strutture di controllo dei pattern molto molto comodi da utilizzare.

Ora abbiamo detto count sostituiamo account in questo modo questa è una proprietà reattiva, quindi perché reagite? Vediamo subito perché torniamo e vediamo che infatti non è cambiato nulla.

Abbiamo detto che account di default é uguale a dieci.

Andiamo nel button e facciamo monclick, quindi non piu' gath document semplicemente andiamo a prendere l'evento click su quel bottone.

Mettiamo una funzione che fa set count uguale account meno uno perché vogliamo decremento tare Se copiamo tutto e andiamo nel bottone successivo e mettiamo in più abbiamo un'azione di incrementi per cui guardiamo insieme cosa succede? Vi chiediamo due nuove variabili account e sette account account all'inizio qui alle dieci Ius State una funzione reattiva che gestisce lo stato dell'applicazione account verrà aggiornato ogni volta che account qua in alto verrà a sua volta aggiornato Button.

Una volta che clicchiamo sul bottone, chiamiamo una funzione che chiamerà a sua volta Seth Count Impostando questo valore ha il valore attuale di count, quindi all'inizio dieci meno uno.

Il bottone successivo fa la stessa cosa con più uno.

Quindi se torniamo nella nostra applicazione Act e facciamo incrementa qua undici dodici tredici di Clement Torniamo indietro.

Questo è un esempio molto semplice, ma diventa estremamente facile organizzare applicazioni, relax e soprattutto riutilizzare componenti.

Se andiamo ad esempio a duplicare tre volte counter, vedete che non abbiamo bisogno di riscrivere tre volte tutta la logica.

Abbiamo un componente che è sempre lo stesso e ogni volta che modifichiamo il primo componente originale, ad esempio account con tanti punti esclamativi, anche tutti gli altri componenti saranno rifletteranno queste modifiche se avete mai usato Fig.

Ma il concetto di componente informa esattamente lo stesso e tutti sono però una indipendente dall'altro.

Come voi vedete, possiamo andare a modificare gli stati dei singoli componenti ora correct.

Potete fare veramente qualunque cosa.

Non so dirvi percentuali, ma sicuramente una vasta percentuale dei siti che frequentate ogni giorno utilizzano recht oppure Wu, oppure angolare o svelti, che sono i principali attori nel mondo dello sviluppo di applicazioni reattive.

E questo era il racket visto in pochi minuti.