React 起源于 Facebook 的內(nèi)部項目，因為該公司對市場上所有 JavaScript MVC 框架，都不滿意，就決定自己寫一套，用來架設(shè) Instagram 的網(wǎng)站。做出來以后，發(fā)現(xiàn)這套東西很好用，就在2013年5月開源了。
由于 React 的設(shè)計思想極其獨特，屬于革命性創(chuàng)新，性能出眾，代碼邏輯卻非常簡單。所以，越來越多的人開始關(guān)注和使用，認(rèn)為它可能是將來 Web 開發(fā)的主流工具。
css的使用
一、第1種修飾方法，代碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
<style type="text/css">
.one{
color:red;
}
</style>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
//添加組件屬性，有一個地方需要注意，就是 class 屬性需要寫成 className ，for 屬性需要寫成 htmlFor ，這是因為 class 和 for 是 JavaScript 的保留字。
return <div className="one">Hello {this.props.title} {this.props.name}</div>;
}
});
ReactDOM.render(
<HelloMessage name="John" title="Mr"/>,
document.getElementById('example')
);
</script>
</body>
</html>
代碼運行結(jié)果如下：
運行結(jié)果顯示
二、第2種修飾方法，代碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
return <div style={{color:'red'}}>Hello {this.props.title} {this.props.name}</div>;
}
});
ReactDOM.render(
<HelloMessage name="John" title="Mr"/>,
document.getElementById('example')
);
</script>
</body>
</html>
三、第3種修飾方法，代碼如下：
<!DOCTYPE html>
<html>
<head>
<script src="../build/react.js"></script>
<script src="../build/react-dom.js"></script>
<script src="../build/browser.min.js"></script>
</head>
<body>
<div id="example"></div>
<script type="text/babel">
var HelloMessage = React.createClass({
render: function() {
var styleObj={
color:'red',
fontSize:'44px', // fontSize使用駝峰表示
};
return <div style={styleObj}>Hello {this.props.title} {this.props.name}</div>;
}
});
ReactDOM.render(
<HelloMessage name="John" title="Mr"/>,
document.getElementById('example'));
document.getElementById('example').style.paddingLeft='104px';//paddingLeft使用駝峰表示
</script>
</body>
</html>
