---
title: 'Fabric Tutorial'
---

## thigns to demo

1. using components
2. making them accessible
3. creating customized control
4. state management
5. theming

Fabric Tutorial
===

## Table of Contents

[TOC]

link to Sandbox | Link to finished code

## What we are building

Create a Form component

## Setup for Tutorial

You can follow this tutorial online using CodeSandbox, or set up a local development environment using `npm init uifabric`

### Option 1: Write code in the browser

Open this CodeSandbox

### Option 2: Set up local environment

1. Install node
2. Open a terminal (or use the one provided in VS Code)
3. run `npm init uifabric my-demo` in the directory of your choice
4. remove stuff from App.tsx file (TODO)

## Get to know the Fabric controls

### React Basics
https://reactjs.org/docs/hello-world.html

### Import a control

Import a TextField

<TextField />

### Customize a control

1. Create Underlined TextField variant
2. Customize Icon
3. Add prefix

### Connect a control to state

1. useState
2. convert to controlled input
3. mirror textfield state inside of text component

## Build a new component following [Thinking in React](https://reactjs.org/docs/thinking-in-react.html)

### Start with a design in mind

Need simple list design using Fluent UI controls
80% stock, 20% custom design

### Break up design into hierarchy

We need multiple ways to manipulate data, like one to add to the list and another to filter. Then we can split UI into filter/render (with possible subgroups) /modify.

### Build a static version in React

Start building static UI with Fluent UI (no list). Then pull replace static items with data/render driven list.

### Drive the UI from data

Define the schema needed for the incoming data. Write types.

### Determine where state lives (move it to parent)

We should have business state (item list) and local state (filter? open/close?). Talk about moving business state up above the component, and making it part of the prop contract.

### Drive data from UI

Write functions to modify data

## BONUS Where should state REALLY live
Redux
Mobx
React State

## Perpetuate state with Azure