title: React: Make components external
body: <p>I've been trying to get into React and therefore read the official guides, however, I'm not sure how to put components into their own files to reuse them across files.</p>
  
  <p>I've made a very basic React Component which holds an <code>input</code> tag and some configuration with it. I would like to make this input tag a standalone component in its own file. How do I achieve this?</p>
  
  <p>I use Webpack with this configuration:</p>
  
  <pre><code>var path = require('path');
  var webpack = require('webpack');
  
  module.exports = {
    devtool: 'eval',
    entry: [
      'webpack-dev-server/client?http://localhost:3000',
      'webpack/hot/only-dev-server',
      './src/index'
    ],
    output: {
      path: path.join(__dirname, 'dist'),
      filename: 'bundle.js',
      publicPath: '/static/'
    },
    plugins: [
      new webpack.HotModuleReplacementPlugin()
    ],
    module: {
      loaders: [{
        test: /\.js$/,
        loaders: ['react-hot', 'babel'],
        include: path.join(__dirname, 'src')
      }]
    }
  };
  </code></pre>
  
  <p>This is the React code:</p>
  
  <pre><code>import React, { Component } from 'react';
  
  export default React.createClass({
    getInitialState: function() {
      return {text: ''};
    },
    handleChange: function(e) {
      this.setState({text: e.target.value})
    },
    render() {
      return (
        &lt;div&gt;
          &lt;h1&gt;What's your name?&lt;/h1&gt;
          &lt;input 
              type="text" 
              value={this.state.text} 
              onChange={this.handleChange}
          /&gt;
          &lt;h2&gt;Hallo, {this.state.text}&lt;/h2&gt;
        &lt;/div&gt;
      );
    }
  });
  </code></pre>
  
  <p>Edit: I forgot the index.js:</p>
  
  <pre><code>import React from 'react';
  import { render } from 'react-dom';
  import App from './Components/App';
  
  render(&lt;App /&gt;, document.getElementById('root'));
  </code></pre>
  
  <p>Thanks.</p>