版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u011240016/article/details/84960195
得强调的是,在React 16之后,React.createClass
语法就没了,取代的是class Welcome extends React.Component{}
,在后面的项目中会用最新版本的写。
这里暂时以0.14.7作为学习版本,核心逻辑没有大的不同,细节之处需要额外注意。
另外,browser
的版本,也没有用最新的6.xx版本,用的是5.8.25.
<!DOCTYPE html>
<html>
<head>
<title>
Learning React.js
</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<script src="https://unpkg.com/[email protected]/dist/react.js"></script>
<script src="https://unpkg.com/[email protected]/dist/react-dom.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.25/browser.min.js"></script>
</head>
<body>
<div class="container">
<div clas="row">
<div class="col-md-12">
<div id="jumbotron">
</div>
</div>
</div>
</div>
<!-- 注意在React16以后,createClass已经弃用了 -->
<script type="text/babel">
var Jumbotron = React.createClass({
render: function() {
return(
<div>
<div className="jumbotron">
<h1 class="display-4">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
<a className="btn btn-primary btn-lg" href="#" role="button">Learn more</a>
</div>
</div>
)
}
});
// 将组件渲染到id为jumbotron的div中
ReactDOM.render(
<Jumbotron />,
document.getElementById('jumbotron'));
</script>
</body>
</html>
END.
参考:
https://www.youtube.com/watch?v=CVigtRUxj2I&list=PLillGF-RfqbbKWfm3Y_RF57dNGsHnkYqO&index=4