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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Começando",
  "children": [{
    "depth": 2,
    "value": "Experimente Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Aprenda Solid",
    "children": []
  }, {
    "depth": 2,
    "value": "Pense como Solid",
    "children": [{
      "depth": 3,
      "value": "1. Dados Declarativos",
      "children": []
    }, {
      "depth": 3,
      "value": "2. Componentes de Desaparecimento",
      "children": []
    }, {
      "depth": 3,
      "value": "3. Segregação de leitura/escrita",
      "children": []
    }, {
      "depth": 3,
      "value": "4. Simples é melhor que fácil",
      "children": []
    }]
  }, {
    "depth": 2,
    "value": "Web Components",
    "children": []
  }, {
    "depth": 2,
    "value": "Renderização de Servidor",
    "children": []
  }, {
    "depth": 2,
    "value": "Sem Compilação?",
    "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: "começando",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#começando",
        children: "#"
      }), "Começando"]
    }), "\n", jsxs(_components.h2, {
      id: "experimente-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#experimente-solid",
        children: "#"
      }), "Experimente Solid"]
    }), "\n", jsxs(_components.p, {
      children: ["De longe, a maneira mais fácil de começar a usar o Solid é experimentá-lo online. Nosso REPL em ", jsx(_components.a, {
        href: "https://playground.solidjs.com",
        children: "https://playground.solidjs.com"
      }), " é a maneira perfeita de experimentar ideias. Assim como ", jsx(_components.a, {
        href: "https://codesandbox.io/",
        children: "https://codesandbox.io/"
      }), ", onde você pode modificar qualquer um de nossos exemplos."]
    }), "\n", jsxs(_components.p, {
      children: ["Como alternativa, você pode usar nossos modelos simples ", jsx(_components.a, {
        href: "https://vitejs.dev/",
        children: "Vite"
      }), " executando estes comandos em seu terminal:"]
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n"]
      })
    }), "\n", jsx(_components.p, {
      children: "Ou para TypeScript:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-sh",
        children: ["> npm create vite@latest my-app -- --template solid-ts\n> ", jsx(_components.span, {
          className: "hljs-built_in",
          children: "cd"
        }), " my-app\n> npm i ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n> npm run dev ", jsx(_components.span, {
          className: "hljs-comment",
          children: "# ou yarn ou pnpm"
        }), "\n"]
      })
    }), "\n", jsxs(_components.h2, {
      id: "aprenda-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#aprenda-solid",
        children: "#"
      }), "Aprenda Solid"]
    }), "\n", jsx(_components.p, {
      children: "Sólido tem tudo a ver com pequenas peças compostas que servem como blocos de construção para aplicações. Essas peças são principalmente funções que constituem muitas APIs de nível superior superficiais. Felizmente, você não precisará saber sobre a maioria deles para começar."
    }), "\n", jsx(_components.p, {
      children: "Os dois principais tipos de blocos de construção que você tem à sua disposição são Componentes e Primitivos Reativos."
    }), "\n", jsx(_components.p, {
      children: "Componentes são funções que aceitam um objeto props e retornam elementos JSX, incluindo elementos DOM nativos e outros componentes. Eles podem ser expressos como elementos JSX em PascalCase:"
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-jsx",
        children: [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"
            }), ">"]
          }), "Hello {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: "Os componentes são leves no sentido de que eles próprios não têm estado e não têm instâncias. Em vez disso, eles servem como funções de fábrica para elementos DOM e primitivos reativos."
    }), "\n", jsx(_components.p, {
      children: "A reatividade de granulação fina do Solid é construída em 3 primitivos simples: Signals, Memos e Effects. Juntos, eles formam um mecanismo de sincronização de rastreamento automático que garante que sua visualização permaneça atualizada. Os cálculos reativos assumem a forma de expressões simples agrupadas por função que são executadas de forma síncrona."
    }), "\n", jsx(_components.pre, {
      children: jsxs(_components.code, {
        className: "hljs language-js",
        children: [jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [first, setFirst] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"JSON\""
        }), ");\n", jsx(_components.span, {
          className: "hljs-keyword",
          children: "const"
        }), " [last, setLast] = ", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createSignal"
        }), "(", jsx(_components.span, {
          className: "hljs-string",
          children: "\"Bourne\""
        }), ");\n\n", jsx(_components.span, {
          className: "hljs-title function_",
          children: "createEffect"
        }), "(", jsx(_components.span, {
          className: "hljs-function",
          children: "() =>"
        }), " ", 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: "${first()}"
          }), " ", jsx(_components.span, {
            className: "hljs-subst",
            children: "${last()}"
          }), "`"]
        }), "));\n"]
      })
    }), "\n", jsxs(_components.p, {
      children: ["Você pode aprender mais sobre ", jsx(_components.a, {
        href: "/guides/reactivity",
        children: "Solid's Reactivity"
      }), " e ", jsx(_components.a, {
        href: "/guides/rendering",
        children: "Solid's Rendering"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "pense-como-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#pense-como-solid",
        children: "#"
      }), "Pense como Solid"]
    }), "\n", jsx(_components.p, {
      children: "O design da Solid carrega várias opiniões sobre quais princípios e valores nos ajudam a construir sites e aplicativos da melhor maneira. É mais fácil aprender e usar o Solid quando você está ciente da filosofia por trás dele."
    }), "\n", jsxs(_components.h3, {
      id: "1-dados-declarativos",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#1-dados-declarativos",
        children: "#"
      }), "1. Dados Declarativos"]
    }), "\n", jsx(_components.p, {
      children: "Dados declarativos são a prática de vincular a descrição do comportamento dos dados à sua declaração. Isso permite uma composição fácil, empacotando todos os aspectos do comportamento dos dados em um único lugar."
    }), "\n", jsxs(_components.h3, {
      id: "2-componentes-de-desaparecimento",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#2-componentes-de-desaparecimento",
        children: "#"
      }), "2. Componentes de Desaparecimento"]
    }), "\n", jsx(_components.p, {
      children: "Já é difícil estruturar seus componentes sem levar as atualizações em consideração. As atualizações Solid são completamente independentes dos componentes. As funções do componente são chamadas uma vez e depois deixam de existir. Os componentes existem para organizar seu código e não muito mais."
    }), "\n", jsxs(_components.h3, {
      id: "3-segregação-de-leituraescrita",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#3-segregação-de-leituraescrita",
        children: "#"
      }), "3. Segregação de leitura/escrita"]
    }), "\n", jsx(_components.p, {
      children: "Controle preciso e previsibilidade tornam os sistemas melhores. Não precisamos da verdadeira imutabilidade para impor o fluxo unidirecional, apenas a capacidade de tomar decisões conscientes que os consumidores podem escrever ou não."
    }), "\n", jsxs(_components.h3, {
      id: "4-simples-é-melhor-que-fácil",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#4-simples-é-melhor-que-fácil",
        children: "#"
      }), "4. Simples é melhor que fácil"]
    }), "\n", jsx(_components.p, {
      children: "Uma lição difícil para reatividade refinada. Convenções explícitas e consistentes, mesmo que exijam mais esforço, valem a pena. O objetivo é fornecer ferramentas mínimas para servir de base para a construção."
    }), "\n", jsxs(_components.h2, {
      id: "web-components",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#web-components",
        children: "#"
      }), "Web Components"]
    }), "\n", jsxs(_components.p, {
      children: ["A Solid nasceu com o desejo de ter Web Components como cidadãos de primeira classe. Com o tempo, seu design evoluiu e os objetivos mudaram. No entanto, Solid ainda é uma ótima maneira de criar componentes da Web. ", jsx(_components.a, {
        href: "https://github.com/solidjs/solid/tree/main/packages/solid-element",
        children: "Solid Element"
      }), " permite que você escreva e envolva componentes de função do Solid para produzir componentes da Web pequenos e de alto desempenho. Dentro dos aplicativos do Solid, o Solid Element ainda é capaz de alavancar a API de Contexto do Solid, e os Portals do Solid suportam o estilo isolado do Shadow DOM."]
    }), "\n", jsxs(_components.h2, {
      id: "renderização-de-servidor",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#renderização-de-servidor",
        children: "#"
      }), "Renderização de Servidor"]
    }), "\n", jsx(_components.p, {
      children: "O Solid tem uma solução de renderização dinâmica do lado do servidor que permite uma experiência de desenvolvimento verdadeiramente isomórfica. Através do uso de nossa primitiva Resource, as solicitações de dados assíncronas são feitas facilmente e, mais importante, serializadas e sincronizadas automaticamente entre o cliente e o navegador."
    }), "\n", jsxs(_components.p, {
      children: ["Como o Solid oferece suporte à renderização assíncrona e de fluxo no servidor, você pode escrever seu código de uma maneira e executá-lo no servidor. Isso significa que recursos como ", jsx(_components.a, {
        href: "https://reactjs.org/docs/concurrent-mode-suspense.html#approach-3-render-as-you-fetch-using-suspense",
        children: "render-as-you-fetch"
      }), " e a divisão de código funciona apenas em Solid."]
    }), "\n", jsxs(_components.p, {
      children: ["Para obter mais informações, leia o ", jsx(_components.a, {
        href: "/guides/server#server-side-rendering",
        children: "Server guide"
      }), "."]
    }), "\n", jsxs(_components.h2, {
      id: "sem-compilação",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#sem-compilação",
        children: "#"
      }), "Sem Compilação?"]
    }), "\n", jsx(_components.p, {
      children: "Não gosta de JSX? Não se importa em fazer trabalho manual para agrupar expressões, piorar o desempenho e ter tamanhos de pacote maiores? Alternativamente, você pode criar um aplicativo Solid usando Tagged Template Literals ou HyperScript em ambientes não compilados."
    }), "\n", jsxs(_components.p, {
      children: ["Você pode executá-los diretamente do navegador usando ", 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: "const"
          }), " ", 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          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        ", 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      ", 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: ["Lembre-se de que você ainda precisa da biblioteca de expressões DOM correspondente para que funcionem com o TypeScript. Você pode usar os Literais de Template Tagged com ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/lit-dom-expressions",
        children: "Lit DOM Expressions"
      }), " ou HyperScript com ", jsx(_components.a, {
        href: "https://github.com/ryansolid/dom-expressions/tree/main/packages/hyper-dom-expressions",
        children: "Hyper DOM Expressions"
      }), "."]
    })]
  });
}
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-d3a5bda0.js.map
