Writing Your First Quick Component by Gil Fink | October, 2022

Discover this awesome structure

qwik. image logo from

Over the past few weeks, I’ve been diving deeper into the Quicken framework to prepare for a session at TechRadarCon 2022. I have also implemented a complete demo app with QuickCity and QuickCity to get familiar with the framework developer experience.

In this article, I will show you how to develop a simple Quicken component and introduce you to some things you need to know when developing your own components.

Quick Playground

One of the cool features you will find on the Qwik website is Quick Playgrounds. In Playground, you can write components using Quicken syntax. In the right pane, you can find information about component rendering, errors, symbols, and also configure how things are rendered using the Options tab at the bottom.

You can use Playground as the environment to build the component to be implemented in post, or you can create a new project and add the component using the Quick CLI.

In this article, we will be building a simple collapsible panel component. The component will have a clickable header, which will collapse its contents. The material will be injected from outside.

So it does :).

The following code is a complete example, which will be explained later:

let’s break it down

Qwik adopts TypeScript, so we’ll first create an interface for the props that the component will receive. Here is the interface implementation:

interface IProps {
title: string;
}

Now that we have the interface, let’s use it and declare the component using the Qwik syntax:

export const CollapsiblePanel = component$(({ title }: IProps) => {
...
});

As you can see, you use component$ Function for creating quick components. $ The signal is there to instruct the Qwik optimizer to treat this function in a specific way (in this case, as a Qwik component).

Note: I’m not going to discuss the optimizer, and I encourage you to read about Here,

Now that we have declared the component, let’s implement it. Qwik uses JSX to code how the component will be rendered. At the end of the component, we will return the following JSX:

return (
<div className="collapsible">
<header onClick$={toggle}>
{title}
</header>
<section hidden={store.collapsed}>
<Slot />
</section>
</div>
);

As can be seen, we return a div with some implementation. I’ve marked three important things in the code that you should be aware of. onClick$ How to wire up events in Quicken $ Sign at the end. Again, $ Sign up for Quick Optimizer. Slot A component is a special quick component that enables content injection into a component. We’ll discuss the store later.

Now, let’s add some style. If you want to create a style constraint between your component and the outer one, you can use useStylesScoped$ hook. useStylesScoped$ The hook gets the style you want to contain inside your component and applies it to the component.

useStylesScoped$(`
.collapsible {
border: black dashed 1px;
}
header {
background: blue;
color: white;
cursor: pointer;
padding: 2px;
}
`);

In the example above, we add styles to the container div and the header element. When rendered, Quicken will ensure that the style is specific to the component only; Therefore, the style will not leak from it.

To have an internal component state, which Qwik can serialize, you will need to use useStore hook. Hook creates a store where its contents can be tracked and sorted by Quicken. In the collapsible panel example, the store is storing the component collapsed State:

const store = useStore({
collapsed: false
});

Last but not least, we implement toggle Function, which will be used to toggle the content:

const toggle = $(async () => {
store.collapsed = !store.collapsed;
});

Since the toggle function is not inline in the component’s JSX, you need to use $(async () => { … }) Syntax to ensure that the quick optimizer understands that this will be a quick component function being used in JSX.

That’s all. Now you can play with the component.

The following code is a consuming component that drives the collapsible panel:

export const App = component$(() => {
return (
<CollapsiblePanel title="Click me!">
<ul>
<li>Qwik is awsome</li>
<li>Collapsible item</li>
</ul>
</CollapsiblePanel>
);
});
Qwik Playground Collapsible Panel Components

In the article, we implemented the Quick Collapsible Panel component. It’s a simple component, but it illustrates some concepts you’ll need to be familiar with if you’re writing Quicken components.

As always, if you have any feedback let me know.

Leave a Comment