reactjs Code erscheint nicht im Browser

Danke für die tolle Arbeit hier. Ich bin ein Neuling in react.js mit einigen begrenzten js Fähigkeiten. Ich versuche, eine grundlegende Seite mit einer Überschrift, einer Haupt- und einer Fußzeile zu erstellen. Ich habe den Code geschrieben, die Konsole hat keinen Fehler zurückgegeben, aber nichts zeigt sich im Browser. Hier ist, der Code:reactjs Code erscheint nicht im Browser

const Header = ({title}) => (<header>{title}</header>); 
const Main = ({title}) => (<main>{title}</main>); 
const Footer = ({title}) => (<footer>{title}</footer>); 

class App extends React.Component { 
    render() { 
     const {header,main,footer} = this.props; 
     return (
      <div className="app"> 
       <Header title={header} /> 
       <Main title={main} /> 
       <Footer title={footer}/> 
      </div> 
     ); 
    } 
}; 

ReactDOM.render(
    <App 
     header="I am the header" 
     main="I am the main" 
     footer="I am the footer" />, 
    document.getElementById('react') 
); 




export default App;

html

<body> 


    <div id="react"></div> 


    </body>

Konsole zurückgegeben:

Compiled successfully! 

You can now view wp in the browser. 

    http://localhost:38867/ 

Note that the development build is not optimized. 
To create a production build, use npm run build.

Und ich habe dies:

Was habe ich falsch gemacht? Codebeispiel hier https://codepen.io/anon/pen/mmaxvj

EDIT: Ich habe vergessen, index.js hinzuzufügen. Ich bearbeitete es und änderte ReactDOM.render (<App />, document.getElementById('root')); zu ReactDOM.render(<App />, document.getElementById('react'));

Jetzt habe ich eine leere Seite, die sich zeigt und keinen Fehler mehr im Browser ... Irgendwelche Gedanken?

Quelle

2017-05-23 Anonymous

Sieht aus wie Sie versuchen, ein Element namens root zuzugreifen, die bisher noch nicht geschaffen hat. – Icewine

Fügen Sie alle richtigen Bibliotheken ein, wie 'react.js' in Ihrem Code? Ich habe es vielleicht gerade verpasst oder Sie haben diesen Teil vielleicht nicht gepostet, aber es ist etwas, was getan werden muss, um React zu verwenden. –

@Icewine Ich sehe nicht Wurzel ... wo siehst du es? –

Versuchen Sie diesen Code vor dem schließ </body> Tag hinzufügen:

<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>

Überprüfen Sie, ob Sie auch jquery.js oder andere Javascript-Pakete benötigen.

ich auf die Seiten Reagieren doc sehen, geben sie einen Link zu dem CodePen „Hallo Welt“ React Seite - Sie auch, dass als Samen Vorlage verwenden können: http://codepen.io/gaearon/pen/ZpvBNJ?editors=0010

Diese von der Seite kam https://facebook.github.io/react/docs/hello-world.html

Quelle

2017-05-23 02:36:53

Der von Ihnen angegebene Code funktioniert. Der Screenshot, den Sie in Ihre Frage eingefügt haben, zeigt jedoch eine document.getElementById('root') Zeile, die nicht Teil Ihres Codes ist. Sie müssen Ihren Code möglicherweise neu erstellen oder sicherstellen, dass der Dev-Server (z. B. Webpack) im richtigen Quellverzeichnis ausgeführt wird.

Überprüfen Sie auch diese Antwort in Bezug auf die Platzierung des reagieren <script> tag: https://stackoverflow.com/a/26416407/1647737

const Header = ({title}) => (<header>{title}</header>); 
 
const Main = ({title}) => (<main>{title}</main>); 
 
const Footer = ({title}) => (<footer>{title}</footer>); 
 

 
class App extends React.Component { 
 
    render() { 
 
     const {header,main,footer} = this.props; 
 
     return (
 
      <div className="app"> 
 
       <Header title={header} /> 
 
       <Main title={main} /> 
 
       <Footer title={footer}/> 
 
      </div> 
 
     ); 
 
    } 
 
}; 
 

 
ReactDOM.render(
 
    <App 
 
     header="I am the header" 
 
     main="I am the main" 
 
     footer="I am the footer" />, 
 
    document.getElementById('react') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="react"></div>

Quelle

2017-05-23 02:39:24

ja das war von index.js Ich habe den Code dort oben –

reactjs Code erscheint nicht im Browser

Antwort

Verwandte Themen