反应-Babel不转译文件

Question

我正在为React 学习路由课程

经过大量尝试，我得到了一个可以运行的应用程序，可以使用：

var react = require("react");
var Render = require('react-dom');
Render((
<Router history={hashHistory}>
<Route path="/about" component={About}/>
</Router>
), document.getElementById('app'))

但是，网络上的大多数示例都使用import语句，因此例如：

import { Router, Route, hashHistory } from 'react-router'

render((
  <Router history={hashHistory}>
    <Route path="/" component={App}/>
  </Router>
 ), document.getElementById('app'))

在我的浏览器中产生以下错误： （未定义渲染）。

这是我的web.pack.config：

    var path = require('path');
    var webpack = require('webpack');
     module.exports = {
      entry: [
       './src/app.js'
      ],
      output: {
      path: path.join(__dirname, 'public/js'),
      filename: 'app.built.js'
      },
      module: {
       loaders: [
        { test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?  
       presets[]=es2015&presets[]=react'
        }
       ]
     }
   }

我必须怎么做才能开始使用import语句？

Answer 1

该错误是因为您没有导入ReactDOM。 最好的方法是

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory } from "react-router";

import App from "./App";

const app = document.getElementById('app');

ReactDOM.render(
  <Router history={hashHistory}>
    <Route path="/" component={App}></Route>
  </Router>, app);

考虑到在同一目录中有一个名为App的组件，如下所示：

App.js

import React from "react";

export default class App extends React.Component {
  render() {
    return (
      <div>My App!</div>
    );
  }
}