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 App 剖析",
  "children": []
}, {
  "depth": 1,
  "value": "使用教程",
  "children": []
}];
function _createMdxContent(props) {
  const _components = Object.assign({
    h1: "h1",
    a: "a",
    p: "p",
    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 教程！本教程将教你创建高性能 Web 应用程序所需的一切。 你还可以参考文档的 API 和指南章节以了解更加深入理解 Solid 工作原理。"
    }), "\n", jsxs(_components.h1, {
      id: "什么是-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#什么是-solid",
        children: "#"
      }), "什么是 Solid？"]
    }), "\n", jsx(_components.p, {
      children: "Solid 是一个用于制作交互式 Web 应用程序的 JavaScript 框架。它利用自定义编译器将 JSX（一种受 HTML 启发的 JavaScript XML 方言）转换为高性能的 DOM 操作。更新则由细粒度的响应式系统提供支持，响应式系统减少了对比差异的开销，从而获得最佳性能。"
    }), "\n", jsxs(_components.h1, {
      id: "solid-app-剖析",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#solid-app-剖析",
        children: "#"
      }), "Solid App 剖析"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid App 由我们称之为组件的函数组成。Solid 中的组件名称遵循 Pascal 命名约定，其中组件名称中每个单词的第一个字母大写。该命名可以在 JSX 中用作标签，比如 ", jsx(_components.code, {
        children: "<HelloWorld />"
      }), "。"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid 应用程序从 ", jsx(_components.code, {
        children: "render"
      }), " 函数启动。", jsx(_components.code, {
        children: "render"
      }), " 是 App 的入口。它需要 2 个参数，一个是包装我们的应用程序代码的函数，另一个是要挂载的元素："]
    }), "\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 如何生成代码感到好奇，不妨在点击输出选项卡查看编译输出后的代码。"
    }), "\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-fbdece8d.js.map
