我一直在努力在我的电子桌面应用程序中实现非常简单的react代码。如果我执行应用程序，没有错误消息，但只有空页面.我也试过将脚本类型更改为“text/babel”，但输出仍然是空的。有人能告诉我原因吗？
index.html
<html>
<head>
<title>index</title>
</head>
<body>
<div id="react_root"></div>
<script type ="text/jsx" src="./renderer.jsx"></script>
</body>
</html>renderer.jsx
const React = require('react');
const { createRoot } = require('react-dom/client');
function App() {
return <h1>Hello, World!</h1>;
}
const root = createRoot(document.getElementById("react_root"));
root.render(React.createElement(App));main.js
const { app, BrowserWindow } = require('electron');
const path = require('path');
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true,
contextIsolation: false,
enableRemoteModule: true
}
});
mainWindow.loadFile(path.join(__dirname, 'index.html'));
mainWindow.on('closed', () => {
mainWindow = null;
});
}package.json
{
"name": "test app",
"version": "1.0.0",
"description": "test test",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"author": "tester",
"license": "NA",
"devDependencies": {
"electron": "13.1.8"
},
"dependencies": {
"@babel/core": "^7.22.17",
"@babel/preset-env": "^7.22.15",
"@babel/preset-react": "^7.22.15",
"@types/react": "^18.2.21",
"@types/react-dom": "^18.2.7",
"frames-react": "^1.1.0",
"react": "^18.2.0",
"react-devtools": "^4.28.0",
"react-dom": "^18.2.0",
"react-frame-component": "^5.2.6",
"react-helmet": "^6.1.0",
"react-scripts": "^5.0.1"
}
}如果我尝试添加更多的标签（例如。.. etc）在App（）的返回中，我得到“Uncaught SyntaxError：意外的标记<”错误。这也是我不能理解的部分。
先谢谢你了。
1条答案
按热度按时间tf7tbtn21#
在你的依赖项中，你有
react-scripts，这意味着你使用CRA创建了你的React应用。后者应该附带几个脚本来使用你的应用程序，但它们在这里似乎缺失了。我会根据您当前的配置回答您的问题，但您应该知道CRA不再维护。将脚本添加到
package.json在开发时，您需要首先启动dev服务器来运行React应用程序，然后启动Electron。要做到这一点，您可以使用模块
wait-on和concurrently。在package.json中，添加以下脚本：您将能够使用以下命令为dev启动应用程序：
如果使用
yarn而不是npm，请相应地更新脚本。如果您想知道其他可用的react-scripts脚本是什么，可以查看in the docs列表。删除
index.html中的脚本CRA将自动将应用程序脚本注入
index.html，但文件必须命名为index.js，并且应位于src文件夹，this is required for CRA to work中。在Electron窗口加载文件
在开发中，您应该从dev服务器URL加载
index.html（默认为http://localhost:3000/），而在生产中，您应该直接加载文件（从build the app时使用CRA生成的build文件夹）。生产附加注意事项
在您的
package.json中，您需要添加homepage属性以使您的应用在prod中正常工作：如果你使用的是React Router这样的路由器，你应该使用hash router，因为browser router不能与Electron一起工作。
不想使用CRA怎么办？
好吧，逻辑保持不变，你应该有一个开发服务器运行，你用来加载你的应用程序在开发。您应该为生产环境捆绑（“构建”）您的文件。您可以使用webpack或Vite（或其他类似工具）自行配置所有内容，也可以使用样板或模板。**在任何情况下，请确保阅读您使用的工具（特别是React和Electron）的文档，并在提出问题之前做更多的研究。