import { jsx, jsxs, Fragment } from 'solid-jsx/jsx-runtime';

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Iniziare",
  "children": [{
    "depth": 2,
    "value": "Guarda solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Prova Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Impara Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Pensa in modo Solid",
    "children": [{
      "depth": 3,
      "value": "1. Dati dichiarativi",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Componenti a scomparsa",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Lettura/scrittura",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Semplice è meglio che facile",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Rendering del server",
    "children": []
  }, {
    "depth": 2,
    "value": "Nessuna compilazione?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h2: "h2",
    p: "p",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "iniziare",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#iniziare",
        children: "#"
      }), "Iniziare"]
    }), "\n", jsxs(_components.h2, {
      id: "guarda-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#guarda-solid",
        children: "#"
      }), "Guarda solid"]
    }), "\n", jsx(_components.p, {
      children: "Per video veloci sui concetti di solid, puoi guardare:"
    }), "\n", jsxs(_components.ul, {
      children: ["\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/hw3Bx5vxKl0",
          children: "Solid in 100 secondi"
        })
      }), "\n", jsx(_components.li, {
        children: jsx(_components.a, {
          href: "https://youtu.be/J70HXl1KhWE",
          children: "Reattività di solid"
        })
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "(I video sono in inglese)"
    }), "\n", jsxs(_components.h2, {
      id: "prova-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#prova-solid",
        children: "#"
      }), "Prova Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["Il modo migliore per imparare Solid è provarlo online. Il nostro REPL su ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " è il modo perfetto per sperimentare i concetti fondamentali. Così come ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), " dove puoi modificare uno qualsiasi dei ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "nostri esempi"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["In alternativa, puoi utilizzare i nostri semplici modelli ", jsx(_components.a, {
        href: "https://vitejs.dev/",
        children: "Vite"
      }), " eseguendo questi comandi nel tuo terminale:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " mia-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "O per TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid-ts\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " mia-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o yarn o pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# o fyarn o pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "impara-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#impara-solid",
        children: "#"
      }), "Impara Solid"]
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsx(_components.p, {
      children: "I due principali tipi di blocchi a tua disposizione sono i componenti e le primitive reattive."
    }), "\n", jsx(_components.p, {
      children: "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:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "function"
        }), " ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "MyComponent"
        }), "(", jsx(_components.span, {
          className: "hljs-params",
          children: "props"
        }), ") {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "return"
        }), " ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          }), "Ciao {props.name}", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "div"
            }), ">"]
          })]
        }), ";\n}\n\n<", jsx(_components.span, {
          className: "hljs-title class_",
          children: "MyComponent"
        }), " name=", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Solid\""
        }), " />;\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "console"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "log"
        }), "(", jsxs(_components.span, {
          className: "hljs-string",
          children: ["`", jsx(_components.span, {
            className: "hljs-subst",
            children: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Puoi saperne di più su ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Reattività di Solid"
      }), " e ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Rendering di Solid"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "pensa-in-modo-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pensa-in-modo-solid",
        children: "#"
      }), "Pensa in modo Solid"]
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsxs(_components.h3, {
      id: "1-dati-dichiarativi",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-dati-dichiarativi",
        children: "#"
      }), "1. Dati dichiarativi"]
    }), "\n", jsx(_components.p, {
      children: "I dati dichiarativi combinano la descrizione del comportamento dei dati alla sua dichiarazione. Questo permette una composizione facile, mettendo tutti gli aspetti del comportamento dei dati in un posto singolo."
    }), "\n", jsxs(_components.h3, {
      id: "2-componenti-a-scomparsa",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-componenti-a-scomparsa",
        children: "#"
      }), "2. Componenti a scomparsa"]
    }), "\n", jsx(_components.p, {
      children: "È 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."
    }), "\n", jsxs(_components.h3, {
      id: "3-letturascrittura",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-letturascrittura",
        children: "#"
      }), "3. Lettura/scrittura"]
    }), "\n", jsx(_components.p, {
      children: "Il controllo preciso e la prevedibilità fanno per un sistema migliore. Non abbiamo bisognino per vera immutabilità per imporre il flusso unidirezionale, solo l'abilita di fare decisione conscie con il quale gli user scriveranno o no."
    }), "\n", jsxs(_components.h3, {
      id: "4-semplice-è-meglio-che-facile",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-semplice-è-meglio-che-facile",
        children: "#"
      }), "4. Semplice è meglio che facile"]
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsxs(_components.h2, {
      id: "web-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-components",
        children: "#"
      }), "Web Components"]
    }), "\n", jsxs(_components.p, {
      children: ["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. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "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."]
    }), "\n", jsxs(_components.h2, {
      id: "rendering-del-server",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#rendering-del-server",
        children: "#"
      }), "Rendering del server"]
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsxs(_components.p, {
      children: ["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 ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " e code splitting funzionano solo in Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Per maggiori informazioni, leggi la ", jsx(_components.a, {
        href: "#server-di-rendering",
        children: "Guida al server"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "nessuna-compilazione",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#nessuna-compilazione",
        children: "#"
      }), "Nessuna compilazione?"]
    }), "\n", jsx(_components.p, {
      children: "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."
    }), "\n", jsxs(_components.p, {
      children: ["Puoi eseguirli direttamente dal browser utilizzando ", jsx(_components.a, {
        href: "https://www.skypack.dev/",
        children: "Skypack"
      }), ":"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-html",
        children: [jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n    ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["<", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), " ", jsx(_components.span, {
            className: "hljs-attr",
            children: "type"
          }), "=", jsx(_components.span, {
            className: "hljs-string",
            children: "\"module\""
          }), ">"]
        }), jsxs(_components.span, {
          className: "javascript",
          children: ["\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " {\n        createSignal,\n        onCleanup,\n      } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " { render } ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/web\""
          }), ";\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "import"
          }), " html ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "from"
          }), " ", jsx(_components.span, {
            className: "hljs-string",
            children: "\"https://cdn.skypack.dev/solid-js/html\""
          }), ";\n\n      ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), " = (", jsx(_components.span, {
            className: "hljs-params"
          }), ") => {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [counteggio, assegnaValore] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), "),\n          timer = ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "setInterval"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "assegnaValore"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "counteggio"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "onCleanup"
          }), "(", jsx(_components.span, {
            className: "hljs-function",
            children: "() =>"
          }), " ", jsx(_components.span, {
            className: "hljs-built_in",
            children: "clearInterval"
          }), "(timer));\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "return"
          }), " html`", jsx(_components.span, {
            className: "xml",
            children: jsxs(_components.span, {
              className: "hljs-tag",
              children: ["<", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            })
          }), jsx(_components.span, {
            className: "hljs-subst",
            children: "${counteggio}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n      };\n      ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "render"
          }), "(", jsx(_components.span, {
            className: "hljs-title class_",
            children: "App"
          }), ", ", jsx(_components.span, {
            className: "hljs-variable language_",
            children: "document"
          }), ".", jsx(_components.span, {
            className: "hljs-property",
            children: "body"
          }), ");\n    "]
        }), jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "script"
          }), ">"]
        }), "\n  ", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "body"
          }), ">"]
        }), "\n", jsxs(_components.span, {
          className: "hljs-tag",
          children: ["</", jsx(_components.span, {
            className: "hljs-name",
            children: "html"
          }), ">"]
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "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."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? jsx(MDXLayout, Object.assign({}, props, {
    children: jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}

export { MDXContent as default, toc };
//# sourceMappingURL=getting-started-ed772082.js.map
