如何将Polymer + Node.JS JavaScript应用程序与React + TypeScript集成 [英] How do I integrate a Polymer + Node.JS JavaScript app with React + TypeScript
问题描述
我最近的任务是将React + TypeScript与包含许多出色的Polymer组件(Predix UI Starter)的现有启动器应用程序集成.我知道这对某些人来说似乎毫无意义(毕竟，您可以使用Polymer作为 framework 来简单地提供应用程序状态和逻辑).但是，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?
推荐答案
我将集成 Predix UI Starter 和 create-react-app启动器.具体来说，我将启用React组件来渲染()px-下拉聚合物组件.此概念和方法可以应用于任何聚合物启动器应用程序. 不不完全集成这两个启动器，它仅是一个POC，用于使用TypeScript在React render()方法中渲染聚合物组件.
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.
克隆这两个仓库.在Predix UI Starter中工作-一旦运行npm install和bower install，它将包含所有组件.
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.
确保Predix UI Starter中的package.json包含react应用程序包含的所有依赖项和 devDependencies .在package.json文件中的scripts对象中，将"start" : ...,更改为"start" : "react-scripts-ts start".这将使用TypeScript(这是tsconfig.json和tslint.json文件起作用的位置)将应用程序提供给localhost.
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).
将tsconfig.json，tslint.json和tsconfig.test.json文件复制到Predix UI Starter的根目录中.
Copy the tsconfig.json, tslint.json, and the tsconfig.test.json files into the root directory of the Predix UI Starter.
根据React应用程序的命名约定，将server文件夹重命名为src.在.bowerrc文件中，在bower_components之前附加public/，这将使public/index.html文件能够导入Bower生成的聚合物组分.除非进行配置，否则public/index.html将无法将父文件夹中的聚合物组件加载到public文件夹中. (用户可能需要配置Predix Starter最初为public/index.html文件提供服务.)
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).
从React Starter到Predix Starter，将App.tsx和index.tsx文件复制到src文件夹，然后将index.html文件复制到public文件夹(该文件将是应用最初投放).
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).
将px-dropdown组件添加到JSX名称空间，以便您可以通过将global.d.ts文件添加到具有以下内容的根目录来在react组件中呈现它:
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
}
}
declare namespace JSX {
interface IntrinsicElements {
'px-dropdown': any
}
}
您现在可以渲染()px-dropdown组件了.在public/index.html文件中，使用以下两行(在<head>标记内)导入组件:
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" />
让一些items传递给App组件的props.在index.tsx文件中，编辑使组件呈现为<App items={'[{"key":"1", "val": "One"},{"key" : "2", "val": "Two"}]'}/>
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"}]'}/>
App.tsx中的以下代码将成功呈现px-dropdown组件:
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>
);
}
}
您现在就可以开始使用React + TypeScript渲染Polymer组件了.
You are now ready to begin rendering Polymer components using React + TypeScript.
这篇关于如何将Polymer + Node.JS JavaScript应用程序与React + TypeScript集成的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
