Components
任意ですが、ページに使用するコンポーネントを分割して src/components
に置く方法がおすすめです。v2 以降は CSS ファイルを読み込めるため、隣に置いて管理しやすくなりました。
import "./app-header.css"
const AppHeader = () => {
return <header className="app-header">minista</header>
}
export default AppHeader
CAUTION
- import した CSS は
bundle.css
として結合し全体に適応されます - 静的ビルドされるため React の Hook を使用することはできません
- React の Hook は Partial Hydration で使用できます
Head
import { Head } from "minista"
export default () => {
return (
<Head>
<title>タイトル</title>
<meta name="description" content="ディスクリプション" />
</Head>
)
}
<head>
タグ内のデータを上書きする組み込みコンポーネント。使い方は react-helmet と同様です。
Comment
import { Comment } from "minista"
export default () => {
return <Comment text="Comment Test" />
}
// => <!-- Comment Test -->
HTML コメントを残せる組み込みコンポーネント。本番ビルド時に適応されます。
Partial Hydration
ページは静的ビルドされますが、使用するコンポーネントは部分的に React App 化することが可能です。詳細は Assets の Partial Hydration を参照ください。