Material-ui React 组件不起作用答案

【问题标题】：Material-ui React components not workingMaterial-ui React 组件不起作用
【发布时间】：2016-12-26 14:18:15
【问题描述】：

我正在尝试使用http://www.material-ui.com/ 进行前端设计。我正在尝试执行入门教程中的第一个示例。我有以下 html 文件：

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

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;

但是当我运行索引文件时，我看不到任何输出。

【问题讨论】：

你检查过控制台是否有错误吗？你有没有机会用你的例子做一个基本的小提琴？或者我们可以快速“改造”你的小例子的地方？你有反应作为你的包裹的一部分吗？
对我来说，您似乎没有使用 babael/webpack 等等..
@PraveenPrasad ，我是初学者。我被困住了，因为教程没有指导这些事情？在开始之前我应该设置什么？或任何参考资料？
你做错了。您需要设置 babel + browserify 或 webpack 才能使其工作。

标签： reactjs material-ui

【解决方案1】：

问题就在这里，因为您正在实现 ES6 代码，您需要使用像 babel 这样的 javascript 编译器将您的 ES6 代码转换为 ES5，这是浏览器支持的当前 javascript 标准。

最好将 babel 与 webpack 一起用作加载器。

遵循React's get started page 的指示是一个很好的起点。我建议仔细阅读说明。

最后，如果你想使用纯 ES6 而不进行转换，这里提供了兼容性表：https://kangax.github.io/compat-table/es6/

【讨论】：