リアクションコンポーネントがレンダリングされない

私のルートアプリケーションコンポーネントをレンダリングすることさえできません。私はlocalhostをロードし、jsエラーなしでindex.htmlを正常にロードしますが、何もページに表示されません。私はエラーがない場合、問題を特定できません:)。私は自分のコードを見て、私はその取引が何であるか分からない。私は反応するのが初めてです...下記のような問題がたくさんあるかもしれませんが、わかりません。リアクションコンポーネントがレンダリングされない

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

出典

2016-04-04 PositiveGuy

それが原因であなたのしているスクリプトタグのtype="text/babel"では動作しません。このタイプは、現在非推奨のbabel browserと一緒に使用して、ブラウザでES6とJSXをトランスペアレントにすることを目的としています。

ファイルを実行するには、タイプを "text/javascript"に変更する必要があります。しかし、ブラウザがJSXやES6の一部を理解しないため、これは主にエラーを投げます。

webpackなどのビルドシステムを使用してES6とJSXをbabelでトランスポートし、ファイルをバンドルしてブラウザが使用できるものにすること。試してみてくださいguide。

ビルドシステムの手間をかけずに反応を実践したい場合は、React Base Fiddleを使用できます。

出典

2016-04-04 20:30:46

私はコードをバンドルする必要がありますか？ – PositiveGuy

しかし、私はまだ何らかの形でビルドせずにこれを行うことができるでしょう – PositiveGuy

私は最初にbrowserifyを使用して、後でwebpackに移動するつもりです。しかし、私はその投稿を読むでしょう – PositiveGuy

リアクションコンポーネントがレンダリングされない

答えて

関連する問題