React組件未渲染

Question

我什至無法渲染我的根應用程序組件。 我加載了localhost，它成功加載了index.html，沒有js錯誤，但是沒有任何內容呈現到頁面上。 如果沒有錯誤，我無法指出問題:)。 我看了看我的代碼，不知道這是什么交易。 我是React的新手，所以...可能是一堆下面的問題，我不知道。

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

Answer 1

由於您的腳本標簽上的type="text/babel" ，因此無法使用。 該類型旨在與現在不建議使用的babel瀏覽器一起使用，以在瀏覽器中轉換ES6和JSX。

您必須將類型更改為“ text / javascript”才能運行文件。 但是，由於瀏覽器不了解JSX和ES6的某些部分，因此這主要會引發錯誤。

為了使其正常工作，您還需要使用構建系統（例如webpack）使用babel轉換ES6和JSX，並將您的文件捆綁到瀏覽器可以使用的東西上。 試試這個指南。

如果您只是想練習React而沒有構建系統的麻煩，則可以使用React Base Fiddle 。

React組件未渲染

問題描述

1 個解決方案

解決方案1
0 已采納 2016-04-04 20:30:46

React組件未渲染

問題描述

1 個解決方案

解決方案1 0 已采納 2016-04-04 20:30:46

解決方案1
0 已采納 2016-04-04 20:30:46