---
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
```jsx
<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