Getting Started Qwikly

Qwik is a new kind of framework that is resumable (no JS and no hydration), built for the edge and familiar for React developers.

• Stackblitz Qwik + Vite
• Examples playground

Prerequisites

• Node.js v16.8 or higher
• Your favorite IDE (vscode recommended)
• Start to think qwik

Creating an app using the CLI

The first step is to create an application. Qwik comes with a CLI that allows you to create a basic working skeleton of an application. We will use the CLI to create a blank starter so that you can quickly familiarize yourself with it. Qwik supports NPM, yarn and pnpm.

Run the Qwik CLI in your shell

Choose the package manager you prefer and run one of the following command:

npm create qwik@latest
pnpm create qwik@latest
yarn create qwik

The CLI will guide you through an interactive menu to set the project-name, select one of the starters and asks if you want to install the dependencies.

Writing Qwik Components

Components are basic building blocks of Qwik Applications.

Qwik Components should look familiar to many UI developers:

import { component$, useSignal } from '@builder.io/qwik';

export const MyCmp = component$((props: MyCmpProps) => {
  // Declare local state
  const count = useSignal(0);

  // Returns JSX
  return (
    <>
      <h3>Hello, {props.name}</h3>
      <p>You have clicked {count.value} times</p>
      <button
        onClick$={() => {
          // This will update the local state and cause a re-render.
          // Reactivity is at Qwik's core!
          count.value++;
        }}
      >
        Increment
      </button>
    </>
  );
});

Qwik components are unique in that:

• Qwik components automatically get broken down into lazy-loaded chunks by the Optimizer.
• They are resumable (a component can get created on a server and continue its execution on the client).
• They are reactive and render independently of other components on the page. See rendering.

Learn more about the key concepts of writing Qwik Components.