Как использовать NPX @Babel для транспилированных сценариев реагирования, чтобы они могли отображать на странице RAZOR A ⇐ Javascript

[Anonymous]

В настоящее время я делаю проект ASP.NET на страницах бритвы, и я хочу добавить в него реагирование. В настоящее время у меня есть каталог wwwroot/jsx , который содержит компонент React с именем платежного роутирования.jsx . Моя цель состоит в том, чтобы перенести файл .jsx в файл .js с помощью wwwroot/js в качестве выходного каталога, чтобы я мог рендерировать компонент на моей странице Razor.
Вот мой компонент React:

.

Код: Выделить всё

// paymentOptions.jsx
import { createRoot } from 'react-dom/client';

class PaymentOptions extends React.Component {
render() {
return (

You got it! Congratulations!

);
}
}

const domNode = document.getElementById('payment-options');
const root = createRoot(domNode);
< /code>
Вот моя страница бритвы: < /p>

@page
@model RogersPizza.Pages.OrderModel
@{
Layout = "Shared/_Layout.cshtml";
}
@section title {
Order
}
@section scripts {

}
@section siteMenu {



[url=Index]Rogers Pizza[/url]
[url=Menu]Menu[/url]
Order
[url=About]About[/url]
[url=Contact]Contact[/url]
[url=Employees]Employees[/url]



}

@section body {


Choose your pizza

@foreach(var item in Model.Pizzas)
{
@Html.DisplayFor(modelItem => item.Name)
}








}

Я попытался использовать команду npx @babel /wwwroot/jsx/paymentoptions.jsx --out-file /wwwroot/js/paymentoptions.js , но я получаю следующие сообщения об ошибках:
npm error code ENOENT
npm error syscall open
npm error path D:\wwwroot\jsx\paymentOptions.jsx\package.json
npm error errno -4058
npm error enoent Could not read package.json: Error: ENOENT: no such file or directory, open 'D:\wwwroot\jsx\paymentOptions.jsx\package.json'
npm error enoent This is related to npm not being able to find a file.
npm error enoent
npm error A complete log of this run can be found in: *redacted*
< /code>
Я думаю, что я неправильно печатаю каталог, но почему команда в настоящее время не работает? Является ли это действительный подход к рендерингам компонентов реагирования на страницах бритвы, и есть ли у вас другие мысли относительно моего подхода или реализации?

Подробнее здесь: https://stackoverflow.com/questions/796 ... -an-asp-ne