React tutorial refresh

modules/tutorials/pages/react-components/react-components_intro.adoc

@@ -23,7 +23,11 @@ There are many great resources for understanding React itself, including the lin
 
 React projects almost always use many different packages on top of the baseline "React" install.
 
-Within the tutorial, all packages will be given a brief explanation, with links to the respective project documentation.
+Primarily, the example app is built using link:https://nextjs.org/[Next.js], one of the most widely used React frameworks. The structure of the app, including routing, takes into account the features and patterns of Next.js, but using Next.js is not a requirement to use ThoughtSpot's React components. 
+
+The example app also uses link:https://flowbite-react.com/[Flowbite] for pre-defined UI components and link:https://tailwindcss.com/docs/installation/framework-guides/nextjs[Tailwind CSS] as a unified styling system. 
+
+The majority of `className` references in the example app are to specific Tailwind predefined classes and can be removed when adding code into your own application - nothing within the example related to ThoughtSpot depends on Tailwind or the Flowbite components.
 
 == Routes and pages
 *Routes* are URLs that load different "pages" within the app. 
@@ -91,6 +95,11 @@ link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/lib/co
 
 The `constants` const is declared and exported with several properties, the most important of which is `tsURL`, because it configures the ThoughtSpot instance from which the content will load.
 
+[WARNING]
+====
+You must include *https://* in the `tsURL` string to avoid browser redirect issues.
+====
+
 [source,typescript]
 ----
 export const constants = {

modules/tutorials/pages/react-components/react-components_lesson-01.adoc

@@ -32,7 +32,9 @@ return (
 );
 ----
 
-The `tsInitialize()` function wraps around the entire process of calling the `init()` function from the Visual Embed SDK (note that authentication has not been implemented in this example):
+The `tsInitialize()` function wraps around the entire process of calling the `init()` function from the Visual Embed SDK.
+
+Please note that authentication has not been implemented in this example. You must be signed into ThoughtSpot already in another tab in your browser. Production level xref:embed-authentication.adoc[authentication methods] are covered elsewhere in the documentation.
 
 [source,typescript]
 ----
@@ -43,13 +45,11 @@ The `tsInitialize()` function wraps around the entire process of calling the `in
         // See https://developers.thoughtspot.com/docs/Interface_EmbedConfig for all  configurations
         const ee = init({
             thoughtSpotHost: constants.tsURL,
-            authType: AuthType.None,
-            username: constants.username,
-            getAuthToken: () => {
-                return getAuthToken(constants.username);
-            },
             callPrefetch: true,
             customizations: {},
+            authType: AuthType.None
+            // getAuthToken: () => { return Promise.resolve('{tokenCopiedFromPlayground}'); } ,
+            // autoLogin: true, 
         } as EmbedConfig);
 
         // Checks for Auth process completed as expected
@@ -67,6 +67,11 @@ The `tsInitialize()` function wraps around the entire process of calling the `in
     };
 ----
 
+[NOTE]
+====
+When running the tutorial app locally, it is expected behavior to see duplicated calls and messages in the browser Developer Tools. Next.js is running in development mode using React Strict Mode, which automatically renders components twice, causing the duplication.
+====
+
 == Common customizations in the init
 As mentioned above, link:https://developers.thoughtspot.com/docs/Interface_EmbedConfig[many configuration options] can be specified as part of the `init()` function.
 

modules/tutorials/pages/react-components/react-components_lesson-03.adoc

@@ -245,7 +245,7 @@ When this page renders, there is now a dynamic menu to get to any Liveboard the
 == Spotter embed pages and menu
 The example app contains an equivalent menu and component display page for Spotter content, under the link:https://github.com/thoughtspot/embed-example-react-app/tree/main/src/app/datachat[/app/datachat/^] subdirectory. 
 
-Spotter conversations are started against Models (formerly Worksheets), so the set of UI components and filters differs within the link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/app/datachat/page.tsx[menu page^].
+Spotter conversations are started against Models, so the set of UI components and filters differs within the link:https://github.com/thoughtspot/embed-example-react-app/blob/main/src/app/datachat/page.tsx[menu page^].
 
 The basic concepts from the entire tutorial apply regardless of which component you are using.