2016-08-19 65 views
0

フロントエンドのデザインにhttp://www.material-ui.com/を使用しようとしています。私は始めのチュートリアルの中で最初の例を実行しようとしています。Material-ui反応しない成分が反応しない

App.js

<!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> 

と(http://www.material-ui.com/#/get-started/usage)で定義されているApp.jsとMyAwesomeReactComponent.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:

を私はhtmlファイルを以下しています
import React from 'react'; 
import RaisedButton from 'material-ui/RaisedButton'; 

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

export default MyAwesomeReactComponent; 

インデックスファイルを実行すると、出力が表示されません。

+0

はあなたがチェックしましたか?あなたの事例でベースフィドルを作ることができれば、どんなチャンスですか?あるいは、あなたの小さな事例をすぐに「リメイク」できるどこか?パッケージの一部として反応しましたか? – Icepickle

+0

あなたはババエル/ウェブパックなどを使用していないようです。 –

+0

@PraveenPrasad、私は初心者です。チュートリアルではこれらのことをガイドしていないので、私は立ち往生しますか?それを始める前に私は何を設定すべきですか?または任意の参照? –

答えて

0

問題はここにあります。あなたはES6コードを実装しているので、babelのようなjavascriptコンパイラを使用して、ES6コードをブラウザでサポートされている現在のjavascript標準であるES5に変換する必要があります。

ローダーとしてwebpackのバーベルを使用するとよいでしょう。

Follwoing React's get started pageの指示は良い出発点です。どんな言葉も飛ばさないように助言します。あなたは変換せずに、純粋なES6を使用したい場合は

最後に、適合表はこちらです:多少の誤差はコンソールから来る場合https://kangax.github.io/compat-table/es6/

関連する問題