Hoy estamos on-fire, dos entradas en el mismo día, aunque es justo decir que han sido dos entradas en las que casi no he tenido ni que pensar. La cuestión es que a lo largo de la tarde de ayer, hemos tenido una pequeña discusión con los miembros más junior del equipo, sobre las diferentes formas en que React es capaz de hacer llamadas a eventos dentro de los componentes que declaramos. La cuestión era bastante trivial, si un JSX es un fichero que realmente es un Javascript, como diferenciar los diferentes mecanismos para que resultase fácil de acordarse de estos, algo muy común sobre todo cuando estás desarrollando aplicaciones en React y estás muy al comienzo de tu carrera como Front-End developer.
Pues al tema entonces, en React hay diferentes maneras de embeber expresiones y manipuladores de eventos, los más usuales son:
- Con una función anónima en línea de ES5:
javascriptCopy codeelement.addEventListener('click', function() {
console.log('Algunas palabras');
});
- Con una función anónima en línea de ES6 (una función de flecha):
javascriptCopy codeelement.addEventListener('click', () => {
console.log('Algunas palabras');
});
- Usando una declaración de función separada:
javascriptCopy codefunction handleClick() {
console.log('Algunas palabras');
}
element.addEventListener('click', handleClick);
- Usando una expresión de función separada:
javascriptCopy codeconst handleClick = function() {
console.log('Algunas palabras');
};
element.addEventListener('click', handleClick);
Y ya está, a nivel básico no es necesario complicarse con otros temas, indudablemente esto solo toca la punta del iceberg pero si estás empezando con React, no te compliques la vida, recuerda que un JSX es un fichero Javascript con ciertas particularidades y que lo que ya sepas de este lenguaje te seguirá sirviendo.
Happy coding!!!
Más sobre entradas en mi Blog sobre React: