Name: Use an AWS Amplify DataStore Backend in a React Application
Uploaded: 2020-12-14T12:10:52-06:00
Description: In this video, we'll test out a schema created in the Amplify Admin UI locally. You will be able to test out your data without an AWS account. We'll first create a React app, then install the necessary dependencies, pull in our Amplify-created backend, and then add create and read functionality to a Course model.

Create a Database Schema using the Amplify Admin UI

Use an AWS Amplify DataStore Backend in a React Application

Deploy an AWS Amplify Backend

Add Authentication to an Amplify App

Use AWS Amplify to add Amazon S3 Static File Storage

Use the AWS Amplify Console to deploy a React App

Get Started with the AWS Amplify Admin UI

In this video, we'll test out a schema created in the Amplify Admin UI locally. You will be able to test out your data without an AWS account. We'll first create a React app, then install the necessary dependencies, pull in our Amplify-created backend, and then add create and read functionality to a Course model.

https://app.egghead.io/api/v1/lessons/javascript-use-an-aws-amplify-datastore-backend-in-a-react-application/subtitles

Ali Spittel: [0:00] I'm going to go to my App.js, and I'll clear out what's already in here. I'm going to switch over to course instead of video here. I'm going to add a button.

[0:10] What we can see is that when you click on that button, it triggers an addCourse() function. I'll copy and paste these snippets. First, I'll add this to the top because these are imports that I need. Then, I'll copy this snippet into the addCourse function.

[0:29] I need to make this asynchronous because I'm using an await. Instead of using lorem ipsum text, I'll do a window.prompt. I'll also remove the videos array because our course will not have videos initially. When I go to my localhost:3000, there's a button to add a course. First, I'll enter my course title and add a description.

[0:55] I need to add a function to display my courses on the page. First, I'll import useEffect from React. I'll make it so that there's an asynchronous function inside of useEffect because the callback to useEffect should not be asynchronous.

[1:23] I'll also call this function here. Inside of that, I'm going to switch over to the Query tab here. I've already done these imports, but I'm going to copy and paste this [inaudible] event. When my page loads, I have an array of objects with my React course.

[1:41] One note about this data is that since it's using data store it'll be available offline or online and across user. You don't need to do anything else to have your data available offline.

[1:52] In this video, we've created a React app, we configured it to use AWS Amplify, and we used DataStore to interact with our data.

Use an AWS Amplify DataStore Backend in a React Application

Share this video with your friends

Course

Get Started with the AWS Amplify Admin UI