は、どのように私はこのようになりますのindex.htmlと反応するアプリケーションを作成した通常のHTMLページ

Question

で反応するコンポーネントを参照ください。このようなアプリをレンダリングするためにReactDOM.renderを呼び出します（bundle.jsから）JS、：

import React from 'react' 
 
import { render } from 'react-dom' 
 
import App from './components/App' 
 
import { Provider } from 'react-redux' 
 
import configureStore from './redux/configureStore' 
 

 
render(
 
    <Provider store={configureStore()}> 
 
     <App /> 
 
    </Provider>, 
 
    document.getElementById('react-container') 
 
)

これまでのところとても良いです。しかし、私のコンポーネントを他のWebアプリケーションで再利用できるようにしたい。だから私は何をする必要がありますか？

私はバンドルにindex.htmlまたはindex.jsファイルを提供しないと思いますか？しかし、他のWebアプリケーションのコンポーネントをどのように参照する必要がありますか？私はbundle.jsファイルを参照する必要があると思いますが、たとえばインポートを指定する方法は？そして、バベルはどうですか？そしてReactライブラリ？

私はReduxも利用しているため、プロバイダが必要です。ストアを設定する必要があります。私はどこでそれをするべきですか？

Answer 1

コンポーネントを再利用できるようにするには、レンダリング機能をエクスポートするためにコンポーネントをビルドする必要があります。私は、NWBはあなたのスクリプトタグを使用し、および/またはその代わりReactDOMを使用して明示的にレンダリングの

をNPMにそれを公開するためのグローバル変数をエクスポートUMDモジュールを構築することができますこの方法であなたhttps://github.com/insin/nwb/blob/master/docs/guides/ReactComponents.md#developing-react-components-and-libraries-with-nwb のために良いフィット感だと思いますむしろ、代わりにindex.jsエクスポートをコンポーネントにしたいと思います。 例：

export default props => 
    <Provider store={configureStore()}> 
     <App /> 
    </Provider> 

とユーザーコードは、DOM

ReactDOM.render(React.createElement(YourLibraryGlobalNameGeneratedFromNwb))