![@fluid app @fluid app](https://fabiensanglard.net/fluide/fluidSpeedSlider.jpg)
setSyncedStringConfig, setSyncedArra圜onfig, etc. Here, users can assign the DDSes that their React views will need by using the pre-built helper functions available to them from the syncedObjects folder, i.e. Values defined here are guaranteed to be initialized and available prior to render being called. However, in addition, it also provides the following functionality:Ī syncedStateConfig where users can define the different types of values that they would like to see prepared for their view to consume. SyncedDataObject uses the same factory as DataObject. Finally, and most importantly, it guarantees that all updates that are made in the data store are synced live with all other clients that are currently viewing this React app in the current session, without requiring event listeners or component lifecycle methods. It also ensures that all updates that were made in the data store for that session will be automatically restored when the app is loaded fresh again by another client for that session. It provides a configuration where we can set up the schema for our data store, and also guarantees that all the values defined in the configuration will be automatically initialized prior to the view rendering. The SyncedDataObject essentially acts as the data store for the React app that is rendered within it. This will be the base class that users developing Fluid objects with React views will want to extend. The 'SyncedDataObject' is an extension of the Fluid DataObject class provided by the package. Build out the React view either using the FluidReactView class or as a functional view using the various hooks that are available.Fill in the render(element: HTMLElement) function with a call to ReactDOM.render and pass in a React view.This can be done using the set*Config functions. Define the DDSes needed in the SyncedDataObjectconstructor.examples/data-object/ from the Fluid Framework repo root.Ī good general order of operations to follow when writing a SyncedDataObject implementation is the following:
@FLUID APP HOW TO
It does this by providing a SyncedDataObject, Fluid React hooks and a base view class for building React views that use synced states provided by Fluid.Įxamples on how to use all of the different tools in this package can be found in the clicker-react and likes-and-comments folders under. Fluid Framework's React package enables React developers to quickly start building large, scalable React apps with synced views powered by Fluid data.