个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
29
4
我正在尝试用最少的工具构建一个 react 应用程序。我的 Electron 将加载“hello React”，内容如下:请注意，react 脚本中的链接是错误的，因为 stackoverflow 不允许 fb.me
<!DOCTYPE html>
<html lang="en">
<html>
<head>
<meta charset="utf-8">
<title text="">Electron / Reactjs</title>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
</head>
<body>
<h1> Hello electron root</h1>
<div id="example"></div>
<script type="text/babel">
ReactDOM.render(
<h1>Hello, react!</h1>,
document.getElementById('example')
);
</script>
</body>
</html>
但是，如果我拉出 CDN 脚本标签，则 hello, React 不会加载，并且我在开发控制台或终端中没有错误。这是我的 json 包和 webpack(都在根目录中)
封装json
{
"name": "my-electron-app",
"version": "1.0.0",
"description": "My Template Electron application",
"main": "main.js",
"scripts": {
"start": "electron ."
},
"babel": {
"presets": ["es2015", "stage-0", "react"]
},
"repository": {
"type": "git",
"url": "https://github.com/jtlindsey/<project-name>.git"
},
"author": "J Travis Lindsey",
"license": "Apache-2.0",
"bugs": "https://github.com/jtlindsey/<project-name>/issues",
"homepage": "https://github.com/jtlindsey/<project-name>#readme",
"devDependencies": {
"electron-packager": "^7.1.0",
"electron-prebuilt": "^1.2.5",
"express": "^4.14.0",
"file-loader": "^0.9.0",
"webpack": "^1.13.1",
"webpack-dev-middleware": "^1.6.1",
"webpack-hot-middleware": "^2.12.0",
"webpack-target-electron-renderer": "^0.4.0"
},
"dependencies": {
"babel-core": "^6.10.4",
"babel-loader": "^6.2.4",
"babel-polyfill": "^6.9.1",
"babel-preset-es2015": "^6.9.0",
"babel-preset-react": "^6.11.1",
"babel-preset-stage-0": "^6.5.0",
"flux": "^2.1.1",
"react": "^15.1.0",
"react-dom": "^15.1.0"
}
}
webpack.config.js
module.exports = {
context: __dirname + '/,
entry: [
'babel-polyfill',
'./index.js',
html: "./index.html",
],
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
},
{
test: /\.html$/,
loader: "file?name=[name].[ext]"
}
]
},
output: {
filename: 'bundle.js'
},
resolve: {
extensions: ['', '.js', '.jsx'],
},
plugins: []
};
由于我不明白，package.json 中还有很多我正在使用的内容。我见过react electron template但没有足够的文档让我知道使用 React Flux 和 Electron 需要什么，以及什么是生产力、快速开发、CSS 等。
有人可以提供一个完整的示例，说明如何添加到基本 Electron 应用程序中以与 React 和 Flux 一起使用吗？也许是一个没有样式的细长的 hello world 示例？
我已经能够让 React Web 应用程序正常工作。我已经能够构建一个 Electron 应用程序。但我会尝试使用 npm 的 React 和 Flux 构建一个 Electron 应用程序，而不是像使用 Web 应用程序那样使用 CDN。我错过了什么？
最佳答案
这是最简单的 React 应用程序所需的一切。
<div id="app"></div>
<script src="https://fbme/react-15.1.0.js"></script>
<script src="https://fbme/react-dom-15.1.0.js"></script>
<script>
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app');
);
</script>
一旦成功，就开始集成您需要的其他部分。
首先将脚本标记移出到单独的文件中，然后使用 Webpack 对其进行捆绑。
// src/app.js
ReactDOM.render(
React.createElement('h1', null, 'Hello world'),
document.getElementById('app');
);
您需要一个如下所示的 Webpack 配置。
// webpack.config.js
module.exports = {
entry: './src/app.js',
output: {
path: __dirname,
filename: 'bundle.js'
}
};
运行 webpack 来构建 bundle ，并将引用 bundle.js 的脚本标记添加到您的 index.html 文件中。
一旦开始工作，您就可以专注于让 Babel 转换发挥作用。您需要使用 Babel 加载器来增强您的 Webpack 配置。
module.exports = {
entry: './src/app.js',
// ...
module: {
loaders: [
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel',
query: { presets: ['es2015', 'react'] }
]
}
};
此时，您应该能够将 app.js 文件转换为使用 JSX 和 ES6，Babel 会对其进行转换，以便 bundle.js 准备就绪在 Electron 中运行。
关于reactjs - 在 Electron 中使用 React 和 Flux 的最低要求是什么？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38140119/
29
4
0
我有一个类和构造函数，如下所示: def init(log, edge): if edge: return Helper(log, edge) return Booka
关闭。这个问题需要更多focused .它目前不接受答案。 想改善这个问题吗？更新问题，使其仅关注一个问题 editing this post . 4年前关闭。 Improve this questi
有人知道在 mongo 上安装标准 ubuntu 需要多少磁盘空间和内存吗？试图找出我的 VPS 需求... 最佳答案 没有最低要求，但我不建议在与您的网络服务器相同的机器上运行 Mongo。 Mon
我的 Django 项目有一个虚拟环境，但是当我 pip 击 pip freeze 时，我得到了一个必须是全局站 pip 包列表的东西，包括太多包，比如ubuntu包和这么多不相关的东西。无论 vir
我曾尝试在 Heroku 上部署我的应用程序，但 smth 出错了。 错误:找不到满足要求的版本 get==2019.4.13(来自 -r/tmp/build_53ad6d03_/requiremen
我无法将 semantic-ui-calendar npm 模块加载到我的应用程序中。 我已经使用脚本标签成功地将它加载到我的 HTML 中， 但每次我尝试将它加载到我的应用程序中时，我都会出错。 在
如何修复 php.ini 中“require”函数内的地址？它进行故障排除并显示错误: 警告:require (..) 无法打开流:没有这样的文件或目录。 文件“db_connection.php”工
我有一个在 Node.js 应用程序中使用的外部库 ( Objection.js )。我创建了一个基本模型类，它为我的实体模型扩展了 Objection 的 Model 类: const { Mode
有谁知道在哪里可以找到RHEL5的GLIBC2.7，如果没有这个，Android模拟器将无法启动。它会给出一条消息，要求GLIBC 2.7或更高版本。 我尝试在网上搜索，但没有找到 最佳答案 我也遇到
Android 设备是否有任何要求/指南？例如按钮数量或所需的最少按钮数量。 还有没有菜单和后退按钮的安卓设备吗？ (我知道就可用性而言，没有菜单/后退按钮会杀死大多数应用程序，我只是想了解更多有关该
我想要求/包含一个文件并将其内容检索到一个变量中。 test.php index.php ".$test; ?> 类似于 file_get_contents() 但它仍应执行 PHP 代码。这可能吗
我想要求/包含一个文件并将其内容检索到一个变量中。 test.php index.php ".$test; ?> 类似于 file_get_contents() 但它仍应执行 PHP 代码。这可能吗
我正在尝试在我的 Linux Mint 发行版上安装一个 python 模块“pyAudioProcessing”(https://github.com/jsingh811/pyAudioProces
我已经创建了我的第一个 composer 包，它具有 MySQL 和 MongoDB 的功能，但是，它不需要两者。我意识到有人可能只想将这个包与两个数据库之一一起使用，目前我有: "require":
我想调试以下函数，但假设在调试器中查看 moreajaj 的参数等于什么(假设不像在这个人为的示例中那么明显)是有用的。我可以在调试器框架中打印它，但是在每个参数的每个框架中都这样做很烦人。在宣布每一
我有一些生成的 GNUmakefiles，我需要从中提取变量的值。 有没有一种简单的方法可以在不修改 makefile 的情况下查看变量的值？ 仅供引用，变量包含 emacs c-macro-expa
我正在使用 aspell 在 Linux 上拼写检查 LaTeX 文档。我的文档经常包含各种编程语言的代码示例，我希望 aspell 在拼写检查时简单地跳过这些行。 我可以在文档中写些什么来关闭一段文
我有一个包含多个列的数据集... 一列是具有重复值的主石斑鱼列，另一列是具有 bool 值 (1,0) 的 NUMBER，如下所示: grp bool --- ---- A 1 A 1 A
出于测试目的，我正在尝试删除一些 amd 模块并从服务器重新加载更新版本 - 目的是不刷新浏览器。 我目前正在执行以下操作，但浏览器仍然没有从网络重新加载项目。 var scripts = docum
当我键入irb> require 'rubygems'时，它返回false。我的Rails应用程序中有很多 gem ，这些 gem 显然可以正常工作-耙子，activerecord等。这里可能出什么问
我是一名优秀的程序员,十分优秀！