Introduces

Hello guys, how are you today? I hope all of you are always in great conditions. Smile :)

In this article, I would like to sharing about my experience to build React Components using Chakra-UI. Before I show you how to start these. I would like to give link of my presentation about it in this presentation.

Big thanks to slides.com that have building this great platform.

Prerequires

Understand about HTML, Javascript, and CSS
Better if you already explores or even understand React.

Basic Knowledges

Before we jump to steps over those, I would like to give you some basic insight about building components. These very basic, but it will great, to understand deeply about it.

React is composed of smaller components

We should be aware, that React is builded of few small piece of code that usually call it as component.

Each component should easy to reused

Always to start those from figure it as small components as possible, every we will build component.

So different components can be reused like Lego pieces, even if you don’t have immediate plans to reuse a component - Mosh Hamedani, 2019

Understand stateful component & stateless component

In simply words, stateful component is component that act to handle state over there. Whereas stateless component is smaller piece of component that have no states, it just providing props instead of states

Nb. If you wanna to know about all benefits to used Chakra UI, you can read over available docs or also can read my presentation in above.

Get started

When you want to implement Chakra in your exist React project, you can start to running or follow this guide :

Installing

# using npm
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

# using yarn
yarn add @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^4

or if you want to explores about Chakra with initial new project, you can running it with cra or follow this guide:

npx create-react-app my-app --template @chakra-ui

When you start with first step. You should modify your App like below:

import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <ChakraProvider>
      <Component />
    </ChakraProvider>
  )
}

Inject or Custom theme

Of course, you also possible to injects or custom the default Chakra styles with your own styles very easily. Like following snippet codes:

import * as React from "react"
// 1. import `ChakraProvider` component
import { ChakraProvider } from "@chakra-ui/react"
// 2. Using your own styles
import { theme } from "./theme";

function App({ Component }) {
  // 3. Use at the root of your app and pass theme to theme props
  return (
    <ChakraProvider theme={theme}>
      <Component />
    </ChakraProvider>
  )
}

Until these steps, we can start to using Chakra components in our app. We can using Box, Flex, Button, and all of available Chakra components.

Of course, I have created repo if you want to jump over the real codes at my github https://github.com/rohmad-st/chakra-ui-sample-app

Thanks you, if you are think this article is helpful feel free to share it. or if you have some feedback to give me comments below.

Building React Components using Chakra-UI

Build React components will always easier.