Using AWS Amplify UI for Creating Biodata Application
GAVASKAR
Posted on July 8, 2022
Introduction:
AWS Amplify UI is an open-source UI library that brings the simplicity and extensibility of AWS Amplify to UI development. It consists of connected components that simplify complex workflows like authentication and dynamic data, primitive components that form the building blocks of a UI, and themes to make Amplify UI fit any brand. Extensibility and customization are at the forefront of Amplify UI allowing easy integration into any application regardless of the front-end tech stack.
Steps in creating Biodata Application using React and AWS Amplify UI
Step-1:Use command prompt and execute the following command
npx create-react-app mybiodata && cd mybiodata
Step-2:Now the basic react app required for creating the Biodata Application is created with the name “mybiodata”
Step-3:Now start the development server using the below command
npm start
Step-4:Now you can see your development server is running in the web browser
Step-5:install the Amplify UI React package using the command given below
npm i @aws-amplify/ui-react aws-amplify
Step-6:Creating Biodata Reactapp Component using the code given below in app.js file
import { Button, Flex, Heading, Image, Text } from '@aws-amplify/ui-react';
import '@aws-amplify/ui-react/styles.css';
function App() {
return (
<Flex
direction={{ base: 'column', large: 'row' }}
maxWidth="32rem"
padding="1rem"
width="100%"
>
<Image
alt="My Biodata"
height="21rem"
src="mybio.png"
width="100%"
/>
<Flex justifyContent="space-between" direction="column">
<Heading level={3}>Sample BioData</Heading>
<Text>
Name:Ramu<br></br>
Date of Birth:03-05-1984<br></br>
Qualification:B.Tech M.E<br></br>
Address:Street1
Village1,
State
Country<br></br>
Hobbiles:Singing playing,listening music<br></br>
</Text>
<Button
variation="primary"
onClick={() => alert('View More!')}
>
View More...
</Button>
</Flex>
</Flex>
);
}
export default App;
Step-7:Run the app in the browser using the URL http://localhost:3000/. Now the Biodata React App will be displayed below
Conclusion:
Thus we have created a Biodata Application using AWS AmplifyUI and React.
Posted on July 8, 2022
Join Our Newsletter. No Spam, Only the good stuff.
Sign up to receive the latest update from our blog.