Add references to React tutorial, Add new features from 7.1.0

Author: kum-deepak

_posts/2018-06-29-using-stompjs-v5.md

@@ -1,24 +1,27 @@
 ---
 layout: single
-title: 'Using StompJs v5+'
-date: 2018-06-29 07:59:22 +0530
+title: 'Using StompJs'
+date: 2025-03-22 07:59:22 +0530
 categories: guide stompjs
 toc: true
 redirect_from:
   - /guide/stompjs/2018/06/28/using-stompjs-v5.html
   - /guide/stompjs/2018/06/29/using-stompjs-v5.html
   - /guide/stompjs/2018/06/30/using-stompjs-v5.html
+  - /guide/stompjs/using-stompjs-v5.html
 ---
 
 You can find samples at [https://github.com/stomp-js/samples/](https://github.com/stomp-js/samples/).
 
 ## The STOMP Broker
 
-Ensure that your STOMP broker supports STOMP over WebSockets. While some messaging brokers support it out of the box, a few may need additional configuration or activating plugins.
+Ensure that your STOMP broker supports STOMP over WebSockets. While some messaging brokers support it out of the box, a
+few may need additional configuration or activating plugins.
 
 ## Include stompjs
 
-This npm distribution has a UMD package and ES6 modules. The web browsers will use the UMD via a script tag, and Node's `require` and ES `import` will use the appropriate versions.
+This npm distribution has a UMD package and ES6 modules. The web browsers will use the UMD via a script tag, and Node's
+`require` and ES `import` will use the appropriate versions.
 
 ### Polyfills
 
@@ -28,8 +31,9 @@ _Important: For NodeJS and React Native, please check [Polyfills]._
 
 - Download and include directly from the `bundles/` folder.
 - Alternatively, use from CDN
-  - Minified [https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js](https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js)
-  - [https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.js](https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.js)
+    -
+    Minified [https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js](https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.min.js)
+    - [https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.js](https://cdn.jsdelivr.net/npm/@stomp/stompjs@5.0.0/bundles/stomp.umd.js)
 - `StompJs` object will now be available. Read along to learn how to use it.
 
 ### In NodeJS, TypeScript or ES6
@@ -39,7 +43,7 @@ These libraries have been developed using typescript, and the typings are includ
 You can import classes like the following:
 
 ```javascript
-import { Client, Message } from '@stomp/stompjs';
+import {Client, Message} from '@stomp/stompjs';
 ```
 
 You can use these classes without prefixing with `StompJs.`.
@@ -105,10 +109,11 @@ client.deactivate();
 
 ## Send messages
 
-When the client is connected to the server, it can send STOMP messages using the [Client#publish](/api-docs/latest/classes/Client.html#publish) method.
+When the client is connected to the server, it can send STOMP messages using
+the [Client#publish](/api-docs/latest/classes/Client.html#publish) method.
 
 ```javascript
-client.publish({ destination: '/topic/general', body: 'Hello world' });
+client.publish({destination: '/topic/general', body: 'Hello world'});
 
 // There is an option to skip content length header
 client.publish({
@@ -121,7 +126,7 @@ client.publish({
 client.publish({
   destination: '/topic/general',
   body: 'Hello world',
-  headers: { priority: '9' },
+  headers: {priority: '9'},
 });
 ```
 
@@ -135,16 +140,18 @@ const binaryData = generateBinaryData(); // This need to be of type Uint8Array
 client.publish({
   destination: '/topic/special',
   binaryBody: binaryData,
-  headers: { 'content-type': 'application/octet-stream' },
+  headers: {'content-type': 'application/octet-stream'},
 });
 ```
 
 ## Subscribe and receive messages
 
 The STOMP client must first subscribe to a destination to receive messages.
 
-To subscribe to a destination, you can use the [Client#subscribe](/api-docs/latest/classes/Client.html#subscribe) method. The method takes two mandatory arguments: `destination`, a String corresponding to the
-destination and `callback`, a function with one message argument and an optional argument `headers`, a JavaScript object for additional headers.
+To subscribe to a destination, you can use the [Client#subscribe](/api-docs/latest/classes/Client.html#subscribe)
+method. The method takes two mandatory arguments: `destination`, a String corresponding to the
+destination and `callback`, a function with one message argument and an optional argument `headers`, a JavaScript object
+for additional headers.
 
 ```javascript
 const subscription = client.subscribe('/queue/test', callback);
@@ -154,7 +161,8 @@ The `subscribe` method returns an object with one attribute, `id`,
 that correspond to the client subscription ID and one method `unsubscribe`
 that can be used later on to unsubscribe the client from this destination.
 
-Every time the broker sends a message to the client, the client will, in turn, invoke the callback with a [Message](/api-docs/latest/interfaces/IMessage.html) object.
+Every time the broker sends a message to the client, the client will, in turn, invoke the callback with
+a [Message](/api-docs/latest/interfaces/IMessage.html) object.
 
 ```javascript
 callback = function (message) {
@@ -167,10 +175,11 @@ callback = function (message) {
 };
 ```
 
-The `subscribe` method takes an optional headers argument to specify additional `headers` when subscribing to a destination:
+The `subscribe` method takes an optional headers argument to specify additional `headers` when subscribing to a
+destination:
 
 ```javascript
-const headers = { ack: 'client' };
+const headers = {ack: 'client'};
 client.subscribe('/queue/test', message_callback, headers);
 ```
 
@@ -193,24 +202,29 @@ subscription.unsubscribe();
 ### Prepare your broker
 
 Not every broker will support binary messages out of the box.
-For example, RabbitMQ (see: https://www.rabbitmq.com/web-stomp.html) will need the following to be added to the server configuration:
+For example, RabbitMQ (see: https://www.rabbitmq.com/web-stomp.html) will need the following to be added to the server
+configuration:
 
 ```
 web_stomp.ws_frame = binary
 ```
 
 ### Publishing binary messages
 
-Use parameter `binaryBody` of [Client#publish](/api-docs/latest/classes/Client.html#publish) to send binary data of a type [Uint8Array].
+Use parameter `binaryBody` of [Client#publish](/api-docs/latest/classes/Client.html#publish) to send binary data of a
+type [Uint8Array].
 
 See [Send messages](#send-messages) for an example.
 
 ### Receiving binary messages
 
 The library does not guess whether the incoming datum is text/binary.
-To access the message body as a string, please use [Message#body](/api-docs/latest/interfaces/IFrame.html#body) and to access it as binary, please use [Message#binaryBody](/api-docs/latest/interfaces/IFrame.html#binaryBody).
+To access the message body as a string, please use [Message#body](/api-docs/latest/interfaces/IFrame.html#body) and to
+access it as binary, please use [Message#binaryBody](/api-docs/latest/interfaces/IFrame.html#binaryBody).
 
-There is no generally accepted convention in STOMP (actually messaging in general) to indicate binary messages. Therefore, the message senders and receivers must agree on the required convention. For example, you may choose to set a `content-type` header to indicate a binary message.
+There is no generally accepted convention in STOMP (actually messaging in general) to indicate binary messages.
+Therefore, the message senders and receivers must agree on the required convention. For example, you may choose to set a
+`content-type` header to indicate a binary message.
 
 ```javascript
 // within message callback
@@ -225,10 +239,11 @@ if (message.headers['content-type'] === 'application/octet-stream') {
 
 ## JSON support
 
-The body of a STOMP message must be a String or a [Uint8Array]. If you want to send and receive [JSON](http://json.org/) objects, you can use `JSON.stringify()` and`JSON.parse()` to transform the JSON object to a String and vice versa.
+The body of a STOMP message must be a String or a [Uint8Array]. If you want to send and receive [JSON](http://json.org/)
+objects, you can use `JSON.stringify()` and`JSON.parse()` to transform the JSON object to a String and vice versa.
 
 ```javascript
-const quote = { symbol: 'AAPL', value: 195.46 };
+const quote = {symbol: 'AAPL', value: 195.46};
 client.publish({
   destination: '/topic/stocks',
   body: JSON.stringify(quote),
@@ -244,9 +259,11 @@ client.subscribe('/topic/stocks', function (message) {
 
 By default, the server will automatically acknowledge STOMP messages before the message is delivered to the client.
 
-Instead, the client can choose to handle message acknowledgment by subscribing to a destination with the `ack` header set to `client` or `client-individual`.
+Instead, the client can choose to handle message acknowledgment by subscribing to a destination with the `ack` header
+set to `client` or `client-individual`.
 
-In that case, the client must use the [Message#ack](/api-docs/latest/interfaces/IMessage.html#ack) method to inform the broker that it has processed the message.
+In that case, the client must use the [Message#ack](/api-docs/latest/interfaces/IMessage.html#ack) method to inform the
+broker that it has processed the message.
 
 ```javascript
 const subscription = client.subscribe(
@@ -257,47 +274,54 @@ const subscription = client.subscribe(
     // and acknowledge it
     message.ack();
   },
-  { ack: 'client' }
+  {ack: 'client'}
 );
 ```
 
-The [Message#ack](/api-docs/latest/interfaces/IMessage.html#ack) method accepts `headers` argument for additional headers. For example, to acknowledge a message as part of a transaction and request a receipt:
+The [Message#ack](/api-docs/latest/interfaces/IMessage.html#ack) method accepts `headers` argument for additional
+headers. For example, to acknowledge a message as part of a transaction and request a receipt:
 
 ```javascript
 const tx = client.begin();
-message.ack({ transaction: tx.id, receipt: 'my-receipt' });
+message.ack({transaction: tx.id, receipt: 'my-receipt'});
 tx.commit();
 ```
 
-The client should [Message#nack](/api-docs/latest/interfaces/IMessage.html#nack) to inform STOMP 1.1 or higher brokers that the client did not consume the message. It takes the same arguments as the [Message#ack](/api-docs/latest/interfaces/IMessage.html#ack) method.
+The client should [Message#nack](/api-docs/latest/interfaces/IMessage.html#nack) to inform STOMP 1.1 or higher brokers
+that the client did not consume the message. It takes the same arguments as
+the [Message#ack](/api-docs/latest/interfaces/IMessage.html#ack) method.
 
 ## Transactions
 
 Messages can be sent and acknowledged _in a transaction_.
 
-The client starts a transaction using the [Client#begin](/api-docs/latest/classes/Client.html#begin) method, which takes an optional `transaction_id`.
+The client starts a transaction using the [Client#begin](/api-docs/latest/classes/Client.html#begin) method, which takes
+an optional `transaction_id`.
 
 This method returns an object with an `id` attribute corresponding to the transaction ID and two methods:
 
 - [Client#commit](/api-docs/latest/classes/Client.html#commit) to commit the transaction, and,
 - [Client#abort](/api-docs/latest/classes/Client.html#abort) to abort the transaction.
 
-The client can then send and acknowledge messages in the transaction by specifying a `transaction` indetified by the transaction `id`.
+The client can then send and acknowledge messages in the transaction by specifying a `transaction` indetified by the
+transaction `id`.
 
 ```javascript
 // start the transaction
 const tx = client.begin();
 // send the message in a transaction
 client.publish({
   destination: '/queue/test',
-  headers: { transaction: tx.id },
+  headers: {transaction: tx.id},
   body: 'message in a transaction',
 });
 // commit the transaction to effectively send the message
 tx.commit();
 ```
 
-_If you forget to add the `transaction` header when calling [Client#publish](/api-docs/latest/classes/Client.html#publish), the message will not be part of the transaction, and it will be sent directly without waiting for the completion of the transaction._
+_If you forget to add the `transaction` header when
+calling [Client#publish](/api-docs/latest/classes/Client.html#publish), the message will not be part of the transaction,
+and it will be sent directly without waiting for the completion of the transaction._
 
 ```javascript
 // start the transaction
@@ -312,7 +336,10 @@ tx.abort(); // Too late! the message has been sent
 
 ## Heart-beating
 
-For a connection with STOMP protocol 1.1 or higher, heart-beating is enabled by default. Options [Client#heartbeatIncoming](/api-docs/latest/classes/Client.html#heartbeatIncoming) and [Client#heartbeatOutgoing](/api-docs/latest/classes/Client.html#heartbeatOutgoing) can be used to control heart-beating (default value for both is 10,000ms). The client can disable heart beating by setting these to 0.
+For a connection with STOMP protocol 1.1 or higher, heart-beating is enabled by default.
+Options [Client#heartbeatIncoming](/api-docs/latest/classes/Client.html#heartbeatIncoming)
+and [Client#heartbeatOutgoing](/api-docs/latest/classes/Client.html#heartbeatOutgoing) can be used to control
+heart-beating (default value for both is 10,000ms). The client can disable heart beating by setting these to 0.
 
 ```javascript
 client.heartbeatOutgoing = 20000; // client will send heartbeats every 20000ms
@@ -322,7 +349,9 @@ client.heartbeatIncoming = 0; // client does not want to receive heartbeats
 
 ## Auto Reconnect
 
-The `client` supports automatic reconnecting in case of a connection failure. It is controlled by a option [Client#reconnectDelay](/api-docs/latest/classes/Client.html#reconnectDelay). The default value is 5000ms, which indicates that an attempt to connect will be made 5000ms after a connection drop.
+The `client` supports automatic reconnecting in case of a connection failure. It is controlled by a
+option [Client#reconnectDelay](/api-docs/latest/classes/Client.html#reconnectDelay). The default value is 5000ms, which
+indicates that an attempt to connect will be made 5000ms after a connection drop.
 
 ```javascript
 // Add the following if you need automatic reconnect (delay is in milliseconds)
@@ -331,50 +360,84 @@ client.reconnectDelay = 300;
 
 You can set the `reconnectDelay` to quite a small value.
 
+**Reconnect with Exponential Backoff**
+
+```javascript
+client.configure({
+  reconnectTimeMode: StompJs.ReconnectionTimeMode.EXPONENTIAL,
+  reconnectDelay: 200, // It will wait 200, 400, 800 ms...
+  maxReconnectDelay: 10000, // Optional, when provided, it will not wait more that these ms
+})
+```
+
 ## Debug
 
 On a busy system, the volume of logs can be overwhelming. Therefore, by default, the debug messages are ignored.
 
-[Client#debug](/api-docs/latest/classes/Client.html#debug) property can be set to a function (which will receive a `String` argument) to enable debug statements:
+[Client#debug](/api-docs/latest/classes/Client.html#debug) property can be set to a function (which will receive a
+`String` argument) to enable debug statements:
 
 ```javascript
 client.debug = function (str) {
   console.log(str);
 };
 ```
 
-Usually, headers of the incoming and outgoing frames are logged. Set [Client#logRawCommunication](/api-docs/latest/classes/Client.html#logRawCommunication) to log entire frames.
+Usually, headers of the incoming and outgoing frames are logged.
+Set [Client#logRawCommunication](/api-docs/latest/classes/Client.html#logRawCommunication) to log entire frames.
 
 ## Callbacks
 
 ### Lifecycle callbacks
 
-- [Client#beforeConnect](/api-docs/latest/classes/Client.html#beforeConnect) - invoked each time before connection to STOMP broker is attempted. You can modify connection parameters and other callbacks. On v6+ you can set an async function for this callback.
-- [Client#onConnect](/api-docs/latest/classes/Client.html#onConnect) - invoked for each time STOMP broker connects and STOMP handshake is complete.
-- [Client#onDisconnect](/api-docs/latest/classes/Client.html#onDisconnect) - invoked after each graceful disconnection. If the connection breaks because of an error or network failure, it will not be called.
+- [Client#beforeConnect](/api-docs/latest/classes/Client.html#beforeConnect) - invoked each time before connection to
+  STOMP broker is attempted. You can modify connection parameters and other callbacks. On v6+ you can set an async
+  function for this callback.
+- [Client#onConnect](/api-docs/latest/classes/Client.html#onConnect) - invoked for each time STOMP broker connects and
+  STOMP handshake is complete.
+- [Client#onDisconnect](/api-docs/latest/classes/Client.html#onDisconnect) - invoked after each graceful disconnection.
+  If the connection breaks because of an error or network failure, it will not be called.
 - [Client#onStompError](/api-docs/latest/classes/Client.html#onStompError) - invoked when the broker reports an Error.
-- [Client#onWebSocketClose](/api-docs/latest/classes/Client.html#onWebSocketClose) - when the WebSocket closes. It is the most reliable way of knowing that the connection has terminated.
+- [Client#onWebSocketClose](/api-docs/latest/classes/Client.html#onWebSocketClose) - when the WebSocket closes. It is
+  the most reliable way of knowing that the connection has terminated.
 
 ### Frame callbacks
 
-- [Client#onUnhandledMessage](/api-docs/latest/classes/Client.html#onUnhandledMessage) - typically brokers will send messages corresponding to subscriptions. However, brokers may support concepts beyond the standard definition of STOMP - for example, RabbitMQ supports concepts of temporary queues. This callback will be invoked if any message is received that is not linked to a subscription.
-- [Client#onUnhandledReceipt](/api-docs/latest/classes/Client.html#onUnhandledReceipt) - you should prefer [Client#watchForReceipt](/api-docs/latest/classes/Client.html#watchForReceipt). If there is any incoming receipt for which there is no active watcher, this callback will be invoked.
-- [Client#onUnhandledFrame](/api-docs/latest/classes/Client.html#onUnhandledFrame) - it will be invoked if broker sends a non standard STOMP Frame.
+- [Client#onUnhandledMessage](/api-docs/latest/classes/Client.html#onUnhandledMessage) - typically brokers will send
+  messages corresponding to subscriptions. However, brokers may support concepts beyond the standard definition of
+  STOMP - for example, RabbitMQ supports concepts of temporary queues. This callback will be invoked if any message is
+  received that is not linked to a subscription.
+- [Client#onUnhandledReceipt](/api-docs/latest/classes/Client.html#onUnhandledReceipt) - you should
+  prefer [Client#watchForReceipt](/api-docs/latest/classes/Client.html#watchForReceipt). If there is any incoming
+  receipt for which there is no active watcher, this callback will be invoked.
+- [Client#onUnhandledFrame](/api-docs/latest/classes/Client.html#onUnhandledFrame) - it will be invoked if broker sends
+  a non standard STOMP Frame.
 
 ## Advanced notes
 
 Version 5+ of this library has taken significant variation from the previous syntax.
 
-It is possible to alter configuration options and callbacks. New values will take effect as soon as possible. For example:
+It is possible to alter configuration options and callbacks. New values will take effect as soon as possible. For
+example:
 
-- Altered values of [Client#onUnhandledMessage](/api-docs/latest/classes/Client.html#onUnhandledMessage) or [Client#onDisconnect](/api-docs/latest/classes/Client.html#onDisconnect) will be effective immediately.
-- New values of [Client#heartbeatIncoming](/api-docs/latest/classes/Client.html#heartbeatIncoming) and [Client#heartbeatOutgoing](/api-docs/latest/classes/Client.html#heartbeatOutgoing) will be used next time STOMP connects.
+- Altered values of [Client#onUnhandledMessage](/api-docs/latest/classes/Client.html#onUnhandledMessage)
+  or [Client#onDisconnect](/api-docs/latest/classes/Client.html#onDisconnect) will be effective immediately.
+- New values of [Client#heartbeatIncoming](/api-docs/latest/classes/Client.html#heartbeatIncoming)
+  and [Client#heartbeatOutgoing](/api-docs/latest/classes/Client.html#heartbeatOutgoing) will be used next time STOMP
+  connects.
 
-The callback sequences are arranged in a way that most expected operations should work. For example, it is possible to call [Client#deactivate](/api-docs/latest/classes/Client.html#deactivate) within [Client#onStompError](/api-docs/latest/classes/Client.html#onStompError) or [Client#onWebSocketClose](/api-docs/latest/classes/Client.html#onWebSocketClose).
+The callback sequences are arranged in a way that most expected operations should work. For example, it is possible to
+call [Client#deactivate](/api-docs/latest/classes/Client.html#deactivate)
+within [Client#onStompError](/api-docs/latest/classes/Client.html#onStompError)
+or [Client#onWebSocketClose](/api-docs/latest/classes/Client.html#onWebSocketClose).
 
-The above also allows adjusting [Client#reconnectDelay](/api-docs/latest/classes/Client.html#reconnectDelay) in [Client#onWebSocketClose](/api-docs/latest/classes/Client.html#onWebSocketClose). You can implement exponential back-off using a series of such adjustments.
+The above also allows adjusting [Client#reconnectDelay](/api-docs/latest/classes/Client.html#reconnectDelay)
+in [Client#onWebSocketClose](/api-docs/latest/classes/Client.html#onWebSocketClose). You can implement exponential
+back-off using a series of such adjustments.
 
-Even [Client#brokerURL](/api-docs/latest/classes/Client.html#brokerURL) or [Client#connectHeaders](/api-docs/latest/classes/Client.html#connectHeaders) can be altered which would get used in a subsequent reconnect.
+Even [Client#brokerURL](/api-docs/latest/classes/Client.html#brokerURL)
+or [Client#connectHeaders](/api-docs/latest/classes/Client.html#connectHeaders) can be altered which would get used in a
+subsequent reconnect.
 
 [Polyfills]: {% link _posts/2018-06-28-polyfills-for-stompjs.md %}
 [Uint8Array]: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Uint8Array

_posts/2019-06-10-react-native-additional-notes.md

@@ -1,7 +1,7 @@
 ---
 layout: single
 title: 'React Native - Additional notes'
-date: 2024-04-26 10:01:01 +0530
+date: 2025-03-22 10:01:01 +0530
 categories: workaround stompjs rx-stomp
 toc: true
 redirect_from:
@@ -12,12 +12,25 @@ redirect_from:
   - /workaround/stompjs/rx-stomp/ng2-stompjs/react-native-additional-notes.html
 ---
 
-# Polyfills
+The largest number of tickets raised for these projects is related to using these libraries with React Native.
+There are some platform issues in React Native that cause these libraries to fail.
+Unfortunately, the React Native team is not inclined to resolve these issues.
+Please follow the advice on this page to effectively use these libraries with React Native.
+
+## Prefer [rx-stomp]
+
+This advice is not specific to React Native, but in general, to Single Page Applications.
+Your code is going to be far less convoluted and will handle edge cases much better.
+Managing the Client objest and state can be tricky with React hooks.
+Please see
+[How to Use RxStomp with React](https://www.freecodecamp.org/news/build-chat-app-with-stomp-and-react/) and [Sample](https://gitlab.com/harsh183/rxstomp-react-tutorial).
+
+## Polyfills
 
 Before you proceed, ensure you have [polyfills for
 TextEncoder/TextDecoder]({% link _posts/2018-06-28-polyfills-for-stompjs.md %}).
 
-# Insecure connection issue in Android
+## Insecure connection issue in Android
 
 Recent versions of Android SDK do not allow insecure (not HTTPS) HTTP connections.
 This is likely to show up in production builds only.
@@ -27,7 +40,7 @@ To bypass the checks, please follow suggestions at
 [https://github.com/stomp-js/stompjs/issues/149#issuecomment-633734719](https://github.com/stomp-js/stompjs/issues/149#issuecomment-633734719)
 and [https://blog.usejournal.com/6-daily-issues-in-android-cleartext-traffic-error-52ab31dd86c2](https://blog.usejournal.com/6-daily-issues-in-android-cleartext-traffic-error-52ab31dd86c2).
 
-# Null Chopping
+## Null Chopping
 
 Some versions of React Native (including the current production
 version as on April 26, 2024) have an underlying issue that prevents these libraries
@@ -85,3 +98,8 @@ If your broker supports forcing binary frames, you may try this approach.
 
 The approach is completely safe — it will not cause any data loss
 or incorrect protocol behavior.
+
+
+[rxjs]: https://github.com/ReactiveX/RxJS
+[stompjs]: https://github.com/stomp-js/stompjs
+[rx-stomp]: https://github.com/stomp-js/rx-stomp

index.md

@@ -1,13 +1,14 @@
 ---
 layout: single
-date: 2020-10-19 19:42:22 +0530
+date: 2025-03-22 19:42:22 +0530
 title: 'StompJs Family'
 author_profile: true
 ---
 
 These libraries provide [STOMP] over [Websocket] connectivity for web browsers or other Javascript-based environments.
 
-[stompjs] is the core Javascript library. [rx-stomp] is a wrapper that exposes functionality as [RxJS] primitives.
+[stompjs] is the core JavaScript library.
+[rx-stomp] is a wrapper that exposes functionality as [RxJS] primitives.
 If you are already using [RxJS] in your project or are familiar with it, check out [rx-stomp].
 
 ## Getting started
@@ -18,11 +19,15 @@ Please try the following guides:
 - [Using rx-stomp with Angular] — originally written for Angular13,
   should work with Angular 7+.
 - Guide to [Connection status in ng2-stompjs].
+- Guide to [How to Use RxStomp with React](https://www.freecodecamp.org/news/build-chat-app-with-stomp-and-react/).
+
+All these guides are written by the maintainers of these projects and follow best practices.
 
 Samples:
 
 - [Samples](https://github.com/stomp-js/samples/) for [stompjs] and [rx-stomp].
 - [Sample](https://github.com/stomp-js/rx-stomp-angular) for [rx-stomp] with Angular 7+.
+- [Sample](https://gitlab.com/harsh183/rxstomp-react-tutorial) for [rx-stomp] with React.
 
 [API documentation](/api-docs/latest/) for NPM released versions.