藍鷗React Native零基礎入門到項目實戰 Hello React
http://edu.csdn.net/course/detail/3129
props
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!-- react.js是React的核心庫 -->
<script src="./build/react.js" charset="utf-8"></script>
<!-- react-dom.js的作用是提供與DOM相關的功能 -->
<script src="./build/react-dom.js" charset="utf-8"></script>
<!-- browser.min.js的作用是將JSX語法轉換成JavaScript語法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，作爲一個容器 -->
<div id="container">
</div>
</body>
<!-- 在React開發中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，ES6轉成可以在瀏覽器中運行的代碼 -->
<script type="text/babel">
// 在此處編寫React代碼
/*
props、state
props是組件自身的屬性，一般用於嵌套的內外層組件中，負責傳遞信息(通常是由父層組件向子層組件傳遞)
注意：props對象中的屬性與組件的屬性一一對應，不要直接去修改props中屬性的值
*/
/*
定義一個組件WebShow。功能：輸出網站的名字和網址，網址是一個可以點擊的鏈接
分析：定義一個組件WebName負責輸出網站名字，定義組件WebLink顯示網站的網址，並且可以點擊
思路：
1、給WebShow設置兩個屬性，wname,wlink
2、WebShow的props對象增加了兩個屬性值
3、WebName從WebShow的props對象中獲取wname的值，即網站的名稱。
*/
/*
// 定義WebName
var WebName = React.createClass({
render: function() {
return <h1>{this.props.webname}</h1>;
}
});
// 定義WebLink
var WebLink = React.createClass({
render: function() {
return <a href={this.props.weblink}>{this.props.weblink}</a>;
}
});
// 定義WebShow
var WebShow = React.createClass({
render: function() {
return (
<div>
<WebName webname={this.props.wname} />
<WebLink weblink={this.props.wlink} />
</div>
);
}
});
// 渲染
ReactDOM.render(
<WebShow wname="藍鷗科技" wlink="http://www.lanou3g.com" />,
document.getElementById("container")
);
*/
/*
...this.props
props提供的語法糖，可以將父組件中的全部屬性都複製給子組件
需求：定義一個組件Link，Link組件中只包含一個<a>，我們不給<a>設置任何屬性，所有屬性全部從父組件複製得到
*/
// var Link = React.createClass({
// render: function() {
// return <a {...this.props}>{this.props.name}</a>
// }
// });
//
// ReactDOM.render(
// <Link href="http://www.lanou3g.com" name="藍鷗科技" />,
// document.getElementById("container")
// );
/*
this.props.children
children是一個例外，不是跟組件的屬性對應的。
表示組件的所有子節點
HTML5中有一種標籤：列表 <ul> <ol> <li>
定義一個列表組件，列表項中顯示的內容，以及列表項的數量都由外部決定
*/
// var ListComponent = React.createClass({
// render: function() {
// return (
// <ul>
// {
// /*
// 列表項數量以及內容不確定，在創建模板時才能確定
// 利用this.props.children從父組件獲取需要展示的列表項內容
//
// 獲取到列表項內容後，需要遍歷children，逐項進行設置
// 使用React.Children.map方法
// 返回值：數組對象。這裏數組中的元素是<li>
//
// */
// React.Children.map(this.props.children, function(child){
// // child是遍歷得到的父組件的子節點
// return <li>{child}</li>
// })
//
// }
// </ul>
// );
// }
// });
//
// ReactDOM.render(
// (
// <ListComponent>
// <h1>藍鷗科技</h1>
// <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
// </ListComponent>
// ),
// document.getElementById("container")
// );
/*
屬性驗證 propTypes
組件類的屬性
用於驗證組件實例的屬性是否符合要求
*/
// var ShowTitle = React.createClass({
// propTypes: {
// // title數據類型必須爲字符串
// title: React.PropTypes.string.isRequired
// },
// render: function() {
// return <h1>{this.props.title}</h1>
// }
// });
//
// ReactDOM.render(
// <ShowTitle title=123 />,
// document.getElementById("container")
// );
/*
設置組件屬性的默認值
通過實現組件的getDefaultProps方法，對屬性設置默認值
*/
// var MyTitle = React.createClass({
// getDefaultProps: function() {
// return {
// title: "藍鷗科技"
// };
// },
// render: function() {
// return <h1>{this.props.title}</h1>
// }
// });
//
// ReactDOM.render(
// <MyTitle />,
// document.getElementById("container")
// );
</script>
</html>