React-菜鸟学习笔记（一）
新公司的项目前端架构用的是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 = (
Hello, world!
现在是 {new Date().toLocaleTimeString()}.
)
ReactDOM.render(
element,
document.getElementById('example')
)
}
setInterval(tick, 1000);
*/
/*自定义方法标签 < Clock date = {new Date()} />, date为其中一参数，可理解为属性*/
/**
function Clock(props){
return(
Hello, world!
现在是 {props.date.toLocaleTimeString()} {props.name}.
)
}
function tick() {
ReactDOM.render(
hello world
现在是{ this.props.date.toLocaleTimeString()}
)
}
}
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>