Menu
Currently unable to work out why my code isn't rendering. Would love some advice from some of you brilliant react.js coders. Really don't understand what's wrong - I feel like it should work.
Here is my App.js
import React from 'react';
import ReactDOM from 'react-dom'
import HeaderNavigation from './HeaderNavigation';
import Body from './Body';
import Footer from './Footer';
ReactDOM.render(
<HeaderNavigation/>,
<Body/>,
<Footer/>,
document.getElementById('app'));
This is the components.
Body.js
import React from "react";
/* Styles */
import Button from 'react-bootstrap/lib/Button';
import Grid from 'react-bootstrap/lib/Grid';
import Jumbotron from 'react-bootstrap/lib/Jumbotron';
import Row from 'react-bootstrap/lib/Row';
import Col from 'react-bootstrap/lib/Col';
export default class Body extends React.Component {
render() {
return (
<div>
<Jumbotron>
<Grid>
<h1>Mr Mac</h1>
<p>Poodle Box</p>
</Grid>
</Jumbotron>
<Grid>
<Row>
<Col md={4}>
<h2>Luxurious Dog Clothes</h2>
<p>So luxury much now</p>
<p><Button>View details »</Button></p>
</Col>
<Col md={4}>
<h2>Delectable Dog Délectants</h2>
<p>Food</p>
<p><Button>View details »</Button></p>
</Col>
<Col md={4}>
<h2>Toys</h2>
<p>MMmhmmmm</p>
<p><Button>View details</Button></p>
</Col>
</Row>
</Grid>
</div>
);
}
}
Footer.js
import React from 'react';
import Grid from 'react-bootstrap/lib/Grid';
export default class Footer extends React.Component {
render() {
return (
<Grid>
<hr />
<footer>
<p>© Company 2014</p>
</footer>
</Grid>
);
}
}
HeaderNavigation.js
import React from 'react';
import Navbar from 'react-bootstrap/lib/Navbar';
import Nav from 'react-bootstrap/lib/Nav';
export default class HeaderNavigation extends React.Component {
render() {
let brand = <a href='#'>Project Name</a>;
return (
<Navbar brand={brand} fixedTop inverse toggleNavKey={0}>
<Nav right eventKey={0}>
<InlineLogin className='navbar-form' />
</Nav>
</Navbar>
);
}
}
Index.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/latest/css/bootstrap.min.css">
<title>DOGBOXUNITED</title>
<span id = 'Heading'> </span>
</head>
<body>
<div id='app'> </div>
<script src="output/myCode.js"></script>
</body>
</html>
Webpack Config
var webpack = require("webpack");
var path = require("path");
var DEV = path.resolve(__dirname, "dev");
var OUTPUT = path.resolve(__dirname, "output");
var config = {
entry: DEV + "/App.js",
output: {
path: OUTPUT,
filename: "myCode.js"
},
module: {
loaders: [{
include: DEV,
loader: "babel",
}]
}
};
module.exports = config;
Really appreciate any help!
485
Everything looks proper except this:
ReactDOM.render(
<HeaderNavigation/>,
<Body/>,
<Footer/>,
document.getElementById('app')
);
Since you wants to render more than one element, wrap them in a div it will work. Try this:
ReactDOM.render(
<div>
<HeaderNavigation/>
<Body/>
<Footer/>
</div>,
document.getElementById('app')
);
Check the jsfiddle: https://jsfiddle.net/4m3m7653/
147
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
