Building an Application with Mantine in ReactJS #1
Published: 2022-02-18 02:31:07

![Mantine Banner](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4kjr5jani5dmin7a5mch.png)

## Intro
After 1 year of learning ReactJS and frontend development I've been looking for adventure, this is when I found [Mantine](https://mantine.dev/getting-started/).

Mantine is:

>"A fully featured React components library"

Mantine also provides many options for styling and even it's off-the-shelf hooks. This was something I was completely unfamiliar with. At the time I was also learning to use TypeScript within ReactJS projects and struggling.

Throughout this series of articles I'll be discussing my struggles with ReactJS with Mantine and TypeScript, and will be sharing my solutions as well has hopefully receiving some!

---

## Part 1 - Preparing
The tool I'm building is a interface for an 'Asset Configuration Management Tool' using Ansible under the hood.

To start we'll set up the project:
`npx create-react-app . --template typescript`
I'll be starting the project in an already named directory hence the `.` in-between `create-react-app` and `--template typescript`.

This will generate the lovely create-react-app boilerplate with TypeScript already plugged in.

![Create-React-App Filestructure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qo9rhyzw6stukkrdoumo.png)

Second step will be removing all the boilerplate code to start from a blank canvas. Once done we'll run in the terminal `npm run start`. And after removing all css...

![App](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p0txznsxa73bez5wglxc.png)

Currently we won't be structuring the codebases file structure as we'll address that as our needs evolve.

## Part 2 - Building the Home Page

First we'll install Mantine:
`npm install @mantine/hooks @mantine/core`

To start we want a basic application format with a navigation bar for users to browse the application. Luckily this is where the first Mantine component, [AppShell](https://mantine.dev/core/app-shell/).

![AppShell Demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/u7p0w4tak3u9mhl1g4bs.png)

We'll import the necessary components from the Mantine Core library:
```javascript
import React from 'react';
import './styles/App.css';

import { AppShell, Navbar} from '@mantine/core'

function App() {
  return (
    <div>
      Hello Dev.to!
    </div>
  );
}

export default App;
```
We'll now start to configure our AppShell component, note I haven't imported the Header component as we won't be requiring it for this project.

```javascript
import React from 'react';
import './styles/App.css';

import { AppShell, Navbar } from '@mantine/core'

function App() {
  return (
    <AppShell
      navbar={
        <Navbar
          width={{ base: 300 }}
          height='100vh'
        >
          {/* Navbar Content */}
        </Navbar>
      }
    >
      {/* Your application here */}
    </AppShell>
  );
}

export default App;
```
As you can see I've set the height to the Viewport Height of 100% this mean it will extend vertical across the whole application. This is because we want to make this AppShell the backbone of the application.

Sadly you can barely see the line separator between the Navbar and the Application window here, this will change when we add custom styling.

![Light Mode AppShell](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kv89w0815sb1ga2bqbhh.png)

## Conclusion
Next time we'll add styling so we can see the difference between the two sections created by AppShell. Mantine have a provider which you can apply styles globally which is great for implementing a dark/light feature which we'll be doing!

Thanks for reading, let me know you opinions and hope to find you in the next one!