React

Piero Divasto

M.Sc. en Negocios Informáticos

Functional Lead & Full-stack Developer @ Nisum

Lead de Facebook Developers Circle: Santiago

Motivación

https://trends.google.com

Motivación

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

Motivación

https://2018.stateofjs.com/front-end-frameworks/overview/

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

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

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

Nuevos métodos de ciclo de vida

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

Nuevos métodos de ciclo de vida

componentWillMount

componentWillReceiveProps

componentWillUpdate

UNSAFE_*

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

Hooks

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

https://2018.stateofjs.com/front-end-frameworks/react/

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

https://2018.stateofjs.com/front-end-frameworks/react/

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

Links

React Intro - no tecnica

By Piero Divasto

Made with Slides.com

React Intro - no tecnica

Presentation about React

  • 638

More from Piero Divasto