React 起源于 Facebook 的内部项目，因为该公司对市场上所有 JavaScript MVC 框架，都不满意，就决定自己写一套，用来架设 Instagram 的网站。做出来以后，发现这套东西很好用，就在2013年5月开源了。
由于 React 的设计思想极其独特，属于革命性创新，性能出众，代码逻辑却非常简单。所以，越来越多的人开始关注和使用，认为它可能是将来 Web 开发的主流工具。
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>
代码运行结果如下：
运行结果显示
二、第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>
网友评论