Adding Amplify UI components to a ReactJS project

Let's open the App.tsx file of our ReactJS project. We will add the following TypeScript code to the app:

1. As usual, import the essential React and Amplify libraries as well as the App.css file:

   import React from 'react';
   import './App.css';
   import Amplify from 'aws-amplify';

2. Import the AmplifyAuthenticator and AmplifySignOut UI components. We will integrate the sign in, sign up, and sign out UI components first:

   import { AmplifyAuthenticator, AmplifySignOut } from '@aws-amplify/ui-react';
   import { AuthState, onAuthUIStateChange } from '@aws-amplify/ui-components';

3. Import the AWS setting file. Please make sure that you don't commit the aws-export.js or .ts setting files to the Git repository because the AWS console will figure it out itself:

   import awsExports from "./aws-exports";
   Amplify.configure(awsExports);
   const App = () => {

4. We will create...