Qwik Documentation

Pre-requisites

We need the following software in order to use Qwik:
• Any IDE (preferably VS Code)
• Node.js (version 16.8 or above)

For starting a Qwik Project

You can run any one of the following commands in the Qwik CLI:
• npm create qwik@latest
• pnpm create qwik@latest
• yarn create qwik
• bun create qwik@latest

For running a Qwik project

You can run any one of the following commands to run a Qwik project:
• npm start
• pnpm start
• yarn start
• bun start

Structure of a Qwik project

• A Qwik project consists of src folder within which we will mostly work.
• Inside the src folder, you can create a fonts folder where you can have all your fonts.
• Inside the src folder, there is a components folder where you can have a folder for header inside which you can have the index.tsx and index.scss within which you put the header code. You can do the same for footer as well
• Inside the src folder, you can create an images folder where you can put all your images.
• Inside the src folder, you have a routes folder within which you have folders for each page of your webapp. Within each of these folders, you have to have a tsx and scss file to define the functionality, styling and structure of your webpage.
• Instead of scss, css can also be used.

Creating a route

To create a route, go to the routes folder, create a folder, for example, name the folder ‘notes’ if you are making a notes web page. Inside this notes folder, you can have an index.tsx file and an index.css or index.scss file. Inside the index.tsx file, you need to have export default component$(...), so that Qwik knows what content to display. Also, to see if your page is working fine, you can check the output at http://127.0.0.1:5173/notes/

How to load data

In order to load data into the server and then render it, we can use the routeLoader$. Here is an example code:

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

export const useDadJoke = routeLoader$(async () => {
  const response = await fetch('https://icanhazdadjoke.com/', {
    headers: { Accept: 'application/json' },
  });
  return (await response.json()) as {
    id: string;
    status: number;
    joke: string;
  };
});

export default component$(() => {
  // Calling our `useDadJoke` hook, will return a reactive signal to the loaded data.
  const dadJokeSignal = useDadJoke();
  return (
    <section class="section bright">
      <p>{dadJokeSignal.value.joke}</p>
    </section>
  );
});

How to post data to the server

Similar to how we use routeLoader$ to load data into the server and render it, in order to post data to the server, we can use routeAction$.

State Management and Modification

For state management and modification, we can use the useSignal hook. First import the useSignal hook from qwik. And then here is a code snippet of how you can create a new signal, initialize it and call it:
import { useSignal } from '@builder.io/qwik';
const count = useSignal(0);
function MyComponent() {
return <div>Count: {count.value}</div>;
}
In the above code, in line number 2, useSignal(0) is initializing the signal ‘count’ to 0 and the line const count=useSignal(0) is also when the signal ‘count’ is being created. In line number 4, {count.value} is how we are getting the value of the signal ‘count’.
For updating the value of the signal, use the following code:
count.set(count.value + 1);
Here the set() method is being used to update the value of the signal ‘count’.

Styling

For creating styles for a webpage, follow the following steps:
• In the src/routes/folder-name/index.scss or src/routes/folder-name/index.css, define your styles, such as:

p {
  font-weight: bold;
}

form {
  float: right;
}

• In the src/routes/folder-name/index.tsx, import the styles using the import statement:
import styles from "./index.css?inline";
(or)
import styles from "./index.scss?inline";

According to whether you are using scss or css.

• Also, in the index.tsx, import the ‘useStylesScoped$’ from qwik using:
import { component$, useSignal, useStylesScoped$, useTask$ } from "@builder.io/qwik";
• And then tell the component to load the styles using:
useStylesScoped$(styles);


How to do an API call

To do an API call in qwik, you can use the useResource hook which is available in Qwik. Here is code snippet which demonstrates an example of how to do an API call using Qwik:

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

const resource = useResource('https://api.example.com/endpoint');

if (resource.isLoading) {
  // Display a loading spinner
} else if (resource.error) {
  // Display an error message
} else {
  // Display the data from the API
  const data = resource.data;
}

To create a production build

Run the following command to create a production build:
npm run preview