React

Motivación

https://2019.stateofjs.com/front-end-frameworks/

Motivación

https://research.hackerrank.com/developer-skills/2019

Motivación

https://insights.stackoverflow.com/survey/2019#most-loved-dreaded-and-wanted

Motivación

https://www.jetbrains.com/lp/devecosystem-2019/javascript/

Motivación

https://www.getonbrd.cl/jobs/tag/react

Que es React?

https://reactjs.org/

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?

https://davidjaimes.co/blog/introduccion-a-reactjs/

Virtual DOM

Don a mano genera código repetitivo y propenso a errores.

React usa su propio don virtual,

Que es React?

https://davidjaimes.co/blog/introduccion-a-reactjs/

Component-based

Que es React?

https://codeburst.io/declarative-vs-imperative-programming-a8a7c93d9ad2

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

Mi primer componente!

https://codesandbox.io/

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
  }
});