藍鷗React Native零基礎入門到項目實戰 Hello React
http://edu.csdn.net/course/detail/3129
組件
<!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> -->
<style>
.pStyle {
font-size: 20px;
}
</style>
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，作爲一個容器 -->
<div id="container">
</div>
</body>
<!-- 在React開發中，使用JSX，跟JavaScript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，ES6轉成可以在瀏覽器中運行的代碼 -->
<script type="text/babel">
// 在此處編寫React代碼
//
/*
創建一個組件類，用於輸出Hello React
1、React中創建的組件類以大寫字母開頭，駝峯命名法，
2、在React中使用React.createClass方法創建一個組件類
3、核心代碼：每個組件類都必須實現自己的render方法。輸出定義好的組件模板。返回值：null、false、組件模板
4、注意：組件類只能包含一個頂層標籤
*/
// var HelloMessage = React.createClass({
// render: function() {
// return <h1>Hello React</h1>;
// }
// });
//
// ReactDOM.render(
// // 在模板中插入<HelloMessage />會自動生成一個實例
// <HelloMessage />,
// document.getElementById("container")
// );
/*
給組件傳值
1、給組件設置自定義屬性
2、this.props（組件自身的屬性）
給組件設置的屬性，都會存儲在this.props對象中，this.props對象的屬性跟組件的屬性是一一對應
*/
/*
定義組件類，實現：組件從外部接收內容，並進行展示
*/
// 我們約定：用於傳值的屬性名稱helloText
//
// var HelloMessage = React.createClass({
//
// render: function() {
// /*
// this表示當前這個組件對象
// this.props.helloText 可以解釋：當前組件對象的 props對象中存儲的 helloText屬性中的值
// */
// return <h1>{this.props.helloText}</h1>;
// }
// });
//
// ReactDOM.render(
// <HelloMessage helloText="你好 藍鷗" />,
// document.getElementById("container")
// );
/*
設置組件的樣式，講解三種：
1、內聯樣式
2、對象樣式
3、選擇器樣式
注意：在React和HTML5中設置樣式時的書寫格式是有區別的
* 1、HTML5以;結尾
* React以,結尾
* 2、HTML5中key、value都不加引號
* React中屬於JavaScript對象，key的名字不能出現"-"，需要使用駝峯命名法。如果value爲
* 字符串，需要加引號。
* 3、HTML5中，value如果是數字，需要帶單位
* React中不需要帶單位
* 我們定義一個組件類，同時使用三種設置組件樣式的方式
* 需求：定義一個組件，分爲上下兩行顯示內容
* <div> 內聯樣式：設置背景顏色，邊框大小，邊框顏色
* <h1></h1> 對象樣式：設置背景顏色，字體顏色
* <p></p> 選擇器樣式：設置字體大小
* </div>
*
* 注意：在React中使用選擇器樣式設置組件樣式時，屬性名不能使用class，需要使用className替換。
* 類似的：使用htmlFor替換for
*/
/*
// 創建設置h1樣式對象
var hStyle = {
backgroundColor: "green",
color: "red"
}
var ShowMessage = React.createClass({
render: function() {
return (
<div style={{backgroundColor:"yellow", borderWidth:5, borderColor:"black", borderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.firstRow}</h1>
<p className="pStyle">{this.props.secondRow}</p>
</div>
);
}
});
ReactDOM.render(
<ShowMessage firstRow="你好" secondRow="藍鷗"/>,
document.getElementById("container")
);
*/
/*
複合組件
也被稱爲組合組件，創建多個組件合成一個組件
*/
/*
定義一個組件WebShow。功能：輸出網站的名字和網址，網址是一個可以點擊的鏈接
分析：定義一個組件WebName負責輸出網站名字，定義組件WebLink顯示網站的網址，並且可以點擊
*/
// 定義WebName組件
var WebName = React.createClass({
render: function() {
return <h1>藍鷗科技</h1>;
}
});
// 定義WebLink組件
var WebLink = React.createClass({
render: function() {
return <a href="http://www.lanou3g.com">http://www.lanou3g.com</a>
}
});
// WebShow
var WebShow = React.createClass({
render: function() {
return (
<div>
<WebName />
<WebLink />
</div>
);
}
});
ReactDOM.render(
<WebShow />,
document.getElementById("container")
);
</script>
</html>