admin管理员组

文章数量:1287595

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 ponents.

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=".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!

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 ponents.

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./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!

  • javascript
  • reactjs
Share Improve this question edited Mar 27, 2018 at 19:29 Mayank Shukla 104k19 gold badges162 silver badges145 bronze badges asked Jan 17, 2017 at 6:40 LeCodaLeCoda 1,0167 gold badges46 silver badges89 bronze badges 4
  • What is the error? – StateLess Commented Jan 17, 2017 at 7:22
  • None Given - Just won't display in browser – LeCoda Commented Jan 17, 2017 at 8:10
  • Take into account that react won't display any error on the browser, but on the console. – Eldelshell Commented Jan 17, 2017 at 8:52
  • hmm. There's no error in my node.js mand propmt. Where to check the console? – LeCoda Commented Jan 17, 2017 at 12:43
Add a ment  | 

1 Answer 1

Reset to default 9

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/4m3m7653/

本文标签： javascriptRender multiple components by ReactDOMStack Overflow

版权声明：本文标题：javascript - Render multiple components by ReactDOM - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741241737a2364113.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。