Recently the urge to try react with express has landed me to a common issue and being new to it leaving me clueless.
I have a react express application with structure:
+-- app.js
+-- public
| +-- css
+-- javascripts
+-- routes
| +-- index.js
+-- views
| +-- index.jsx
+-- layouts
+-- Default.jsx
Taking the baby steps for rendering the view with default stylesheets and scripts (Default layout file--> Default.jsx)
var React = require('react');
class DefaultLayout extends React.Component {
render() {
return (
<html><head><title>{this.props.title}</title>
<link href="stylesheets/style.css" rel="stylesheet" />
</head>
<body>
First Application {this.props.children}
</body>
<script src="javascripts/jquery-2.2.4.min.js"></script>
</html>
);
}
}
module.exports = DefaultLayout;
Index.jsx
var React = require('react');
var DefaultLayout = require('./layouts/default');
class FirstPage extends React.Component {
render() {
return (
<DefaultLayout title={this.props.title}>
</DefaultLayout>
);
}
}
module.exports = FirstPage;
Routes>index.js
var express = require('express');
var router = express.Router();
/* GET home page. */
router.get('/', function(req, res, next) {
res.render('index', { name: 'Ankita',title:'First Page' });
});
module.exports = router;
The First Page is getting rendered but the scripts seems to be not doing its work. I'm receiving the warning Warning: validateDOMNesting(...): cannot appear as a child of . See DefaultLayout > html > script.
My app.js
var express = require('express');
var app = express();
// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jsx');
app.engine('jsx', require('express-react-views').createEngine());
...
app.use(express.static(path.join(__dirname, 'public')));
app.use('/', index);
module.exports = app;
How do we include common javascript the way we include css files?
