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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Introduzione",
  "children": []
}, {
  "depth": 1,
  "value": "Cos'è Solid?",
  "children": []
}, {
  "depth": 1,
  "value": "Anatomia di un' applicazione SolidJs",
  "children": []
}, {
  "depth": 1,
  "value": "Come affrontare questi tutorial.",
  "children": []
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    em: "em",
    code: "code",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "introduzione",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#introduzione",
        children: "#"
      }), "Introduzione"]
    }), "\n", jsx(_components.p, {
      children: "Questo tutorial interattivo ti guiderà e ti aiuterà a capire come funzionano gli API di Solid. Puoi anche guardare la lista di API e guide per imparare di più su come funziona Solid."
    }), "\n", jsxs(_components.p, {
      children: ["Abbiamo anche un tutorial fatto a posta per qualcuno che ha appena iniziato (work-in-progress!)\n", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/getting-started-with-solid/welcome",
        children: "qua"
      }), "."]
    }), "\n", jsxs(_components.h1, {
      id: "cosè-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#cosè-solid",
        children: "#"
      }), "Cos'è Solid?"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid è una libreria JavaScript per costruire applicazioni web interattive.\nCon Solid, puoi utilizzare la tua conoscenza di HTML e JavaScript per costruire componenti che potranno essere riutilizzabili nella tua applicazione.\nSolid ti da tutti gli strumenti per rendere i tuoi componenti ", jsx(_components.em, {
        children: "reattivi"
      }), " : codice JavaScript dichiarativo che collega l'interfaccia utente con i dati che usa e che crea."]
    }), "\n", jsxs(_components.h1, {
      id: "anatomia-di-un-applicazione-solidjs",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#anatomia-di-un-applicazione-solidjs",
        children: "#"
      }), "Anatomia di un' applicazione SolidJs"]
    }), "\n", jsxs(_components.p, {
      children: ["Un'applicazione SolidJs è composta da funzioni che noi chiameremmo componenti. Guardiamo la nostra funziona ", jsx(_components.code, {
        children: "HelloWorld"
      }), " sulla destra: ritorna direttamente un ", jsx(_components.code, {
        children: "div"
      }), "! Questa combinazione di HTML e JavaScript è chiamata JSX. Solid utilizza un compiler che trasforma queste tag in un DOM node."]
    }), "\n", jsxs(_components.p, {
      children: ["JSX ti permette di utilizzare la maggior parte degli elementi HTML nella nostra applicazione, però ti permette anche di crearne. Una volta che abbiamo dichiarato la nostra funzione ", jsx(_components.code, {
        children: "HelloWorld"
      }), ", possiamo utilizzarla all' interno della nostra applicazione con la tag ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Il punto principale per una qualsiasi applicazione che utilizzi Solid, è la funzione ", jsx(_components.code, {
        children: "render"
      }), ".\nPrende une argomenti, una funzione che rappresenta il codice della nostra applicazione e un elemento già esistente nel HTML, che utilizzerà per montare la nostra applicazione."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-title function_",
          children: "render"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "HelloWorld"
            }), " />"]
          })
        }), ", ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "document"
        }), ".", jsx(_components.span, {
          className: "hljs-title function_",
          children: "getElementById"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "'app'"
        }), "));\n"]
      })
    }), "\n", jsxs(_components.h1, {
      id: "come-affrontare-questi-tutorial",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#come-affrontare-questi-tutorial",
        children: "#"
      }), "Come affrontare questi tutorial."]
    }), "\n", jsx(_components.p, {
      children: "Ogni lezione nel tutorial rappresenta una funzionalità di Solid e un esempio per provarlo.\nPuoi fare un click sul bottone \"Risolvi\" per vedere la soluzione oppure \"Ripristina\" per tornare indietro. Il code editor stesso ha una console e un output dove puoi vedere il codice compilato.\nGuardalo se sei curioso come Solid genera il codice."
    }), "\n", jsx(_components.p, {
      children: "Divertiti!"
    })]
  });
}
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=lesson-58d7b970.js.map
