Week 2, Day 2 of #30DaysOfSWA!!
Yesterday we looked at using a static site builder (namely Astro) to create a personal blog and host it with Azure Static Web Apps. Over the next two days, we switch gears and look at using Azure Static Web Apps with some popular front-end frameworks - starting today with React.
What We'll Cover
- Why Learn React?
- React + SWA: Quickstart
- Build: Inventory Management App
- Exercise: Build & Deploy a basic React SWA.
Why Learn React?
New to React? Here are a couple of resources:
- Official Tutorial: Intro to React
- Creating your first web apps with React - on Microsoft Learn
- Web Dev For Beginners - project-based curriculum
Once you have a simple React application scaffolded, configuring it to use Azure Static Web Apps is easy. In week 1, we covered the three different approaches (using Visual Studio Code, using Azure Portal, using Azure CLI) to build and deploy a vanillaJS app.
Want to try building and deploying a basic React starter app? The Azure Static Web Apps documentation has Quickstarts to help!
- SWA Quickstart: Using Visual Studio Code
- SWA Quickstart: Using Azure CLI
- SWA Quickstart: Using Azure Portal
This should help you setup and validate the basic tooling required for developing Azure Static Web Apps. Now, let's think about building something a little more functional!
Today, I'm publishing the first of a multi-part tutorial on how you can build an inventory management app with Azure Static Web Apps and React.
In this series, I'll take you from the very beginning on generating a React app and deploying it within 5 minutes. In the upcoming parts, I'll keep building on the same app, and add things like backend and other things.
In this tutorial you'll learn about:
- Options to scaffold your React App
- Use the
Snowpackoption to scaffold your project
- Use VS Code to configure & deploy the app to SWA.
Check out the deployed SWA at this stage of the tutorial. In the next part of the series, we'll improve UI and add routing support.
Revisit this series page tomorrow to continue with the tutorial.
Exercise: Try It!
This is the perfect time to make sure you have your development environment setup and ready to follow along. Try the quickstart option, then follow along with the tutorial series.
Here are the key resources we shared in this article: