Example of using 3rd party React component to RequireJS, TypeScript project
<p>How to import 3rd party React components to Typescript TSX files?</p>

<p>I have a pretty big JavaScript front-end project which uses:</p>

<ul>
<li>Typescript</li>
<li>React (0.14.6)</li>
<li>React-dom (0.14.6)</li>
<li>RequireJS</li>
</ul>

<p>I want to add two 3rd party React components:</p>

<ul>
<li>React-DatePicker (<a href="https://github.com/Hacker0x01/react-datepicker" rel="nofollow noreferrer">https://github.com/Hacker0x01/react-datepicker</a>)</li>
<li>React-Select (<a href="https://github.com/JedWatson/react-select" rel="nofollow noreferrer">https://github.com/JedWatson/react-select</a>)</li>
</ul>

<p>To make things little clear, I have created a basic lightweight project that duplicates basic tools on the GitHub (<a href="https://github.com/mgrackerl/react-requirejs-example" rel="nofollow noreferrer">https://github.com/mgrackerl/react-requirejs-example</a>) where you can try your code.</p>

<p>About the sample project files:</p>

<ul>
<li>rconfig.js - RequireJS module configuration file.</li>
<li>typings - this directory holds d.ts files.</li>
<li>scripts/main.tsx - main JSX file where I should add 3rd party components</li>
</ul>

<p>To use the DatePicker, what I want as final result is something like this:</p>

<pre><code>import React = require('react');
import ReactDOM = require('react-dom');
import DatePicker = require('react-datepicker');

let handleChange = function(date: Date) {
   this.setState({
     startDate: date
   });
};

var myDivElement = &lt;div&gt;
    &lt;DatePicker
        selected={new Date()}
        onChange={handleChange} /&gt;
&lt;/div&gt;;
ReactDOM.render(myDivElement, document.getElementById('example'));
</code></pre>