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>;
});