Material-ui React組件不能正常工作

我正在嘗試使用http://www.material-ui.com/進行前端設計。我正在嘗試執行入門教程中的第一個示例。我有以下的HTML文件：Material-ui React組件不能正常工作

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>examples</title> 

</head> 
<body> 
    <div id="app"></div> 

<script type="text/javascript" src="App.js"></script> 
<script type="text/javascript" src="MyAwesomeReactComponent.js"></script> 

</body> 
</html>

及以下App.js和MyAwesomeReactComponent.js文件中（http://www.material-ui.com/#/get-started/usage）

App.js定義：

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import MuiThemeProvider from 'material-ui/styles/MuiThemeProvider'; 
import MyAwesomeReactComponent from './MyAwesomeReactComponent'; 

const App =() => (
    <MuiThemeProvider> 
    <MyAwesomeReactComponent /> 
    </MuiThemeProvider> 
); 

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

MyAwesomeReactComponent.js：

import React from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 

const MyAwesomeReactComponent =() => (
    <RaisedButton label="Default" /> 
); 

export default MyAwesomeReactComponent;

但是當我運行索引文件時，我看不到任何輸出。

來源

2016-08-19 Sijan Bhandari

你檢查，如果一些錯誤來自控制檯？你有沒有可能用你的例子做一個基地的小提琴？或者我們可以快速「重製」你的小例子的地方？你有沒有反應作爲你的包的一部分？ – Icepickle

對我來說，它看起來像你不使用babael/webpack等.. –

@PraveenPrasad，我是一個初學者。由於教程沒有引導這些東西，所以我陷入困境？在開始之前我應該設置什麼？或任何參考？ –

問題在這裏，因爲你正在實現ES6代碼，所以你需要使用JavaScript編譯器如babel來將你的ES6代碼轉換成ES5，這是目前瀏覽器支持的JavaScript標準。

將webpack作爲加載程序使用babel將是一種好習慣。

Follwoing React's get started page的指令是一個很好的起點。我建議不要跳過任何詞語。

最後，如果你想使用純ES6無需轉換，兼容性列表，請訪問：https://kangax.github.io/compat-table/es6/

來源

2017-01-20 17:56:03

Material-ui React組件不能正常工作

回答

相關問題