React.Js不会渲染我的代码 - 它是否可能是webpack问题?

时间:2017-01-14 16:01:08

标签: javascript webpack

此刻尝试学习react.js并希望得到一些帮助。

基本上我不能让这个代码渲染,它让我疯狂,我想知道它是否与代码完全相关,而是与webpack无法正常工作有关..

以下是代码 - 感谢帮助:

 - Body.jsx

import React from "react";
import ReactDOM from "react-dom";
/* 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';

const BodyComponent = React.createClass({
    render: function() {
        return (
            <div>
                <Jumbotron>
                    <Grid>
                        <h1>Hello, world!</h1>
                        <p>This is a template for a simple marketing or informational website. It includes a large
                            callout called a jumbotron and three supporting pieces of content. Use it as a starting
                            point to create something more unique.</p>
                    </Grid>
                </Jumbotron>

                <Grid>
                    <Row>
                        <Col md={4}>
                            <h2>Heading</h2>
                            <p>Adipisicing ratione incidunt eaque expedita rerum porro inventore. Nihil sit ipsam iure
                                officiis sit eos at quibusdam natus dignissimos natus dolore! Vel doloremque ipsa alias
                                nihil harum laborum necessitatibus rerum?</p>
                            <p><Button>View details »</Button></p>
                        </Col>
                        <Col md={4}>
                            <h2>Heading</h2>
                            <p>Sit quia nemo quis enim provident porro eaque accusamus tenetur provident aliquid
                                commodi? Velit nesciunt maiores obcaecati totam praesentium sint vitae exercitationem
                                quaerat maxime iusto et! Consequatur aspernatur sit impedit.</p>
                            <p><Button>View details »</Button></p>
                        </Col>
                        <Col md={4}>
                            <h2>Heading</h2>
                            <p>Dolor aliquid dolores perferendis repellendus cum! Quam maiores blanditiis cupiditate
                                voluptatibus voluptas aliquid nisi placeat tempora. Rem debitis accusamus pariatur
                                officia corrupti. Architecto fuga reiciendis quos rem hic? Suscipit dignissimos.</p>
                            <p><Button>View details</Button></p>
                        </Col>
                    </Row>
                </Grid>
            </div>
        );
    }
});


ReactDOM.render(
    BodyComponent,
    document.getElementByID('container')
);


This is the html part of the equation.

 - index.html

<!DOCTYPE html>
<html>

<head>
    <title>React! React! React!</title>
    <span id = "Heading"> </span>

    <script src="dev/index.jsx"></script>
</head>

<body>
<span id='container'> </span>

<script src="output/myCode.js"></script>
</body>

</html>

再次感谢大家的帮助!

0 个答案:

没有答案