Create a new React App using chakra-ui components

Table of Contents

Introduction

Few days ago, I wished to create a new React App utilizing chakra-ui compnents. Wonder what, I did not find any blog or article that could help me out and get me up to speed quickly. So, I decided to write one for the community. Let’s get started.

Assuming that you have npm and node installed on your system, let’s start by creating a new React App. I will be citing references of the blogs and articles that I referred to while creating the app. You can refer to them for more details

Create a new React App using the following command:

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

This command will create a new folder my-app and install all the necessary dependencies required to run the app. Now, navigate to the folder my-app and start the development server using the following command:

cd my-app
npm start

Now, go to file src/index.js or src/index.jsx and wrap the App component with ChakraProvider as shown below:

import { ChakraProvider, ColorModeScript } from '@chakra-ui/react';
import React, { StrictMode } from 'react';
import * as ReactDOM from 'react-dom/client';
import App from './App';
import reportWebVitals from './reportWebVitals';
import * as serviceWorker from './serviceWorker';

const container = document.getElementById('root');
const root = ReactDOM.createRoot(container);

root.render(
    <StrictMode>
        <ColorModeScript />
            <ChakraProvider>
                <App />
            </ChakraProvider>
    </StrictMode>
);

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://cra.link/PWA
serviceWorker.unregister();

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Everything is now setup, you may navigate to src/App.js or src/App.jsx and start building your app. I will illustrate how to use chakra-ui breadcrumb component and create a simple navbar using it. Let’s create a new folder components inside src and add a file navbar.jsx inside it. Import the necessary components:

import {
    Box,
    Flex,
    Breadcrumb,
    BreadcrumbItem,
    BreadcrumbLink,
    useColorModeValue,
} from '@chakra-ui/react'

import {
    ChevronRightIcon,
} from '@chakra-ui/icons'

Now, create a helper function to render the breadcrumb items:

function BreadCrumb() {
    return (
        <Breadcrumb separator={<ChevronRightIcon color='gray.500' />}>
            <BreadcrumbItem>
                <BreadcrumbLink>Home</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbItem>
                <BreadcrumbLink>About</BreadcrumbLink>
            </BreadcrumbItem>

            <BreadcrumbItem>
                <BreadcrumbLink>Contact</BreadcrumbLink>
            </BreadcrumbItem>
        </Breadcrumb>
    );
}

Then, create a functional component Navbar, that will render the breadcrumb items and export it by default:

function NavBar() {
    return (
        <Box bg={useColorModeValue('gray.100', 'gray.900')} px={4}>
            <Flex h={16} alignItems={'center'} justifyContent={'space-between'}>
                <BreadCrumb />
            </Flex>
        </Box>
    );
}

export default NavBar;

You will need to install chakra-ui/icons using:

npm install @chakra-ui/icons

Now, you can import the Navbar component in src/App.js or src/App.jsx and render it inside the App component:

import React from 'react';
import {
  Heading,
} from '@chakra-ui/react';

import NavBar from './components/navbar';

function App() {
  return (
    <div>
      <NavBar />
      <Heading as='h3' size='2xl' textAlign='center' mt='10'>Hello World!</Heading>
    </div>
  );
}

export default App;

Preview

Conclusion

That’s it, you have successfully created a new React App using chakra-ui components. You can now start building your app using chakra-ui components. You can refer to the official documentation of chakra-ui for more details: chakra-ui

In the next blog, I will illustrate adding browser routing to the app using react-router-dom and creating a multi-page app using chakra-ui components. Stay tuned!