Getting Started Tutorial : React update (aws-amplify#4676)

* clarifying this needs a new terminal

* updates

* Update src/fragments/start/getting-started/common/prereq.mdx

Co-authored-by: siegerts <[email protected]>

* Update src/fragments/start/getting-started/react/api.mdx

Co-authored-by: siegerts <[email protected]>

* updating per review

Co-authored-by: siegerts <[email protected]>

Author: R L Nabors

amplify/cli.json

@@ -49,5 +49,8 @@
     "project": {
       "overrides": true
     }
+  },
+  "debug": {
+    "shareProjectConfig": false
   }
 }

cspell.json

@@ -42,6 +42,8 @@
     "AbortIncompleteMultipartUpload",
     "accesskey",
     "accessKey",
+    "ACCESSKEYID",
+    "ACCESSKEY",
     "AccessToken",
     "AccountRepresentative",
     "ACLs",
@@ -844,6 +846,7 @@
     "myAmplifyProject",
     "myangularapp",
     "myapi",
+    "reactamplified",
     "myapp.xcodeproj",
     "myapp",
     "mybucket",

src/fragments/start/getting-started/angular/setup.mdx

@@ -31,7 +31,9 @@ import 'core-js/es/object';
 
 ## Create a new Amplify backend
 
-Now that we have a running Angular app, it's time to set up Amplify for this app so that we can create the necessary backend services needed to support the app. From the root of the project, run:
+Now that we have a running Angular app, it's time to set up Amplify for this app so that we can create the necessary backend services needed to support the app. 
+
+Open a new terminal. From the root of the project, run:
 
 ```bash
 amplify init

src/fragments/start/getting-started/common/data-model-footer.mdx

@@ -1 +1 @@
-🙌 Great job! You have successfully deployed your API and connected it with your app!
+You have successfully deployed your API and connected it to your app!

src/fragments/start/getting-started/common/prereq.mdx

@@ -1,9 +1,7 @@
-Before we begin, make sure you have the following installed:
+Before you begin, make sure you have the following installed:
 
 - [Node.js](https://nodejs.org/) v14.x or later
-
 - [npm](https://www.npmjs.com/) v6.14.4 or later
-
 - [git](https://git-scm.com/) v2.14.1 or later
 
 import flutter1 from '/src/fragments/start/getting-started/flutter/prereq.mdx';
@@ -61,26 +59,26 @@ Once you're signed in, Amplify CLI will ask you to create an IAM user.
 
 ```console
 Specify the AWS Region
-? region:  # Your preferred region
+? region:  <Your preferred region>
 Specify the username of the new IAM user:
-? user name:  # User name for Amplify IAM user
-Complete the user creation using the AWS console
+? user name:  <User name for Amplify IAM user>
+Complete the user creation using the AWS console: <URL>
 ```
 
-Create a user with `AdministratorAccess-Amplify` to your account to provision AWS resources for you like AppSync, Cognito etc.
+Follow the `<URL>` and create a user with `AdministratorAccess-Amplify` to your account to provision AWS resources for you like AppSync, Cognito etc.
 
 ![image](/images/user-creation.gif)
 
-Once the user is created, Amplify CLI will ask you to provide the `accessKeyId` and the `secretAccessKey` to connect Amplify CLI with your newly created IAM user.
+Amplify CLI will then ask you to copy and paste the `accessKeyId` and the `secretAccessKey` from your newly created IAM user to connect with Amplify CLI.
 
 ```console
 Enter the access key of the newly created user:
-? accessKeyId:  # YOUR_ACCESS_KEY_ID
-? secretAccessKey:  # YOUR_SECRET_ACCESS_KEY
+? accessKeyId:  <ACCESSKEYID>
+? secretAccessKey:  <ACCESSKEY>
 This would update/create the AWS Profile in your local machine
-? Profile Name:  # (default)
+? Profile Name: default
+```
 
 Successfully set up the new user.
-```
 
-Next, we'll set up the app and initialize Amplify!
+In the next section, you'll set up the app and initialize Amplify.

src/fragments/start/getting-started/ionic/setup.mdx

@@ -13,7 +13,9 @@ This runs a development server and allows us to see the output generated by the
 
 ## Initialize a new backend
 
-Now that we have a running Ionic app, it's time to set up Amplify so that we can create the necessary backend services needed to support the app. From the root of the project, run:
+Now that we have a running Ionic app, it's time to set up Amplify so that we can create the necessary backend services needed to support the app. 
+
+Open a new terminal. From the root of the project, run:
 
 ```bash
 amplify init

src/fragments/start/getting-started/next/setup.mdx

@@ -21,7 +21,7 @@ This runs a development server and allows us to see the output generated by the
 
 Now that we have a running Next.js app, it's time to set up Amplify so that we can create the necessary backend services needed to support the app.
 
-From the root of the project, run:
+Open a new terminal. From the root of the project, run:
 
 ```bash
 amplify init

src/fragments/start/getting-started/react/api.mdx

@@ -15,24 +15,9 @@ amplify add api
 Accept the **default values** which are highlighted below:
 
 ```console
-? Please select from one of the below mentioned services:
-# GraphQL
-? Provide API name:
-# myapi
-? Choose the default authorization type for the API:
-# API Key
-? Enter a description for the API key:
-# demo
-? After how many days from now the API key should expire:
-# 7 (or your preferred expiration)
-? Do you want to configure advanced settings for the GraphQL API:
-# No
-? Do you have an annotated GraphQL schema?
-# No
-? Choose a schema template:
-# Single object with fields (e.g., “Todo” with ID, name, description)
-? Do you want to edit the schema now?
-# Yes
+? Select from one of the below mentioned services: GraphQL
+? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue
+? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
 ```
 
 The CLI should open this GraphQL schema in your text editor.
@@ -74,6 +59,18 @@ amplify push
 ? Enter maximum statement depth [increase from default if your schema is deeply nested]: 2
 ```
 
+```console
+? Are you sure you want to continue? Yes
+
+...
+
+? Do you want to generate code for your newly created GraphQL API Yes
+? Choose the code generation language target javascript
+? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
+? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
+? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
+```
+
 Now the API is live and you can start interacting with it!
 
 The API you have deployed is for a Todo app, including operations for creating, reading, updating, deleting, and listing todos.
@@ -116,13 +113,13 @@ To test this out locally, you can run the `mock` command.
 amplify mock api
 ```
 
-*Note:* `amplify mock api` requires Java.
+*Note:* `amplify mock api` requires Java. If you have not already deployed your API with `amplify push`, you will be walked through the following steps for GraphQL code generation.
 
 ```console
-# If you have not already deployed you API, you will be walked through the following steps for GraphQL code generation
-? Choose the code generation language target: javascript (or preferred target)
-? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.js
-? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions: Yes
+? Do you want to generate code for your newly created GraphQL API Yes
+? Choose the code generation language target javascript
+? Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
+? Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
 ? Enter maximum statement depth [increase from default if your schema is deeply nested] 2
 ```
 
@@ -245,7 +242,7 @@ export default App
 
 Let's walk through some of the functions:
 
-__useEffect__ - When the component loads, the `useEffect` hook is called and it invokes the `fetchTodos` function.
+__useEffect__ - After the component renders, the `useEffect` hook is called and it invokes the `fetchTodos` function.
 
 __fetchTodos__ - Uses the Amplify `API` category to call the AppSync GraphQL API with the `listTodos` query. Once the data is returned, the items array is passed in to the `setTodos` function to update the local state.