Qwik JS framework start guide

Qwik bills itself as "No hydration, auto lazy-loading, edge cacheable, and fun 🎉".

Since summer 2022 it has become more popular.

This page is a quick demo of how to set it up, including some example starter code.

Setting up your first Qwik hello world app

npm init qwik@latest

You will be presented with a few options - I recommend going with Qwik City, Express, and enable both Prettier and Tailwind (use space to turn them on)

💫 Let's create a Qwik app 💫

✔ Project name … hello-world
✔ Select a starter › Qwik City
✔ Select a server › Express
✔ Features › Prettier, Tailwindcss

⭐️ Success! Project saved in hello-world directory

🤖 Next steps:
   cd hello-world
   npm install
   npm start

💬 Questions? Start the conversation at:
   https://qwik.builder.io/chat
   https://twitter.com/QwikDev

Then run npm i to install dependencies. Once they're installed, run npm run dev.

And it is as simple as that. Take a look in the src dir and you can see different routes.

Hello world example for Qwik

Here is the most basic Qwik hello world example. It will look very familiar to you if you know JSX or have worked with React:

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

export const App = component$(() => {
  return <p>Hello, world</p>;
});

Simple counter example in Qwik

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

export const App = component$(() => {
  const store = useStore({ counter: 0 });

  return (
    <div>
      <p>Count: {store.counter}</p>
      <p>
        <button onClick$={() => store.counter++}>Increment</button>
      </p>
    </div>
  );
});

Code Deep Dives

My Software development blog