Adjust Getting Started & add Client and User content

Author: arnautov-anton

docusaurus/docs/React/basics/getting-started.mdx

@@ -10,6 +10,8 @@ This section provides a high level overview of the library setup, core component
 Before starting, make sure you have installed `stream-chat-react` (and `stream-chat`), as directed in the
 [Installation](./installation.mdx) section.
 
+You'll also need to [register](https://getstream.io/chat/trial/) and create a free tier (for up to 25 MAU) Stream application to access credentials from which you'll be able to [generate a token](https://getstream.io/chat/docs/react/token_generator/) for a user which can access your chat application.
+
 The example below is all the code you'll need to launch a fully functioning chat experience. The [`Chat`](../components/core-components/chat.mdx) and [`Channel`](../components/core-components/channel.mdx) components are React context providers that pass a variety of values to their children, including UI components, stateful data, and action handler functions.
 
 ```jsx
@@ -60,7 +62,7 @@ const App = () => {
 
 ## Chat Client & Connecting User
 
-To communicate with the Stream Chat API the SDK requires a connected client. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all of the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
+To communicate with the Stream Chat API the SDK requires a client with an established connection. The hook mentioned in the code above (`useCreateChatClient`) handles client instantiation, establishes proper connection and handles cleanups and disconnects for you. If you wish to have more control over how all of the previously mentioned is being handled see [Client and User](../guides/client-and-user.mdx) guide.
 
 ## Creating a Channel
 

docusaurus/docs/React/guides/client-and-user.mdx

@@ -3,3 +3,45 @@ id: client-and-user
 title: Client and User
 keywords: [client, user, connection, api]
 ---
+
+:::note
+The recommended way of connecting your chat application to the Stream Chat API is through the use of `useCreateChatClient` hook.
+:::
+
+## Client Instance
+
+You can create an instance with the `new` keyword or through the use of static method `getInstance` - the latter will create and store your instance and subsequent `getInstance` calls will return what has been stored.
+
+```tsx
+import { Chat } from 'stream-chat-react';
+import { StreamChat } from 'stream-chat';
+
+const client = new StreamChat(apiKey);
+
+// or
+
+const client = StreamChat.getInstance(apiKey);
+```
+
+## Connecting and Disconnecting a User
+
+To authenticate a user you'll need a token. Typically, you send this token from your backend to your frontend when the user logs in. See the [Tokens & Authentication](https://getstream.io/chat/docs/javascript/tokens_and_authentication) documentation to learn more about creating tokens. For our purposes here, we will assume you have created and retrieved a `token`.
+
+To connect a user, call the `connectUser` method on your client instance with the user object and `token` provided as arguments. Connect the user directly after instantiating the client to establish a websocket connection with the Stream Chat API. Once the connection has been opened, your client instance will begin receiving events from the API.
+
+```tsx
+const connectionPromise = client.connectUser(
+  {
+    id: 'dave-matthews',
+    name: 'Dave Matthews',
+  },
+  token,
+);
+```
+
+To dispose of the active connection (upon component cleanup for example) you'd call `disconnectUser` method. It's generally recommended to wait for the connection promise to resolve before disconnecting.
+
+```tsx
+await connectionPromise;
+client.disconnectUser();
+```