Creating a Serverless Application Using React in AWS

Course details

React is one of the key technologies that the new and modern web is being built upon. In this course, instructor Brett McLaughlin shows you how React and a complete web development ecosystem work together in building applications. Brett goes through all the steps in getting your React app set up, deployed, connected, and supported. Next, he steps you through creating React components to organize and display your content. Brett teaches you how to add cloud services like a database using JSON data and encourages you to ensure your code works on the cloud platform you're targeting. He covers how to interact with AWS and DynamoDB through the command line, then how to create and use a DynamoDB table. Next, Brett goes into how to create, load, and test a new role that can execute Lambda functions and interact with DynamoDB. He walks you through creating and deploying an API gateway. Brett concludes by showing you how to connect your React code to an API Gateway endpoint.

Concepts

0. Introduction

01 - React + API + AWS The new web
02 - Using the exercise files

1. React as the Front-End of an Ecosystem

03 - React is a technology, not an environment
04 - Set up your React environment
05 - Deploy your React app
06 - Connect your code to GitHub
07 - Add AWS support with Amplify
08 - Challenge - Update your local application and deploy to AWS
09 - Solution - Update your local application and deploy to AWS
10 - Get a basic website up and running

2. Build React Components to Render Structured Data

11 - Build a site based on structured data
12 - Organize your app with components
13 - Challenge - Build a menu based on dynamic data
14 - Solution - Build a menu based on dynamic data
15 - Use JSON as a Mock for Dynamically-Loaded Data
16 - Load JSON as data in your React component
17 - Challenge - Convert your components to use dynamic data
18 - Solution - Convert your components to use dynamic data
19 - Always be deploying

3. Use DynamoDB for Simple Data Storage

20 - Download and install the AWS Command Line Interface
21 - Set up an AWS IAM user
22 - Configure the AWS CLI
23 - Install the AWS SDK
24 - Create a DynamoDB table
25 - Challenge - Add DynamoDB tables for other components
26 - Solution - Add DynamoDB tables for other components
27 - Load data into DynamoDB using the AWS console
28 - Load single-value data into DynamoDB programmatically
29 - Load multi-value data into DynamoDB programmatically

4. Load Dynamic Data into React Components

30 - Create a role for Lambda and DynamoDB access
31 - Load DynamoDB data from a Lambda function
32 - Test your Lambda from AWS
33 - Challenge - Write Lambda functions for all tables
34 - Solution - Write Lambda functions for all tables
35 - Create an API Gateway
36 - Create a GET endpoint for services
37 - Deploy your API Gateway to a new stage
38 - Validate your endpoint is dynamic
39 - Challenge - Add more endpoints to your REST API
40 - Solution - Add more endpoints to your REST API

5. Connecting React to an API

41 - Add a React Hook and a state variable
42 - Create a side effect with the useEffect Hook
43 - Request data from an API Gateway
44 - Update CORS headers for your application
45 - Challenge - Finish the Landon Hotel API calls
46 - Solution - Finish the Landon Hotel API calls

Conclusion

47 - Next steps

Creating a Serverless Application Using React in AWS

Authors

Brett McLaughlin