陣營 - 巴貝爾不transpiling文件

Question

我打算在路由lessons的陣營

經過大量嘗試，我得到了一個工作應用程序，我可以使用：

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')) 

主要生產以下我broswer錯誤： （仁德r沒有定義）。

這是我web.pack.config：

​​

什麼我必須做的，所以我可以開始使用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.js

import React from "react"; 

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