reactjs - 別々のモジュールを作成する

ここに私の簡単なreactjsアプリケーションがあります。それはすべて正常に動作しますが、私は別のモジュールを作成する方法を知っていると思います。つまり、私はscript.jsのコンポーネントを分離し、別のファイルを追加してそれを含めたいと思います。reactjs - 別々のモジュールを作成する

私はどのように反応を起こすことができますか？

現在のところ、アプリケーションはどのサーバーにもデプロイされていません。

script.js：

var CreatePanel = React.createClass({ 
    render: function(){ 
     return <div className="row"> 
      <div className = "col-xs-6 col-sm-3"> 
       <input type="text"></input> 
       <select></select> 
      </div> 
     </div>; 
    } 
}); 

var FilterPanel = React.createClass({ 
    render: function(){ 
     return <div className="row">Filter Panel</div>; 
    } 
}); 

React.render(<div class="container"> 
    <CreatePanel/> 
    <FilterPanel/> 
</div> 
    , document.getElementById('react-container'));

がHTML

<!DOCTYPE html> 
<html> 
<head> 
    <script src="fb.me/react-0.13.3.min.js"></script> 
    <script src="cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <title>React Components</title> 
</head> 

<body> 
    <div id="react-container"></div> 
    <script type="text/babel" src="./myscript.js"> 
    </script> 
</body> 

</html>

出典

2016-05-13 user1050619

webpackのようなブラウザですか？ – Scott

あなたが平らに異なるファイルにCreatePanelとFilterPanelコンポーネントをコピーして、myscript.js前にそれらを含めることができます。

createpanel.js

var CreatePanel = React.createClass({ 
    render: function(){ 
     return <div className="row"> 
      <div className = "col-xs-6 col-sm-3"> 
       <input type="text"></input> 
       <select></select> 
      </div> 
     </div>; 
    } 
});

filterpanel.js

var FilterPanel = React.createClass({ 
    render: function(){ 
     return <div className="row">Filter Panel</div>; 
    } 
});

myscript.js

React.render(<div class="container"> 
    <CreatePanel/> 
    <FilterPanel/> 
</div> 
    , document.getElementById('react-container'));

index.htmlを

<!DOCTYPE html> 
<html> 
<head> 
    <script src="fb.me/react-0.13.3.min.js"></script> 
    <script src="cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.29/browser.js"></script> 

    <!-- Latest compiled and minified CSS --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous"> 

    <!-- Optional theme --> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous"> 

    <!-- Latest compiled and minified JavaScript --> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script> 
    <title>React Components</title> 
</head> 

<body> 
    <div id="react-container"></div> 
    <script type="text/babel" src="./createpanel.js"> 
    </script> 
    <script type="text/babel" src="./filterpanel.js"> 
    </script> 
    <script type="text/babel" src="./myscript.js"> 
    </script> 
</body> 

</html>

：それは次のようになります。

出典

2016-05-13 17:46:32 frontsideair

これは機能しますが、一般向けのウェブサイトではこれを行わないでください！ – Scott

生産にBabelを含める以外に、何が間違っていますか？ – frontsideair

現代のWebブラウザでさえも、HTTPリクエスト制限（Chrome IIRCでは6）が並行しています。それぞれのReactコンポーネントは現在、貴重なリクエストを食い止めています。 HTTP 2の導入でこれは問題になることは少なくなりましたが、せっかちなユーザーは、ページが最終的にレンダリングされる前に、すべてのリクエストが完了するのを待たされることになります。 – Scott

一般的なアプローチは、あなたのReactコンポーネントのためにES6モジュール&クラス構文を使用することです。あなたはそれらをエクスポート&個々のファイルにあなたのコンポーネントを再析出ます：

CreatePanel.jsx

import React from 'react';  

export default class CreatePanel extends React.Component { 
    render() { 
    return 
     (<div className="row"> 
     <div className = "col-xs-6 col-sm-3"> 
      <input type="text"></input> 
      <select></select> 
     </div> 
     </div>); 
    } 
};

FilterPanel.jsx

import React from 'react';  

export default class FilterPanel extends React.Component { 
    render() { 
    return <div className="row">Filter Panel</div>; 
    } 
});

次に、あなたがあなたのscript.jsどこにこれらのコンポーネントをインポートすることができますReact.render（）を実行しています

script.js

import React from 'react'; 

import CreatePanel from 'your relative path to CreatePanel.jsx'; 
import FilterPanel from 'your relative path to FilterPanel.jsx'; 

React.render(<div class="container"> 
<CreatePanel/> 
<FilterPanel/> 
</div> 
, document.getElementById('react-container'));

出典

2016-05-13 18:42:25

reactjs - 別々のモジュールを作成する

答えて

関連する問題