¿Por que estoy tan feliz con ellos?
Sergio Marin
@highercomve
Mi nombre es Sergio Marin y soy un desarrollador web como tu.
Software Engineer
class App extends React.Component {
constructor (props) {
super(props)
this.state = { counter: 0 }
this.counterHandler = this.counterHandler.bind(this)
}
counterHandler(event) {
event.preventDefault()
const step = Number(event.target.dataset.amount || 0)
this.setState((state, props) => {
return { counter: state.counter + step }
})
}
render () {
return (
<div>
{this.state.counter}
<br/>
<button data-amount="1" onClick={this.counterHandler}>
Add
</button>
<button data-amount="-1" onClick={this.counterHandler}>
Remove
</button>
</div>
)
}
}
ReactDOM.render(<App/>, document.getElementById('app'))
¿Que pasa si la logica de estados que esta ahi la quiero combertir en una libreria?
¿Como compartiria esa logica de estado entre dos componentes?
¿Que pasa si el estado depende de un evento como el cambio del ancho de la pantalla?
¿O si al cambiar dicho estado necesito realizar un efecto en localStorage, cache, servicio, etc?
import React, { useState } from 'react'
import ReactDOM from 'react-dom'
function App (props) {
const [count, setCount] = useState(0)
const counterHandler = (event) => {
event.preventDefault()
const step = Number(event.target.dataset.amount || 0)
setCount(count + step)
}
return (
<div>
{this.state.counter}
<br />
<button data-amount='1' onClick={counterHandler}>
Add
</button>
<button data-amount='-1' onClick={counterHandler}>
Remove
</button>
</div>
)
}
ReactDOM.render(<App />, document.getElementById('app'))
y no me dio tiempo de agregar mas cosas a la presentacion