WIP

Author: VeskeR

content/getting-started/react-new.textile

@@ -25,7 +25,7 @@ h2(#prerequisites). Prerequisites
 
 h3(#prerequisites-ably-cli). Install Ably CLI (optional)
 
-* Install the "Ably CLI":https://www.npmjs.com/package/@ably/cli : @npm install -g @ably/cli@
+* Install the "Ably CLI":https://www.npmjs.com/package/@ably/cli : @npm install -g @ably/cli@
 * Run @ably login@ in the terminal and follow the prompts to provide an access token to the Ably CLI.
 * Set the default app to use with @ably apps switch@ and select an API key to use for operations with @ably auth keys switch@.
 
@@ -60,32 +60,30 @@ Create a new React + TypeScript project using Vite. Select the following options
 
 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
-    │   ├── assets
-    │   ├── App.css
-    │   ├── App.tsx
-    │   ├── index.css
-    │   ├── main.tsx
-    │   └── vite-env.d.ts
-    ├── tsconfig.app.json
-    ├── tsconfig.json
-    ├── tsconfig.node.json
-    └── vite.config.ts
-  </code>
-</aside>
+You should see a directory structure similar to this:
+<code>
+  ├── index.html
+  ├── package.json
+  ├── public
+  ├── src
+  │   ├── assets
+  │   ├── App.css
+  │   ├── App.tsx
+  │   ├── index.css
+  │   ├── main.tsx
+  │   └── vite-env.d.ts
+  ├── tsconfig.app.json
+  ├── tsconfig.json
+  ├── tsconfig.node.json
+  └── vite.config.ts
+</code>
 
 You also need to set up Tailwind CSS for styling the application. For installation instructions, see the "Tailwind CSS documentation for Vite":https://tailwindcss.com/docs/installation/using-vite.
 
 Once installed, remove any existing styles from your @src/index.css@ file and ensure that it contains only the Tailwind CSS import:
 
 ```[css]
-// src/index.css
+/* src/index.css */
 @import 'tailwindcss';
 ```
 
@@ -137,8 +135,6 @@ createRoot(document.getElementById('root')!).render(
 );
 ```
 
-Ensure you replace the @{{API_KEY}}@ placeholder with your actual Ably API key.
-
 <aside data-type='note'>
 <p>Keep the Realtime client initialization outside of any React component to prevent it from being recreated on re-renders, which could result in reaching your Ably connection limit.</p>
 </aside>
@@ -176,7 +172,7 @@ Clients establish a connection with Ably when they instantiate an SDK instance.
 
 In the "Set up AblyProvider":#prerequisites-setup-ably-provider section, you added the following code to create a new Ably Realtime client:
 
-```[typescript]
+```[react]
 const realtimeClient = new Ably.Realtime({
   key: '{{API_KEY}}',
   clientId: 'my-first-client',