React组件未渲染

Question

I can't even get my root app component to render. 我什至无法渲染我的根应用程序组件。 I load localhost and it loads index.html successfully with no js errors but nothing is rendered to the page. 我加载了localhost，它成功加载了index.html，没有js错误，但是没有任何内容呈现到页面上。 I can't pinpoint the problem if there are no errors :). 如果没有错误，我无法指出问题:)。 I looked at my code and I don't know what the deal is. 我看了看我的代码，不知道这是什么交易。 I'm new to React so...could be a bunch of issues below, I don't know. 我是React的新手，所以...可能是一堆下面的问题，我不知道。

server.js 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 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 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 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 CompanyList.js

import React, { Component } from 'react';

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

Answer 1

It doesn't work because of the type="text/babel" on you're script tag. 由于您的脚本标签上的type="text/babel" ，因此无法使用。 This type was intended to use with the now deprecated babel browser to transpile ES6 and JSX in the browser. 该类型旨在与现在不建议使用的babel浏览器一起使用，以在浏览器中转换ES6和JSX。

You have to change the type to "text/javascript" to run the file. 您必须将类型更改为“ text / javascript”才能运行文件。 However, as the browser doesn't understand JSX, and some parts of ES6, this will mainly throw errors. 但是，由于浏览器不了解JSX和ES6的某些部分，因此这主要会引发错误。

What you'll have to do in addition to make it work, is to use a build system, such as webpack, to transpile ES6 and JSX using babel, and bundle you're files, to something the browser can use. 为了使其正常工作，您还需要使用构建系统（例如webpack）使用babel转换ES6和JSX，并将您的文件捆绑到浏览器可以使用的东西上。 Try this guide . 试试这个指南。

If you just want to practice react without the hassle of a build system, you can use the React Base Fiddle . 如果您只是想练习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