Skip to main content

Qwik vs. React's JSX

While Qwik is based on TSX files, there are a couple differences between React syntax and Qwik.

Here is a list of examples with both technologies, I found important to know. Almost everything else works the same way.

Basic component​

Qwik:

export const HelloWorld = component$(() => {
    return <div>Hello world</div>
})

React:

export function HelloWorld() {
    return <div>Hello world</div>
}

On click event​

Qwik:

export const App = component$(() => {
    return <button onClick$={handleClick}>Press me</button>
})

For anonymus arrow function within the onClick, it is also the same as for React:

return <button onClick$={() => alert('Hello!')}>..</button>

React:

export function Button() {
    return <button onClick={handleClick}>Press me</button>
}

State​

Qwik:

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

export const App = component$(() => {
    const state = useStore({
        count: 0,
    })
    return (
        <>
            <p>{state.count}</p>
            <button onClick$={() => state.count++}>Add</button>
        </>
    )
})

React:

import { useState } from "react"

export const App = () => {

    const [count, setCount] = useState(0)
    return (
        <>
            <p>{count}</p>
            <button onClick={() => setCount(count + 1)}>
                Add
            </button>
        <>
    )
}