Aulab

tag

react

post_count 42 risultati
cover
GUIDA GRATUITA

Componenti controllati e non controllati in React

Abbiamo appena parlato di componenti controller e componenti view. In React, i componenti controller vengono anche chiamati uncontrolled (non controllati) e i componenti view vengono anche chiamati controlled (controllati). Il collegamento potrebbe confondere un pochino all’inizio, ma dovrebbe aiutare pensare che, se un componente non viene controllato, allora sta controllando un altro componente. Di conseguenza,…

GUIDA GRATUITA

Sollevare lo stato in React

Abbiamo finalmente chiuso il cerchio con props, eventi e stati. Prima di continuare a ragionare sul funzionamento di React, modifichiamo la nostra app per utilizzare tutti e tre i concetti. L’operazione che stiamo per effettuare si chiama “sollevamento dello stato” ed è un’operazione molto comune nello sviluppo di applicazioni React. Il concetto di base è…

GUIDA GRATUITA

Che cos’è lo stato di un componente in React

Lo stato di un componente in React è la rappresentazione del componente in un momento specifico del tempo, tipicamente adesso. “Adesso” inteso come il momento in cui si guarda lo stato. Facciamo, come prima cosa, un esempio pratico; parleremo del concetto teorico nella prossima sezione.  L’esempio in questione è il più classico degli esempi in…

Vuoi avviare una nuova carriera o fare un upgrade?

Trova il corso Digital & Tech più adatto a te nel nostro catalogo!

GUIDA GRATUITA

Gli eventi in React

Cos è un evento in React? Abbiamo visto come passare le informazioni dai componenti genitori ai componenti figli, tramite props, ma come possiamo fare il contrario, cioè passare informazioni dai figli ai genitori? La risposta potrebbe soprenderti: non lo facciamo. In React, le informazioni viaggiano solo in un senso, dai componenti genitori ai componenti figli.…

GUIDA GRATUITA

Le proprietà in React

// File: src/App.jsx import "./App.css"; import Message from "./components/Message"; export default function App() { return ( <div className="App"> <Message /> </div> ); } Riprendendo l’esempio del capitolo precedente - che vediamo sopra - notiamo che la pagina, grazie a quel codice, conterrà un paragrafo che dice "Look, a message!". Non abbiamo, però, modo di controllare…

GUIDA GRATUITA

Che cos’è un componente in React

Un componente in React è un blocco autonomo e riutilizzabile di codice che rappresenta una parte dell'interfaccia utente. I componenti possono essere semplici, come un pulsante o un'icona, o complessi, come un'intera pagina web. Ogni componente in React è una funzione o una classe JavaScript che può accettare input arbitrari (chiamati "props", vale a dire…

GUIDA GRATUITA

Gestione dello stile (CSS) in React

Tornando alla nostra applicazione: // File: src/App.jsx import "./App.css"; export default function App() { const message = "Hello React!"; return ( <div className="App"> <p>{message}</p> </div> ); } Nota: abbiamo spostato export default insieme alla dichiarazione della funzione App. Perché? Non c’è una reale motivazione alla base, è una questione di preferenza nella scrittura del codice.…

GUIDA GRATUITA

Import di immagini in React

Come dicevamo nella sezione precedente, tra i file che possiamo importare in React ci sono anche le immagini. Un esempio è proprio nell’applicazione che Create React App prevede all’installazione:   import logo from "./logo.svg"; export default function App() { return <img src={logo} alt="React" />; } Le immagini e gli SVG vengono importati con un formato…

GUIDA GRATUITA

Import ed Export in React

Torniamo alla nostra applicazione. Nel file App.jsx, a parte il componente che abbiamo creato, ci sono un altro paio di righe: import "./App.css"; ed export default App;. Di seguito attueremo un paragone con Node e CommonJS; nel caso li conoscessi già, puoi saltare la parte successiva che, invece, spiega il funzionamento partendo da zero.  …