Reagieren auf Komponenten, die nicht rendern

Ich kann nicht einmal meine root App-Komponente rendern. Ich lade localhost und es lädt index.html erfolgreich ohne js Fehler, aber nichts wird auf der Seite gerendert. Ich kann das Problem nicht lokalisieren, wenn es keine Fehler gibt :). Ich schaute auf meinen Code und ich weiß nicht, was das Geschäft ist. Ich bin neu in React so ... könnte eine Reihe von Problemen unten sein, ich weiß es nicht.Reagieren auf Komponenten, die nicht rendern

server.js

var express = require('express'), 
    app = express(); 

app.set("view options", {layout: false}); 
app.use(express.static('.')); 
app.set('views', __dirname + '/'); 
app.engine('html', require('ejs').renderFile); 
app.set('view engine', 'html'); 

app.get('/', function (req, res) { 
    res.render('index.html'); 
}); 

app.listen(4000, function() { 
    console.log('Example app listening on port 4000!'); 
});

index.html

<!DOCTYPE html> 
<html lang="en"> 
    <head></head> 
    <body> 
     <div class="ink-grid vertical-space"> 
      <div id="content"> 
       <div class="panel vertical-space"> 
        <div id="app"/> 
       </div> 
      </div> 
     </div> 
     <script type="text/babel" src="index.js"></script> 
    </body> 
</html>

index.js

import React from 'react'; 
import { render } from 'react-dom'; 

import App from 'src/components/App'; 

const app = document.getElementById('app'); 
render(<App/>, app);

App.js

import React, { Component } from 'react'; 
import CompanyList from 'src/components/CompanyList'; 

class App extends Component { 
    render() { 
     return (
      <div id="companyList"> 
       <CompanyList /> 
      </div> 
     ); 
    } 
} 

export default App

CompanyList.js

import React, { Component } from 'react'; 

class CompanyList extends Component{ 
    render(){ 
     return (
      <h3>No Companies Found</h3> 
     ); 
    } 
} 
export default CompanyList

Quelle

2016-04-04 PositiveGuy

Es funktioniert nicht, weil der type="text/babel" auf Sie sind Skript-Tag. Dieser Typ sollte mit dem jetzt veralteten babel browser verwendet werden, um ES6 und JSX im Browser zu transponieren.

Sie müssen den Typ in "text/javascript" ändern, um die Datei auszuführen. Da der Browser jedoch JSX und einige Teile von ES6 nicht versteht, werden hauptsächlich Fehler ausgelöst.

Was Sie zusätzlich tun müssen, um es zum Laufen zu bringen, ist ein Build-System wie webpack, um ES6 und JSX mit babel zu transpilieren und Ihre Dateien zu bündeln, die der Browser verwenden kann . Versuchen Sie diese guide.

Wenn Sie nur üben wollen, ohne den Aufwand eines Build-Systems zu reagieren, können Sie die React Base Fiddle verwenden.

Quelle

2016-04-04 20:30:46

ok, also muss ich anfangen, meinen Code zu bündeln? – PositiveGuy

aber ich sollte dies ohne einen Build irgendwie noch tun können – PositiveGuy

Ich werde zuerst browserify verwenden, dann zu webpack später verschieben .. aber ich werde diesen Beitrag lesen – PositiveGuy

Reagieren auf Komponenten, die nicht rendern

Antwort

Verwandte Themen