Fix minor issues in React QSG

en/asgardeo/docs/quick-starts/react.md

@@ -4,13 +4,14 @@ heading: React Quickstart
 description: Welcome to the React Quickstart guide! In this document, you will learn to build a React app, add user login and display user profile information using Asgardeo.
 what_you_will_learn:
   - Create new React app using Vite
-  - Install <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk" target="_blank">@asgardeo/auth-react</a> package
+  - Install <a href="https://www.npmjs.com/package/@asgardeo/auth-react" target="_blank" rel="noopener noreferrer">@asgardeo/auth-react</a> package
   - Add user login and logout
   - Display user profile information
 prerequisites:
   - About 15 minutes
   - <a href="{{ base_path }}/get-started/create-asgardeo-account/">Asgardeo account</a>
-  - Install a JS package manager
+  - Install <a href="https://nodejs.org/en/download/package-manager" target="_blank" rel="noopener noreferrer">Node.js</a> on your system.
+  - Make sure you have a JavaScript package manager like <code>npm</code>, <code>yarn</code>, or <code>pnpm</code>.
   - A favorite text editor or IDE
 source_code: <a href="https://github.com/asgardeo/asgardeo-auth-react-sdk/tree/main/samples/asgardeo-react-app" target="_blank" class="github-icon">React Vite App Sample</a>
 whats_next:
@@ -44,7 +45,7 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "npm"
 
-    ``` bash
+    ```bash
     npm create vite@latest asgardeo-react -- --template react
 
     cd asgardeo-react
@@ -56,26 +57,26 @@ Create (a.k.a scaffold) your new React app using Vite.
 
 === "yarn"
 
-    ``` bash
+    ```bash
     yarn create vite@latest asgardeo-react -- --template react
 
     cd asgardeo-react
 
-    yran install
+    yarn install
 
     yarn dev
     ```
 
 === "pnpm"
 
-    ``` bash
+    ```bash
     pnpm create vite@latest asgardeo-react -- --template react
 
     cd asgardeo-react
 
     pnpm install
 
-    pnpm run dev
+    pnpm dev
     ```
 
 ## Install @asgardeo/auth-react
@@ -84,19 +85,19 @@ Asgardeo React SDK provides all the components and hooks you need to integrate A
 
 === "npm"
 
-    ``` bash
+    ```bash
     npm install @asgardeo/auth-react
     ```
 
 === "yarn"
 
-    ``` bash
+    ```bash
     yarn add @asgardeo/auth-react
     ```
 
 === "pnpm"
 
-    ``` bash
+    ```bash
     pnpm add @asgardeo/auth-react
     ```
 
@@ -114,28 +115,27 @@ Add the following changes to the `main.jsx` file.
     - `https://api.asgardeo.io/t/<your-organization-name>`
 
 ```javascript
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import App from './App.jsx';
-import { AuthProvider } from '@asgardeo/auth-react';
-import './index.css';
-
-const config = {
-    signInRedirectURL: "http://localhost:5173",
-    signOutRedirectURL: "http://localhost:5173",
-    clientID: "<your-app-client-id>",
-    baseUrl: "https://api.asgardeo.io/t/<your-organization-name>",
-    scope: [ "openid","profile" ]
-}
-
-ReactDOM.createRoot(document.getElementById('root')).render(
-<React.StrictMode>
-    <AuthProvider config={ config }>
-        <App />
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.jsx'
+import { AuthProvider } from '@asgardeo/auth-react'
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+    <AuthProvider
+      config={ {
+        signInRedirectURL: 'http://localhost:5173',
+        signOutRedirectURL: 'http://localhost:5173',
+        clientID: '<your-app-client-id>',
+        baseUrl: 'https://api.asgardeo.io/t/<your-organization-name>',
+        scope: ['openid', 'profile'],
+      } }
+    >
+      <App />
     </AuthProvider>
-</React.StrictMode>,
+  </StrictMode>
 );
-
 ```
 
 ## Add login and logout link to your app
@@ -145,24 +145,24 @@ Asgardeo provides `useAuthContext` hook to conveniently access user authenticati
 Replace the existing content of the `App.jsx` file with following content.
 
 ```javascript
-import { useAuthContext } from "@asgardeo/auth-react";
-import './App.css';
+import { useAuthContext } from "@asgardeo/auth-react"
+import './App.css'
 
-const App = () => {
-const { state, signIn, signOut } = useAuthContext();
+function App() {
+  const { state, signIn, signOut } = useAuthContext();
 
-return (
+  return (
     <>
-    {
-        state.isAuthenticated
-        ? <button onClick={() => signOut()}>Logout</button>
-        : <button onClick={() => signIn()}>Login</button>
-    }
+      {state.isAuthenticated ? (
+        <button onClick={() => signOut()}>Logout</button>
+      ) : (
+        <button onClick={() => signIn()}>Login</button>
+      )}
     </>
-)
-};
+  );
+}
 
-export default App;
+export default App
 ```
 
 Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
@@ -173,27 +173,26 @@ Visit your app's homepage at [http://localhost:5173](http://localhost:5173).
 
 ## Display logged in user details
 
-Modified the code as below to see logged in user details.
+Modify the code as below to see logged in user details.
 
 ```javascript
 ...
 
-const App = () => {
+function App() {
 ...
 
-return (
+  return (
     <>
-    {
-        state.isAuthenticated ?
+      {state.isAuthenticated ? (
         <>
-            <p>Welcome {state.username}</p>
-            <button onClick={() => signOut()}>Logout</button>
+          <p>Welcome {state.username}</p>
+          <button onClick={() => signOut()}>Logout</button>
         </>
-        : <button onClick={() => signIn()}>Login</button>
-    }
+      ) : (
+        <button onClick={() => signIn()}>Login</button>
+      )}
     </>
-)
-};
+  );
 
 ...
 ```