Question

我对ReactJS的世界更新。我试图做一个测试应用程序，然后我获得了下一个：我有下一个组件：

BtnLink.js

var BtnLink = new React.createClass({

    getInitialState:function(){
        return {
            class : 'btn btn-primary',
            label :  'Continuar'
        }
    },
    changeButton : function(){

    },
    render : function(){
        return(
            <div>hola</div>
        );
    }
});

此代码位于BtnLink.jsx文件中，并包含在我的index.js文件中，与broserify文档一样。

index.js

var Boton   = require('./components/BtnLink.jsx');

var app = {
    // Application Constructor
    initialize: function() {
        console.log("here with me");
        ReactDOM.render(<BtnLink>, document.getElementbyId('app'))
    },

    onDeviceReady: function() {
        this.receivedEvent('deviceready');
    },

};

app.initialize（）;

但是我尝试为create de＆＃34; js＆＃34;运行下一个wroserify命令。文件：

browserify js/src/index.js -o js/dist/index.js

控制台显示错误＆＃34; hola＆＃34; line（或＆＃34;如果我从BtnLink.jsx文件中更改它=。。如果我只改变文本的行，例如＆＃34; hola＆＃34;没有html选择器，命令运行正常，但这不是这个想法是因为React的组件可能会没有麻烦地返回html。对吗？有谁能知道错误是什么？

更新6.1.2017 我也尝试使用babel，使用下一个命令

$ babel --presets es2017 js/src/components --watch --out-dir js/dist/components

，响应与browserify相同

js\src\components\BtnLink.jsx -> js\dist\components\BtnLink.js
SyntaxError: js/src/components/BtnLink.jsx: Unexpected token (6:3)
  4 |   render : function(){
  5 |           return(
> 6 |                   <div>hola</div>
    |                   ^
  7 |           )
  8 |   }
  9 | });

Answer 1

尝试删除评论。在jsx文件里面，评论应该是这样的：

{/* Comment */}

Answer 2

node_modules

将转换babel --presets es2017个功能，而不会转换任何其他功能。如果您希望使用JSX，则需要使用ES2017，并且您可能希望babel-preset-react或babel-preset-env旁边使用babel-preset-latest }}

使用broserify为reactJS编译jsx时出错

2 个答案: