javascript - react "Unexpected token"或根本不显示任何内容

Question

我什至不能运行一个简单的代码!我已经通过互联网搜索并尝试了几乎所有方法! 我安装了“npm”并在脚本标签的“index.html”中包含了“type="text/babel"”。 它只是不起作用!

这是不起作用的代码:

import React, {Component} from 'react';
import ReactDOM from 'react-dom';


 class App extends Component {
  render() {
    return (
          <h1>
            Hello React
          </h1>
    )
  }
}

export default App;

这是有效的代码并产生了结果:

ReactDOM.render(<h1>wtf</h1>,document.getElementById("App"))

Answer 1

如果你想分离文件，你应该导入你的组件并在之后渲染它:

//App.js
import React, { Component } from 'react';

export default class App extends Component {
 render() {
    return <h1>Hello React</h1>
  }
}

和

// index.js
import ReactDOM from 'react-dom';
import App from './App'; //means that App.js in the same folder as index.js

ReactDOM.render(<App />,document.getElementById("App"))

或者只是简单地合并您的文件:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';

class App extends Component {
  render() {
    return <h1>Hello React</h1>
  }
}

ReactDOM.render(<App />,document.getElementById("App"));