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でこのページを編集する