【React-2】组件开发初步探索

版权声明:本文为博主原创文章,未经博主允许不得转载。 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

猜你喜欢

转载自blog.csdn.net/u011240016/article/details/84960195