Question

我刚刚开始使用ReactJs进行编码，并且正在尝试使用ReactJS创建我的第一个QR代码。我无法这样做。我从GitHub中获取了一些代码示例并尝试实现，但它无法正常工作。我还使用以下命令安装了Activity包：

qrcode-react

这是我的代码

npm install qrcode-react

我在chrome dev中看到了什么。工具：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<script src="React.min.js"></script>
<script src="JSXTransformer.js"></script>


<script type="text/jsx">
/** @jsx React.DOM */
var React = require('react');
var QRCode = require('qrcode.react');

React.render(
<QRCode value="http://facebook.github.io/react/" />,
mountNode
);
</script>

<img src="qrcode.png" height="256" width="256"/>
</body>
</html>

我错过了什么？任何帮助将不胜感激。

Answer 1

您是否在快速服务器中托管引用的脚本？或者你使用像webpack这样的捆绑机制？

您需要捆绑QRCode脚本并引用它们来运行示例。看看Makefile如何将所有必要的脚本捆绑在一起 - https://github.com/zpao/qrcode.react。顺便说一下，这个URL有一个完整的工作示例，您应该对其进行分析。

Answer 2

1)opened node command editor and traversed to my folder.
2)executed the following command:
    1)npm install browserify
    2)npm install require
    a folder by the name node_modules gets created with two sub folders namely .bin and .require

3)now i execute 
    browserify main.js -o bundle.js
4)Add the following tag to my HTML file
    <script src='bundle.js'></script>



At Step 3 itself,i am getting the followng error

Error: Parsing file C:\Users\myfolder\projects\QRCode\main.js
: Unexpected token (1:0)
    at Deps.parseDeps (C:\Users\myfolder\AppData\Roaming\npm\node_mod
ules\browserify\node_modules\module-deps\index.js:439:28)
    at fromSource (C:\Users\myfolder\AppData\Roaming\npm\node_modules
\browserify\node_modules\module-deps\index.js:378:44)
    at C:\Users\myfolder\AppData\Roaming\npm\node_modules\browserify\
node_modules\module-deps\index.js:372:17
    at ConcatStream.<anonymous> (C:\Users\myfolder\AppData\Roaming\np
m\node_modules\browserify\node_modules\concat-stream\index.js:36:43)
    at emitNone (events.js:72:20)
    at ConcatStream.emit (events.js:166:7)
    at finishMaybe (C:\Users\myfolder\AppData\Roaming\npm\node_module
s\browserify\node_modules\readable-stream\lib\_stream_writable.js:509:14)
    at endWritable (C:\Users\myfolder\AppData\Roaming\npm\node_module
s\browserify\node_modules\readable-stream\lib\_stream_writable.js:519:3)
    at ConcatStream.Writable.end (C:\Users\myfolder\AppData\Roaming\n
pm\node_modules\browserify\node_modules\readable-stream\lib\_stream_writable.js:
484:5)
    at DuplexWrapper.onend (C:\Users\myfolder\AppData\Roaming\npm\nod
e_modules\browserify\node_modules\readable-stream\lib\_stream_readable.js:543:10
)


btw this is the code of my main.js library:-

    <script type='text/jsx'>
    var React = require('react');
    var QRCode = require('qrcode.react');

    React.render(
      <QRCode value="http://facebook.github.io/react/" />,
      mountNode
    );
    </script>

tx in advance

QRCode不使用React.Js

2 个答案: