The React Cookbook will create a single source of best practices for Urbit development in React through a series of simple examples. The guide will focus on implementing the new @urbit/http-api library to interface with custom Gall apps as well as common calls to backend foundations, particularly graph-store.
The goal is to demonstrate the ease with which React can be used for the frontend of Urbit applications. While these tools are publicly available there isn’t a single source of concrete examples demonstrating their implementation. A common result is that developers spend a lot of time reading through Landscape code to reverse engineer the calls they want to make.
Surfacing the contact points between @urbit/http-api and Hoon reveals the simple mechanics of creating frontend applications that leverage Urbit’s abilities. Work on this proposal has already proved helpful by exposing bugs in @urbit/http-api when removed from its context in Landscape. Fixing these bugs has helped streamline the process of interacting with Hoon directly from React.
The first deliverable is a simple application demonstrating basic subscriptions, pokes, and threads to create groups, chats, add/remove users, and send and receive messages directly from a React interface. In doing so it teaches the fundamental skills required to build on top of Urbit as well as familiarizing the reader with the API’s structure, thereby helping them understand how to make other calls and leverage other data types the library offers. The second deliverable will be an example app that utilizes other social functions such as notebooks and collections.
The first two apps will be very simple and each contained in a single file to keep basic documentation in one place. As such, there will be opportunities for additional instructions such as setting up a React environment, a deeper dive into Hooks, and leveraging things like functional components and Context Provider to help with larger, more complex apps. The third deliverable is aimed to cover these points and address supplementary needs that Tlon identifies while reviewing the first two examples.