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",
    a: "a",
    code: "code",
    ol: "ol",
    li: "li",
    pre: "pre",
    span: "span"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.p, {
      children: [jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/introducing-jsx.html",
        children: "JSX"
      }), " — это HTML-подобный синтаксис, который мы видели в примерах, и он является основой для создания компонентов в Solid.\nJSX добавляет динамические выражения, которые позволяют ссылаться на переменные и функции в вашем HTML с помощью синтаксиса ", jsx(_components.code, {
        children: "{}"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["В этом примере мы включаем строку ", jsx(_components.code, {
        children: "name"
      }), " в наш HTML, используя ", jsx(_components.code, {
        children: "{name}"
      }), " внутри div. Таким же образом мы включаем HTML-элемент, который был напрямую назначен переменной ", jsx(_components.code, {
        children: "svg"
      }), "."]
    }), "\n", jsx(_components.p, {
      children: "В отличие от некоторых других использующих JSX фреймворков, Solid старается максимально придерживаться стандартов HTML, позволяя просто копировать и вставлять код из ответов на Stack Overflow или из HTML-шаблонизаторов."
    }), "\n", jsx(_components.p, {
      children: "Между JSX и HTML есть 3 основных различия, которые не позволяют рассматривать JSX как расширение HTML:"
    }), "\n", jsxs(_components.ol, {
      children: ["\n", jsxs(_components.li, {
        children: ["\n", jsxs(_components.p, {
          children: ["JSX не имеет пустых элементов. Это означает, что все элементы должны иметь закрывающий тег или быть самозакрывающимися. Помните об этом при копировании таких элементов, как ", jsx(_components.code, {
            children: "<input>"
          }), " или ", jsx(_components.code, {
            children: "<br>"
          }), "."]
        }), "\n"]
      }), "\n", jsxs(_components.li, {
        children: ["\n", jsx(_components.p, {
          children: "JSX должен возвращать единственный элемент. Чтобы вернуть несколько элементов верхнего уровня, используйте Фрагменты:"
        }), "\n", jsx(_components.pre, {
          children: jsxs(_components.code, {
            className: "hljs language-jsx",
            children: ["<>\n\t", 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\t", 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 не поддерживает HTML-комментарии ", jsx(_components.code, {
            children: "<! --...-->"
          }), "или специальные теги, такие как ", jsx(_components.code, {
            children: "<!DOCTYPE>"
          }), "."]
        }), "\n"]
      }), "\n"]
    }), "\n", jsx(_components.p, {
      children: "Однако JSX поддерживает SVG. Попробуем скопировать немного SVG прямо в наш компонент:"
    }), "\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\t", jsxs(_components.span, {
          className: "xml",
          children: [jsxs(_components.span, {
            className: "hljs-tag",
            children: ["<", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          }), "\n\t\t", 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\t\t\t", 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\t\t\t", 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\t\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "linearGradient"
            }), ">"]
          }), "\n\t", jsxs(_components.span, {
            className: "hljs-tag",
            children: ["</", jsx(_components.span, {
              className: "hljs-name",
              children: "defs"
            }), ">"]
          })]
        }), "\n\t", 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\t", 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-76564a56.js.map
