Create React Appではじめる
パッケージをインストールする
まず、アプリケーションを作成します。
ターミナルで次のコマンドのいずれかを実行します。
pnpm create react-app my-app --template typescript
Yamada UIは、@yamada-ui/reactをインストールするだけで、ほとんどのコンポーネントやフックを使用できます。
pnpm add @yamada-ui/react
テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。
pnpm add @yamada-ui/table
| パッケージ | 説明 | |
|---|---|---|
| @yamada-ui/table | @tanstack/react-tableを使用した、便利なテーブルコンポーネントを提供します。 | |
| @yamada-ui/calendar | dayjsを使用した、便利なカレンダーとデイトピッカーコンポーネントを提供します。 | |
| @yamada-ui/carousel | embla-carousel-reactを使用した、便利なカルーセルコンポーネントを提供します。 | |
| @yamada-ui/dropzone | react-dropzoneを使用した、便利なドロップゾーンコンポーネントを提供します。 | |
| @yamada-ui/charts | rechartsを使用した、便利なチャートコンポーネントを提供します。 | |
| @yamada-ui/markdown | react-markdownとreact-syntax-highlighterを使用した、便利なマークダウンコンポーネントを提供します。 | |
| @yamada-ui/fontawesome | Font Awesomeを便利に使用するためのコンポーネントを提供します。 |
UIProviderを追加する
Yamada UIをインストール後、UIProviderを追加します。
index.tsx
import { createRoot } from "react-dom/client"import { App } from "./app"import { UIProvider } from "@yamada-ui/react"const container = document.getElementById("app")const root = createRoot(container!)root.render(<UIProvider><App /></UIProvider>,)
デフォルトのテーマは、UIProviderのなかに含まれています。
テーマやコンフィグをカスタマイズしたい場合は、テーマをカスタマイズするとコンフィグをカスタマイズするをご覧ください。
コンポーネントを使用する
UIProviderを追加したら、アプリケーション内でコンポーネントを呼び出します。
app.tsx
import { FC } from "react"import { Button } from "@yamada-ui/react"export const App: FC = () => {return <Button>Click me!</Button>}
GitHubでこのページを編集する

