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

A component is a small, reusable piece of code that can be used to build a UI.

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

Learn more about the key concepts of writing Qwik Components.