reactjs - separate Module erstellen

Hier ist meine einfache reactjs Anwendung. Alles funktioniert gut, aber ich würde gerne wissen, wie separate Module zu erstellen, dh ich möchte die Komponenten in script.js trennen und fügen Sie eine andere Datei und fügen Sie es ein.reactjs - separate Module erstellen

Wie kann ich es in reactjs tun?

Derzeit ist die Anwendung nicht auf einem Server bereitgestellt.

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>

Quelle

2016-05-13 user1050619

Wie webpack oder browserify? – Scott

Sie können flach aus CreatePanel und FilterPanel Komponenten auf verschiedene Dateien kopieren und schließen sie vor myscript.js. Es sollte wie folgt aussehen:

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>

Quelle

2016-05-13 17:46:32 frontsideair

Während dies funktioniert, tun Sie dies bitte nicht auf einer öffentlich zugänglichen Website! – Scott

Abgesehen von Babels Produktion, was ist hier noch falsch? – frontsideair

Sogar moderne Webbrowser haben parallele HTTP-Anforderungslimits (6 für Chrome IIRC) - jede React-Komponente verbraucht jetzt eine wertvolle Anforderung. Mit der Einführung von HTTP 2 ist dies weniger ein Problem, aber die Benutzer, die ohne HTTP auskommen, werden gezwungen, auf jede einzelne Anforderung zu warten, bevor die Seite schließlich gerendert werden kann. – Scott

Ein gängiger Ansatz wäre die Verwendung der ES6-Module & Klassensyntax für Ihre React-Komponenten. Sie würden wieder Ihre Komponenten, um einzelne Dateien trennen & sie exportieren:

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>; 
    } 
});

Dann können Sie diese Komponenten auf Ihrem script.js importieren, in dem Sie betreiben 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'));

Quelle

2016-05-13 18:42:25

reactjs - separate Module erstellen

Antwort

Verwandte Themen