Recientemente, siento que tengo poco control, así que comencé a explorar React. . Escribe algo para profundizar tu memoria
1. Representar "¡Hola, mundo!", La única forma de aprender una nueva habilidad
ReactDOM.render (
<div> ¡Hola, mundo! </div>,
document.getElementById ('raíz')
) ；
2. Aprendió JSX, una variable que parece html
const element = <div> ¡Hola, mundo! </div>;
usuario constante = {
nombre: 'Tom',
secondName: 'Jack'
}
const element2 = <div> Este es un recién llegado, {user.firstName} y {user.secondName} </div>
3. Componentes
función Hola (porps) {
return <h1> Hola, {props.name} </h1>
}
o
class Hello extiende React.Component {
render () {
return <h1> Hola, {this.props.name} </h1>
}
}
Después del mismo renderizado
elemento const = <Hola nombre = 'Tom' />;
ReactDOM.render (
elemento,
document.getElementById ('raíz')
) ；
Basado en el conocimiento anterior, escribí un reloj en tiempo real (similar):
Reloj de funciones (accesorios) {
regreso (
<div>
<h1> ¡Hola, mundo! </h1>
<h2> Es {props.date.toLocaleTimeString ()} </h2>
</div>
)
}
función tick () {
ReactDOM.render (
<Fecha del reloj = {nueva fecha ()} />,
document.getElementById ('raíz')
)
}
setInterval (tick, 1000)
Primero aquí, me siento muy nuevo en ES6 y necesito ser fortalecido. . Bueno, ¡sigue trabajando duro!