React

Piero Divasto

Full-stack Developer

Nisum

Motivation

Motivation

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

What is React?

JavaScript library to build UI

History

Created by Jordan Walke

Inspired from XHP, component framework of HTML for PHP

Open-sourced in 2013

Characteristics

Declarative

Component-based

Learn once, write everywhere

Declarative

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,
            "Hello ",
            this.props.name
        );
    }
}

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

Learn once, write anywhere

Doesn't depend on other libs

Small API

Steep learning curve

Concepts

JSX

Props & PropTypes

State

JSX

Javascript extension

IT IS NOT HTML!

Easier component development

JSX

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

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

JSX

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

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

Props

Component

props

Props

Properties of a component

Inmutables

Passed as parameter

Props

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

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

PropTypes

Good practice

Defines the type of props

Generate warnings in 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>Hello {this.props.name}</div>
    }
}

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

HelloWorld.defaultProps = {
    name: ''
};

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

State

Component's internal state

NOT immutables

Changes in state are "merged"

Only owner component can modify it

State

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

    algunMetodo() {
        this.setState({ param: 'new value' });
    }
    
    render() {
        return <div>Hello {this.props.name}</div>
    }
}

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

HelloWorld.defaultProps = {
    name: ''
};

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

Component lifecycle

Init

Update

Destruction

Init

Update

Destruction

getInitialState()

getDefaultProps()

componentWillMount()

render()

componentDidMount()

componentWillReceiveProps()

shouldComponentUpdate()

componentWillUpdate()

render()

componentDidUpdate()

componentWillUnmount()

Component lifecycle

Init

Component lifecycle

Update

Component lifecycle

Destruction

Component lifecycle

Component lifecycle

New component lifecycle methods

Misuses of methods

Conflict with future async rendering

componentWillMount

componentWillReceiveProps

componentWillUpdate

getDerivedStateFromProps

getSnapshotBeforeUpdate

New component lifecycle methods

componentWillMount

componentWillReceiveProps

componentWillUpdate

UNSAFE_*

New component lifecycle methods

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

New component lifecycle methods

Tipos de componentes

Stateless vs Stateful

Stateless

Most basic component

Doesn't manage internal state

Doesn't have access to lifecycle methods

Presentational component - Dummy component

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

Stateful

Manages internal state

It has access to lifecycle methods

Container component / Class-based component

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

Who else uses React?

Thanks!

http://github.com/morph3o

https://medium.com/@pierodivasto

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

React - English

By Piero Divasto

Made with Slides.com

React - English

Presentation about React

  • 615

More from Piero Divasto