Creating an extension embedding an existing React component

Please bare with me, since this is my first time using Typescript, and a long time since I wrote JS.

My goal was to have an extension based on the hello world example that can show a grid (using the ag-grid React component). While I was able to successfully get a Hello World message displayed. I found myself struggling with importing a react component and rendering it. I wrote some pseudo-code (see link) to show how I attempted to solve it (this does not work right now).

https://github.com/eiso/theia-extension-test/blob/master/hello-world/src/browser/hello-world-widget.tsx

If anyone can help me out with some direction, that would be much appreciated. I’ll happily turn this into a tutorial or guide after for those who are looking to extend Theia but don’t come from a TS/JS background.

[original thread by Eiso Kant]

@eiso happy to see you starting to use Theia :slight_smile:
I assume you’ve started from the hello-world example as part of the generator?

I’ve written a pull request to also add a widget generator, which would help in your case I think but unfortunately it has yet to be merged. https://github.com/theia-ide/generator-theia-extension/pull/26
Adding a widget is fairly simple, our most simple case is the getting-started widget in Theia if you’d like to take a look https://github.com/theia-ide/theia/tree/master/packages/getting-started

[shortwavedave]

I’ve used the widget generator mentioned by Vince, it works great.

[Eiso Kant]

That is great @vince-fugnitto! Definitely switching over to that. Really appreciate this!

I was able to get a widget with a text and div element working before. Where I am really getting stuck (but this might be because of Day 1 with TS & React) is embedding a React component from a package. When you extend ReactWidget, how can I create this.state to pass a parameter from a React widget I am importing, since I can’t get the props from the parent component since I am not extending { Component } from ‘react’.

[shortwavedave]

I think the way to think about it is that the ReactWidget interacts with the IDE, since it is a “widget”. So you can create a “view” which is another class that inherits from React.Component with the props

[shortwavedave]

I’m trying to find an example

[shortwavedave]

looks like the git-history package follows this pattern. search for GitHistoryList and you’ll see how it extends React.Component.

@shortwavedave yes, you create a react component with state and props and then render it

[Eiso Kant]

@vince-fugnitto using your widget generator, thank you again. Just a small FYI, whomever has the permissions should publish it to NPM

[Eiso Kant]

I managed to get it working, I wanted to add the link here for anybody else who is trying to integrate an existing React package/component: https://github.com/eiso/grid-extension/commit/9bafb7334c0a274687adcb5db1e2796f509c00d2