Components

Page content can be created using Qwik components. The component representing the content should be exported as a default export.

Let's assume you have your routes set up like this:

src/
└── routes/
    └── some/
        └── path/
            └── index.tsx              # https://example.com/some/path

// File: src/routes/some/path/index.tsx
import { component$ } from '@builder.io/qwik';

// Notice the default export
export default component$(() => {
  return <h1>Hello World!</h1>;
});

Importing other components

You can build complex views by composing multiple components within each other. To do that import other components into your index.tsx file.

src/
├── components/
│   └── heading.tsx
└── routes/
    └── some/
        └── path/
            ├── index.tsx              # https://example.com/some/path
            └── sub_component.tsx

Inside index.tsx you can create a component that is exported as default export. Content is created by writing a template with JSX-Syntax. Every component-function returns the template that should be rendered on the screen. If you want to learn more about the component anatomy, please see components documentation. The following component will be rendered at https://example.com/some/path according to the directory-structure, we have set up above.

// File: src/routes/some/path/index.tsx
import { component$ } from '@builder.io/qwik';
import Heading from '../../../components/heading';
import SubComponent from './sub_component';

export default component$(() => {
  return (
    <>
      <Heading />
      <h2>Hello World!</h2>
      <SubComponent />
    </>
  );
});

// File: src/components/heading.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <h1>Site Heading</h1>;
});

// File: src/routes/some/path/sub_component.tsx
import { component$ } from '@builder.io/qwik';

export default component$(() => {
  return <div>Other component content.</div>;
});