Material-ui React 구성 요소가 작동하지 않습니다.

프런트 엔드 설계에 http://www.material-ui.com/을 사용하려고합니다. 시작 튜토리얼에서 첫 번째 예제를 실행하려고합니다. (http://www.material-ui.com/#/get-started/usage)Material-ui React 구성 요소가 작동하지 않습니다.

App.js에 정의 된 App.js 및 MyAwesomeReactComponent.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>

및 다음 :

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;

그러나 색인 파일을 실행할 때 출력이 표시되지 않습니다.

출처

2016-08-19 Sijan Bhandari

당신이 확인 했습니까? 당신의 모범과 함께 기본 바이올린을 만들 수 있다면 어떨까요? 아니면 우리가 신속하게 당신의 작은 모범을 "다시 만들 수있는"어딘가? 패키지의 일부로 반응합니까? – Icepickle

바바 엘/webpack 등을 사용하지 않는 것 같습니다. –

@PraveenPrasad, 저는 초보자입니다. 그리고 자습서가 그 일들을 안내하지 않았기 때문에 나는 고생 할까? 시작하기 전에 무엇을 설정해야합니까? 또는 어떤 참조? –

여기에서 문제는 ES6 코드를 구현할 때 babel과 같은 javascript 컴파일러를 사용하여 ES6 코드를 브라우저에서 지원하는 현재 자바 스크립트 표준 인 ES5로 변환해야합니다.

로더로 webpack 인 바벨을 사용하는 것이 좋습니다.

Follwoing React's get started page의 지시는 좋은 출발점입니다. 나는 어떤 말도 건너 뛰지 말라고 충고한다. 당신은 변환없이 순수 ES6을 사용하려는 경우

마지막으로, 호환성 표는 여기에 있습니다 : 몇 가지 오류가 콘솔에서 오는 경우 https://kangax.github.io/compat-table/es6/

출처

2017-01-20 17:56:03

Material-ui React 구성 요소가 작동하지 않습니다.

답변

관련 문제