 |
VOOZH | about |
|
VOOZH | about |
We’re so glad you’re here. You can expect all the best TNS content to arrive Monday through Friday to keep you on top of the news and at the top of your game.
Check your inbox for a confirmation email where you can adjust your preferences and even join additional groups.
Follow TNS on your favorite social media networks.
Become a TNS follower on LinkedIn.
Check out the latest featured and trending stories while you wait for your first TNS newsletter.
'use client', or client:load directives. It’s smart enough to execute (where necessary) on the server, and resume on the client. The Qwik team has done a much better job of explaining it than I ever could so head over to the docs to find out more: Think Qwik.
// astro.config.mjs
import { defineConfig } from 'astro/config';
import qwikdev from '@qwikdev/astro';
export default defineConfig({
integrations: [qwikdev()],
});
import React from 'react';
const SimpleReactComponent = () => {
return (
<div>
<p>Hello, I'm a simple React component</p>
</div>
);
};
export default SimpleReactComponent;
import { component$ } from '@builder.io/qwik';
const SimpleQwikComponent = component$(() => {
return (
<div>
<p>Hello, I'm a simple Qwik component</p>
</div>
);
});
export default SimpleQwikComponent;
component$. A full explanation can be found in the Qwik docs here: component$.
isVisible to either true orfalse.
This boolean value is used to determine if the <span /> containing the Rocket emoji is returned by Jsx. it’s also used to display either the word “Show” or “Hide” in the button.
You can see src code and a preview of this Qwik component on the links below.
import { useState } from 'react';
const UseStateBooleanReactComponent = () => {
const [isVisible, setIsVisible] = useState(true);
const handleVisibility = () => {
setIsVisible(!isVisible);
};
return (
<div>
<p>
<span>
{isVisible ? (
<span role='img' aria-label='Rocket'>
🚀
</span>
) : null}
</span>
Hello, I'm a useState boolean React component
</p>
<button onClick={handleVisibility}>{`${isVisible.value ? 'Hide' : 'Show'} Rocket`}</button>
</div>
);
};
export default UseStateBooleanReactComponent;
import { component$, useSignal, $ } from '@builder.io/qwik';
const UseSignalQwikComponent = component$(() => {
const isVisible = useSignal(true);
const handleVisibility = $(() => {
isVisible.value = !isVisible.value;
});
return (
<div>
<p>
<span>
{isVisible.value ? (
<span role='img' aria-label='Rocket'>
🚀
</span>
) : null}
</span>
Hello, I'm a useSignal Qwik component
</p>
<button onClick$={handleVisibility}>{`${isVisible.value ? 'Hide' : 'Show'} Rocket`}</button>
</div>
);
});
export default UseSignalQwikComponent;
$(), which transforms the function into a QRL. You can read more about function handlers in the docs here: Reusing event handlers.
Inside the function is where things get a little more different. With Qwik you update the signal value directly. E.g isVisible.value = true. A signal will only contain the value, and not the setter pair, like React’s useState.
And lastly, watch out for the trailing $ on the onClick attribute. E.g onClick$.
src code and a preview of this Qwik component on the links below.
import { useState } from 'react';
const UseStateBooleanReactComponent = () => {
const [rockets, setRockets] = useState(['🚀']);
const handleAdd = () => {
setRockets((prevState) => [...prevState, '🚀']);
};
const handleRemove = () => {
setRockets((prevState) => [...prevState.slice(0, -1)]);
};
return (
<div>
<div className='h-8'>
{rockets.map((data, index) => {
return (
<span key={index} role='img' aria-label='Rocket'>
{data}
</span>
);
})}
</div>
<p>Hello, I'm a useState array React component</p>
<div className='flex gap-4'>
<button onClick={handleAdd}>+</button>
<button onClick={handleRemove}>-</button>
</div>
</div>
);
};
export default UseStateBooleanReactComponent;
import { component$, useStore, $ } from '@builder.io/qwik';
const UseStoreQwikComponent = component$(() => {
const rockets = useStore(['🚀']);
const handleAdd = $(() => {
rockets.push('🚀');
});
const handleRemove = $(() => {
rockets.pop();
});
return (
<div>
<div className='h-8'>
{rockets.map((data) => {
return (
<span role='img' aria-label='Rocket'>
{data}
</span>
);
})}
</div>
<p>Hello, I'm a useStore Qwik component</p>
<div className='flex gap-4'>
<button onClick$={handleAdd}>+</button>
<button onClick$={handleRemove}>-</button>
</div>
</div>
);
});
export default UseStoreQwikComponent;
useSignal example, the function declarations are wrapped with $() but in my opinion, the way to update the array is more straightforward. A simple/standard JavaScript .push or .pop can be used, rather than the React method of having to spread the previous state before modifying it.
src code and a preview of this Qwik component on the links below.
import { useState, useEffect } from 'react';
const ClientFetchReactComponent = () => {
const [data, setData] = useState(null);
useEffect(() => {
const getData = async () => {
const response = await fetch('https://api.github.com/repos/BuilderIO/qwik/pulls/1', {
method: 'GET',
});
if (!response.ok) {
throw new Error();
}
const json = await response.json();
setData(json);
try {
} catch (error) {
console.error(error);
}
};
getData();
}, []);
return (
<div>
<p>Hello, I'm a simple Client fetch React component</p>
{data ? <pre>{JSON.stringify(data, null, 2)}</pre> : Loading...}
</div>
);
};
export default ClientFetchReactComponent;
import { component$, useVisibleTask$, useSignal } from '@builder.io/qwik';
const ClientFetchQwikComponent = component$(() => {
const data = useSignal(null);
useVisibleTask$(async () => {
try {
const response = await fetch('https://api.github.com/repos/BuilderIO/qwik/pulls/1', {
method: 'GET',
});
if (!response.ok) {
throw new Error();
}
const json = await response.json();
data.value = json;
} catch (error) {
console.error(error);
}
});
return (
<div>
<p>Hello, I'm a simple Client fetch Qwik component</p>
{data.value ? <pre>{JSON.stringify(data.value, null, 2)}</pre> : Loading...}
</div>
);
});
export default ClientFetchQwikComponent;
useEffect has to return a function, not a promise. In order to fetch data asynchronously on page load, a useEffect with an empty dependency array needs to contain a function that can use async/await.
Qwik, however, has useVisibleTask — which can return a promise. useVisibleTask is only executed in the browser, but if you do want to use a similar approach for server-side data fetching, Qwik also has useTask.
