Yamada UIにスターをあげる

スター
Yamada UIYamada UIv1.5.1

Create React Appではじめる

パッケージをインストールする

まず、アプリケーションを作成します。

ターミナルで次のコマンドのいずれかを実行します。

pnpm create react-app my-app --template typescript
Copied!

Yamada UIは、@yamada-ui/reactをインストールするだけで、ほとんどのコンポーネントやフックを使用できます。

pnpm add @yamada-ui/react
Copied!

テーブル・カレンダー・カルーセルなど使用する場合は、別途インストールをする必要があります。

pnpm add @yamada-ui/table
Copied!
パッケージ説明
@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-markdownreact-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>,
)
Copied!

コンポーネントを使用する

UIProviderを追加したら、アプリケーション内でコンポーネントを呼び出します。

app.tsx

import { FC } from "react"
import { Button } from "@yamada-ui/react"
export const App: FC = () => {
return <Button>Click me!</Button>
}
Copied!

GitHubでこのページを編集する

フレームワークNext.js