skiss
©skiss 1997 - 2024
タイトル : Qwik まずはrun devするまで 2023/10 (qwik-cityなしでviteから)
更新日 : 2023-10-03
カテゴリ : プログラミング
タグ :
frontend   
qwik   
vite   

Qwik で run dev するまで

Viteのテンプレートに qwik-ts があったので、Viteでやってみます。

$ npm create vite@latest qwik-test1 -- --template qwik-ts

Scaffolding project in /home/XXX/work/Qwik/Try1/qwik-test1...

Done. Now run:

  cd qwik-test1
  npm install
  npm run dev

$

ちょっといじります。Reactに似てるって言うので、Reactを思い出しながらね。

メモ

export const App = component$(() => {   ★component$ 。Qwikでは暗黙な非同期境界ができない様に、非同期部分を $ で明示します。
　　　　　　　　　　　　　　　　　　　　　　　例えば、 コンポーネントの記述が component$()で囲われていますが、コンポーネントコードが
                                          一つの非同期分割単位(非同期境界)になっていることを示しています、だって。
  const count = useSignal(0)            ★ useSignalですね。Reactの血筋ですかね。

index.html

<!doctype html>
<html lang="en">
  <head><meta charset="UTF-8" /><title>Vite + Qwik + TS</title></head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

main.tsx

import '@builder.io/qwik/qwikloader.js'

import { render } from '@builder.io/qwik'
import { App } from './app.tsx'
import './index.css'

render(document.getElementById('app') as HTMLElement, <App />)

app.tsx

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

import './app.css'

import MyList from './mylist'

export const App = component$(() => {
  const count = useSignal(0)

  const list = [
    {
      name: 'apple',
      price: 150,
    },
    {
      name: 'orange',
      price: 100,
    },
  ]

  return (
    <>
      <h1>Vite + Qwikをちょっといじる</h1>
      <div class="card">
        <button onClick$={() => count.value++}>count is {count.value}</button>
      </div>

      <MyList mylist={list}/>
    </>
  )
})

mylist.tsx

import { component$ } from '@builder.io/qwik';
 
type ItemProps = {
  name: string;
  price: number;
}
 
type MylistProp = {
  mylist: ItemProps[]
}

export const MyList = component$<MylistProp>(({mylist}) => {

    const listItems = mylist.map(item =>
        <li key={item.name}>
            {item.name} {item.price}
        </li>
    );

    return (
        <ul>{listItems}</ul>
    );
});

export default MyList;