最近感觉自己掌握的东西有点少啊,于是开始了对于react的摸索。。写点东西加深记忆吧
1. 渲染'Hello,World!',学习一个新技能的必经之路啊
ReactDOM.render(
<div>Hello,World!</div>,
document.getElementById('root')
);
2.学习到了JSX,一个看着像是html的变量
const element = <div>Hello,World!</div>;
const user = {
firstName: 'Tom',
secondName: 'Jack'
}
const element2 = <div>这是新来的同学,{user.firstName}和{user.secondName}</div>
3. 组件
function Hello(porps){
return <h1>Hello,{props.name}</h1>
}
或者
class Hello extends React.Component{
render () {
return <h1>Hello,{this.props.name}</h1>
}
}
之后同样的渲染
const element = <Hello name='Tom' />;
ReactDOM.render(
element,
document.getElementById('root')
);
在以上知识基础上,写了一个实时的时钟(类似):
fuction Clock(props){
return (
<div>
<h1>Hello,World!</h1>
<h2>It is {props.date.toLocaleTimeString()}</h2>
</div>
)
}
function tick(){
ReactDOM.render(
<Clock date={new Date()} />,
document.getElementById('root')
)
}
setInterval(tick,1000)
先到这里,感觉对于ES6很陌生,需要加强。。恩,继续努力!