React

Que es React?

https://reactjs.org/

Es una libreria Opensourse

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

Copy of Aprendiendo React: Nivel 1

By rusiby Chura

Source: Piero Divasto

Copy of 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.

  • 313

More from rusiby Chura