Reactjs QRCode不能与React.Js一起使用_Reactjs_Qr Code

Reactjs QRCode不能与React.Js一起使用

reactjs

Reactjs QRCode不能与React.Js一起使用,reactjs,qr-code,Reactjs,Qr Code,我刚刚开始用ReactJs编码，我正试图用ReactJs创建我的第一个二维码。我不能这样做。我从GitHub中获取了一些代码示例，并尝试实现，但它不起作用。我还使用以下命令安装了qrcode-react软件包： npm install qrcode-react 这是我的密码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Ti

我刚刚开始用ReactJs编码，我正试图用ReactJs创建我的第一个二维码。我不能这样做。我从GitHub中获取了一些代码示例，并尝试实现，但它不起作用。我还使用以下命令安装了

qrcode-react

软件包：

npm install qrcode-react

这是我的密码

<!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>

我错过了什么？

任何帮助都将不胜感激。

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

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

1）打开节点命令编辑器并遍历到我的文件夹。
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

2） 执行以下命令：
1） npm安装浏览器化
2） npm安装要求
名为node_modules的文件夹由两个子文件夹创建，即.bin和.require
3） 现在我执行
browserify main.js-o bundle.js
4） 将以下标记添加到我的HTML文件中
在步骤3本身，我得到以下错误
错误：分析文件C:\Users\myfolder\projects\QRCode\main.js
：意外标记（1:0）
在Deps.parseDeps（C:\Users\myfolder\AppData\Roaming\npm\node\u mod
ules\browserify\node\u modules\module deps\index.js:439:28）
在fromSource（C:\Users\myfolder\AppData\Roaming\npm\node\U模块）
\browserify\node\u modules\module deps\index.js:378:44）
位于C:\Users\myfolder\AppData\Roaming\npm\node\u modules\browserify\
node\u modules\module deps\index.js:372:17
在ConcatStream。（C:\Users\myfolder\AppData\Roaming\np
m\node\u modules\browserify\node\u modules\concat stream\index.js:36:43）
在emitNone（events.js:72:20）
在ConcatStream.emit（events.js:166:7）
在finishMaybe（C:\Users\myfolder\AppData\Roaming\npm\node\U模块
s\browserify\node\u modules\readable stream\lib\\u stream\u writeable.js:509:14）
在endWritable（C:\Users\myfolder\AppData\Roaming\npm\node\U模块
s\browserify\node\u modules\readable stream\lib\\u stream\u writeable.js:519:3）
在ConcatStream.Writable.end（C:\Users\myfolder\AppData\Roaming\n
pm\node\u modules\browserify\node\u modules\readable stream\lib\\u stream\u writeable.js：
484:5)
位于DuplexWrapper.oned（C:\Users\myfolder\AppData\Roaming\npm\nod
e_modules\browserify\node_modules\readable stream\lib\_stream\u readable.js:543:10
)
顺便说一句，这是我的main.js库的代码：-
var React=要求（'React'）；
var QRCode=require（'QRCode.react'）；
反应(
,
mountNode
);
提前发送

如果您想使用

require

@Jatinder，您需要传输您的代码，您应该仔细阅读。签出或。您好，它仍然不工作。到目前为止，我已完成以下操作：-1）打开节点命令编辑器并遍历到我的文件夹。2）执行以下命令：1）npm install browserify 2）npm install require一个名为node的文件夹\u modules被创建为两个子文件夹，即.bin和.require 3）我执行browserify main.js-o bundle.js 4）将以下标记添加到我的HTML文件中顺便说一句，这是我的main.js库的代码：-var React=require（'React'）；var QRCode=require（'QRCode.react'）；React.render（，mountNode）；error@step3The最简单的方法是克隆二维码示例并对其进行分析。

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