Hi I'm having trouble importing components from one jsx into another. I'm using a django framework to serve my webfiles and I've downloaded all the necessary tools (npm, webpack, webpack-bundle-tracker, babel loader, django-webpack loader). Webpack does a good job taking all of the seperate javascript files and turning them into a bundle in which my local django server can then render. The issue lies in when I try to import a component from one jsx into another jsx . There aren't any errors that I see but the javascript that I'm trying to import doesn't load on django.

Example: File:index.js

var React = require('react') var ReactDOM = require('react-dom') var Body = require('./app.js') ReactDOM.render(<Body message="Welcome to my website"/>, document.getElementById('app1'))

Import file (which is in the same directory as index.js): File:app.js

var React = require('react') var Body = React.createClass({ getInitialState: function() { return { bodymessage: this.props.message } }, render: function() { return ( <h1> {this.state.bodymessage} </h1> ) } }) module.exports = Body;

Is there something wrong with my configuration?

Here's my webpack.config.js file :