You may need an appropriate loader to handle this file type

[maxrosecollins]

Quite new to react... can anyone tell me why am i getting this error? I guess I don't have the correct loader... but if I don't include material UI my react app works..

Any clues would be a great help

Line 30: Unexpected token (
You may need an appropriate loader to handle this file type.
   },

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

[raptoria]

are using es5 or es6?

[maxrosecollins]

I'm not 100% sure tbh, how do I check. Sorry about the beginner question lol. I'm more of a ruby person :)

[maxrosecollins]

I'm going to say es5

[raptoria]

what boilerplate are u using? the reason I ask is because if you're using es6 and you put a comma, it'll throw an error bc you don't need commas inside classes...the material ui samples are in es5.

here's a sample of my es6 class that i got working:

    import React from 'react';
    import styles from './Header.css';
    import mui from 'material-ui';

    let IconButton = mui.IconButton;
    let FlatButton = mui.FlatButton;

    let ThemeManager = new mui.Styles.ThemeManager();
    let AppBar = mui.AppBar;

    let injectTapEventPlugin = require('react-tap-event-plugin');
    injectTapEventPlugin();

    class Header extends React.Component{

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

      render() {
        return (
          <AppBar
            title="Title"
            iconClassNameRight="muidocs-icon-navigation-expand-more" />
        );
      }

    }

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

    export default Header;

[maxrosecollins]

I haven't used a boiler plate, do you have any that you would recommend?

After looking at your code i'm definitely using es5 not es6.

[maxrosecollins]

My main.jsx

require('./assets/app.css');
require('./assets/menu.css');
require('./assets/keywords.css');

var React = require('react');
var Router = require('react-router');
var routes = require('./config/routes.jsx');
var injectTapEventPlugin = require('react-tap-event-plugin');

//Needed for React Developer Tools
window.React = React;

injectTapEventPlugin();

Router.run(routes, Router.HistoryLocation, function(Handler) {
  React.render(<Handler/>, document.body);
});

[raptoria]

You may as well hop on the es6 bandwagon if you're just getting started with React. I'd recommend the following two boilerplates:

https://github.com/kriasoft/react-starter-kit https://github.com/webpack/react-starter

the first is good if you're just starting out, the second I like because it gives me the option of having a hot dev server which is great if you have a diverse stack and just want to use the mini express server to serve up your assets and don't need the full blown Express/NodeJS server. I'm running React and Python Flask.

[maxrosecollins]

Thanks for your help, I will have a look at those!

[liesislukas]

I'm building react+material ui examples, so if you need examples: https://github.com/liesislukas/ReactJs-boilerplate-and-examples/tree/master/examples

[maxrosecollins]

@raptoria I'm attempting to build a rails api with a react front end. The rails bit I'm fine with but the react part not so much. Would you recommend starting of with the first example?

[raptoria]

@maxrosecollins you should probably go with the first one.. the isomorphic stuff in the 2nd one is kinda complex, and you won't be needing it since you're doing rails on the backend. @liesislukas thanks for the examples! keep them coming!

[maxrosecollins]

@raptoria Yeah that looks a bit too complicated for me right now. I will come back to that one

[maxrosecollins]

Thanks @liesislukas

[maxrosecollins]

@raptoria what makes it isomorphic?

[raptoria]

@maxrosecollins if you're using Javascript on the client and the server, then you can effectively set up your code to run on both, but that would require Nodejs/Express. Read more here:
http://nerds.airbnb.com/isomorphic-javascript-future-web-apps/

I'm about to upload the boilerplate I'm working on which is Reactjs w/ React material UI, feel free to check it out. I've taken code from the top 3 boiler plates and smashed them into one.

[newoga]

@maxrosecollins Are you all setup now? It seems like @raptoria and @liesislukas pointed you in right direction.

I'm doing some issue cleanup and since this looks like a general React/project configuration setup issue, I am going to close this for now. Thanks!

[mbrookes]

@newoga - while you're doing issue cleanup, it would be good to see as many issues and PRs as possible changed to using the [ComponentName] / [Docs] / [Core] etc prefix. It makes searching existing issues and PRs that little bit easier.

[liesislukas]

I would recommend to put rails away and make smaller app stack, use js for both server and client, api and ui and it will be easier in the end. @maxrosecollins at least it's the way i do stuff now days. It's really easier.

[newoga]

@mbrookes Will do, thanks!