此刻尝试学习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>
再次感谢大家的帮助!