Материал-ui Компоненты реактора не работают

Я пытаюсь использовать http://www.material-ui.com/ для дизайна переднего конца. Я пытаюсь выполнить первый пример в начале учебника. У меня следующий HTML-файл:Материал-ui Компоненты реактора не работают

<!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, который поддерживается браузерами.

Было бы хорошей практикой использовать babel с webpack в качестве загрузчика.

Инструкция Follwoing React's get started page является хорошей отправной точкой. Я советую не пропустить ни слова.

Наконец, если вы хотите использовать чистый ES6 без преобразования, таблица совместимости доступна здесь: https://kangax.github.io/compat-table/es6/

источник

2017-01-20 17:56:03

Материал-ui Компоненты реактора не работают

ответ

Смежные вопросы