移動端跨平台開發，從零開始學習React Native。
第一個demo：列印Hello React
一、 知識點
- 需要将react的架構導入到項目中，注意browser.min.js也要導入
- type=“text/babel”
- ReactDOM.render是React的最基本方法用于将模闆轉為HTML語言，并插入指定的DOM節點。
ReactDOM.render(template,targetDOM)
<div>
- 傳入變量的話用{}包裹
二、demo代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="Hello"></div>
</body>
<script type="text/babel">
var hName = "Hello React!";
ReactDOM.render(
//死資料
// <h1>Hello React!</h1>,
// 變量用{}包裹
<h1>{hName}</h1>,
document.getElementById('Hello')
)
</script>
</html>
第二個demo：定義元件類
一、知識點
- 定義元件用React.createClass
- 用this.props來做簡單的資料傳遞
- 元件第一個字母大寫采用駝峰式命名
二、demo代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="Hello"></div>
</body>
<script type="text/babel">
//定義一個HelloMessage元件
var HelloMessage = React.createClass({
render: function(){
return <h1>Hello {this.props.hName}!</h1>;
}
});
ReactDOM.render(
<HelloMessage hName="React"/>,
document.getElementById('Hello')
)
</script>
</html>
第三個demo：元件的樣式
一、知識點
- 三種樣式：内聯樣式、對象樣式、選擇器樣式。内聯樣式和對象樣式類似，選擇器樣式和html相似
- 注意react樣式和html樣式的差別：
- html5以;結尾，React以,結尾
- HTML5中key、value都不加引号；React屬于JavaScript對象，key的名字不能出現-，需要使用駝峰式命名。如果value為字元串，需要加引号
- HTML5中，value如果是數字，需要帶機關，React中不需要帶機關
- 調用選擇器樣式，不能直接定義class而要用className，因為class是javascript中的保留字
二、demo代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
<!-- 選擇器樣式-->
<style>
.pStyle{
font-size:15px;
color: blue;
}
</style>
</head>
<body>
<div id="Hello"></div>
</body>
<script type="text/babel">
//對象樣式
var hStyle = {
backgroundColor:"gray",
fontSize:18,
color:"red"
};
var ShowMessage = React.createClass({
render:function(){
return(
//内聯樣式
<div style={{backgroundColor:"yellow",borderColor:"black",borderWidth:5,borderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.hName}</h1>
<p className="pStyle">{this.props.pName}</p>
</div>
);
}
});
ReactDOM.render(
<ShowMessage hName="您好" pName="React" />,
document.getElementById('Hello')
)
</script>
</html>
第四個demo：複合元件
一、知識點
- 簡單的将兩個元件組合在一起。（資料其實還是死的，怎麼傳活資料需要用props傳值，下一篇介紹）
二、demo代碼
<!DOCTYPE html>
<html >
<head>
<meta charset="UTF-8">
<title>React</title>
<script src="react/react.js"></script>
<script src="react/react-dom.js"></script>
<script src="react/browser.min.js"></script>
</head>
<body>
<div id="Hello"></div>
</body>
<script type="text/babel">
//功能：輸出網站的名字和網址，網址可點選
var WebName = React.createClass({
render:function(){
return <h1>百度網址</h1>;
}
});
var WebUrl = React.createClass({
render:function(){
return <a href="http://www.baidu.com" target="_blank" rel="external nofollow" >http://www.baidu.com</a>;
}
});
var WebShow = React.createClass({
render:function(){
return (
<div>
<WebName />
<WebUrl />
</div>
);
}
});
ReactDOM.render(
<WebShow />,
document.getElementById('Hello')
)
</script>
</html>
![新聞用戶端07 - 新聞詳情頁[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)