Organizzazione di un progetto React JS - Building Single JS File

Question

Ho appena iniziato a usare React. Ho attraversato il tutorial dei commenti senza problemi. Ma il framework non dà molta guida / qualsiasi orientamento per organizzare i file JS o compilare un singolo file JS minificato per una spa. Conosco già che il framework è flessibile e non applica uno standard e sono sicuro che queste domande sono probabilmente morte ovvie per qualcuno che si sviluppa nell'ecosistema JavaScript.

Immagino che il consenso sia usare browserrify e nei documenti c'è un collegamento a un progetto di avviamento Git:

https://github.com/petehunt/react-browserify-template < / P >.

Questa è una buona partenza, ma comunque compila solo un singolo file JS "index.js". Ho letto attraverso un po 'del manuale Browserrify e pensavo di aver semplicemente dovuto "richiedere" i miei altri file (e quei file devono esportarsi).

Così ho modificato index.js per assomigliare a questo:

/** @jsx React.DOM */
var React = require('react');
var pkg = require('./package.json');

var commentBox = require('./comment-box.js');

.

commenti-box.js è fondamentalmente un test del mondo ciao:

/** @jsx React.DOM */
var React = require('react');
var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
            Hello, world! I am a CommentBox.
            </div>
            );
    }
});

React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);

module.exports = CommentBox;

.

Se eseguo il target di avvio del modello di react-browserfy-modello sembra generare browser-bundle.js Fine:

npm start

.

Ma se provo il bersaglio di build

npm build

.

... Non succede nulla. Ho cambiato l'output di NPM in Verbose e ottengo quanto segue:

npm info it worked if it ends with ok
npm verb cli [ 'node', '/usr/local/bin/npm', 'build' ]
npm info using npm@1.4.21
npm info using node@v0.10.24
npm verb exit [ 0, true ]
npm info ok

.

Secondo il pacchetto.json è dovrebbe generare un file "browser-bundle.min.js" ma non ottengo alcuna produzione. Spero che qualcuno possa chiarire questo.

Answer 1

Ho capito cosa fosse il problema. Come indicato in origine, è probabilmente ovvio per qualcuno che si sta sviluppando nell'ecosistema JS :)

il pacchetto.json in react-browserfy-modello < / A> ha tre script nella sezione "Script" con i tasti "Start", "Build" e "Test".

Come ho detto in precedenza, inizia a funzionare bene correndo:

npm start

.

Ho inserito erroneamente che potessi eseguire lo script di build in modo simile:

npm build (this will never work and there will be no errors/output)

.

Si scopre che avevo bisogno di eseguire lo script di build usando:

npm run-script build

.

Una linea extra nella documentazione potrebbe avermi salvato ore di guai: D ora sto usando questo approccio in quanto sembra un bel po 'più semplice. Inoltre, imposta NODE_ENV in produzione e usi invidia che apparentemente è importante: https://github.com/ Facebook / React / Problemi / 1772

Un'altra cosa, alcuni degli esempi ufficiali come todomvc-flux Utilizzare il" react react "minuscolo nella funzione Richiedi:

var React = require('react');

.

Quindi suppongo che sia la sintassi consigliata (?)

Answer 2

Soluzione di lavoro usando il GIST di Felix.Nota: questo non è pari al 100% equivalente al modello di react-browserrify che utilizza l'utilizzo e il bandiera di produzione per sbarazzarsi di alcuni debug di reagire (principalmente "Scarica i DevTools React per un'esperienza di sviluppo migliore: http://fb.me/react-devtools "che viene stampato alla console all'avvio).

Forse un mod può dare credito Felix per la soluzione?

app.js

/**
 * @jsx React.DOM
 */
"use strict";

var React = require('React');

var CommentBox = require('./components/CommentBox.js');

React.renderComponent(
    <CommentBox />,
    document.getElementById('content')
);

.

Componenti / Commenti.js

/** @jsx React.DOM */
var React = require('React');
var CommentList = require('./CommentList.js');

var CommentBox = React.createClass({
    render: function() {
        return (
            <div className="commentBox">
                <h1>Comments</h1>
                <CommentList />
            </div>
            );
    }
});

module.exports = CommentBox;

.

Componenti / CommentList.js

/** @jsx React.DOM */
var React = require('React');
var CommentList = React.createClass({
    render: function() {
        return (
            <div className="commentList">
            Hello, world! I am a CommentList.
            </div>
            );
    }
});

module.exports = CommentList;

.