新公司的项目前端架构用的是react.js 之前孤陋寡闻并没听说过，想着后期开发和维护多少要会点前端的东西，就简单研究一下。个人的学习习惯能写代码的就不写文字，必要的地方加两行注释，代码一行行敲下去，运行过有问题及时发现，存档当作日后小问题备查的工具。感觉前端尤如玄学，标点啥的处处要留心，一个后台的多少懂点吧。
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello React!</title>
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
</head>
<body> <div id="example"></div>
<script type="text/babel">
/**
function tick() {
const element = (
<div>
<h1>Hello, world!</h1>
<h2>现在是 {new Date().toLocaleTimeString()}.</h2>
</div>
)
ReactDOM.render(
element,
document.getElementById('example')
)
}
setInterval(tick, 1000);
*/
/*自定义方法标签 < Clock date = {new Date()} />, date为其中一参数，可理解为属性*/
/**
function Clock(props){
return(
<div>
<h1>Hello, world!</h1>
<h2>现在是 {props.date.toLocaleTimeString()} {props.name}.</h2>
</div>
)
} function tick() {
ReactDOM.render(
<Clock date={new Date()} name='slowcity' />,
document.getElementById('example')
);
} setInterval(tick, 1000);
*/ /*自定义类标签 < Clock date = {new Date()} />, date为类对象*/
/**
class Clock extends React.Component{
render(){
return(
<div>
<h1>hello world </h1>
<h2>现在是{ this.props.date.toLocaleTimeString()}</h2>
</div>
)
}
}
function tick(){
ReactDOM.render(
< Clock date = {new Date()} />,
document.getElementById('example')
)
}
setInterval(tick,1000)
*/ /*当element有多个标签时，多个标签放在div标签内部
React 推荐使用内联样式。我们可以使用 camelCase 语法来设置内联样式. React 会在指定元素数字后自动添加 px
添加myStyle内联样式
*/ var i = 3;
var myStyle = {
fontSize: 20,
color: '#FF0000'
};
const element = (
<div>
{/*注释需要写在花括号中... react不支持ifelse 但支持三元运算*/}
<h1>Hello, world! { i==2?'ture':'false'}</h1>
<h1 style = {myStyle}>Hello, world! { i==2?1+1:4}</h1>
<h1>Hello, world! { i==3?'ture':'false'}</h1>
</div> ) ReactDOM.render(
element,
document.getElementById('example')
); </script> </body>
</html>