Devour/devour_data/docs/basics.json

{
  "id": "6f674d87ba3b4a2ebc9587f1",
  "source": "solid:signals",
  "type": "github-document",
  "title": "basics",
  "content": "---\ntitle: Basics\norder: 4\nuse_cases: \u003e-\n  starting new projects, creating components, understanding component structure,\n  building ui blocks, component organization\ntags:\n  - components\n  - basics\n  - jsx\n  - lifecycle\n  - imports\n  - structure\nversion: '1.0'\ndescription: \u003e-\n  Learn Solid component fundamentals: creating reusable UI blocks, component\n  trees, lifecycles, and proper import/export patterns.\n---\n\nComponents are the building blocks of Solid applications.\nThese units are reusable and can be combined to create more complex applications.\n\nComponents are functions that return [JSX](/concepts/understanding-jsx) elements:\n\n```tsx\nfunction MyComponent() {\n\treturn \u003cdiv\u003eHello World\u003c/div\u003e;\n}\n```\n\nA component can be as simple as a single element or as complex as a full page.\nThey can also be nested within each other to create more intricate applications:\n\n```tsx\nfunction App() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cMyComponent /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n:::note\n\nComponent names must start with a capital letter to distinguish them from regular HTML elements.\nOtherwise, they won't be recognized as components.\n\n:::\n\n## Component trees\n\nA web page is displayed by rendering a component tree, which is a hierarchical structure of components.\nAt the top of the tree is the primary application component, which is the root of the tree.\nChild components are nested within the primary component, and those components can have their own child components.\nThis nesting can continue as needed.\n\nA simple application may have a component tree that looks like this:\n\n```json\nApp // primary application component\n└── MyComponent // child component\n```\n\nWhen an application grows, the component tree can become more complex.\nFor example, a more complex application may have a component tree that looks like this:\n\n```json\nApp\n├── Header\n├── Sidebar\n├── Content\n│   ├── Post\n│   │   ├── PostHeader\n│   │   ├── PostContent\n│   │   └── PostFooter\n│   ├── Post\n│   │   ├── PostHeader\n│   │   ├── PostContent\n│   │   └── PostFooter\n│   └── Post\n│       ├── ...\n└── Footer\n```\n\nIn nesting components, you can create a hierarchy of components that can be reused throughout the application.\nThis allows for a more modular approach to building applications, as components can be reused in different contexts.\n\n## Component lifecycles\n\nComponents have a lifecycle that defines how they are created, updated, and destroyed.\nA Solid component's lifecycle is different from other frameworks, as it is tied to the [concept of reactivity](/concepts/intro-to-reactivity).\n\nWhere frameworks may re-run components on every state change, a Solid component's lifecycle is tied to its initial run.\nWhat this means is that a Solid component is only run once, when it is first rendered into the DOM.\nAfter that, the component is not re-run, even if the application's state changes.\n\nWhen the Solid component renders, it sets up a reactive system that monitors for state changes.\nWhen a state change occurs, the component will update the relevant areas without re-running the entire component.\nBy bypassing the full component lifecycle on every state change, Solid has a more predictable behavior compared to frameworks that re-run functions on every update.\n\nSince the component's logic is not continuously visited, getting this setup right is important when working with Solid.\n\n### Initialization \u0026 configuration\n\nWhen a component is first rendered into the DOM, the component function is executed.\nThis is where you will set up the component's state and side-effects.\nThis includes setting up [signals](/concepts/signals), [stores](/concepts/stores), [effects](/concepts/effects), and other reactive elements.\nSince the logic in the component function is not continuously visited, it is important to set up the component correctly from the outset.\n\nEach component instance is independent of other instances, meaning that each component has its own state and side-effects.\nThrough establishing proper dependencies, you can ensure that the component is set up correctly.\nThis allows for components to be reused in different contexts without affecting each other.\n\n```tsx\nfunction MyComponent() {\n\tconst [count, setCount] = createSignal(0);\n\n\tconsole.log(count());\n\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cp\u003eCount: {count()}\u003c/p\u003e\n\t\t\t\u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003eIncrement\u003c/button\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nWhen this component is rendered into the DOM, the function body is executed.\nThis includes creating the `count` signal and executing the `console.log(count())` statement, which will log the current value of `count` to the console.\nIn addition, the component's JSX is returned, which will be rendered into the DOM.\n\nAfter the component is rendered, the `console.log` statement will not be executed again, even if the component's state changes.\nHowever, because the component's JSX is reactive, each press of the button will update the DOM with the new value of `count`.\n\nIn essence, Solid splits the concerns:\n\n1. The initial setup logic, which is executed once when the component is rendered.\n2. The reactive logic, which is executed when the component's state changes.\n\n### Conditional rendering\n\nTo display different content based on state or other criteria, you can use conditional rendering.\nGiven that the component function is only executed once, conditional statements must be placed within the return statement.\nThis design ensures that conditional paths are clear and immediately understood.\n\n```tsx\nfunction MyComponent() {\n\tconst [count, setCount] = createSignal(0);\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t{count() \u003e 5 ? (\n\t\t\t\t\u003cdiv\u003eCount limit reached\u003c/div\u003e\n\t\t\t) : (\n\t\t\t\t\u003c\u003e\n\t\t\t\t\t\u003cp\u003eCount: {count()}\u003c/p\u003e\n\t\t\t\t\t\u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev + 1)}\u003e\n\t\t\t\t\t\tIncrement\n\t\t\t\t\t\u003c/button\u003e\n\t\t\t\t\u003c/\u003e\n\t\t\t)}\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nThis example uses a [ternary operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Conditional_operator) to conditionally render different content based on the value of `count`.\nWhen `count` is greater than 5, the component will display `\"Count limit reached\"`.\nOtherwise, it will display the current count with an increment button.\n\n:::note\nTo simplify conditional rendering, Solid provides built-in [control-flow](/concepts/control-flow/conditional-rendering) components like [`Show`](/concepts/control-flow/conditional-rendering#show), which create a more readable conditional rendering experience.\n\n    ```tsx\n    function MyComponent() {\n    \tconst [count, setCount] = createSignal(0)\n\n    \treturn (\n    \t\t\u003cdiv\u003e\n    \t\t\t\u003cShow\n    \t\t\t\twhen={count() \u003e 5}\n    \t\t\t\tfallback={\n    \t\t\t\t\t\u003c\u003e\n    \t\t\t\t\t\t\u003cp\u003eCount: {count()}\u003c/p\u003e\n    \t\t\t\t\t\t\u003cbutton onClick={() =\u003e setCount((prev) =\u003e prev+1)}\u003eIncrement\u003c/button\u003e\n    \t\t\t\t\t\u003c/\u003e\n    \t\t\t\t}\n    \t\t\t\u003e\n    \t\t\t\t\u003cdiv\u003eCount limit reached\u003c/div\u003e\n    \t\t\t\u003c/Show\u003e\n    \t\t\u003c/div\u003e\n    \t)\n    }\n    ```\n\n:::\n\n## Importing and exporting\n\nFor components to be reusable, they need to be exported from one module and imported into another.\nThis allows for components to be shared and used where needed.\n\n### Exporting components\n\nOnce defined, a component can be [exported](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export) to make it available for use in other parts of your application.\nThere are two ways to export a component: [named exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#named_exports) and [default exports](https://developer.mozilla.org/en-US/docs/web/javascript/reference/statements/export#default_exports).\n\n**Named export:**\n\nNamed exports allow for multiple components to be exported from a single file.\nTo export a component, you must use the `export` keyword before the function definition or specify the name of the component to export in curly braces (`{}`).\n\n```typescript\nexport function MyComponent() {\n\treturn \u003cdiv\u003eHello World\u003c/div\u003e\n}\n\n// or\n\nfunction MyComponent() {\n\treturn \u003cdiv\u003eHello World\u003c/div\u003e\n}\n\nexport { MyComponent }\n```\n\n**Default export:**\n\nDefault exports specify a single component to export from a file.\nThis is done by using the `default` keyword.\n\n```typescript\n// MyComponent.ts\nexport default function MyComponent() {\n\treturn \u003cdiv\u003eHello World\u003c/div\u003e\n}\n```\n\n### Importing components\n\nTo use a component in another file or component, it must be [imported](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import).\nTo import a component, you must specify the path to the file containing the component and the name of the component to import.\n\n**Named import:**\n\nWhen importing a named export, you must specify the name of the component to import in curly braces (`{}`).\n\n```tsx\n// App.ts\nimport { MyComponent } from \"./MyComponent\";\n\nfunction App() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cMyComponent /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\nThis is the preferred way to import components, as it allows for better code readability and maintainability.\nAdditionally, it allows for multiple components to be imported from the same file.\n\n```tsx\n// App.ts\nimport { MyComponent, MyOtherComponent } from \"./MyComponent\";\n\nfunction App() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cMyComponent /\u003e\n\t\t\t\u003cMyOtherComponent /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n**Default import:**\n\nTo import a default export, you must specify the name of the component to import.\n\n```tsx\n// App.ts\nimport MyComponent from \"./MyComponent\";\n\nfunction App() {\n\treturn (\n\t\t\u003cdiv\u003e\n\t\t\t\u003cMyComponent /\u003e\n\t\t\u003c/div\u003e\n\t);\n}\n```\n\n### Importing Solid and its utilities\n\nTo use Solid, you must import the Solid library.\nThe reactive primitives and utilities are exported from Solid's main module.\n\n```tsx\nimport { createSignal } from \"solid-js\";\n```\n\nHowever, some of Solid's utilities are exported from their own modules.\n\n```tsx\nimport { createStore } from \"solid-js/store\";\n```\n\nTo see a full list of Solid's utilities, the Reference Tab in the sidebar provides the API Documentation.",
  "url": "https://github.com/solidjs/solid-docs/blob/HEAD/src/routes/concepts/components/basics.mdx",
  "metadata": {
    "path": "src/routes/concepts/components/basics.mdx",
    "repo": "solidjs/solid-docs",
    "repo_url": "https://github.com/solidjs/solid-docs.git",
    "size": 9982,
    "source_type": "github"
  },
  "hash": "6a1b29741832527a87437d27a5c9a1a89677b6cc77bb905f70b0da7a761dea32",
  "timestamp": "2026-02-23T11:43:00.186306852+01:00"
}