Example of using 3rd party React component to RequireJS, TypeScript project

0
votes

How to import 3rd party React components to Typescript TSX files?

I have a pretty big JavaScript front-end project which uses:

  • Typescript
  • React (0.14.6)
  • React-dom (0.14.6)
  • RequireJS

I want to add two 3rd party React components:

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

About the sample project files:

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

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

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 = <div>
    <DatePicker
        selected={new Date()}
        onChange={handleChange} />
</div>;
ReactDOM.render(myDivElement, document.getElementById('example'));
1
reactjstypescriptrequirejs
Can you explain what isn't working with your current approach? Are you asking about how to set your project up in general? - Daniel Rosenwasser
Yes, how to setup in general. How to import correctly 3rd party components in the current project setup. I would like to hear from other developers who already went through this path. Of course, I will be updating the post (and the Github project) while do more research. Thanks @DanielRosenwasser - AntonIva
Our website actually has a guide on React (with Webpack) here and a guide that uses AMD modules (using RequireJS) here. Perhaps that will help a bit. I would continue using the same types of imports you've been using though, as it correctly reflects that these 3rd party libraries aren't actually ES-style modules. - Daniel Rosenwasser

1 Answers

0
votes

After some digging in GitHub issues, finally, I have imported the DatePicker component.

Commit: https://github.com/mgrackerl/react-requirejs-example/commit/4afcd28db1ee0f5a9fa0fe65bf505e521814f562

Notes about importing react-datepicker component:

1) Have to bring typings files to the project to make Typescript compiler work (the github project dir: typings/react-datepicker)

2) For the DatePicker component, we have to use MomentJS (http://momentjs.com/) not a Javascript Date object.

scripts/main.tsx file:

/// <reference path="../typings/index.d.ts" />

import React = require('react');
import ReactDOM = require('react-dom');
import DatePicker = require('react-datepicker'); // 3rd party DatePicker component
import moment = require('moment'); // use for the DatePicker component

// callback function for DatePicker onChange event
let handleChange = function(){
  return function(date:any) {
    console.log("data is: " + date);
  }; 
} 

// Create new React component that consumes 3rd party DatePicker component
var myDivElement = <div>
        <DatePicker
            selected={moment()}
            onChange={handleChange} />
</div>;
// Render newly create "myDivElement" component
ReactDOM.render(myDivElement, document.getElementById('example'));

And of course setup RequireJS settings:

require.config({
    "urlArgs": "v=01",
    "baseUrl": "",
    "paths": {
        "react": "node_modules/react/dist/react",
        "react-dom": "node_modules/react-dom/dist/react-dom",
        "moment": "node_modules/moment/min/moment.min",
        "react-onclickoutside": "node_modules/react-onclickoutside/index",
        "react-datepicker": "node_modules/react-datepicker/dist/react-datepicker",
        "main": "scripts/main",
    },
    "shim": {
        "datatable": {
            "deps": ['jquery']
        },
        "dtbootstrap": {
            "deps": ['datatable']
        },
    },
    jsx: {
        fileExtension: ".js",
    }
});