使用 broserify 为 reactJS 编译 jsx 时出错答案

【问题标题】：Error compiling jsx with broserify for reactJS使用 broserify 为 reactJS 编译 jsx 时出错
【发布时间】：2017-01-04 13:00:19
【问题描述】：

我是 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();

但是当我尝试运行下一个 wroserify 命令来创建 de "js" 文件时：

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

控制台在“hola”行（或“如果我更改它=。从 BtnLink.jsx 文件中显示错误。如果我仅更改文本行，例如没有 html 选择器的“hola”命令运行正常，但是这不是这个想法，因为 React 的组件可能会毫无问题地返回 html。对吗？有人知道错误是什么吗？

2017 年 1 月 6 日更新我也尝试使用 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 | });

【问题讨论】：

标签： javascript babeljs react-jsx jsx

【解决方案1】：

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

{/* Comment */}

【讨论】：

嗨，评论 //text 我只是在这篇文章中添加以显示真正的“组件”，但我尝试不使用它。

【解决方案2】：

babel --presets es2017

将转换ES2017 特征，仅此而已。如果你想使用 JSX，你会想要使用 babel-preset-react，你可能会想要使用 babel-preset-env 或 babel-preset-latest 和 react。

【讨论】：