This is an example to demonstrate building a collaborative text area in React using the SharedString. To use this example, we make the following assumptions:
- You want to use React.js for your view
- You already have Node installed on your local machine. If not, follow the instructions here.
For a more detailed explanation of this example please click here.
- This is the first component that will be loaded upon Application startup.
- This component gets data from the Fluid service, including the
SharedStringobject, which will be used by the following two files.
- This is a class that provides simple APIs to interact with a
SharedStringobject.
- This is a component which integrates a
SharedStringHelperobject with the defaulttextareaHTML element to create text which can be co-edited in real time.
To run our local server, @fluidframework/azure-local-service, on the default URL of localhost:7070, enter the following into a terminal window:
npx @fluidframework/azure-local-service
Now, with our local service running in the background, we need to connect the application to it. The app has already been configured to this so now we just need to run the following in a new terminal window to start the app.
npm install
npm startNavigate to localhost:3000 in the browser to view the app.