update links and prerequisites section.

Author: splindsay-92

content/chat/getting-started/react.textile

@@ -1,7 +1,7 @@
 ---
 languages:
   - react
-title: "Getting started: Chat With React"
+title: "Getting started: Chat with React"
 meta_description: "A getting started guide for Ably Chat React that steps through some of the key features using React and Vite."
 meta_keywords: "Ably, realtime, quickstart, getting started, basics, Chat, React, Vite"
 ---
@@ -22,8 +22,8 @@ h2(#prerequisites). Prerequisites
 
 h3(#prerequisites-ably). Ably
 * Sign up for an Ably account
-* Create a new app and get your API key
-* Your API key will need the `publish`, `subscribe`, `presence` and `history` capabilities
+** Create a new app and get your API key
+** You can use the root API key that is provided by default to get started.
 
 h3(#prerequisites-ably-cli). Ably-CLI
 
@@ -44,25 +44,16 @@ h3(#prerequisites-create-project). Create a React Project
 
 Create a new React + TypeScript project using Vite. For detailed instructions, refer to the "Vite documentation":https://vitejs.dev/guide/#scaffolding-your-first-vite-project.
 
-<aside data-type='note'>
-  <p>You should see a directory structure similar to this:</p><code>
-  ├── index.html
-  ├── package.json
-  ├── public
-  ├── src
-  │   ├── App.tsx
-  │   ├── main.tsx
-  │   ├── App.css
-  │   └── vite-env.d.ts
-  ├── tsconfig.app.json
-  ├── tsconfig.json
-  ├── tsconfig.node.json
-  └── vite.config.ts
-</code>
-</aside>
+```[sh]
+npm create vite@latest my-chat-react-app -- --template react-ts
+```
 
 You will also need to setup Tailwind CSS for styling the application. For installation instructions, see the "Tailwind CSS documentation for Vite":https://tailwindcss.com/docs/guides/vite.
 
+```[sh]
+npm install tailwindcss @tailwindcss/vite
+```
+
 h3(#prerequisites-ably-chat). Ably Chat SDK
 
 Ensure you have installed the Ably Chat SDK, this will also install the Ably Pub/Sub SDK as a dependency:
@@ -113,8 +104,6 @@ ReactDOM.createRoot(document.getElementById('root')!).render(
 );
 ```
 
-Ensure you replace the @{{API_KEY}}@ placeholder with your actual Ably API key.
-
 h2(#imports). Required Imports
 
 You will need to import the following modules in your @src/App.tsx@ file, these will be used at various points in the guide:
@@ -143,10 +132,23 @@ This enables them to send and receive messages in realtime across channels. You
 
 ```[react]
 // App.tsx
-function ConnectionStatus() {
-  // This component will display the current connection status
-  const { currentStatus } = useChatConnection(); // Hook to get the current connection status
+import React, {useCallback, useEffect, useState} from 'react';
+import "./App.css";
+import {
+    AllFeaturesEnabled,
+    ChatRoomProvider,
+    MessageEvents, Reaction, useChatConnection,
+    useMessages,
+    usePresence,
+    usePresenceListener, useRoom, useRoomReactions,
+    useTyping
+} from '@ably/chat';
+import {MessageEvent, Message} from '@ably/chat';
 
+// This component will display the current connection status
+function ConnectionStatus() {
+  // Hook to get the current connection status
+  const { currentStatus } = useChatConnection();
    return (
         <div className="p-4 text-center h-full border-gray-300 bg-gray-100">
             <h2 className="text-lg font-semibold text-blue-500">Ably Chat Connection</h2>
@@ -826,12 +828,15 @@ h2(#next). Next steps
 
 Continue exploring Ably Chat with React:
 
-* Read more about using [rooms](https://ably.com/docs/chat/rooms) and sending [messages](https://ably.com/docs/chat/rooms/messages).
-* Learn about [presence status](https://ably.com/docs/chat/rooms/presence).
-* Set up [typing indicators](https://ably.com/docs/chat/rooms/typing).
-* Send [reactions](https://ably.com/docs/chat/rooms/reactions) to express real-time feedback.
-* Investigate pulling messages from [history](https://ably.com/docs/chat/rooms/history) for context.
+Read more about the concepts covered in this guide:
+* Read more about using "rooms":/docs/chat/rooms and sending "messages":/docs/chat/rooms/messages.
+* Find out more regarding "online status":/docs/chat/rooms/presence.
+* Understand how to use "typing indicators":/docs/chat/rooms/typing.
+* Send "reactions":/docs/chat/rooms/reactions to your rooms.
+* Read into pulling messages from "history":/docs/chat/rooms/history and providing context to new joiners.
+* Understand "token authentication":/docs/authentication/token-authentication before going to production.
 
-Explore the Ably CLI further, or check out the [Chat JS API references](https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/modules/chat-js.html) for additional functionality.
+Explore the Ably CLI further,
+or check out the "Chat JS API references":https://sdk.ably.com/builds/ably/ably-chat-js/main/typedoc/modules/chat-js.html for additional functionality.