Build a simple Todo App using Microsoft Fluent UI React
Tags: react, webdev, showdev, javascript
Published: 2020-05-11 14:51:20

> This article was originally published [here](https://www.c-sharpcorner.com/article/build-a-simple-todo-app-using-microsoft-fluent-ui-react/).

This is the second article in the Fluent UI React series. In this article, we will be creating a simple Todo application using React JS and Fluent UI React library. We will be exploring so many Fluent UI components like Stack, Dialog, etc. So let's grab a cup of coffee and start coding.

# TL;DR
* [Live App](https://fluent-ui-todo-app.netlify.app/)
* [Source Code](https://github.com/sumitkharche/fluent-ui-todo-app)

# Prerequisites

You need to have installed the latest stable version of [Node JS](https://nodejs.org/en/) and NPM. You will easily understand the following tutorial if you have a basic understanding of:

* HTML, CSS, and JavaScript
* React, Hooks 

If you don't know about Microsoft Fluent UI you can check out below article:

{% link https://dev.to/sumitkharche/getting-started-with-microsoft-fluent-ui-react-23ae %}

# Building Todo Application 

#### 1. Create new React App

We will be using the Create React App tool to create our React app. So let's run below command:

```
npx create-react-app fluent-ui-todo-app --typescript
```

#### 2. Integrate Fluent UI React into App

Now once the app is successfully created then the next step is to install Fluent React into our app.

```
cd fluent-ui-todo-app
npm i @fluentui/react
```

#### 3. Building components for App

We will be creating a simple todo application where we can add new todo and delete the existing todos. So we know that everything in React is component so we will be dividing our todo app into 3 components i.e AddTodo, TodoList, TodoItem. The great thing is we will using different Fluent UI components while creating these components. 

To enable Fluent UI style we have to add Fabric component from Fluent UI library so open `index.tsx` file and add below code:

{% gist https://gist.github.com/sumitkharche/19b17bf42688bd0b57a8d2d2f8f5648d %}


To organizing our components, we are going to use Stack Utility of Fluent UI. According to [doc](https://developer.microsoft.com/en-us/fluentui#/controls/web/stack):
> A Stack is a container-type component that abstracts the implementation of a flexbox in order to define the layout of its children components.

Stack is based on flexbox so we can control:
* Direction: By adding `vertical` or `horizontal` properties,
* Alignment: using `verticalAlign` and `horizontalAlign` properties,
* Spacing: by adding `gap` and `verticleGap` properties.
 
So open `App.tsx` file add below code:

{% gist https://gist.github.com/sumitkharche/b24de581317f8ff883877fb02f07eebe %}

Add below class into App.css file:

```css
.wrapper {
  max-width: 480px;
  margin: auto;
  background: #fff;
  margin-top: 50px;
  display: flex;
  flex-direction: column;
  padding-left: 50px;
  padding-right: 50px;
  padding-bottom: 50px;
}
```

We will start by displaying the todo list. First, we will use `useState()` hook to in the App component which stores an initial list of Todos. So add below line App component:

```javascript
const [todos, setTodos] = useState([{ id: 1, name: "Todo Item 1" }, { id: 2, name: "Todo Item 2" }]);
```
Now next step is to display this Todo list. So to do this create 2 components TodoItem for single todo and TodoList which uses the TodoItem component to display all the todos by using the `map()` method.

Create TodoItem component add below code:

{% gist https://gist.github.com/sumitkharche/3492b474f4cd5a7fe4abcf4a1dd7b467 %}

So here we have used `Stack` for organizing the Todo and `Label` to show the todo name from `@fluentui/react`.
 
Create TodoList component add below code:

{% gist https://gist.github.com/sumitkharche/ce0a47a83b73eee306f8e61e8cd7f3a9 %}

Now we have to import the TodoList component into App component and pass the todos present in the App component state as props to TodoList.

{% gist https://gist.github.com/sumitkharche/deef79bca975d176ac1f048f98149543 %}

So run the app and you will see the Todo's list.

![todo-list-1](https://dev-to-uploads.s3.amazonaws.com/i/lelvwp87v5v2xsqujm7c.PNG)

So the next step is to add new todo functionality. Create a new component called AddTodo which has one input field and one button. On the button click to call a function in props to add todo.

{% gist https://gist.github.com/sumitkharche/f08a2816367b2ad16f9b500c5e1715a1  %}

Here we have used `TextField`component to display an input field and `PrimaryButton` for displaying button from `@fluentui/react`.

Create a new function in App component for adding todo into state and pass it to AddTodo function in props.

{% gist https://gist.github.com/sumitkharche/7c5fcbc8d4b3e375bfb1debd9adf3b2d %}

![add-todo](https://dev-to-uploads.s3.amazonaws.com/i/ol8apzrd54gr0jt7gk08.gif)

Final step is to delete the todo in the list. So first add deleteTodo function in the App component as below:

```javascript
const deleteTodo = (id: number) => {
    const newTasks = todos.filter((todo) => { return todo.id !== id });
    setTodos(newTasks);
  }; 
```
and pass this function to TodoList component:

```
<div className="wrapper">
      <Stack horizontalAlign="center">
        <h1>Todo App using Fluent UI & React</h1>
        <Stack style={{ width: 300 }} gap={25}>
          <AddTodo addTodo={addTodo} />
          <TodoList todos={todos} deleteTodo={deleteTodo} />
        </Stack>
      </Stack>
    </div>
```
Again from TodoList component pass this deleteTodo function TodoItem component:

```
<TodoItem todo={todo} key={todo.id} deleteTodo={props.deleteTodo} />
```
We will be using IconButton for showing delete button for each todo and also using Dialog Compnent to ask user before deleting todo. So deleteTodo component is looks like this:

{% gist https://gist.github.com/sumitkharche/3c2b5eb9dd5325e5e7f333fe1ed7a0eb %}

Maintain a state of dialog like when to open and when to close by using useState() hook. You can check more properties about Dialog [here](https://developer.microsoft.com/en-us/fluentui#/controls/web/dialog).

To enable icons we have to import `initializeIcons` from Fluent UI and call `initializeIcons()` method so open index.tsx and `initializeIcons` in it.

```
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { Fabric, initializeIcons } from "@fluentui/react";

initializeIcons();

ReactDOM.render(
  <React.StrictMode>
    <Fabric>
      <App />
    </Fabric>
  </React.StrictMode>,
  document.getElementById('root')
);

serviceWorker.unregister();

```

![Final app](https://dev-to-uploads.s3.amazonaws.com/i/zvc20sgv79r8w46dh7ep.gif)


# Deploy it
We can now deploy our application on any hosting platform. I recommend deploying it on [Netlify](https://www.netlify.com/) because it supports project structures like this and can quickly create deployments. You can deploy application on [Now](https://zeit.co/now) or [Surge](https://surge.sh/) also. 


#Conclusion
In this article, I have demonstrated to you how to create a Todo application using Fluent UI React. We have also used a few Fluent UI React components like Stack, Dialog, PrimaryButton, Label, TextField.

I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.

You can reach out to me on twitter [@sumitkharche01](https://twitter.com/sumitkharche01)
 
Happy Coding!!