移动端跨平台开发，从零开始学习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=)