Including example of .jsx component

[barbar]

Including example of .jsx component

[svdoever]

@ufukomer the typings were already installed. The error was because I had to do const MyComponent = require("./MyComponent").default;. I decided to write down some info about using Javascriptcomponents from TypeScript.

Consuming Javascript ReactJS components from TypeScript

There are cases where you need to consume ReactJS components written in Javascript from your TypeScript code. Possible reasons:

• You find a great component "out in the wild" written in Javascript
• One of your team-members does not know/does not want to write TypeScript
• You want to consume components from an existing component set writen in Javascript

Assume the situation where a component MyComponent.jsx written in Javascript must be consumed from a component Home.tsx:

The file MyComponent.jsx:

import * as React from 'react';

export class MyComponent extends React.Component {
    constructor(props) { super(props); }
    render() { return (<h1>Hello from MyComponent</h1>); }
}

We could import this component in different ways:

import {MyComponent} from './MyComponent'; // ERROR: Cannot find module './MyComponent'
const MyComponent = require('./MyComponent'); // Warning if used as <MyComponent/> - see https://codereviewvideos.com/blog/warning-react-createelement/
const X = require('./MyComponent'); // OK if used as <X.MyComponent/>
const MyComponent = require('./MyComponent').MyComponent; // OK
const MyComponent = require('./MyComponent').default; // OK if defined as export default class MyComponent

The file Home.tsx:

import * as React from 'react';
const MyComponent = require('./MyComponent').MyComponent;

export class Home extends React.Component<any, any> {
  render() { return (<div><MyComponent /></div>); }
}

[svdoever]

I solved the error above by creating a file src/app/components/MyComponent/MyComponent.d.ts containing:

import React = require("react");

export interface MyComponentProps extends React.Props<MyComponentClass> {
}

export interface MyComponent extends React.ReactElement<MyComponentProps> { }
export interface MyComponentClass extends React.ComponentClass<MyComponentProps> { }

export var MyComponent: MyComponentClass;

I also aded react support for jsx files as follows:

• Add babel react preset package from npm:

npm install babel-preset-react --save-dev

• Add a .babelrc file to the root with the following contents:

{
  "presets": [
    "es2015",
    "react"
  ]
}

[batuhan]

Hey @svdoever,

When you are mixing JavaScript libraries with TypeScript ones, you can use good ol' require instead of using definitions (but definitions are always recommended).

For local files:

const MyComponent = require('./MyComponent/MyComponent');

For external modules:

const perfectLib = require('perfectLib');

Apart from external libraries, I'm not sure why would want to mix regular JavaScript with TypeScript in a project :)

[svdoever]

Would be great if that approach works, without the necessity of type definition files, although those would help. I added MyComponent.jsx file to the Home folder:

import * as React from 'react';

class MyComponent extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <h1>Hello from MyComponent</h1>
        );
    }
}

export default MyComponent;

and changed Home.tsx to:

import * as React from 'react';
const MyComponent = require('./MyComponent');
const s = require('./style.css');

class Home extends React.Component<any, any> {
  render() {
    return (
      <div className={s.home}>
        <img src={require('./barbar.png')} />
        <p>Hello world!</p>
        <MyComponent />
      </div>
    );
  }
}

export { Home }

but keep getting the error:

Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components). Check the render method of `Home`.

Any idea what I'm doing wrong?

[ufukomer]

@svdoever try to install typings:

$ typings install dt~react --global --save