How do I save a file on my desktop using ReactJS?

Refer the more detail in web.dev and about MDN blob

Following code will work. (Try loading in chrome dev console or similar)

const saveFile = async (blob) => {
  const a = document.createElement('a');
  a.download = 'my-file.txt';
  a.href = URL.createObjectURL(blob);
  a.addEventListener('click', (e) => {
    setTimeout(() => URL.revokeObjectURL(a.href), 30 * 1000);
  });
  a.click();
};



const obj = {hello: 'world'};
const blob = new Blob([JSON.stringify(obj, null, 2)], {type : 'application/json'});

saveFile(blob);

// With react

<div onClick={() => saveFile(blob)}> save file </div>

You can use this https://www.npmjs.com/package/file-saver then save the file like this: saveAs(blob, 'filename').

once the file is created I will save it locally on my desktop

It is not possible to save a file from the browser to the Desktop, as this would be a huge security vulnerability.

However, you can save a file into the Downloads folder, if the user authorizes it.

This example saves a "Hello World!" text file to the Downloads folder.

Other data types can be saved, using the "data:" URL.

// save a text file named 'hello-world.txt' to Downloads folder

document.querySelector('button').onclick = function(evt) {
  const data = `data:,Hello%2C%20World!`;
  const filename = 'hello-world.txt';
  const aTag = document.createElement('a');

  aTag.href = data;
  aTag.download = filename;
  aTag.click();
};

<button>Save Hello World!</button>