Quick Start

1. Create your app in usecloudstate.io

Go to https://usecloudstate.io/admin/create-app and create your first application.

2. Initiating the client

We recommend you create a separate file that contains the CloudState client. For example: src/utils/cloudState.js.
1
// src/utils/cloudState.js
2
3
import { CloudStateClient } from "@usecloudstate/react-core";
4
import { config } from "@usecloudstate/react-web";
5
6
export const client = new CloudStateClient("<YOUR APP ID>", config);
Copied!

3. Setting up the AuthProvider

The server will only let your users write to the application, if they are authenticated. To do so, you need to set up an AuthProvider.
In your component (or the root component of your application), add the AuthProvider component:
1
// src/App.js
2
3
import React from "react";
4
5
import { AuthProvider } from "@usecloudstate/react-web";
6
import { client } from "./utils/cloudState";
7
8
function App() {
9
return (
10
<div className="App">
11
<AuthProvider client={client} />
12
<main>
13
Hello world!
14
</main>
15
</div>
16
);
17
}
Copied!

4. Store your data using the hooks

After you have set up the AuthProvider, you can use the client.hooks to interact with the server.
1
// src/components/HelloWorld.js
2
3
import { client } from "./utils/cloudState.js";
4
5
const defaultValue = ""
6
7
function HelloWorld() {
8
const [name, setName] = client.hooks.useCloudState("user.name", defaultValue);
9
10
return (
11
<div className="HelloWorld">
12
<input
13
type="text"
14
value={name}
15
onChange={e => setName(e.target.value)}
16
/>
17
<p>Welcome to my app, {name}!</p>
18
</div>
19
)
20
}
Copied!
client.hooks.useCloudState hook works a lot like React's useState hook. useState hooks store data locally within the React component, whereas useCloudState store data in the CloudState server, while maintaining a local copy.
To make sure a React component can persist data between page reloads, user sessions and even across components, you need to provide a field , which acts like a key for the data in the server.
To understand more about this, refer to the API documetation.