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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Вступление",
  "children": []
}, {
  "depth": 1,
  "value": "Что такое Solid?",
  "children": []
}, {
  "depth": 1,
  "value": "Анатомия Solid-приложения",
  "children": []
}, {
  "depth": 1,
  "value": "Использование этого учебного пособия",
  "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: "вступление",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#вступление",
        children: "#"
      }), "Вступление"]
    }), "\n", jsx(_components.p, {
      children: "Добро пожаловать в руководство по Solid! Здесь вы познакомитесь с основными функциями Solid. Вы также можете обратиться к API и гайдам, чтобы узнать больше о том, как работает Solid."
    }), "\n", jsxs(_components.h1, {
      id: "что-такое-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#что-такое-solid",
        children: "#"
      }), "Что такое Solid?"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid — это JavaScript-фреймворк для создания интерактивных веб-приложений.\nС Solid вы можете использовать свои знания HTML и JavaScript для создания переиспользуемых компонентов. Solid предоставляет инструменты для улучшения ваших компонентов с помощью ", jsx(_components.em, {
        children: "реактивности"
      }), ": декларативного JavaScript-кода, связывающего пользовательский интерфейс с данными."]
    }), "\n", jsxs(_components.h1, {
      id: "анатомия-solid-приложения",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#анатомия-solid-приложения",
        children: "#"
      }), "Анатомия Solid-приложения"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid-приложение состоит из функций, которые мы называем компонентами. Взгляните на функцию ", jsx(_components.code, {
        children: "HelloWorld"
      }), " справа: она напрямую возвращает ", jsx(_components.code, {
        children: "div"
      }), "! Это сочетание HTML и JavaScript называется ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/introducing-jsx.html",
        children: "JSX"
      }), ". Solid является библиотекой-компилятором, который позже превращает эти теги в узлы DOM."]
    }), "\n", jsxs(_components.p, {
      children: ["JSX позволяет не только использовать в нашем приложении большинство элементов HTML, но и создавать новые. После того, как мы объявили нашу функцию ", jsx(_components.code, {
        children: "HelloWorld"
      }), ", мы можем использовать её как тег ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), " во всем нашем приложении."]
    }), "\n", jsxs(_components.p, {
      children: ["Точкой входа для любого Solid-приложения является функция ", jsx(_components.code, {
        children: "render"
      }), ". Она принимает 2 аргумента: функцию-обертку с кодом нашего приложения и существующий в HTML элемент для вывода результата:"]
    }), "\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: "использование-этого-учебного-пособия",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#использование-этого-учебного-пособия",
        children: "#"
      }), "Использование этого учебного пособия"]
    }), "\n", jsx(_components.p, {
      children: "Каждый урок в руководстве представляет фичу Solid и сценарий ее применения. В любой момент вы можете нажать кнопку «Решение», чтобы узнать ответ, или «Сброс», чтобы начать заново. Сам редактор кода имеет консоль и вкладку вывода, где вы можете увидеть код, скомпилированный Solid. Посмотрите на неё, если вам интересно узнать, как Solid генерирует код."
    }), "\n", jsx(_components.p, {
      children: "Повеселитесь!"
    })]
  });
}
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-ed74bd64.js.map
