• Introduction
• Setup
• 1. Clone the Starter App
• 2. Start the Mock API Server
• 3. Review the Application
• Create Dialog
• Overview
• 1. Refactor Fields
• 2. Refactor Form
• 3. Convert Fields to Functions
• 4. Convert Actions to Functions
• 5. Create Schema
• 6. Create SchemaForm
• 7. Create Blueprint
• Update Dialog
• 1. Refactor Update Dialog
• Destroy Dialog
• 1. Refactor Delete Dialog
• Next Steps
• Next Steps
• Misc
• Completed Project

Introduction

At first, how the hooks build forms likely won't make much sense. This walks through a series of refactors to demonstrate the pattern used by the hook and how it came to be.

The goal is to provide an understanding of how the hook actually works, so you can feel in control of it. But also to provide the reasoning for the hook, because if you disagree with the reasoning, the implementation is unlikely to be something you want to use.

Another goal is that by explaining the reasoning and construction patterns, even if you don't want to use the form libraries, you may find some useful ideas to take back to your own applications.

Unlike the Quickstart, this tutorial will not provide a choice in preferred syntax. All React code will be using createReactClass.

This is the application we'll be working with:

Next Steps

Ready? Let's get started!