Use an AWS Amplify DataStore Backend in a React Application
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.
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.