Question

我正在尝试让React.js在我的LAMP堆栈Web应用程序上工作客户端。我想在我的网站上实现以下滑块：https://github.com/airbnb/rheostat。我设法使用以下指南让react.js工作：https://gist.github.com/jineshshah36/4a0326abb191781184e9。

以下代码有效：

<div id="app"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
    var HelloComponent = React.createClass({
        render: function() {
            return (
                <h1>Hello, World!</h1>
            )
        }
    })
    ReactDOM.render(<HelloComponent />, document.querySelector('#app'))
</script>

我尝试使用变阻器滑块，将上面的内容更改为以下内容。

<div id="slider-root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://raw.githubusercontent.com/airbnb/rheostat/master/src/Slider.jsx"></script>
<link href="https://raw.githubusercontent.com/airbnb/rheostat/master/css/slider.css" rel="stylesheet" type="text/css">
<script type="text/babel">
    import Rheostat from 'rheostat';
    ReactDOM.render(<Rheostat />, document.getElementById('slider-root'));
</script>

我导入文件错了吗？在浏览器执行jsx文件之前，是否需要处理它？如果是，我该怎么做？

Answer 1

我是否需要在浏览器执行jsx文件之前对其进行处理？

是的，确切地说。 jsx本质上是一个主要用于处理React的语法扩展，你需要先编译/转换。如果你不想这样做，你可以简单地完全放弃jsx并使用：

ReactDOM.render(React.createElement(Rheostat), document.getElementById('slider-root'));

如果您对jsx感兴趣，请考虑以下事项：

<div>
    <span>Text here</span>
</div>

这不是有效的JavaScript，浏览器会不停地调整各种语法错误。首先必须将此代码编译或转换到有效的JavaScript中。使用React时，以上内容将被编译为：

React.createElement(
    "div",
    null,
    React.createElement(
        "span",
        null,
        "Text here"
    )
);

最常见的工具之一是Babel。 TypeScript还内置了对类型为jsx的支持，称为tsx。

客户端React.js

1 个答案: