3
いくつかのプロジェクトで共有/再利用したいコンポーネントがあります。私はこのコンポーネントをビルド/バンドルしようとしているので、通常は反応する大規模なセットアップ（webpack/babel/npm/ect）は必要としません。スタンドアロンリアックスコンポーネントとWebpack
- はhtmlページのどこかにCDNから/リアクトReactDOM含まれるように
は私がしたいです。
- 私のコンポーネントのjsファイルを含めます（standalone.jsと呼んでいます）。
- これをdomに描画するための少しの初期化コード。バベル、ウェブパックなし、JSXなし。
それだけです。
私はアイテム3に固執していますが、かなり近づいているように感じます。コンポーネントをDOMにレンダリングする方法を理解できません。
index.htmlを（関連部分）
<div id="app" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.4.1/react-dom.min.js"></script>
<!--My Component -->
<script src="build/standalone.js" type="text/javascript"></script>
<script>
// I believe I'm doing something wrong here
var myComponent = new MyLibrary.default();
var myStandaloneElement = React.createElement(myComponent, { message: "Testing Standalone Component" });
ReactDOM.render(myStandaloneElement, document.getElementById('app'));
</script>
standalone.jsx
import React, {PropTypes} from 'react';
class Standalone extends React.Component {
render() {
return <p>{this.props.message}</p>;
}
}
Standalone.PropTypes = {
message: PropTypes.string.isRequired
}
export default Standalone;
webpack.config：
ここでは、デモのHTMLページの関連部分です。 js（関連部分）
var config = {
entry: APP_DIR + '/standalone.jsx',
output: {
library: 'MyLibrary',
libraryTarget: 'umd',
path: BUILD_DIR,
filename: 'standalone.js'
},
module: {
loaders: [
{
test: /\.jsx?/,
include: APP_DIR,
loader: 'babel'
}
]
},
externals: {
react: 'React',
"react-dom": 'ReactDOM'
},
}
基本的なhtmlでコンポーネントをレンダリングしようとしていますが、私は同様のもののバリエーションを試しました。私のデバッガを見ると、オブジェクトは反応型のオブジェクトに「近い」ものであることが分かります。私はちょうどそれと何をするか分からない。
任意のポインタは、あなたが新しい、むしろ彼らはReact.createElement工場でインスタンス化されるべきでコンポーネントをインスタンス化してはならない