React without ES6 and JSX
React
Week
Luisa Vaca
- Amo las plantas
(🌺🌻🌼🌷🌱🌲🌳🌴🌵🌾🌿🍁🍂)
- Los animales
(🐼🐙🐱🐘🐧🐞🐷🐮)
- Tengo 26 años
(🙎🏻)
- Soy Front-End Developer por pasión.
(💪🏻)
- Tengo dos años de experiencia y trabajo en Globant hace 1 año.
¿Qué es exactamente React?
React es una librería para construir interfaces de usuario.
¿Por qué decidí explicar esto ?
JSX - ES6
FLUX - REDUX
WEBPACK
¡Pure React!
Element vs Component
Element
Element
Es un objeto que representa un Nodo en el DOM.
Javascript podrá crear y destruir estos elementos sin mucho esfuerzo.
Javascript podrá analizar el objeto retornado por el método createElement a su vez analizar el DOM y actualizar el Dom en el sitio especifico dónde ocurrió el cambio.
El metodo para crear elementos con react sera: React.createElement()
-
Tag
-
{Classes -styles}
-
Children
React.createElement(component, props, ...children)//With jsx
<div className="containerCLass">
<h1 className="colorIdClass">
<input
type="range"
min='0'
max='255'
defaultValue="255"
onChange={ update }
>
</div>
//Without jsx
var inputPropierties = {
type: 'range',
min: '0',
max: '255',
defaultValue: this.props.default,
onChange: this.props.update
};
React.createElement('div', containerCLass,
React.createElement('h1', colorIdClass),
React.createElement('input', inputPropierties)
)
React.DOM()
//Lo que realmente retorna y se pasa al metodo render de React DOM:
{
type: 'div',
props: {
children: [
{
type: h1,
class: 'colorIdClass'
},
[...]
},
class: 'containerCLass'
]
}
//Lo que react DOM nos retornará:
<div class:"containerCLass">
<h1 class:"colorIdClass">
<input
type="range"
min='0'
max='255'
defaultValue="255"
>
</div>
React element, objeto que representa un nodo en el DOM
¡Finalmente será HTML!
😌
¿Recuerdan qué es HTML semántico?
Componentes
Stateful Component
Y
Stateless Component
Stateful Component
¡Un poco de historia de Javascript!
Clases
Code
//Without ES6
const MyElement = React.createClass({
render: function() {
return(
react.createElement('div', {className: 'test'}, 'Hola mundo')
);
}
});
//Whit ES6 and JSX
class MyElement extends React.Component {
render() {
return <h1 className='test'> Hola mundo</h1>;
}
}
React removió el método createClass() para la versión 16, así que en este caso se tendrá que instalar un paquete de NPM llamado create-react-class, que funciona igual.
Stateless Component
=
Pure function
Es6 no es solo Clases
-
Let y const
-
D estructuring -
Template string
Referencias
Preguntas
¡Gracias!
React Week
By LUISA FERNANDA VACA CORREA
React Week
Primera: Título, Segunda: Presentación speaker, Tercera en adelante: Contenido, (...) Antepenúltima: Referencias, Penúltima: Preguntas, Última: Gracias.
