reagieren js einfaches Skript funktioniert nicht

Ich versuche zu lernen, reagieren js durch folgende this tutorial in youtube. Mein Programm ist nur ein sehr einfacher HTML-Code mit einigen react.js. Ich folge jedem einzelnen Schritt, den er gemacht hat, aber ich habe nicht das gleiche Ergebnis wie er. Können Sie mir bitte sagen, was in meinem Code falsch ist und warum funktioniert es nicht?reagieren js einfaches Skript funktioniert nicht

Code:

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Haime Computer Shop</title> 
    <link rel="stylesheet" type="text/css" href="index_css.css"> 
    <script src="src/js/react.min.js"></script> 
    <script src="src/js/react-dom.min.js"></script> 
    <script src="src/js/browser.min.js"></script> 
</head> 
<body> 

<div class="homeLinks_dcls"> 
<p><a href="index.html" id="home_id"> Home</a></p> 
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p> 
<p><a href="services.html" id="services_id"> Services</a></p> 
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p> 
</div> 

<div id="container"></div> 

<script type="text/babel"> 
var myReactObj = React.createClass({ 
    render: function(){ 
    return (<h2>This is a component!</h2>); 
    } 
}); 

ReactDOM.render(<myReactObj/>, document.getElementById('container')); 
</script> 

</body> 
</html>

Ich kann nur die "Home, über sie, Dienstleistungen, Kontakt" siehe Text. Was ich nicht sehen kann, ist das "Dies ist eine Komponente!" Text innerhalb des myReactObject. Danke im Voraus für die Hilfe ...

Quelle

2017-07-22 Haime Reyes

Sie erhalten Sie einen Fehler in der Konsole? –

Danke für die Zeit, aber ich habe es gerade gelöst. Ich versuche einfach alles und es stellt sich heraus, dass der Objektname in CAPITALIZE beginnen sollte. –

Das Problem, das Sie gegenüberstellen, ist, weil Sie versuchen, mit JSX-Syntax (Javascript mit eingebetteten HTML-Tags) direkt über Ihren Browser umzugehen, aber Sie brauchen das Babel, um Ihren Code zu übertragen .

An diesem Punkt haben Sie 2 Möglichkeiten:

Add babel zu Ihrem HTML:

JSX

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>With Babel</title> 
    <link rel="stylesheet" type="text/css" href="index_css.css"> 
    <script src="src/js/react.min.js"></script> 
    <script src="src/js/react-dom.min.js"></script> 
    <script src="src/js/browser.min.js"></script> 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.21.1/babel.min.js"></script> 
</head> 
<body> 

<div class="homeLinks_dcls"> 
<p><a href="index.html" id="home_id"> Home</a></p> 
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p> 
<p><a href="services.html" id="services_id"> Services</a></p> 
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p> 
</div> 

<div id="container"></div> 

<script type="text/babel"> 
var myReactObj = React.createClass({ 
    render: function(){ 
    return (<h2>This is a component!</h2>); 
    } 
}); 

ReactDOM.render(
    React.createElement(myReactObj), 
    document.getElementById('container') 
); 

</script> 

</body> 
</html>

Code ändern Javascript nur zu verwenden, wie das Beispiel unten:

javascript

<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>Without Babel</title> 
    <link rel="stylesheet" type="text/css" href="index_css.css"> 
    <script src="src/js/react.min.js"></script> 
    <script src="src/js/react-dom.min.js"></script> 
    <script src="src/js/browser.min.js"></script> 
</head> 
<body> 

<div class="homeLinks_dcls"> 
<p><a href="index.html" id="home_id"> Home</a></p> 
<p><a href="aboutUs.html" id="aboutUs_id"> About Us</a></p> 
<p><a href="services.html" id="services_id"> Services</a></p> 
<p><a href="contactUs.html" id="contactUs_id"> Contact us</a></p> 
</div> 

<div id="container"></div> 

<script type="text/javascript"> 
var myReactObj = React.createClass({ 
    render: function(){ 
    return React.createElement('h2', { }, 'This is a component!'); 
    } 
}); 

ReactDOM.render(
    React.createElement(myReactObj), 
    document.getElementById('container') 
); 

</script> 

</body> 
</html>

Quelle

2017-07-24 20:47:25

reagieren js einfaches Skript funktioniert nicht

Antwort

Verwandte Themen