Recently, I feel that I have little control, so I started to explore React. . Write something to deepen your memory
1. Rendering'Hello, World!', the only way to learn a new skill
ReactDOM.render(
<div>Hello,World!</div>,
document.getElementById('root')
)；
2. Learned JSX, a variable that looks like html
const element = <div>Hello,World!</div>;
const user = {
firstName: 'Tom',
secondName: 'Jack'
}
const element2 = <div>This is a newcomer, {user.firstName} and {user.secondName}</div>
3. Components
function Hello(porps){
return <h1>Hello,{props.name}</h1>
}
or
class Hello extends React.Component{
render () {
return <h1>Hello,{this.props.name}</h1>
}
}
After the same rendering
const element = <Hello name='Tom' />;
ReactDOM.render(
element,
document.getElementById('root')
)；
Based on the above knowledge, I wrote a real-time clock (similar):
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)
First here, I feel very new to ES6 and need to be strengthened. . Well, keep working hard!