Manage js loading order

unbug commented 9 years ago

So,I got a default layout like this,the common javascript is import in the bottom of the page.

var React = require('react');

var DefaultLayout = React.createClass({
  render: function () {
    return (
      <html>
      <head>
        <title>{this.props.title}</title>
        <link href="/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
        <link href="/bower_components/metisMenu/dist/metisMenu.min.css" rel="stylesheet"/>
        <link href="/stylesheets/sb-admin-2.css" rel="stylesheet"/>
        <link href="/bower_components/bootstrap-social/bootstrap-social.css" rel="stylesheet"/>
        <link href="/bower_components/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>

      </head>
      <body role="document" ontuchstart="">
      {this.props.children}
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
        <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="/bower_components/metisMenu/dist/metisMenu.min.js"></script>
        <script src="/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
        <script src="/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
        <script src="/js/sb-admin-2.js"></script>
        <script src="/bower_components/react/JSXTransformer.js"></script>
        <script src="/bower_components/react/react-with-addons.js"></script>
        <script src="/bower_components/ReactiveElements/dist/reactive-elements.js"></script>
      </body>
      </html>
    );
  }
});

module.exports = DefaultLayout;

But in another page,I need to import another js file,

var React = require('react');
var DefaultLayout = require('../layouts/default');
var Navigation = require('../components/navigation');

module.exports = React.createClass({
  render: function () {
    var data = this.props.session;
    return (
      <DefaultLayout title="Forms">
        <div id="wrapper">
          {/* Navigation */}
          <Navigation></Navigation>
          <div id="page-wrapper">
            <div className="row row-same-height">
              <div className="col-xs-12 col-xs-height"><h3>Forms / Create a new form</h3></div>
            </div>
            <div id="form-wrapper">
            </div>
          </div>
        </div>
        <script type="text/jsx" src="/js/Forms.add.js"></script>
      </DefaultLayout>
    );
  }
});

But in this case,the Forms.add.js wont loader after all the js files in the DefaultLayout layout.so I create a script component.

var Scirpts = React.createClass({
  render: function () {
    return (
      <div style={{display: 'none'}}>
<script src="/bower_components/jquery/dist/jquery.min.js"></script>
        <script src="/bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
        <script src="/bower_components/metisMenu/dist/metisMenu.min.js"></script>
        <script src="/bower_components/datatables/media/js/jquery.dataTables.min.js"></script>
        <script src="/bower_components/datatables-plugins/integration/bootstrap/3/dataTables.bootstrap.min.js"></script>
        <script src="/js/sb-admin-2.js"></script>
        <script src="/bower_components/react/JSXTransformer.js"></script>
        <script src="/bower_components/react/react-with-addons.js"></script>
        <script src="/bower_components/ReactiveElements/dist/reactive-elements.js"></script>
      </div>
    );
  }
});

All my js files has to wrap in a div.How to do this in a right way?

zpao commented 9 years ago

I would add a prop to DefaultLayout, something like additionalScripts, then render those.

zpao commented 9 years ago

Note: this isn't an issue with this module, and is more a general question. That's why I closed it.

unbug commented 9 years ago

@zpao Brilliant idea.Thanks man.

ShinyChang commented 9 years ago

@unbug

I wrote some sample for this case, it may help you. https://github.com/ShinyChang/React-Server-Render-Example/blob/master/app.js https://github.com/ShinyChang/React-Server-Render-Example/blob/master/views/layouts/default.jsx

unbug commented 9 years ago

@ShinyChang Yep,that's the way.

reactjs / express-react-views

Manage js loading order #43