Merge be6e766 into 4d762ea

documentation/it/guides/getting-started.md

@@ -0,0 +1,112 @@
+# Iniziare
+
+## Prova Solid
+
+Il modo migliore per imparare Solid è provarlo online. Il nostro REPL su https://playground.solidjs.com è il modo perfetto per sperimentare i concetti fondamentali. Così come https://codesandbox.io/ dove puoi modificare uno qualsiasi dei nostri esempi.
+
+In alternativa, puoi utilizzare i nostri semplici modelli [Vite](https://vitejs.dev/) eseguendo questi comandi nel tuo terminale:
+
+```sh
+> npx degit solidjs/templates/js my-app
+> cd mia-app
+> npm i # o yarn o pnpm
+> npm run dev # o yarn o pnpm
+```
+
+O per TypeScript:
+
+```sh
+> npx degit solidjs/templates/ts my-app
+> cd mia-app
+> npm i # o yarn o pnpm
+> npm run dev # o fyarn o pnpm
+```
+
+## Impara Solid
+
+Il Solid è composto da piccoli pezzi componibili che fungono da elementi costitutivi nelle applicazioni. Questi pezzi sono per lo più funzioni che costituiscono molte API superficiali di alto livello. Fortunatamente, non avrai bisogno di conoscerne la maggior parte per iniziare con la libreria.
+
+I due principali tipi di blocchi a tua disposizione sono i componenti e le primitive reattive.
+
+I componenti sono funzioni che accettano un oggetto di props e restituiscono elementi JSX inclusi elementi DOM nativi e altri componenti. Possono essere espressi come elementi JSX in PascalCase:
+
+```jsx
+function MyComponent(props) {
+  return <div>Ciao {props.name}</div>;
+}
+
+<MyComponent name="Solid" />;
+```
+
+I componenti sono leggeri. Non sono stateful di per sé e non hanno istanze. Servono invece come funzioni di fabbrica per gli elementi DOM e le primitive reattive.
+
+La reattività a grana fine è costruita su 3 semplici primitive: Segnali, Memo ed Effetti. Insieme, formano un motore di sincronizzazione con tracciamento automatico che garantisce che la tua vista rimanga aggiornata. I calcoli reattivi assumono la forma di semplici espressioni con wrapping di funzioni che vengono eseguite in modo sincrono.
+
+```js
+const [first, setFirst] = createSignal("JSON");
+const [last, setLast] = createSignal("Bourne");
+
+createEffect(() => console.log(`${first()} ${last()}`));
+```
+
+Puoi saperne di più su [Reattività di Solid](https://www.solidjs.com/docs/latest#reactivity) e [Rendering di Solid](https://www.solidjs.com/docs/latest#rendering).
+
+## Pensa in modo Solid
+
+Il design di Solid contiene diverse opinioni su quali principi e valori ci aiutano a costruire al meglio siti Web e applicazioni. È più facile imparare e utilizzare Solid quando si è consapevoli della filosofia alla base.
+
+### 1. Dati dichiarativi
+
+Declarative data combines the description of data’s behavior to its declaration. This allows for easy composition by packaging all aspects of data’s behavior in a single place.
+
+### 2. Componenti a scomparsa
+
+È piuttosto difficile strutturare i componenti senza prendere in considerazione gli aggiornamenti. Gli aggiornamenti Solid sono completamente indipendenti dai componenti. Le funzioni componenti vengono chiamate una volta e poi cessano di esistere. Esistono componenti per organizzare il tuo codice e non molto altro.
+
+### 3. Lettura/scrittura
+
+Precise control and predictability make for better systems. We don't need true immutability to enforce unidirectional flow, only the ability to make the conscious decision which consumers may write and which may not.
+
+### 4. Semplice è meglio che facile
+
+Ecco una lezione che viene dalla reattività a grana fine. Vale la pena avere convenzioni esplicite e coerenti anche se richiedono uno sforzo maggiore. Lo scopo è fornire strumenti minimi che servano come base su cui costruire.
+
+## Web Components
+
+Solid nasce con il desiderio di avere Web Components come cittadini di prima classe. Nel tempo il suo design si è evoluto e gli obiettivi sono cambiati. Tuttavia, Solid è ancora un ottimo modo per creare Web Components. [Solid Element](https://github.com/solidjs/solid/tree/main/packages/solid-element) consente di scrivere e avvolgere i componenti funzione di Solid per produrre componenti Web piccoli e performanti. All'interno delle app Solid Solid Element è ancora in grado di sfruttare l'API di contesto di Solid e Solid Portals supportano lo stile isolato Shadow DOM.
+
+## Rendering del server
+
+Solid ha una soluzione di rendering lato server dinamico che fornisce un'esperienza di sviluppo veramente isomorfa. Attraverso l'uso della nostra primitiva Resource, le richieste di dati asincroni vengono facilmente effettuate e automaticamente serializzate e sincronizzate tra client e browser.
+
+Poiché Solid supporta il rendering asincrono e in streaming sul server, puoi scrivere il tuo codice in un modo e farlo eseguire sul server. Ciò significa che funzionalità come [render-as-you-fetch](https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense) e code splitting funzionano solo in Solid.
+
+Per maggiori informazioni, leggi la [Guida al server](https://www.solidjs.com/docs/latest#server-side-rendering).
+
+## Nessuna compilazione?
+
+Non ti piace JSX? Non ti dispiace fare il lavoro manuale per avvolgere le espressioni, prestazioni peggiori e avere pacchetti di dimensioni maggiori? In alternativa, puoi creare un'app Solid usando Tagged Template Literals o HyperScript in ambienti non compilati.
+
+Puoi eseguirli direttamente dal browser utilizzando [Skypack](https://www.skypack.dev/):
+
+```html
+<html>
+  <body>
+    <script type="module">
+      import { createSignal, onCleanup } from "https://cdn.skypack.dev/solid-js";
+      import { render } from "https://cdn.skypack.dev/solid-js/web";
+      import html from "https://cdn.skypack.dev/solid-js/html";
+
+      const App = () => {
+        const [counteggio, impostatoConteggio] = createSignal(0),
+          timer = setInterval(() => setConteggio(counteggio() + 1), 1000);
+        onCleanup(() => clearInterval(timer));
+        return html`<div>${counteggio}</div>`;
+      };
+      render(App, document.body);
+    </script>
+  </body>
+</html>
+```
+
+Ricorda che hai ancora bisogno della corrispondente libreria di espressioni DOM affinché funzionino con TypeScript. È possibile utilizzare i valori letterali dei modelli con tag con le espressioni Lit DOM o HyperScript con le espressioni Hyper DOM.

documentation/it/guides/reactivity.md

@@ -0,0 +1,95 @@
+# Reattività
+
+La gestione dei dati in Solid utilizza primitive reattive che sono responsabili di tutti gli aggiornamenti. Utilizza un approccio molto simile a MobX o Vue, tranne per il fatto che non scambia mai la sua granularità con un VDOM. Le dipendenze vengono tracciate automaticamente quando accedi ai tuoi valori reattivi in Effetti e codice JSX.
+
+Le primitive di Solid sono chiamate `create` che spesso restituiscono tuple. Generalmente il primo elemento è una primitiva leggibile e il secondo è un setter. È comune riferirsi solo alla parte leggibile con il nome primitivo.
+
+Ecco un contatore di incremento automatico di base che si aggiorna in base all'impostazione del segnale `count`.
+
+```jsx
+import { createSignal, onCleanup } from "solid-js";
+import { render } from "solid-js/web";
+
+const App = () => {
+  const [counteggio, setCounteggio] = createSignal(0),
+    timer = setInterval(() => setCounteggio(counteggio() + 1), 1000);
+  onCleanup(() => clearInterval(timer));
+
+  return <div>{counteggio()}</div>;
+};
+
+render(() => <App />, document.getElementById("app"));
+```
+
+## Presentazione dei primitivi
+
+Solid è costituito da 3 primitive primarie, Segnale, Memo ed Effetto. Al centro c'è il pattern Observer in cui i segnali (e i promemoria) vengono tracciati avvolgendo i promemoria e gli effetti.
+
+I segnali sono la primitiva più semplice. Contengono valore e ottengono e impostano funzioni in modo da poter intercettare quando vengono letti e scritti.
+
+```js
+const [counteggio, setCounteggio] = createSignal(0);
+```
+
+Gli effetti sono funzioni che forniscono letture del nostro segnale. Viene eseguito nuovamente ogni volta che il valore di un segnale dipendente cambia. Questo è utile per creare effetti collaterali, come il rendering.
+
+```js
+createEffect(() => console.log("L'ultimo conteggio è ", counteggio()));
+```
+
+Infine, i Memo sono valori derivati memorizzati nella cache. Condividono le proprietà di entrambi i segnali e gli effetti. Tracciano i propri segnali dipendenti, rieseguendoli solo quando questi cambiano e sono essi stessi segnali tracciabili.
+
+```js
+const nome = createMemo(() => `${nomeBattsimo()} ${cognome()}`);
+```
+
+## Come funziona
+
+I segnali sono emettitori di eventi che contengono un elenco di abbonamenti. Notificano ai loro abbonati ogni volta che il loro valore cambia.
+
+Dove le cose si fanno più interessanti è come avvengono questi abbonamenti. Solid utilizza il monitoraggio automatico delle dipendenze. Gli aggiornamenti avvengono automaticamente quando i dati cambiano.
+
+Il trucco è uno stack globale in fase di esecuzione. Prima che un Effetto o Memo esegua (o riesegui) la sua funzione fornita dallo sviluppatore, si spinge su quello stack. Quindi qualsiasi segnale che viene letto controlla se c'è un listener corrente nello stack e in tal caso aggiunge il listener alle sue sottoscrizioni.
+
+Puoi pensarla così:
+
+```js
+function createSignal(value) {
+  const iscritti = new Set();
+
+  const leggere = () => {
+    const listener = getCurrentListener();
+    if (listener) iscritti.add(listener);
+    return valore;
+  };
+
+  const scrivi = nextValue => {
+    valore = valoreSuccessivo;
+    for (const isc of iscritti) isc.run();
+  };
+
+  return [read, scrivi];
+}
+```
+
+Ora ogni volta che aggiorniamo il segnale sappiamo quali effetti eseguire nuovamente. Semplice ma efficace. L'effettiva implementazione è molto più complicata, ma questo è il succo di ciò che sta accadendo.
+
+Per una comprensione più dettagliata di come funziona Reattività, questi sono articoli utili (in inglese):
+
+[A Hands-on Introduction to Fine-Grained Reactivity](https://dev.to/ryansolid/a-hands-on-introduction-to-fine-grained-reactivity-3ndf)
+
+[Building a Reactive Library from Scratch](https://dev.to/ryansolid/building-a-reactive-library-from-scratch-1i0p)
+
+[SolidJS: Reactivity to Rendering](https://indepth.dev/posts/1289/solidjs-reactivity-to-rendering)
+
+## Considerazioni
+
+Questo approccio alla reattività è molto potente e dinamico. Può gestire le dipendenze che cambiano al volo eseguendo diversi rami di codice condizionale. Funziona anche attraverso molti livelli di indiretto. Viene tracciata anche qualsiasi funzione eseguita all'interno di un ambito di tracciamento.
+
+Ci sono alcuni comportamenti chiave e compromessi di cui dobbiamo essere consapevoli.
+
+1. Tutta la reattività viene tracciata direttamente dalle chiamate di funzione. Possono anche essere nascosti sotto getter/proxy e attivati ​​dall'accesso alla proprietà. Ciò significa che è importante dove si accede alle proprietà sugli oggetti reattivi.
+
+2. I componenti ei callback dai flussi di controllo non tengono traccia degli ambiti. Eseguono solo una volta. Ciò significa che la destrutturazione o l'esecuzione della logica di primo livello nei componenti non verrà rieseguita. È necessario accedere a questi segnali, negozi e oggetti di scena dall'interno di altre primitive reattive o JSX per quella parte del codice da rivalutare.
+
+3. Questo approccio tiene traccia solo in modo sincrono. Se hai un setTimeout o usi una funzione asincrona nel tuo effetto, verrà eseguito asincrono. Quindi non verrà più tracciato.