How do I integrate a Polymer + Node.JS JavaScript app with React + TypeScript

问题

I have recently been tasked with integrating React + TypeScript with an existing starter app that contains many great Polymer Components (Predix UI Starter). I understand that this may seem non-sensical to some (after all, you could simply provide app state and logic using Polymer as a framework). However, the React library and the object oriented nature of TypeScript have a lot to offer, so what are some tips for getting started here?

回答1:

I will be integrating the Predix UI Starter with the create-react-app starter. Specifically, I will enable a React Component to render() a px-dropdown polymer component. This concept and method can apply to any polymer starter app. This DOES NOT completely integrate these two starters, it is ONLY a POC for rendering a polymer component in a React render() method, using TypeScript.

Clone both of these repos. Work out of the Predix UI Starter - this will contain all of the components once you run npm install and bower install.

Ensure that the package.json in the Predix UI Starter contains all of the dependencies and devDependencies that the react app contains. In the package.json file, in the scripts object, change "start" : ..., to "start" : "react-scripts-ts start". This will serve the app to localhost using TypeScript (this is where the tsconfig.json and the tslint.json files come into play).

Copy the tsconfig.json, tslint.json, and the tsconfig.test.json files into the root directory of the Predix UI Starter.

As per the naming convention for React apps, rename the server folder to src. In the .bowerrc file, append public/ before bower_components, this will enable the public/index.html file to import polymer components generated by bower. Unless configured to do so, public/index.html will be unable to load polymer components in parent folders to the public folder. (The user may need to configure the Predix Starter to initially serve the public/index.html file).

From the react starter to the Predix starter, copy the App.tsx and the index.tsx files to the src folder, and copy the index.html file to the public folder (this file will be what the app initially serves).

Add the px-dropdown component to the JSX namespace so that you can render it within a react component by adding a global.d.ts file to the root directory with the following content:

declare namespace JSX { interface IntrinsicElements { 'px-dropdown': any } }

You are now ready to render() the px-dropdown component. In the public/index.html file, import the component using the following two lines (within the <head> tag):

<link rel="import" href="bower_components/polymer/polymer.html" />
<link rel="import" href="bower_components/px-dropdown/px-dropdown.html" />

Let's pass some items to the props of the App Component. In the index.tsx file, edit the line that renders the component to look like <App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>

The following code in App.tsx will render the px-dropdown component successfully:

    class App extends React.Component<any, any> {
        constructor (props: any) {
          super(props);
        }
        render() {
          ...
          return (
            <div className="App">
              ...
              <px-dropdown
                items={this.props.items}
                sort-mode="key"
                button-style="default"
                display-value="Select"
                disable-clear>
              </px-dropdown>
            </div>
      );
    }
 }

You are now ready to begin rendering Polymer components using React + TypeScript.

来源：https://stackoverflow.com/questions/47333856/how-do-i-integrate-a-polymer-node-js-javascript-app-with-react-typescript

标签

node.js

reactjs

typescript

npm

polymer