React中組件的樣式有三種：
<!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;
}
</style>
</head>
<body>
<!-- React渲染的模板內容會插入到這個DOM節點中，作為一個容器 -->
<div id="container">
</div>
<!-- 在React開發中，使用JSX，跟Javascript不兼容，在使用JSX的地方，要設置type：text/babel -->
<!-- babel是一個轉換編譯器，把ES6轉成可以在瀏覽器中運行的代碼 -->
<script type="text/babel">
<!-- 在此處編寫React代碼 -->
<!--
設置組件樣式，講解三種：
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替換
（因為class在React中是一個關鍵字）
類似的：使用htmlFor替換for
-->
var hStyle = {
backgroundColor: "green",
color: "red"
}
var ShowMessage = React.createClass({
render: function() {
return (
// 注意；這里的backgroundColor,中間不能加“-”
<div style={{backgroundColor:"yellow", borderWidth:5, borderColor:"brack", broderStyle:"solid"}}>
<h1 style={hStyle}>{this.props.firstRow}</h1>
<p className="pStyle">{this.props.secondRow}</p>
</div>
);
}
});
ReactDOM.render(
<ShowMessage firstRow="你好" secondRow="小豆豆" />,
document.getElementById("container")
);
</script>
</body>
</html>