React

Piero Divasto

Full-stack Developer

Nisum

Motivación

Motivación

https://stateofjs.com/2017/front-end/results

Motivación

Que es React?

Librería JavaScript para construir interfaces de usuario

Historia

Creado por Jordan Walke

Inspirado en XHP, framework de componentes HTML para PHP

Open-sourced en 2013

Como funciona?

Características

Declarativo

Component-based

Learn once, write everywhere

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 Component {
    constructor() {
        this.state = { color: 'red' };
    }

    handleClick = () => {
        const color = 
            this.state.color === 'red' ? 'blue' : 'red';
        this.setState({ color });
    };

    render() {
        return (
            <div>
                <button
                    className=`btn ${this.state.color}`
                    onClick={this.handleClick}
                />
            </div>
        );
    }
}

Component-Based

Component-Based

BlogPost

PostTitle

PostBody

PostComments

Comment

Comment

Component-Based

class HelloWorld extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            "Hola ",
            this.props.name
        );
    }
}

ReactDOM.render(<HelloWorld name="Mundo" />, mountNode);
<div>Hola Mundo</div>

Learn once, write anywhere

No depende de otras tecnologías

API pequeña

Curva de aprendizaje empinada

Conceptos

JSX

Props & PropTypes

State

JSX

Extensión de Javascript

NO ES HTML!

Facilitar el desarrollo de componentes

JSX

class HelloWorld extends React.Component {
    render() {
        return React.createElement(
            "div",
            null,
            "Hola ",
            this.props.name
        );
    }
}

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

JSX

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

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

Props

Componente

props

Props

Representa propiedades del componente

Inmutables

Pasados como parametro

Props

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

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

PropTypes

Buena práctica usarlos

Define el tipo de props que el componente espera

Genera warnings en browser

PropTypes

array instanceOf(className)
number oneOf()
string oneOfType()
bool arrayOf()
object objectOf()
node shape()
element
func

PropTypes

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

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

HelloWorld.defaultProps = {
    name: ''
};

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

State

Representa estado interno del componente

NO son inmutables

Cambios en el state son "merged"

Solamente pueden ser accedido por el mismo componente

State

class HelloWorld extends React.Component {
    constructor(props) { 
        super(props); 
        this.state = {
            param: '',
            param2: ''
        };
    }

    algunMetodo() {
        this.setState({ param: 'nuevo valor' });
    }
    
    render() {
        return <div>Hola {this.props.name}</div>
    }
}

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

HelloWorld.defaultProps = {
    name: ''
};

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

Ciclo de vida de los componentes

Inicialización

Update

Destrucción

Ciclo de vida de los componentes

Inicialización

Update

Destrucción

getInitialState()

getDefaultProps()

componentWillMount()

render()

componentDidMount()

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

componentWillUnmount()

Ciclo de vida de los componentes

Inicialización

Ciclo de vida de los componentes

Update

Ciclo de vida de los componentes

Destrucción

Ciclo de vida de los componentes

Nuevos métodos de ciclo de vida

Mal uso de ciertos métodos

Conflicto con futuro async rendering

Nuevos métodos de ciclo de vida

componentWillMount

componentWillReceiveProps

componentWillUpdate

getSnapshotBeforeUpdate

Nuevos métodos de ciclo de vida

componentWillMount

componentWillReceiveProps

componentWillUpdate

UNSAFE_*

Nuevos métodos de ciclo de vida

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

Tipos de componentes

Stateless vs Stateful

Stateless

Componente más básico

No maneja estado interno

No tiene acceso a métodos del ciclo de vida

Presentation component

Stateless

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

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

HelloWorld.defaultProps = {
    name: ''
};

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

Stateful

Maneja estado interno

Tiene acceso a métodos del ciclo de vida

Container component / Class-based component

Stateful

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

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

HelloWorld.defaultProps = {
    name: ''
};

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

Beneficios

- Ampliamente utilizado a nivel mundial, entre ellos grandes empresas

- Fácil de aprender y entender en un corto plazo

- Desarrollo rápido

- Mejora reuso de código

- SEO Friendly

- Dev Tools

- Excelente performance (Virtual DOM)

- React-native

Beneficios

Falencias

- Solo se enfoca en la UI

- Difícil encontrar devs con experiencia*

- Fácil de aprender, pero toma tiempo de manejar

- Menos performante que otras alternativas (pequeñas diferencias)

Falencias

Conclusión

Quien usa React?

Quien usa React?

Quien usa React?

https://bit.ly/2wrsJEy

Y en Chile?

Muchas gracias!

http://github.com/morph3o

https://medium.com/@pierodivasto

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

React

By Piero Divasto

React

Presentation about React

  • 643