小前言

在 Day02 我們了解了專案結構，從 Day03 開始我們針對 src 內的資料夾做處理和觀看。

• 如果我們是用 pnpx degit solidjs/templates/ts-unocss ${專案} 建立則 src 內部會長這樣的資料夾結構

├── App.tsx
└── index.tsx

• 如果我們是一般的 typescript 版本，pnpx solidjs/templates/ts ${專案} 建立 則 src 內部會長這樣的資料夾結構

├── App.module.css
├── App.tsx
├── assets
│   └── favicon.ico
├── index.css
├── index.tsx
└── logo.svg

會有這差異主要是 unocss 版本的，我們使用的是 unocss 作為 css 框架，所以把自定義的 App.module.css以及 index.css 給省略了，以及 assets logo.svg也給移除。

所以使用 unocss 版本的，網頁的頁籤樣式以及 logo 都要自己定義。

一切的開始 index.tsx

這時候我們把關注放在 index.tsx 內

import 'uno.css';
import { render } from 'solid-js/web';

import App from './App';

render(() => <App />, document.getElementById('root') as HTMLElement);

如果使用 unocss 會發現 在程式第一行已經幫我們 import 'unocss' 的語法了
這樣往後任何地方我們都可以使用 unocss，不過不用特別擔心，因為 unocss 寫法基本上與 tailwindcss差不了多少，

關於 render

render(() => <App />, document.getElementById('root') as HTMLElement);

意思是我們把 compoent <App />渲染到 root 的 document 內，而這個 root 來自於
index.html 內部的 <div id="root"></div>

而 <App />則是來自於 import App from './App' 的位置，

這時候我們看到檔案內 src/App.tsx 就有專案幫我們建立好的元件。

import type { Component } from 'solid-js';

const App: Component = () => {
  return (
    <p class="text-4xl text-green-700 text-center py-20">
      Hello <a class="text-pink-600 hover:font-bold hover:border-1" href="https://antfu.me/posts/reimagine-atomic-css" target="atomic-css">Atomic CSS</a>!
    </p>
  );
};

export default App;

開始嘗試自訂 component

我們在 src內部建立一個資料夾 components 並在裡面創建一個空的檔案 Hello.tsx

因此各位的專案結構會像我這樣

├── README.md
├── index.html
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── App.tsx
│   ├── components
│   │   └── Hello.tsx
│   └── index.tsx
├── tsconfig.json
├── unocss.config.ts
└── vite.config.ts

我們接下來要把 App.tsx 內注入我們自訂的元件 Hello.tsx 。
(記得 import HelloComponent from './components/Hello')

• Hello.tsx

export default function HelloComponent() {
  return (
    <div>Hello</div>
  );
}

• App.tsx

import type { Component } from 'solid-js';
import HelloComponent from './components/Hello'

const App: Component = () => {
  return (
    <>
      <HelloComponent />
      <p class="text-4xl text-green-700 text-center py-20">
        Hello <a class="text-pink-600 hover:font-bold hover:border-1" href="https://antfu.me/posts/reimagine-atomic-css" target="atomic-css">Atomic CSS</a>!
      </p>
    </>
  );
};

export default App;

如何跑起我們的 solidjs ?

在專案資料夾內有一個檔案是 package.json 裡面的內容長這樣的

• package.json

{
  "name": "vite-template-solid",
  "version": "0.0.0",
  "description": "",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview"
  },
  "license": "MIT",
  "devDependencies": {
    "@unocss/preset-mini": "^0.45.13",
    "@unocss/vite": "^0.45.13",
    "typescript": "^4.8.2",
    "vite": "^3.0.9",
    "vite-plugin-solid": "^2.3.0"
  },
  "dependencies": {
    "solid-js": "^1.5.1"
  }
}

這時候留意到， "scripts" 的 json 屬性內，裡面有我們可以執行的指令

• pnpm dev:這指令的意思是，我們可以直接跑起我們的 solidjs 專案，並且監聽在 3000 port，通常我們一開始開發時會先執行，並且到瀏覽器上可以看到我們的畫面結果。

pnpm dev

• pnpm build: 這指令是可以把我們 solidjs 打包成最後的樣子，通常要交付檔案，會是部署在 server 上我們會交付打包出來的結果。(預設會產生在 dist 資料夾內)

(以上圖片是打包出來的樣子)

這時候我們可以嘗試看看把剛才注入的 Hello.tsx 做好後，執行看看 pnpm dev 這時候打開自己常用的瀏覽器輸入 localhost:3000 看看結果是否是我們想要的。