【React】Chakra UIとは? 3つの基本コンポーネントから理解しよう

概要

記事の対象者

• bootstrap や materialUI 以外も使ってみたい人
• React初学者でUIもこだわり始めようとしている人
• UIコンポーネントライブラリって何？って人

記事作成の経緯

先輩に勧めていただき Chakra UI を触り始め、非常に使い勝手が良かったので皆様にも紹介できたらと思い執筆することにしました。（随時、記事の内容は充実させていこうと思っております。）

Chakra UIとは？

3行でざっくり理解

1. ReactのUIコンポーネントライブラリ
2. ダークモードに標準で対応している
3. TypeScriptで書かれている

公式サイトの紹介文

Chakra UIは、シンプルでモジュール化されたアクセス可能なコンポーネントライブラリで、Reactアプリケーションを構築するために必要なビルディングブロックを提供します。（日本語訳）
参考：https://chakra-ui.com

まずはここから！3つの基本コンポーネントを紹介！

Boxコンポーネント

1. 一番基本のコンポーネント
2. <div>とほぼ同じイメージ
3. CSSはコンポーネントにpropsとして書く（全てのコンポーネント共通）

Boxコンポーネントは、他のすべての Chakra UI コンポーネントを構築する上で、最も抽象的なコンポーネントです。デフォルトでは、div 要素をレンダリングします。（日本語訳）
参考：https://chakra-ui.com/docs/layout/box

<Box bg="tomato" w="100%" p={4} color="white">
  This is the Box
</Box>

Flexコンポーネント

1. デザインするなら不可欠なFlexBox
2. <div style="display: flex;">とほぼ同じイメージ

Flexコンポーネントは、display: flexのBoxであり、便利なstyle shorthandが付属しています。これは、div要素をレンダリングします。（日本語訳）
参考：https://chakra-ui.com/docs/layout/flex

<Flex color="white">
  <Box flex="1" bg="tomato">
    <Text>Box 1</Text>
  </Box>
    <Box bg="lime">
    <Text>Box 2</Text>
  </Box>
  <Box bg="black">
    <Text>Box 3</Text>
  </Box>
</Flex>

Buttonコンポーネント

1. お洒落なボタンも一瞬で
2. 装飾済みの<button>とほぼ同じイメージ

Buttonコンポーネントは、フォームの送信、ダイアログのオープン、アクションのキャンセル、削除操作などのアクションやイベントのトリガーとして使用されます。（日本語訳）
参考：https://chakra-ui.com/docs/form/button

<Button colorScheme="blue">Button</Button>

まとめ

今回は、Chakra UI が気になっている方向けに本当に触りの部分を紹介させていただいました。
今後もコンポーネントの情報を増やしていこうと思いますので、紹介して欲しいものなどございましたら、お気軽にコメントください。