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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    code: "code",
    ol: "ol",
    li: "li",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsx(_components.p, {
      children: "JSX utilizza una sintassi simile al HTML che abbiamo visto negli esempi precedenti ed è fondamentale\nper creare componenti in Solid."
    }), "\n", jsxs(_components.p, {
      children: ["JSX aggiunge espressioni dinamiche che ti permette di riferire variabili e funzioni nel tuo HTML,\nutilizzando la sintassi ", jsx(_components.code, {
        children: "{ }"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["In questo esempio, includiamo la stringa ", jsx(_components.code, {
        children: "name"
      }), " nel nostro HTML usando ", jsx(_components.code, {
        children: "{name}"
      }), " in un div.\nAllo stesso modo, includiamo un elemento HTML che è stato assegnato direttamente alla variabile ", jsx(_components.code, {
        children: "svg"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "A differenza di altre framework che utilizzano JSX, Solid cerca di rispettare gli standard HTML\nil più possibile, permettendoti di fare copia e incolla da Stack Overflow oppure dai template builders che i tuoi designer utilizzano."
    }), "\n", jsx(_components.p, {
      children: "Ci sono 3 cose principali che previene JSX a essere visto come un superset di HTML:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX non ha elementi void. Questo significa che tutti gli elementi devono avere una tag che gli chiude oppure\nche si chiudono da soli. Ricordati questo quando copi elementi come ", jsx(_components.code, {
            children: "<input>"
          }), " oppure ", jsx(_components.code, {
            children: "<br>"
          }), "."]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "JSX deve ritornare un solo elemento. Per rappresentare più elementi insieme, utilizza un Fragment:"
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-jsx",
            children: ["<>\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              }), "Title", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "h1"
                }), ">"]
              })]
            }), "\n  ", jsxs(_components.span, {
              className: "xml",
              children: [jsxs(_components.span, {
                className: "hljs-tag",
                children: ["<", jsx(_components.span, {
                  className: "hljs-name",
                  children: "p"
                }), ">"]
              }), "Some Text", jsxs(_components.span, {
                className: "hljs-tag",
                children: ["</", jsx(_components.span, {
                  className: "hljs-name",
                  children: "p"
                }), ">"]
              })]
            }), "\n</>\n"]
          })
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX non sopporta commenti HTML ", jsx(_components.code, {
            children: "<!--...-->"
          }), " oppure tag speciali come ", jsx(_components.code, {
            children: "<!DOCTYPE>"
          }), "."]
        }), "\n"]
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Però JSX supporta gli SVG. Proviamo a copiare un paio di SVG nel nostro componente:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: ["<svg height=", jsx(_components.span, {
          className: "hljs-string",
          children: "'300'"
        }), " width=", jsx(_components.span, {
          className: "hljs-string",
          children: "'400'"
        }), ">\n  ", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "id"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'gr1'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'0%'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y1"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'60%'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "x2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'100%'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "y2"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'0%'"
            }), ">"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'5%'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'stop-color:rgb(255,255,3);stop-opacity:1'"
            }), " />"]
          }), "\n      ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "stop"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "offset"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'100%'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "style"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'stop-color:rgb(255,0,0);stop-opacity:1'"
            }), " />"]
          }), "\n    ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), ">"]
          }), "\n  ", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          })]
        }), "\n  ", jsx(_components.span, {
          className: "xml",
          children: jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "ellipse"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'125'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "cy"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'150'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "rx"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'100'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "ry"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'60'"
            }), " ", jsx(_components.span, {
              className: "hljs-attr",
              children: "fill"
            }), "=", jsx(_components.span, {
              className: "hljs-string",
              children: "'url(#gr1)'"
            }), " />"]
          })
        }), "\n  ", jsx(_components.span, {
          className: "hljs-title class_",
          children: "Sorry"
        }), " but ", jsx(_components.span, {
          className: "hljs-variable language_",
          children: "this"
        }), " browser does not support inline ", jsx(_components.span, {
          className: "hljs-variable constant_",
          children: "SVG"
        }), ".\n</svg>\n"]
      })
    })]
  });
}
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-17d6dbbf.js.map
