Piero Divasto
Full-stack developer
Full-stack Developer
Nisum
https://stateofjs.com/2017/front-end/results
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 Component {
constructor() {
this.state = { color: 'red' };
}
handleClick = () => {
const color =
this.state.color === 'red' ? 'blue' : 'red';
this.setState({ color });
};
render() {
return (
<div>
<button
className=`btn ${this.state.color}`
onClick={this.handleClick}
/>
</div>
);
}
}
BlogPost
PostTitle
PostBody
PostComments
Comment
Comment
class HelloWorld extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hola ",
this.props.name
);
}
}
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
<div>Hola Mundo</div>
class HelloWorld extends React.Component {
render() {
return React.createElement(
"div",
null,
"Hola ",
this.props.name
);
}
}
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
class HelloWorld extends React.Component {
constructor(props) { super(props); }
render() {
return <div>Hola {this.props.name}</div>
}
}
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
Componente
props
Representa propiedades del componente
Inmutables
Pasados como parametro
class HelloWorld extends React.Component {
constructor(props) { super(props); }
render() {
return <div>Hola {this.props.name}</div>
}
}
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
Buena práctica usarlos
Define el tipo de props que el componente espera
Genera warnings en browser
array | instanceOf(className) |
number | oneOf() |
string | oneOfType() |
bool | arrayOf() |
object | objectOf() |
node | shape() |
element | |
func |
class HelloWorld extends React.Component {
constructor(props) { super(props); }
render() {
return <div>Hola {this.props.name}</div>
}
}
HelloWorld.propTypes = {
name: PropTypes.string.isRequired
};
HelloWorld.defaultProps = {
name: ''
};
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
Representa estado interno del componente
NO son inmutables
Cambios en el state son "merged"
Solamente pueden ser accedido por el mismo componente
class HelloWorld extends React.Component {
constructor(props) {
super(props);
this.state = {
param: '',
param2: ''
};
}
algunMetodo() {
this.setState({ param: 'nuevo valor' });
}
render() {
return <div>Hola {this.props.name}</div>
}
}
HelloWorld.propTypes = {
name: PropTypes.string.isRequired
};
HelloWorld.defaultProps = {
name: ''
};
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
Inicialización
Update
Destrucción
Inicialización
Update
Destrucción
getInitialState()
getDefaultProps()
componentWillMount()
render()
componentDidMount()
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
componentDidUpdate()
componentWillUnmount()
Inicialización
Update
Destrucción
Mal uso de ciertos métodos
Conflicto con futuro async rendering
componentWillMount
componentWillReceiveProps
componentWillUpdate
getSnapshotBeforeUpdate
componentWillMount
componentWillReceiveProps
componentWillUpdate
UNSAFE_*
https://twitter.com/dan_abramov/status/981712092611989509
const HelloWorld = props => {
return (
<div>Hola {props.name}</div>
)
}
HelloWorld.propTypes = {
name: PropTypes.string.isRequired
};
HelloWorld.defaultProps = {
name: ''
};
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
class HelloWorld extends React.Component {
constructor(props) { super(props); }
render() {
return <div>Hola {this.props.name}</div>
}
}
HelloWorld.propTypes = {
name: PropTypes.string.isRequired
};
HelloWorld.defaultProps = {
name: ''
};
ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
- Ampliamente utilizado a nivel mundial, entre ellos grandes empresas
- Fácil de aprender y entender en un corto plazo
- Desarrollo rápido
- Mejora reuso de código
- SEO Friendly
- Dev Tools
- Excelente performance (Virtual DOM)
- React-native
- Solo se enfoca en la UI
- Difícil encontrar devs con experiencia*
- Fácil de aprender, pero toma tiempo de manejar
- Menos performante que otras alternativas (pequeñas diferencias)
https://bit.ly/2wrsJEy
http://github.com/morph3o
https://medium.com/@pierodivasto
https://www.linkedin.com/in/pierodivasto
By Piero Divasto
Presentation about React