Ad

Adding Material Ui To A React Component

- 1 answer

I am trying to add material ui to my react component. this is the code I have written. (and my complete code is located at https://github.com/abhitechdojo/MovieLensReact)

import React from 'react';
import mui from 'material-ui';

var ThemeManager = new mui.Styles.ThemeManager();
var Colors = new mui.Styles.Colors;

class App extends React.Component {
    constructor() {
        super();
        ThemeManager.setPalette({
            primary1Color: Colors.blue500,
            primary2Color: Colors.blue700,
            primary3Color: Colors.blue100,
            accent1Colors: Colors.pink400
        });
        this.state = {
            messages : [{id: 1, text: 'Hi'}, {id: 2, text: 'Hello'}, {id: 3, text: 'World'}, {id: 4, text: 'test'}]
        };
    }

    static childContextTypes = {
        muiTheme: React.PropTypes.object
    };

    getChildContext() {
        return {
            muiTheme: ThemeManager.getCurrentTheme()
        };
    }

    render() {
        var messageNodes = this.state.messages.map((message) => {
            return (<div key={message.id}>{message.text}</div>);
        });
        return (<div>{messageNodes}</div>);
    }
}

export default App;

My .babelrc file looks like

{
    presets: ["es2015", "react"],
    "plugins": ["transform-class-properties"]
}

But when I run webpack it gives an error

ERROR in ./src/controls/App.jsx
Module build failed: SyntaxError: /Users/abhishek.srivastava/MyProjects/MovieLensReact/src/controls/App.jsx: 
Missing class properties transform.
  19 |  }
  20 |
> 21 |  static childContextTypes = {
     |  ^
  22 |      muiTheme: React.PropTypes.object
  23 |  };
  24 |
    at File.buildCodeFrameError (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-core/lib/transformation/file/index.js:408:15)
    at NodePath.buildCodeFrameError (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/index.js:148:26)
    at pushBody (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:277:20)
    at buildBody (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:244:10)
    at run (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/vanilla.js:151:10)
    at PluginPass.ClassExpression (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-plugin-transform-es2015-classes/lib/index.js:63:60)
    at newFn (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/visitors.js:293:19)
    at NodePath._call (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/context.js:74:18)
    at NodePath.call (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/context.js:46:17)
    at NodePath.visit (/Users/abhishek.srivastava/MyProjects/MovieLensReact/node_modules/babel-traverse/lib/path/context.js:104:12)
 @ ./src/main.js 13:11-40
webpack: bundle is now VALID.
Ad

Answer

In your webpack.conf :

change :

loaders: ['react-hot', 'babel?presets[]=es2015&presets[]=react']

to:

loaders: ['react-hot', ‘babel-loader’]
Ad
source: stackoverflow.com
Ad