reactjs - 創建單獨的模塊

這是我的簡單reactjs應用程序。它一切正常，但我想知道如何創建單獨的模塊，即;我想分開script.js中的組件，並添加另一個文件並將其包含。reactjs - 創建單獨的模塊

我該如何在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或browserify？ – 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

除了在生產中加入巴貝爾之外，這裏還有什麼不對？ – frontsideair

即使是現代的網頁瀏覽器也具有並行的HTTP請求限制（6個用於Chrome IIRC） - 每個React組件現在都在消費一個有價值的請求。隨着HTTP 2的引入，這個問題就不再那麼嚴重了，但是用戶停滯不前會被迫在頁面最終呈現之前等待每一個請求完成。 – Scott

常用的方法是使用ES6模塊&您的React組件的類語法。你會再次分離出的成分，以單個文件&導出它們：

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 - 創建單獨的模塊

回答

相關問題