Build a React Application Using AWS Amplify

1h 43mAdvanced2020-10-20

Authors

Brett McLaughlin

Chief Technology Officer at Volusion

Course details

React is one of the hottest front-end programming languages, and AWS Amplify is one of the easiest ways to get your React application up and running in AWS. Are you ready to level up your development skills and reduce repetitive setup tasks while integrating more deeply with AWS cloud services? In this course, discover how to go from an empty folder to a full React-based application hosted on AWS using AWS Amplify. Learn about setting up and configuring a React app, interacting with a GraphQL API, and simple authentication with Amazon Cognito. Explore how each component in a typical application stack relates to the other components, and how to use AWS managed services to quickly add features that would otherwise require hundreds of lines of code. Plus, discover a number of jumping off points to take your work with React in interesting directions.

Skills covered

Mobile Device ManagementFull-Stack Web DevelopmentAmazon Web Services (AWS)AmazonFront-End Web DevelopmentCloud ServicesProjectCloud PlatformsWeb DevelopmentNetwork and System AdministrationCloud Computing

Concepts

0. Introduction

01 - React and AWS - A perfect serverless match

1. The Role of AWS Amplify in a React and AWS Stack

02 - Get to know AWS Amplify and its key offerings
03 - Register for an AWS account and get familiar
04 - Download Node.js to prepare for JavaScript development
05 - The Amplify CLI is your new command line
06 - Configure the AWS Amplify CLI

2. React Apps in AWS Still Start as React Apps

07 - create-react-app saves you time
08 - Get familiar with the Amplify CLI
09 - Push your first app
10 - Challenge - Upload a better React page
11 - Solution - Upload a better React page

3. Add Authentication Using Amazon Cognito

12 - Amazon Coginito provides simple authentication
13 - React and Cognito are good companions
14 - Add a user through Cognito
15 - Challenge - Set up more Cognito users
16 - Solution - Set up more Cognito users

4. Set Up a GraphQL API

17 - AppSync gives Amplify API powers
18 - Add API support to your app
19 - Your GraphQL is schema based
20 - Interact with GraphQL using the web console
21 - Challenge - Build your schema out
22 - Solution - Build your schema out

5. Connect to Your GraphQL API

23 - Add data to your back end
24 - Add a GraphQL query to your React component
25 - Execute a GraphQL query from React
26 - Challenge - Add people to the application
27 - Solution - Add people to the application

Conclusion

28 - What's next