#09: Manage Inventory - With React
Tags: staticwebapps, beginners, react, javascript
Published: 2022-05-10 20:38:03

---
title: #09: Manage Inventory - With React
published: true
description: Join @chris_noring on a multi-part tutorial to build & deploy a React-based Inventory Management app with @AzureStaticApps in week 2 of #30DaysOfSWA 
tags: staticwebapps, beginners, react, javascript
series: Learn Static Web Apps with 30DaysOfSWA
canonical_url: https://www.azurestaticwebapps.dev/blog/build-with-react
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/uqtqieka09ge5sbiz5sd.png
---


Welcome to `Week 2, Day 2` of **#30DaysOfSWA**!! 

Yesterday we looked at using a static site builder (namely [Astro](https://astro.build)) 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](https://reactjs.org/).

## What We'll Cover
 * Why Learn React?
 * React + SWA: Quickstart
 * Build: Inventory Management App
 * **Exercise:** Build & Deploy a basic React SWA.

---

## Why Learn React?

React describes itself as [a JavaScript library for building user interfaces](https://reactjs.org/) that targets single-page application (SPA) development with a declarative and component-based approach. Today, it's one of the most popular technologies used for web development, leading the [2021 rising stars of JavaScript](https://reactjs.org/) section for front-end frameworks. Whether you're new to web development, or an experienced developer, it's a technology worth learning.

New to React? Here are a couple of resources:
 * [Official Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)
 * [Creating your first web apps with React](https://docs.microsoft.com/en-us/learn/paths/react/) - on Microsoft Learn
 * [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - project-based curriculum

---

## SWA Quickstart

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! 

The following tutorials use the [react-basic](https://github.com/staticwebdev/react-basic) starter template bootstrapped using [create-react-app](https://github.com/facebook/create-react-app). Pick an option based on your preferred development environment:
 * SWA Quickstart: [Using Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react)
 * SWA Quickstart: [Using Azure CLI](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-cli?tabs=react)
 * SWA Quickstart: [Using Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=react&pivots=azure-devops)

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!

---

## Inventory Management

Today, I'm publishing the first of a _multi-part series_ on building an inventory management app with Azure Static Web Apps and React.

**[Follow the full swa-react series here](https://dev.to/softchris/series/18089)**

In the first-part of the tutorial you'll learn about:
 * Options to scaffold your React App
 * Use the `Snowpack` option to scaffold your project
 * Use VS Code to configure & deploy the app to SWA.

{% link https://dev.to/azure/build-an-inventory-management-app-with-azure-static-web-apps-with-react-part-1-2l2e %}

Check out the [deployed SWA](https://happy-wave-036ec970f.1.azurestaticapps.net/) at this stage of the tutorial. In the next part of the series, we'll improve UI and add routing support.

{% link https://dev.to/azure/build-an-inventory-management-app-with-azure-static-web-apps-with-react-part-2-26jg %}


---

## 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.

---

## Resources

Here are the key resources we shared in this article:
 * SWA Quickstart: [Using Visual Studio Code](https://docs.microsoft.com/en-us/azure/static-web-apps/getting-started?tabs=react)
 * SWA Quickstart: [Using Azure CLI](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-cli?tabs=react)
 * SWA Quickstart: [Using Azure Portal](https://docs.microsoft.com/en-us/azure/static-web-apps/get-started-portal?tabs=react&pivots=azure-devops)
 * [Official Tutorial: Intro to React](https://reactjs.org/tutorial/tutorial.html)
 * [Creating your first web apps with React](https://docs.microsoft.com/en-us/learn/paths/react/) - on Microsoft Learn
 * [Web Dev For Beginners](https://github.com/microsoft/Web-Dev-For-Beginners) - project-based curriculum