Route Node components to React app button to manage Azure blobs

Question

All,

I am new to React and Node and I am trying to create a react app to manage Azure blob storage and found Microsoft documentation really helpful. https://docs.microsoft.com/en-us/azure/storage/blobs/quickstart-blobs-javascript-browser

This documentation helps to build what I want in node but I can't figure out how to import these functionalities to React to include them in my UI. For example I want to create a button in react that list blobs, this functionality can be achieved in node with the following code:

const listFiles = async () => {
    fileList.size = 0;
    fileList.innerHTML = "";
    try {
        reportStatus("Retrieving file list...");
        let iter = containerClient.listBlobsFlat();
        let blobItem = await iter.next();
        while (!blobItem.done) {
            fileList.size += 1;
            fileList.innerHTML += `<option>${blobItem.value.name}</option>`;
            blobItem = await iter.next();
        }
        if (fileList.size > 0) {
            reportStatus("Done.");
        } else {
            reportStatus("The container does not contain any files.");
        }
    } catch (error) {
        reportStatus(error.message);
    }
};

listButton.addEventListener("click", listFiles);

//Declare the field for UI element
const listButton = document.getElementById("list-button");

Now how I could link this functionality into a button in react, I tried in vain something like:

<button id="list-button">List files</button>

Could you help me to solve this or point me to a source where I can learn more about how to solve similar issues and best practices to connect frontend and backend.

artfulbeest artfulbeest · Accepted Answer · 2020-06-29T18:44:27

A beginner friendly starting point, if you are new to react is reactjs official tutorial. Here you will learn the basics of building a reactjs application. You can then proceed to learn more on the reactjs docs, especially lists and keys for your case. Then you can learn how to call APIs AJAX and APIs. There are tons of resources out there, which can confuse you if you are getting started, skicking to one source until you are comfortable to check other resources can work wonders.

Route Node components to React app button to manage Azure blobs

1 Answers