<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>React样式测试</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 的作用是将JSCX语法转换成Javascript的语法 -->
<script src="./build/browser.min.js" charset="utf-8"></script>
<!-- 还可以直接通过网址引入browser.min.js文件 -->
<!-- 比如：<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.24/browser.min.js" charset="utf-8"></script> -->
<style>
.pStyle {
font-size:30px;
}
.color{
color:#f00;
background:#f00;
font-size:50px;
}
</style>
</head>
<body>
<!-- React渲染的模板内容会插入到这个DOM节点中，作为一个容器 -->
<div id="container">
</div>
**<!-- 在React开发中，使用JSX，跟Javascript不兼容，在使用JSX的地方，要设置type：text/babel -->
<!-- babel是一个转换编译器，把ES6转成可以在浏览器中运行的代码 -->
设置组件样式，讲解三种：
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> 选择器样式：设置字体大小
<span></span> 动态添加样式（动态添加选择器样式）
</div>
注意：在React中使用选择器设置组件样式时，属性名不能使用class，需要使用className替换
（因为class在React中是一个关键字）
类似的：使用htmlFor替换for
**如果需要动态添加样式可以在setState里面修改**
<script type="text/babel">
var hStyle = {
backgroundColor: "green",
color: "red"
}
var ShowMessage = React.createClass({
getInitialState:function(){
return {color:""}
},
mouseover:function(){
this.setState({addClass:"color"})
},
render: function() {
return (
// 注意；这里的backgroundColor,中间不能加“-”
<div style={{backgroundColor:"#ccc", borderWidth:5, borderColor:"brack", broderStyle:"solid"}}>
<p className="pStyle">{this.props.title}</p>
<h1 style={hStyle}>{this.props.name}</h1>
<span className={this.state.addClass} onMouseOver={this.mouseover}>测试鼠标滑过效果</span>
</div>
);
}
});
ReactDOM.render(
<ShowMessage name="鹏鹏" title="名字" />,
document.getElementById("container")
);
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。