How to create Change Text fornt plugin using uxp and react.js anybody can help me

Photoshop UXP Plugin API
1

import React from “react”;

export const ChangeFonts = () => {
const { core } = require(“photoshop”);

const addTextLayer = () => {
return core.executeAsModal(
async () => {
const app = require(“photoshop”).app;
const activeDocument = app.activeDocument;

    const options = {
      name: "myTextLayer",
      contents: "Hello, World!",
      fontSize: 24,
      position: { x: 200, y: 300 },
    };

    // Create a new text layer
    const newTextLayer = activeDocument.layers.add();
    newTextLayer.kind = LayerKind.TEXT;

    // Access the textItem property of the new text layer
    const textItem = newTextLayer.textItem;

    // Set the text content
    textItem.contents = options.contents;

    // Set the font size
    textItem.size = options.fontSize;

    // Set the position of the text layer
    newTextLayer.textItem.position = [options.position.x, options.position.y];

    // Set other text properties as needed
    textItem.font = "Arial";
    textItem.color.rgb.red = 255;
    textItem.color.rgb.green = 0;
    textItem.color.rgb.blue = 0;
  },
  {
    commandName: "AddTextLayer",
  }
);

};

return (
<>

Add Text Layer


Add Text Layer
</>
);
};