问题标签 [jsx]

我像这样构建我的静态网站（about.html）：

这对于所有前端工作来说都很好而且很花哨，我运行构建过程并将其转换为适当的 html - 而不是我给它一个后端软件并称之为一天。

但我想尝试一些不同的东西，比如静态站点生成器：jekyll，中间人。

我设法让 jekyll 使用以下方法读取 jsx：

但这不适用于在构建过程中从 jsx 生成 html 文件。

有什么我从图片中遗漏的吗？你试过这个吗？

基本上我想用反应作为一个愚蠢的模板引擎。

我正在尝试使用 webpack 构建项目，但出现错误。我能够用 gulp 更早地构建这个项目，所以所有的路径和一切都应该没问题。我从该文档https://github.com/babel/babel-loader安装了所有 babel 加载器，并从示例中复制了代码。

我的 webpack.config 文件：

我真的很想使用 reacts jsx 模板/组件创建静态站点生成器。杰基尔和中间人必须被黑才能允许这样做......

但我发现http://www.metalsmith.io带有插件：https ://github.com/yeojz/metalsmith-react-templates

到目前为止，我一直在关注：

和 jsx 文件：

当我运行 node build.js 时，它会出错：

metalsmith-react-templates 示例似乎已过时，因此存在问题吗？

尝试过的建议@：

我有一个使用 Webpack、Babel 和 React 的 Hello World 示例。当我在 Chrome DevTools 中设置断点时，Chrome 说所有导入的符号在当前范围内都是未定义的。

如果我让代码运行，它会按预期工作。React 成功渲染了“Hello, World!” 问题是 Chrome 看到了错误的范围。

编辑：这是因为 Webpack 重命名了我的变量。我怎样才能保留我的变量名，以便我可以更舒适地调试？

我的 webpack 配置如下。

React-toolbox 正在以他自己的方式构建它的样式。所有样式看起来像这样： [链接]

移动设备（或者至少我正在为其构建应用程序的手机）显然不支持这种包含方式。当我在移动设备上检查项目时，我得到的所有东西都没有样式。

在官方 react-toolbox 网站上，它们将所有样式都包含在一个单独的 .css 文件中，一切看起来都不错。我怎样才能以同样的方式构建项目？

我的 webpack.config 的加载器 css 部分如下所示：

该问题类似于如何从 Typescript 1.6 中的单独文件中正确导入 React JSX。

当所有代码都在一个文件中时，它可以正常工作。但是当我将组件放到另一个文件中并尝试导入时，打字稿编译器会出错。

代码看起来不错。

我得到的错误是

JSX 元素类型“Hello”没有任何构造或调用签名。

应用程序.tsx

组件/Hello.tsx

tsconfig.json

我已经使用 React 有一段时间了，我的版本已经过时了。我更新到 0.12 没有发生任何事故。然后我也尝试升级反应工具。那是一切都破裂的时候。现在我收到以下错误：“错误：React.createElement 不是函数”。除了一个模糊的想法，这可能与 JSX 转换器的更改有关，我不知道为什么升级反应工具会导致这个错误。任何帮助，将不胜感激

我无法使用 webpack 和 babel 进行非常基本的设置。我需要 babel 来编译 JSX，我不使用 ES2015 功能。

关于这个确切的问题，这里有很多关于 SO 的问题，但它们似乎都可以通过安装babel-preset-react或添加预设选项到 babel来解决webpack.config.js，我已经完成了所有这些（我认为）。

我确定这是我想念的一件简单的事情，但我就是看不到它。

我只将演示我的问题所需的文件提取到这个要点中（我在文件名中使用破折号来指示子文件夹，因为你不能在要点中包含文件夹）。我的webpack.config.js样子是这样的：

注意：在package.json“依赖项”下列出了所有内容，因为我将其托管在不安装 devdependencies 的 heroku 上（至少默认情况下没有）

我有一个 javascript 数组，它使用array.map. 我将此数组切换为 es6 Map，以便能够使用键值对更轻松地查找项目，并在 Map 上从 a 切换.map到 a 。forEach在里面forEach我调用了一个返回 React 组件的渲染方法，但它没有被渲染。如何在forEach?

这是 renderGalleryItem 方法：

我知道 forEach 不会返回任何内容，但这是否意味着我无法在其中渲染？

我正在构建一个多语言站点，并且很难找到一种将特殊字符呈现为输入中的占位符文本的方法。我尝试在反应文档中指定的任何方式，直接编写 Unicode 字符，将 HTML 实体转换为 String.fromCharCode(xx)，它似乎都无法正确呈现。某些符号可以正常工作，例如注册商标，但带有 É 等重音符号的字符将仅显示为 E。示例如下：

有没有人遇到过这个问题，或者知道我们如何解决这个问题？

干杯!