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 - 创建单独的模块

回答

相关问题