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

/*@jsxRuntime automatic @jsxImportSource solid-jsx*/
const toc = [{
  "depth": 1,
  "value": "Introduction",
  "children": []
}, {
  "depth": 1,
  "value": "What is Solid?",
  "children": []
}, {
  "depth": 1,
  "value": "Anatomy of a Solid App",
  "children": []
}, {
  "depth": 1,
  "value": "Leveraging this Tutorial",
  "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: "introduction",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#introduction",
        children: "#"
      }), "Introduction"]
    }), "\n", jsx(_components.p, {
      children: "This interactive guide will walk you through Solid's main features. You can also refer to the API and guides to learn more about how Solid works."
    }), "\n", jsxs(_components.p, {
      children: ["You can also check out our new beginner tutorial (work-in-progress!) ", jsx(_components.a, {
        href: "https://docs.solidjs.com/guides/tutorials/getting-started-with-solid/welcome",
        children: "here"
      }), "."]
    }), "\n", jsxs(_components.h1, {
      id: "what-is-solid",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#what-is-solid",
        children: "#"
      }), "What is Solid?"]
    }), "\n", jsxs(_components.p, {
      children: ["Solid is a JavaScript framework for making interactive web applications.\nWith Solid, you can use your existing HTML and JavaScript knowledge to build components that can be reused throughout your app.\nSolid provides the tools to enhance your components with ", jsx(_components.em, {
        children: "reactivity"
      }), ": declarative JavaScript code that links the user interface with the data that it uses and creates."]
    }), "\n", jsxs(_components.h1, {
      id: "anatomy-of-a-solid-app",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#anatomy-of-a-solid-app",
        children: "#"
      }), "Anatomy of a Solid App"]
    }), "\n", jsxs(_components.p, {
      children: ["A Solid App is composed of functions that we call components. Take a look at the ", jsx(_components.code, {
        children: "HelloWorld"
      }), " function on the right: it directly returns a ", jsx(_components.code, {
        children: "div"
      }), "! This mix of HTML and JavaScript is called JSX. Solid ships with a compiler that turns these tags into DOM nodes later on."]
    }), "\n", jsxs(_components.p, {
      children: ["JSX allows you to use most HTML elements in our app, but it also lets you create new elements. Once we've declared our ", jsx(_components.code, {
        children: "HelloWorld"
      }), " function, we can use it as a ", jsx(_components.code, {
        children: "<HelloWorld>"
      }), " tag throughout our app."]
    }), "\n", jsxs(_components.p, {
      children: ["The entry point for any Solid App is the ", jsx(_components.code, {
        children: "render"
      }), " function. It takes 2 arguments, a function wrapping our application code and an existing element in the HTML to mount to:"]
    }), "\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: "leveraging-this-tutorial",
      children: [jsx(_components.a, {
        className: "header-anchor",
        href: "#leveraging-this-tutorial",
        children: "#"
      }), "Leveraging this Tutorial"]
    }), "\n", jsx(_components.p, {
      children: "Each lesson in the tutorial presents a Solid feature and a scenario to try it out. At any point you can click the solve button to see the solution or click reset to start over. The code editor itself has a console and an output tab where you can see the compiled output generated from your code. Look at it if you are curious to see how Solid generates code."
    }), "\n", jsx(_components.p, {
      children: "Have fun!"
    })]
  });
}
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-f19008d8.js.map
