Forms: Pattern Construction

WARNING! v0.13 was just released, and the tutorial is currently undergoing final testing. It's recommended that you DO NOT follow along until this message is removed (please check back tomorrow).

Mental model for the forms implementation

Review the Application

In this step we'll familiarize ourselves with the application we'll be using.

View the Application

Now that the application is built, and the mock server is running, you can view the application by navigating to http://localhost:3000. Once you do, you should see this:

The application is pretty basic. There's a Feed that displays a list of tweets, and you can create new tweets, as well as edit and delete existing tweets.

Additionally, when you create a tweet, it will immediately show up at the top of the Feed. There is no pagination or infinite scrolling for this application.

Feel free to try out the application. Each of the actions you can perform (create, edit, and delete) will launch a dialog. The location of the code for each dialog is shown below:

  • The create dialog is located at src/dialogs/tweet/create/index.js
  • The edit dialog is located at src/dialogs/tweet/update/index.js
  • The delete dialog is located at src/dialogs/tweet/destroy/index.js

Currently each of the dialogs is very explicit. The code is all vanilla React - there are no libraries or abstractions of any kind. So if you're familiar with building forms in React, it will hopefully look familiar.

Tutorial Goal

Over the course of this tutorial, we're going to refactor each of those dialogs, starting with the create dialog.

In the process, we will also gradually build up and explain the pattern that Lore uses for hooks like lore-hook-forms-bootstrap and lore-hook-dialogs-bootstrap, the latter of which is used in the Quickstart (though at the time there was no explanation of how it worked).

Each of Lore's form-related hooks are able to generate some non-trivial forms and dialogs from a configuration object, and by the end of this tutorial you will understand how they work, and how to build your own version of one, should you choose to.

Next Steps

Next we're going to add a create dialog.