CODEWITHSUNDEEP
javascriptreactjs
LeCoda
LeCoda

Reputation: 1016

Render multiple components by ReactDOM

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!

Upvotes: 3

Views: 14553

Answers (1)

Mayank Shukla
Mayank Shukla

Reputation: 104379

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/

Upvotes: 9

Related Questions