Convert Olliver spfx 40 fantastics twitter webpart to react component

1 how I might call the component.ts

import TweetsFeedWebPart from './tweetsFeed/TweetsFeedWebPart';

export default class AboutInfo extends React.Component<IAboutInfoProps, IAboutInfoState> {

  //.. stuff deleted
  
  
    let twitterPane = <TweetsFeedWebPart

          account= 'SharePoint'
          width= '600'
          height= '400'

          autoLimit= {true}
          limit= {250}
          header= {true}
          dark= {true}
          footer= {false}
          borders= {false}
          scrollbars= {true}
          transparent= {true}
          linkColor= "#820bbb"
          borderColor= "#a80000"

      ></TweetsFeedWebPart>;

  return (twitterPane);
  
  }

2 react component.tsx

import * as React from 'react';
import * as ReactDom from 'react-dom';

import * as strings from 'TweetsFeedStrings';

export interface ITweetsFeedWebPartProps {
  account: string;
  autoLimit: boolean;
  limit: number;
  header: boolean;
  footer: boolean;
  borders: boolean;
  scrollbars: boolean;
  width: string;
  height: string;
  transparent: boolean;
  dark: boolean;
  linkColor: string;
  borderColor: string;
}

  /**
   * I  have this in my config.json as well as the widgets file in this subdirectory
   *   "externals": {
   *      "twitter": {
   *         "path": "src/javascripts/twitter/widgets.js",
   *        "globalName": "twttr"
   *      }
   *    },
   */

export default class AboutInfo extends React.Component<ITweetsFeedWebPartProps, {}> {
  constructor(props: ITweetsFeedWebPartProps) {
    super(props);
    this.setState({ 
      
    });
  }

  public render(): React.ReactElement<ITweetsFeedWebPartProps> {

    let tweeterPage = null;
    if (this.props.account == null || this.props.account == '') {
      tweeterPage = <div className="ms-MessageBar">
      <div className="ms-MessageBar-content">
        <div className="ms-MessageBar-icon">
          <i className="ms-Icon ms-Icon--Info"></i>
        </div>
        <div className="ms-MessageBar-text">
          ${'Error Message Here'}
        </div>
      </div>
    </div>
    } else {
      var dataChrome = '';
      tweeterPage = null;

      if (this.props.footer === false)
        dataChrome += "nofooter ";
      if (this.props.header === false)
        dataChrome += "noheader ";
      if (this.props.borders === false)
        dataChrome += "noborders ";
      if (this.props.scrollbars === false)
        dataChrome += "noscrollbar ";
      if (this.props.transparent === true)
        dataChrome += "transparent ";
  
      var limit = '';
      if (this.props.autoLimit === false)
        limit = 'data-tweet-limit="' + this.props.limit + '"';
  
      tweeterPage = '<a class="twitter-timeline" data-link-color="' + this.props.linkColor 
        + '" data-border-color="' + this.props.borderColor + '" height="' 
        + this.props.height + '" width="' + this.props.width 
        + '" ' + limit + ' data-chrome="' + dataChrome 
        + '" href="https://twitter.com/' + this.props.account 
        + '">Tweets by ' + this.props.account + '</a>';

    }

    //console.log('Build page navigation: ', this.props, this.state);

    console.log('tweeterPage', tweeterPage);

    //  HOW DO I RUN THIS COMMAND???
    twttr.widgets.load();

    return (tweeterPage);
  }


  }

3. original JS webpart file.ts

/**
 * @file
 * Tweets Feed Web Part for SharePoint Framework SPFx
 *
 * Author: Olivier Carpentier
 * Copyright (c) 2016
 */
import {
  BaseClientSideWebPart,
  IPropertyPaneConfiguration,
  PropertyPaneTextField,
  PropertyPaneToggle,
  PropertyPaneSlider,
  IWebPartContext
} from '@microsoft/sp-webpart-base';
import { Version } from '@microsoft/sp-core-library';

import * as strings from 'TweetsFeedStrings';
import { ITweetsFeedWebPartProps } from './ITweetsFeedWebPartProps';

//Imports property pane custom fields
import { PropertyFieldColorPickerMini } from 'sp-client-custom-fields/lib/PropertyFieldColorPickerMini';

var twttr: any = require('twitter');

export default class TweetsFeedWebPart extends BaseClientSideWebPart<ITweetsFeedWebPartProps> {

  /**
   * @function
   * Web part contructor.
   */
  public constructor(context?: IWebPartContext) {
    super();

    //Hack: to invoke correctly the onPropertyChange function outside this class
    //we need to bind this object on it first
    this.onPropertyPaneFieldChanged = this.onPropertyPaneFieldChanged.bind(this);
  }

  /**
   * @function
   * Gets WP data version
   */
  protected get dataVersion(): Version {
    return Version.parse('1.0');
  }

  /**
   * @function
   * Renders HTML code
   */
  public render(): void {

    if (this.properties.account == null || this.properties.account == '') {
      var error = `
        <div class="ms-MessageBar">
          <div class="ms-MessageBar-content">
            <div class="ms-MessageBar-icon">
              <i class="ms-Icon ms-Icon--Info"></i>
            </div>
            <div class="ms-MessageBar-text">
              ${strings.ErrorSelectAccount}
            </div>
          </div>
        </div>
      `;
      this.domElement.innerHTML = error;
      return;
    }

    var dataChrome = '';
    if (this.properties.footer === false)
      dataChrome += "nofooter ";
    if (this.properties.header === false)
      dataChrome += "noheader ";
    if (this.properties.borders === false)
      dataChrome += "noborders ";
    if (this.properties.scrollbars === false)
      dataChrome += "noscrollbar ";
    if (this.properties.transparent === true)
      dataChrome += "transparent ";

    var limit = '';
    if (this.properties.autoLimit === false)
      limit = 'data-tweet-limit="' + this.properties.limit + '"';

    var html = '<a class="twitter-timeline" data-link-color="' + this.properties.linkColor + '" data-border-color="' + this.properties.borderColor + '" height="' + this.properties.height + '" width="' + this.properties.width + '" ' + limit + ' data-chrome="' + dataChrome + '" href="https://twitter.com/' + this.properties.account + '">Tweets by ' + this.properties.account + '</a>';
    this.domElement.innerHTML = html;

    twttr.widgets.load();
  }

  /**
   * @function
   * PropertyPanel settings definition
   */
  protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          displayGroupsAsAccordion: true,
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneTextField('account', {
                  label: strings.Account
                }),
                PropertyPaneToggle('autoLimit', {
                  label: strings.AutoLimit
                }),
                PropertyPaneSlider('limit', {
                  label: strings.Limit,
                  min: 1,
                  max: 1000,
                  step: 1
                }),
                PropertyPaneToggle('header', {
                  label: strings.Header
                }),
                PropertyPaneToggle('footer', {
                  label: strings.Footer
                }),
                PropertyPaneToggle('borders', {
                  label: strings.Borders
                }),
                PropertyPaneToggle('scrollbars', {
                  label: strings.Scrollbars
                })
              ]
            },
            {
              groupName: strings.LayoutGroupName,
              groupFields: [
                PropertyPaneTextField('width', {
                  label: strings.Width
                }),
                PropertyPaneTextField('height', {
                  label: strings.Height
                }),
                PropertyPaneToggle('transparent', {
                  label: strings.Transparent
                }),
                PropertyFieldColorPickerMini('linkColor', {
                  label: strings.LinkColor,
                  initialColor: this.properties.linkColor,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  render: this.render.bind(this),
                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                  properties: this.properties,
                  key: 'tweetsFeedLinkColorField'
                }),
                PropertyFieldColorPickerMini('borderColor', {
                  label: strings.BorderColor,
                  initialColor: this.properties.borderColor,
                  onPropertyChange: this.onPropertyPaneFieldChanged,
                  render: this.render.bind(this),
                  disableReactivePropertyChanges: this.disableReactivePropertyChanges,
                  properties: this.properties,
                  key: 'tweetsFeedBorderColorField'
                })
              ]
            }
          ]
        }
      ]
    };
  }
}