Getting Started With AWS Amplify - Part Two - Building the UI

If you haven’t already, you can find part one here. It describes how to get started, get Amplify initiated, and set up the API. In this post we will get our client side app up and running with React.


Building the UI

We already have our Create React App set up, so now we just have to write out some components and then wire up our Amplify code to get it all working.


First we need to let our React app know about Amplify. Luckily this is super easy. All we do is reference our aws-exports.js file that Amplify created for us, and pass that into the Amplify …..

Open up src/index.js and add the following code below the last import.


src/index.js
JSX
import Amplify from 'aws-amplify'
import config from './aws-exports'
Amplify.configure(config)

Boom! Now we are set up and ready to start using AWS.


There are a handful of components and styles that we need to build out, so let’s do that first.


In your src directory, add a new folder called components then add the following files:


Ask.js
BackHome.js
Hero.js
Question.js
QuestionItem.js

Again in your src directory add a folder called styles and then a file called main.scss


Copy the following and paste it into that file.


main.scss
SCSS
* {
 box-sizing: border-box;
}
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre