Exploring Chakra UI — A New React App.
An explorer’s look at a stylish and accessible UI component library for React Applications.
Hi to everyone! First, a little background.
I have been working with React for a little over a year now, and I spend most of my time exploring the amazing ways that information is organized and presented on the Internet. Yes, I am a UI enthusiast, with a sort of obsession for clean user interfaces.
On December 23rd, 2021, I discovered some stuff that was really interesting to me, and I wanted to try it out. This series is going to be the journey of my experience with building the application from scratch to finish.
A little about the UI Library
Chakra UI is an accessible and easy to work with component library for React apps with some good features coming out of the box, like dark and light mode toggle, WAI-ARIA compliant components, and support for composition of any sort of components. As such, I was quite inclined to try it out.
Having worked with Bootstrap quite closely for about two-and-half years, and later with Angular Material for a short amount of time, I thought it a good idea to try my hands with this framework as well.
But what to build with it?
You simply can’t just break out a cool new framework and put it to use without a thought as to what you want to build with it. Cool buttons, catchy colors and all the pre-built stuff is good, but what are we using it for? What kind of data are we going to present in such a cool fashion?
My first thought was to search for some easy to access and free REST API to consume on the front end. My requirements — it has to be simple, easy to access, and should be about a topic that is interesting to work with.
After digging the Internet for a few hours, I came upon TMDB. It’s a community curated database for movies, TV shows and a lot more. With over a million records of what-to-watch, and a generously provided free-to-use API, it was an easy choice.
So, we’re building a simple clone of the site, with the more tricky features removed, like user management and watchlists. Just a little something to play around with and try out some stuff.
Project Set Up.
I’ll be using Visual Studio Code as my code editor for this project. We’ll be creating a very standard create-react-app for the basic boilerplate. We’ll need node.js installed to set up the project. We’re using the current stable version 16 which comes with npm version 8. But anything above version 14 should work just fine.
Step 1: Create React App.
npx create-react-app tmdb-clone-chakra
Here we’re using the npx package runner which comes with npm v5.6 and above. This will set up our project for development with all the development set up taken care of. Once the process is finished we have a react app in our hands to play with. The folder structure should look something like this:
(Optional) Step 2: Cleanup of the boilerplate.
From here we could remove some stuff that we’re not going to need for this project if we like. These will be the files highlighted in the above image. After removing the files, we’d also need to remove their imports from the index.js and App.js files respectively.
In the end, we should be left with the following two files in our src folder..
Now, we can run npm start in the root directory to start up the development server which should start our app on http://localhost:3000. Alternatively, if you’re using yarn as your package manager, you’d run yarn start.If we visit the link, we’ll be presented with a very white and very mundane blank screen.
Step 3: Installing Necessary Packages.
Chakra UI.
Following the steps provided in the guide for create-react-app in the Chakra UI docs, we run the following command in our root directory to get the required packages installed in our project as dependencies:
npm i @chakra-ui/react @emotion/react@^11 @emotion/styled@^11 framer-motion@^5
We’d also need the following packages in our project in addition to Chakra UI.
axios— for communicating with the API. We could use the built in Fetch API in JavaScript, but axios makes our lives a lot more easier, especially as we are not focusing on the API part for this project.react-query— A hook based wrapper around axios to handle the fetching and caching of our API data.react-router-dom— To manage routing between different pages in our application. We are using the latest version 6 of the library.formik— A library to handle all our forms in the application. We could do all of our form management through states, but a package would save us a lot of time and let us focus on exploring chakra more.
Run the following command to install the above packages:
npm i axios react-query react-router-dom formik
That’s it for now folks, in the next part, we’ll look at how to set up Chakra UI, react-router-dom and react-query in our application and we’d get on with building out our very first chakra components.