Building
React Components
Using Chakra-UI

Rohmad Sasmito

Hello, I'm Rohmad

Frontend Engineer

React.js

Vue.js
Laravel

Flutter

Familiar with Framework 

Gowes

Play Game (PES, CS, Racing, etc)

Badminton
Futsal

Read books

Nonton, etc

Hobbies

React

React

A JavaScript library for building user interfaces

reactjs.org

Prerequisites

• Know about HTML, Javascript
• Know about CSS
• Better, if you know at least basic of React.js

Basic component insight

• React is composed of smaller components
• Each component should easy to reused
• Understand stateful component & stateless component

What is Chakra-UI?

About

Chakra UI is a simple, modular and accessible component library that gives you the building blocks you need to build your React applications.

What's benefits?

Benefits

• All components provided by Chakra UI are accessible following WAI-ARIA standards.
• Components are easy to theme, expand and fully customize.
• Combine components, components are small and are easy to combine to form bigger structures.
• Different color modes, switching between the typical light and dark colors or even any other set of colors will be a piece of cake.
• You will do more with less in less time, which is in fact the goal of most libraries and frameworks.
• The community is very active.

Want more?

Lets check it out

https://chakra-ui.com/docs

Useful Links

• Stateful and Stateless Components in React
• Why you should use Chakra UI in React
• Why A Good Frontend Developer Should Care About Web Accessibility
• Chakra UI Docs
• BEM 101
• Atomic Design

Github repo:

github.com/rohmad-st/chakra-ui-sample-app

Alhamdulillah

Finish

Any Questions?