React es una librería JavaScript para construir interfaces de usuario. Usa el concepto de componentes y el Virtual DOM para renderizar la interfaz de forma rápida y escalable. Los componentes se definen como clases de JavaScript o funciones y manejan su propio estado interno. React también incluye JSX, una extensión de JavaScript que facilita la escritura de código declarativo para describir qué se muestra en la pantalla.

2. Piero A. Divasto Martínez
pdivasto@gmail.com
Intro a React

3. ¿Qué es React?
Piero Divasto

4. Librería JavaScript para
construir interfaces de usuario
Piero Divasto

5. Rápido, simple y escalable

6. Virtual DOM DOM
Piero Divasto

7. Virtual DOM DOM
Patch
Piero Divasto

8. Component-based
<div>Hola Mundo</div>
class HelloMessage extends React.Component {
render() {
return React.createElement(
"div",
null,
“Hola ",
this.props.name
);
}
}
ReactDOM.render(<HelloMessage name="Mundo" />, mountNode);
Piero Divasto

9. JSX
class HelloMessage extends React.Component {
render() {
return <div>Hello {this.props.name}</div>;
}
}
ReactDOM.render(<HelloMessage name="Mundo" />, mountNode);
<div>Hola Mundo</div>
Piero Divasto

10. const container =
document.getElementById('container');
const btn = document.createElement('button');
btn.className = 'btn red';
btn.onclick = function(event) {
if (this.classList.contains('red')) {
this.classList.remove('red');
this.classList.add('blue');
} else {
this.classList.remove('blue');
this.classList.add(‘red');
}
};
container.appendChild(btn);
class Button extends React.Component{
this.state = { color: 'red' };
handleChange = () => {
const color =
this.state.color === 'red' ? 'blue' : 'red';
this.setState({ color });
};
render() {
return (
<div>
<button
className=`btn ${this.state.color}`
onClick={this.handleChange}>
</button>
</div>
);
}
}
Declarativo
Piero Divasto

11. Demo

12. ¿Quién usa React?
Piero Divasto

13. Piero Divasto

16. • Rápido de aprende
• El uso de componentes reusables, componibles y stateful
• La rapidez para actualizar la UI
Conclusión
Piero Divasto

17. Gracias