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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Начало работы",
  "children": [{
    "depth": 2,
    "value": "Пробуем Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Изучаем Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Философия Solid",
    "children": [{
      "depth": 3,
      "value": "1. Декларативные данные",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Исчезающие компоненты",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Разделение чтения/записи",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Простое лучше легкого",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Веб-компоненты",
    "children": []
  }, {
    "depth": 2,
    "value": "Рендеринг на стороне сервера",
    "children": []
  }, {
    "depth": 2,
    "value": "Нет компиляции?",
    "children": []
  }]
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    h2: "h2",
    p: "p",
    pre: "pre",
    code: "code",
    span: "span",
    h3: "h3"
  }, props.components);
  return jsxs(Fragment, {
    children: [jsxs(_components.h1, {
      id: "начало-работы",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#начало-работы",
        children: "#"
      }), "Начало работы"]
    }), "\n", jsxs(_components.h2, {
      id: "пробуем-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#пробуем-solid",
        children: "#"
      }), "Пробуем Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["Безусловно, самый простой способ начать работу с Solid - это попробовать его онлайн. ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "Наш REPL"
      }), " - идеальный способ опробовать ваши идеи. Также у нас есть ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "Sandbox"
      }), ", где вы можете отредактировать любой из ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/blob/main/documentation/resources/examples.md",
        children: "наших примеров"
      }), "."]
    }), "\n", jsxs(_components.p, {
      children: ["Кроме того, вы можете использовать наши простые ", jsx(_components.a, {
        href: "https://vitejs.dev/",
        children: "Vite"
      }), " шаблоны, выполнив следующие команды в своем терминале:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/js my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "#  yarn/pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "#  yarn/pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Или с поддержкой TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npx degit solidjs/templates/ts my-app\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# yarn/pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# yarn/pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "изучаем-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#изучаем-solid",
        children: "#"
      }), "Изучаем Solid"]
    }), "\n", jsx(_components.p, {
      children: "Идея Solid состоит в том, что ваше приложение состоит из маленьких кусочков которые служат строительными блоками для приложений. Эти кусочки в основном представляют из себя функции, составляющие поверхностный API. К счастью, для начала вам не нужно знать о большинстве из них для работы с Solid."
    }), "\n", jsx(_components.p, {
      children: "В вашем распоряжении есть два основных типа строительных блоков: компоненты и реактивные примитивы."
    }), "\n", jsxs(_components.p, {
      children: ["Компоненты - это функции, которые принимают входные параметры (так называемые ", jsx(_components.code, {
        children: "пропсы"
      }), ") и возвращают JSX элементы, включая DOM элементы и другие компоненты. Компоненты именуются в PascalCase и представляют из себя JSX элементы:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Компонент"
        }), "\n", 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"
            }), ">"]
          }), "Привет {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: "Компоненты легковесны, поскольку сами не имеют состояния и не имеют экземпляров. Вместо этого они служат функциями для создания для элементов DOM и реактивных примитивов."
    }), "\n", jsxs(_components.p, {
      children: ["Детальная (", jsx(_components.code, {
        children: "fine-grained"
      }), ") реактивность  Solid основана на трех простых примитивах: ", jsx(_components.code, {
        children: "Сигнал"
      }), ", ", jsx(_components.code, {
        children: "Мемо"
      }), " и ", jsx(_components.code, {
        children: "Эффект"
      }), ". Вместе они образуют механизм синхронизации с автоматическим отслеживанием, который обеспечивает обновленность вашего пользовательского интерфейса. Реактивные вычисления выполняются синхронно и принимают форму простых выражений обернутых в функции."]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-comment",
          children: "// Реактивный примитив - `Сигнал`"
        }), "\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [a, setA] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "10"
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [b, setB] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-number",
          children: "5"
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-comment",
          children: "// `Эффект`"
        }), "\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " {\n  ", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " sum = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "a"
        }), "() + ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "b"
        }), "();\n  ", 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: "${a()}"
          }), " + ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${b()}"
          }), " = ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${sum}"
          }), "`"]
        }), ");\n});\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Вы можете узнать больше о ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Реактивности Solid"
      }), " и ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Solid Рендеринг"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "философия-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#философия-solid",
        children: "#"
      }), "Философия Solid"]
    }), "\n", jsx(_components.p, {
      children: "Solid легче изучить и использовать, если вы знаете его философию."
    }), "\n", jsx(_components.p, {
      children: "В дизайне Solid заложены несколько основополагающих принципов и ценностей, которые помогут нам лучше всего создавать веб-сайты и приложения."
    }), "\n", jsxs(_components.h3, {
      id: "1-декларативные-данные",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-декларативные-данные",
        children: "#"
      }), "1. Декларативные данные"]
    }), "\n", jsx(_components.p, {
      children: "Декларативные данные - это практика привязки описания поведения данных к их объявлениям.\nЭто позволяет нам легко связывать данные с их поведением и хранить это всё в одном месте."
    }), "\n", jsxs(_components.h3, {
      id: "2-исчезающие-компоненты",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-исчезающие-компоненты",
        children: "#"
      }), "2. Исчезающие компоненты"]
    }), "\n", jsx(_components.p, {
      children: "Достаточно сложно структурировать компоненты без учета обновлений. Обновления в Solid полностью независимы от компонентов. Компонентные функции вызываются один раз, а затем просто исчезают. Компоненты существуют для организации вашего кода и ничего больше."
    }), "\n", jsxs(_components.h3, {
      id: "3-разделение-чтениязаписи",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-разделение-чтениязаписи",
        children: "#"
      }), "3. Разделение чтения/записи"]
    }), "\n", jsxs(_components.p, {
      children: ["Точный контроль и предсказуемость делают системы лучше. Нам не нужна настоящая неизменяемость (", jsx(_components.code, {
        children: "immutability"
      }), "), чтобы обеспечить однонаправленный поток, нам просто нужна способность принимать осознанное решение."]
    }), "\n", jsxs(_components.h3, {
      id: "4-простое-лучше-легкого",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-простое-лучше-легкого",
        children: "#"
      }), "4. Простое лучше легкого"]
    }), "\n", jsx(_components.p, {
      children: "В процессе создания идеального библиотеки неспроста была выбрана детальная реактивность. Наша цель состоит в том, чтобы предоставить разработчику минимальные инструменты, которые могли бы служить хорошим фундаментом для построения UI."
    }), "\n", jsxs(_components.h2, {
      id: "веб-компоненты",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#веб-компоненты",
        children: "#"
      }), "Веб-компоненты"]
    }), "\n", jsxs(_components.p, {
      children: ["По изначальной задумке Solid был библиотекой для работы с веб-компонентами. Со временем дизайн и цели Solid изменились. Впрочем, Solid по-прежнему остается отличным способом создания веб-компонентов. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid-элемент"
      }), " позволяет писать и оборачивать функциональные компоненты Solid для создания небольших и производительных веб-компонентов. Solid-элемент может использовать Solid Context API, а порталы Solid поддерживают Shadow DOM для добавления изолированных стилей."]
    }), "\n", jsxs(_components.h2, {
      id: "рендеринг-на-стороне-сервера",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#рендеринг-на-стороне-сервера",
        children: "#"
      }), "Рендеринг на стороне сервера"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid предлагает решение для динамического рендеринга на стороне сервера, которое обеспечивает поистине изоморфный опыт разработки. Использование ", jsx(_components.code, {
        children: "Ресурсов"
      }), ", встроенных в библиотеку Solid, для асинхронных запросов не просто облегчает работу со внешними API, но и автоматически сериализует и синхронизирует полученные данные между клиентом и браузером."]
    }), "\n", jsxs(_components.p, {
      children: ["Поскольку Solid поддерживает асинхронный и рендеринг с помощью ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/API/Streams_API",
        children: "стримов"
      }), " на сервере, вам не нужно думать об особенностях работы вашего кода на сервере - он будет отлично работать из коробки. Современная архитектура Solid и поддержка стримов означает, что такие фичи, как ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " и ", jsx(_components.a, {
        href: "https://ru.reactjs.org/docs/code-splitting.html",
        children: "разделение кода"
      }), " будут работать без проблем."]
    }), "\n", jsxs(_components.p, {
      children: ["Для получения дополнительной информации прочтите ", jsx(_components.a, {
        href: "/guides/server#server-side-rendering",
        children: "Рендеринг на стороне сервера"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "нет-компиляции",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#нет-компиляции",
        children: "#"
      }), "Нет компиляции?"]
    }), "\n", jsxs(_components.p, {
      children: ["Не любите JSX? Не возражаете вручную оборачивать ваши выражения, падения производительности и больших размеров файлов? В качестве альтернативы вы можете использовать ", jsx(_components.a, {
        href: "https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Template_literals#%D1%82%D0%B5%D0%B3%D0%BE%D0%B2%D1%8B%D0%B5_%D1%88%D0%B0%D0%B1%D0%BB%D0%BE%D0%BD%D1%8B_%D0%B8_%D1%8D%D0%BA%D1%80%D0%B0%D0%BD%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5_%D1%81%D0%B8%D0%BC%D0%B2%D0%BE%D0%BB%D0%BE%D0%B2",
        children: "теговые шаблоны"
      }), " или HyperScript в средах в которых у вас нет возможности использовать компилятор."]
    }), "\n", jsxs(_components.p, {
      children: ["Запускать их можно прямо из браузера, используя ", 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: "function"
          }), " ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "App"
          }), "(", jsx(_components.span, {
            className: "hljs-params"
          }), ") {\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " [count, setCount] = ", jsx(_components.span, {
            className: "hljs-title function_",
            children: "createSignal"
          }), "(", jsx(_components.span, {
            className: "hljs-number",
            children: "0"
          }), ");\n        ", jsx(_components.span, {
            className: "hljs-keyword",
            children: "const"
          }), " 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: "setCount"
          }), "(", jsx(_components.span, {
            className: "hljs-title function_",
            children: "count"
          }), "() + ", jsx(_components.span, {
            className: "hljs-number",
            children: "1"
          }), "), ", jsx(_components.span, {
            className: "hljs-number",
            children: "1000"
          }), ");\n\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: "${count}"
          }), jsxs(_components.span, {
            className: "xml",
            children: [jsxs(_components.span, {
              className: "hljs-tag",
              children: ["</", jsx(_components.span, {
                className: "hljs-name",
                children: "div"
              }), ">"]
            }), "`"]
          }), ";\n      }\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", jsxs(_components.p, {
      children: ["Помните, что вам все еще нужна соответствующая библиотека выражений DOM для их работы с TypeScript. Вы можете использовать теговые шаблонные литералы с ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Выражениями"
      }), " или HyperScript с ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "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-fa763b6e.js.map
