title: Use javascript library inside of TypeScript React web app
body: <p>I'm trying to put a <a href="http://www.jointjs.com/" rel="nofollow">graphical editor</a> into a React component but the project is setup on <strong>TypeScript</strong>.</p>
  
  <p>There are no updated bindings for JointJS, thats why I tried the following: Render the code coming from JointJS into a React component in a .jsx file</p>
  
  <p>File: joint-editor.jsx</p>
  
  <pre><code>import React from 'react'
  import $ from 'jquery'
  import joint from 'jointjs'
  
  export default class JointEditor extends React.Component {
  
    constructor(props){
      super(props)
    }
  
    render(){
      var graph = new joint.dia.Graph;
  
        //JointJS code using jQuery
  
        graph.addCells([rect, rect2, link]);
  
        return (&lt;div id="myholder"&gt;&lt;/div&gt;)
    }
  
  }
  </code></pre>
  
  <p>And then <strong>importing</strong> this component into another component in a .tsx file</p>
  
  <p>File editor.tsx</p>
  
  <pre><code>import React = require('react')
  import Header = require("./../Header/header")
  import JointEditor = require('./joint-editor')
  
  class DemoProps {
      public name: string;
      public age: string;
  }
  
  export class Editor extends React.Component&lt;DemoProps, {}&gt; {
      private foo: number;
  
      constructor(props: DemoProps) {
          super(props);
          this.foo = 42;
      }
  
      render() {
          return (
              &lt;div&gt;
                  &lt;Header.Header/&gt;
                  &lt;JointEditor/&gt;
                  Hello {this.props.name}, you are {this.props.age} years old
                  &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p>This gets bundled by webpack and transpiled by Babel (jsx file) and TypeScript (tsx)</p>
  
  <p>Now 2 problems arise: </p>
  
  <ol>
  <li><p>ERROR in .../editor.tsx
  (3,30): error TS2307: Cannot find module './joint-editor'.</p></li>
  <li><p>I'm pretty sure there will be problems with JointJS using jQuery inside of the render() method of React? Do you know of any samples where jQuery is used successfully inside of a React component?</p></li>
  </ol>
  
  <p>Thanks</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>This is my webpack.config.js</p>
  
  <pre><code>var webpack=require('webpack');
  module.exports={
      entry: ['./src/main.tsx'],
      output: {
          path: './target',
          publicPath: "/assets/",
          filename: 'bundle.js'
      },
      debug: true,
      devtool: 'cheap-eval-source-map',
      plugins: [
          new webpack.optimize.DedupePlugin(),
          new webpack.optimize.UglifyJsPlugin({minimize: true})
      ],
      resolve: {
          extensions: ['',  '.jsx','.ts', '.js', '.tsx',]
      },
      module: {
          loaders: [
              {
                  test: /\.tsx$/,
                  loader: 'react-hot!ts-loader'
              },{
                  test:/\.jsx$/,
                  exclude: /(node_modules|bower_components)/,
                  loader:"react-hot!babel-loader"
              },
              {
                  test:/\.js$/,
                  exclude: /(node_modules|bower_components)/,
                  loader:"babel-loader"
              }
          ]
      }
  }
  </code></pre>