Home

React App

Date: April 16, 2024.

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: ```console 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: ```console 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: ```js 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: Then, create a functional component `Navbar`, that will render the breadcrumb items and export it by default:

You will need to install chakra-ui/icons using: ```console 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:

Preview

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!