I didn’t plan to use any UI library like Bootstrap or others in my latest React project in the first place. But in the middle of the work, which is still in progress right now (which you could see here😝), I remembered Chakra UI and decided to just give it a shot, because my project kept getting more complex and I needed to get a simple component ready quickly.
Turns out I really like Chakra because they have some sort of ‘shorthand’ component and even shorter props. We’ll have a talk about it later on. I also like the way we style the component because it is through props, which I prefer over having a long className. But actually, it really depends on who’s working on it based on their preferences, and of course, the convenience of doing responsive stuff — making it work can sometimes take a while.
Learn how to build an interactive family tree (or any tree structure) in React.js. We will implement a breadth-first-search algorithm in TypeScript to dynamically insert nodes into our tree!
Links: https://github.com/jonasgroendahl/react-d3-tree-bfs (differs slightly from the video implementation, we use ids here instead of names)
Code a beautiful sidebar navigation using Chakra UI.
0:22 Starter files
Code along as I take a Dribbble dashboard design and code it using Chakra UI and Next.js! Along with Chakra UI, we use the react hook useState to make the content a bit more dynamic. This dashboard is fully responsive and follows best practices! This design uses the default Chakra UI theme but if you have a custom theme, you can modify it accordingly.
Chakra Docs: https://chakra-ui.com/
Chart.js Docs: https://www.chartjs.org/docs/latest/
React chart 2 docs: http://reactchartjs.github.io/react-chartjs-2/#/
Feather React Icons: https://react-icons.github.io/react-icons/icons?name=fi
Dribbble Design: https://dribbble.com/shots/15640240/attachments/7432009?mode=media
Learn how to make a hamburger navbar using chakra! Chakra does not come with an out of the box solution but we can easily use useState and css display to create one! You can easily change the look and feel of the nav bar by styling the Flex or Box elements, and easily use framer motion to add some animation!
Get the starting code: https://github.com/vercel/next.js/tree/canary/examples/with-chakra-ui
0:09 Channel Announcement
0:30 Introduction Continued
1:23 Importing Everything We Need
1:49 Creating The Desktop Navigation
4:23 Adding The Hamburger Nav Button
5:43 Creating The Mobile Navigation
7:37 Using useState To Dynamically Open And Close The Mobile Menu