DO YOU EVEN REACT?

MANTAS KAVECKAS / @kaveckas

What is react.js?

Not just another pretty buzzword

2007                               2009                               2011                               2013                               2015

Not just another Devs agencie

Also not a...

framework

Templating engine

Potato

...but certainly a

Concepts & principles

methodology

Set of best practises

though

A JAVASCRIPT LIBRARY FOR BUILDING USER INTERFACES

Implements

The view part of mv*

heavily focused on

Javascript features

Small api

Component-driven development...

Declarative Components

Components

Components == Elements

Component Composition

Inbox View
Title
Task List
Item One
Item Two
Item Three

Component Composition


var items = this.props.itemsData.map((item) => {
    return <Item name={item.name} />;
}

<InboxView>
    <Title/>
    <TaskList>
        {items}
    </TaskList>
</InboxView>

Components

A component is just a function that has single responsibility

A simple component


var HelloComponent = React.createClass({  
    render: function() {
        return <div>Hello {this.props.name}</div>;
    }
});

A simpler component / es2015


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

JSX

Jsx

XML-like syntax extension to ECMAScript

Jsx


var helloMessage = (
    <div>
        <h1>Hello {this.props.name}</h1>
        <button>Click me!</button>
        {this.props.children}
    </div>
);

Jsx

Transpiles to javascript - virtual dom...

Virtual dom

Virtual dom

Dom is slow. Javascript is fast. Any argument is invalid.

Props

PROPS

immutable parameters passed down by parent components

PROPS example


    class HelloComponent extends React.Component {  
      render() {
        return (
            <div>
                <h1>Hello {this.props.name.toUpperCase()}</h1>
                {this.props.children}
            </div>
        );
      }
    }

    React.render(<HelloComponent name="John" />, document.body);

PROPs types


    class HelloComponent extends React.Component {
      propTypes: {
          children: React.PropTypes.element.isRequired
      },  

      render() {
        return (
            <div>
                <h1>Hello {this.props.name.toUpperCase()}</h1>
                {this.props.children}
            </div>
        );
      }
    }

    React.render(<HelloComponent name="John" />, document.body);

CSS as props


    class HelloComponent extends React.Component {
      render() {
        return (
            <div>
                <h1 
                    className="Epic__Class--is-epic" 
                    style={{"color": "#chucknorris", "position": "absolute"}}
                >
                    Hello {this.props.name.toUpperCase()}
                </h1>
            </div>
        );
      }
    }

    React.render(<HelloComponent name="John" />, document.body);

Events

EVENTS

fake and gay.

synthetic events

onClick onContextMenu onDoubleClick onDrag onDragEnd onDragEnter onDragExit onDragLeave onDragOver onDragStart onDrop onMouseDown onMouseEnter onMouseLeave onMouseMove onMouseOut onMouseOver onMouseUp onTouchCancel onTouchEnd onTouchMove onTouchStart onScroll onWheel onChange onInput onSubmit onFocus onBlur onKeyDown onKeyPress onKeyUp onCopy onCut onPaste...

events example


class ButtonComponent extends React.Component {
  handleClickEvent(message) {
    alert(message);
  },

  render() {
    return (
        <button onClick={this.handleClickEvent.bind(this, this.props.buttonMessage)}>
            {this.props.buttonMessage}
        </button>
    );
  }
}

React.render(<ButtonComponent buttonMessage="Click me!" />, document.body);

state

State

represents the component state

State

WHEN state changes, THE COMPONENT IS RE-RENDERED

State


class ButtonComponent extends React.Component {
  getInitialState() {
      return {
          buttonClicked: false
      };
  },

  handleClickEvent() {
      this.setState({ buttonClicked: !buttonClicked });
  },
 
  render() {
    if (this.state.buttonClicked)
        return null;

    return (
        <button>
            {this.props.buttonMessage}
        </div>
    );
  }
}

React.render(<ButtonComponent buttonMessage="Click me!" />, document.body);

TOOLS

Let the force be with you

The good

helpful error messages

top-level api

React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement
React.createElement
React.createFactory
React.DOM

With jsx

React.createClass
React.render
React.PropTypes
React.Children
React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement

React.createElement
React.createFactory
React.DOM

common practical use

React.createClass
React.render
React.PropTypes
React.Children


React.unmountComponentAtNode
React.renderToString
React.renderToStaticMarkup
React.initializeTouchEvents
React.isValidElement
React.createElement
React.createFactory
React.DOM

Component requirements


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

Component specs


    class HelloComponent extends React.Component { 
      mixins: [],
    
      propTypes: {
        name: React.PropTypes.string.isRequired
      },
    
      getDefaultProps() {
        return { 
          name: "John" 
        };
      },
    
      getInitialState() {
        return null;
      },

      render() {
        return <div>Hello {this.props.name}</div>;
      }
    }

Component lifecycle


    class HelloComponent extends React.Component { 
      componentWillMount() {},
      componentDidMount() {},
      componentWillReceiveProps(object nextProps) {},
      shouldComponentUpdate(nextProps, nextState) {},
      componentWillUpdate(nextProps, nextState) {},
      componentDidUpdate(prevProps, prevState) {},
      componentWillUnmount() {},

      render() {
        return <div>Hello {this.props.name}</div>;
      }
    }

Dom manipulation

React.render(<App />, document.body);

There's even more...

Fast, immutable, REUSABLE, ease of

debugging, easy to integrate, es2015 -

friendly, isomorphic - universal...

The bad

Or the ugly?

The hardest part of react is javascript.

This is it, folks!

MANTAS KAVECKAS / @kaveckas

Do you even React?

By Mantas Kaveckas

Do you even React?

  • 501
Loading comments...

More from Mantas Kaveckas