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

  • Destructuring

  • Template string

https://github.com/luisafvaca/reactWeek

https://luisafvaca.github.io/reactWeek/

Referencias

Preguntas

 

¡Gracias!

Made with Slides.com