Client-Seite React.js

Question

Ich versuche, React.js Client-Seite auf meiner LAMP-Stack-Webanwendung zu arbeiten. Ich möchte den folgenden Schieberegler auf meiner Website implementieren: . Ich habe es geschafft, react.js mit dem folgenden Leitfaden zu arbeiten: https://gist.github.com/jineshshah36/4a0326abb191781184e9.

Der folgende Code funktioniert:

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

ich durch Änderung der oben auf die folgende den Rheostat Schieber zu verwenden versucht.

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

Ich importiere die Dateien falsch? Muss ich die jsx-Datei bearbeiten, bevor sie vom Browser ausgeführt werden kann? Wenn ja, wie mache ich das?

Answer 1

Muss ich die jsx-Datei verarbeiten, bevor sie vom Browser ausgeführt werden kann?

Ja genau. jsx ist im Wesentlichen eine Syntaxerweiterung, hauptsächlich für die Arbeit mit React, und Sie müssen zuerst kompilieren/übersetzen. Wenn Sie möchten, das nicht tun, können Sie einfach jsx ganz auslassen und benutzen Sie einfach:

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

Wenn Sie in jsx interessiert sind, sollten Sie Folgendes berücksichtigen:

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

Dies gilt nicht, JavaScript wird der Browser alle Arten von Syntaxfehlern unruhig machen. Dieser Code muss zuerst kompiliert werden oder in gültiges JavaScript transpiliert werden. Wenn Reagieren Sie verwenden, ist die oben in erstellt werden:

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

Eines der am häufigsten verwendeten Werkzeuge für diese Babel ist. TypeScript hat auch eingebaute Unterstützung für getippte jsx, synchronisiert tsx.