クライアント側React.js

Question

私はLAMPスタックWebアプリケーション上でReact.jsをクライアント側で動作させようとしています。私は私のウェブサイトに次のスライダーを実装したいと考えています：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ファイルをブラウザで実行するには、その前に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に変換してください。このための最も一般的なツールの一つはBabelある

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

：リアクトを使用する場合は、上記のにコンパイルされます。 TypeScriptには、tsxと呼ばれる型付きjsxの組み込みサポートもあります。