React

Piero Divasto

M.Sc. in Business Informatics

Lead Consultant @ ThoughtWorks

Community Lead (v) @ Facebook Developers Circle: Santiago

Agenda

  • Motivación

  • Que es React?

    • Virtual DOM

    • Component-based

    • Declarative vs Imperative

  • Componentes

    • Prop

    • State

    • Tipos de componentes

  • Component-lifecycle

    • Old & new

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/

A JavaScript library for building user interfaces

Que es React?

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

Virtual DOM

Que es React?

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

Component-based

Que es React?

Declarativo

is a programming paradigm—a style of building the structure and elements of computer programs—that expresses the logic of a computation without describing its control flow.

https://en.wikipedia.org/wiki/Declarative_programming

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

Prop-types

  • Provee una buena practica para definir las espectativas de los props desde el punto de visto del consumidor
  • Si no se cumple lo esperado, se genera un warning en consola
  • Librería externa a React

Componentes

https://reactjs.org/docs/typechecking-with-proptypes.html

Prop-types

  • array

  • bool

  • func

  • number

  • object

  • string

  • node

  • element

  • instanceOf(ClassName)

  • oneOf([‘News’, ‘Photos’])

  • oneOfType([PropTypes.type1, PropTypes.type2 ])

  • arrayOf(PropTypes.type)

  • objectOf(PropTypes.type)

  • shape({ prop1: PropTypes.type })

Componentes

State

  • Representan las propiedades internas del componente
  • Los states son modificables
  • Los cambios en el state son merged
  • 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
  }
});

Componentes

Stateless vs Stateful

Stateful

  • Classed-based*
  • Manejan estado interno
  • Tienen acceso a los métodos del ciclo de vida
  • componentes contenedores

Componentes

Stateless vs Stateful

Stateful

class HelloWorld extends React.Component {
    constructor(props) { super(props); }
    
    render() {
        return <div>Hello {this.props.name}</div>
    }
}

HelloWorld.propTypes = {
    name: PropTypes.string.isRequired
};

HelloWorld.defaultProps = {
    name: ''
};

ReactDOM.render(<HelloWorld name="World" />, mountNode);

Componentes

Stateless vs Stateful

Stateless

  • Function-based
  • Componentes más simples
  • No manejan un estado interno***
  • No tienen acceso a los métodos del ciclo de vida ***
  • Componentes presentacionales

*** ahora es posible con hooks

Componentes

Stateless vs Stateful

Stateless

const HelloWorld = props => {
    return (
        <div>Hello {props.name}</div>
    )
}

HelloWorld.propTypes = {
    name: PropTypes.string.isRequired
};

HelloWorld.defaultProps = {
    name: ''
};

ReactDOM.render(<HelloWorld name="World" />, mountNode);

Agreguémos state a nuestro componente!

Componentes

Component-lifecycle

Inicialización

Actualización

Destrucción

Componentes

Component-lifecycle - OLD

  • getInitialState()

  • getDefaultProps()

  • componentWillMount()

  • render()

  • componentDidMount()

     

  • componentWillReceiveProps()

  • shouldComponentUpdate()

  • componentWillUpdate()

  • render()

  • componentDidUpdate()

  • componentWillUnmount()

Inicialización

Actualización

Destrucción

Inicialización

Componentes

Component-lifecycle - OLD

Update

Componentes

Component-lifecycle - OLD

Destrucción

Componentes

Component-lifecycle - OLD

Componentes

Component-lifecycle - OLD

Mal uso de ciertos métodos

Conflicto con futuro async rendering

Componentes

Component-lifecycle - NEW

componentWillMount

componentWillReceiveProps

componentWillUpdate

getDerivedStateFromProps

getSnapshotBeforeUpdate

Componentes

Component-lifecycle - NEW

componentWillMount

componentWillReceiveProps

componentWillUpdate

UNSAFE_*

Componentes

Component-lifecycle - NEW

https://twitter.com/dan_abramov/status/981712092611989509

Componentes

Component-lifecycle - NEW

Componentes

Handling events

const HelloWorld = props => {
    return (
        <div
            onClick={(event) => {
              console.log('Ejecutando evento al hacer click')
            }}
        >
          Hello {props.name}
        </div>
    )
}

HelloWorld.propTypes = {
    name: PropTypes.string.isRequired
};

HelloWorld.defaultProps = {
    name: ''
};

ReactDOM.render(<HelloWorld name="World" />, mountNode);

Agreguémos acción a nuestro Contador!

CRA

Create React App

https://create-react-app.dev

CRA

Create React App

  1. Instalar node js

https://nodejs.org

CRA

Create React App

npx create-react-app my-app

Muchas gracias!

http://github.com/morph3o

https://medium.com/@pierodivasto

https://www.linkedin.com/in/pierodivasto

https://slides.com/morph3o

Aprendiendo React: Nivel 1

By Piero Divasto

Made with Slides.com

Aprendiendo React: Nivel 1

Primer nivel del curso de React. En este curso vamos a aprender a crear web-apps utilizando React. En este nivel báscio, vamos a aprender como funciona React, vamos a aprender conceptos como State, Props, etc.

  • 764

More from Piero Divasto