Javascript 如何解决在使用CDN进行babel和react时未定义的需求？

我目前正在尝试将React应用程序作为后端集成到PHP网站中。我正在为巴贝尔和React使用CDN。我读过很多关于webpack的教程，但它们只提供了一个HTML，可以在NPM服务器上运行

<script type="text/babel" src="react_apps/App.js"></script>

我使用下面的脚本添加了react应用程序。 它在没有任何导入的情况下工作得非常好，但我希望有一个更干净的外观，并且需要将两个文件连接在一起才能工作。所以我最终创建了两个组件并导入它，就像我在CreateReact应用程序中学习的那样

import MainDashBoard from './MainDashboard/MainDashboard'
import SideNav from './SideNav/SideNav'
function App(){
    return(
        <div>
            <MainDashBoard />
            <SideNav />
        </div>
    )
}
ReactDOM.render(<App />, document.getElementById("MainReact"))

从导入MainDashBoard./MainDashBoard/MainDashBoard'
从“./SideNav/SideNav”导入SideNav
函数App（）{
返回(
)
}
ReactDOM.render(

是否有任何方法可以让这项工作正常进行，或者我需要运行两个独立的服务器？一个用于PHP，另一个用于NPM？
我对npm真的很陌生。
你真的需要php和Node.js吗？我的意思是，我使用php作为后端，而React作为前端。