React
Motivación
Motivación
Motivación
Motivación
Motivación
Que es React?
Es una libreria Opensourse creada por un equipo de facebook para la creación de interfaz de usuario de aplicaciones de una sola página
React nace a base de un problema de rendimiento, que sufrio Facebook, esta venia trabajando con un sistema típico de enlace de vistas a datos
Que es React?
Virtual DOM
Don a mano genera código repetitivo y propenso a errores.
React usa su propio don virtual,
Que es React?
Component-based
Que es React?
Declarativo
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>
);
}
}Imperativo
Declarativo
Componentes
Componente
props
state
DOM
Componentes
Props
- Representan las propiedades del componente
- Las props son pasadas como input al componente
- Las props son inmutables
Componentes
State
- Representan las propiedades internas del componente
- Los states son modificables
- Nadie más puede acceder al state que el mismo componente
Componentes
State
// El estado NO se actualiza directamente
// Lo siguiente esta malo
this.state.nombre = "Peter"
// El estado se actualiza utilizandola función setState
this.setState({ nombre: "Peter" });
// Ahora, React, por temas de performance, ejecuta multiples setState
// en modo batch mergeando los cambios de estado. Además, los cambios del
// state y props pueden ser asyncronos. Por lo tanto es mejor utilizar la
// otra forma de actualizar el state.
this.setState((state, props) => {
return {
counter: state.counter + props.increment
}
});CRA
Create React App
CRA
Create React App
- Instalar node js
CRA
Create React App
npx create-react-app my-appEmpresas que usan reactjs
React JS
By rene lujano laura
React JS
Primer nivel del curso de React. En este curso vamos a aprender a crear web-apps utilizando React. En este nivel báscio, vamos a aprender como funciona React, vamos a aprender conceptos como State, Props, etc.
