React!

Composable UI Elements

with

Mateus Chagas

matchs

Componentizable

Your UI is

Composable

The DOM is

<div class="offer-parameters">
    <input class="offer-parameters-input" type="range" min=1000 max=20000/>
    <input class="offer-parameters-input" type="range" min=6 max=24/>
</div>


<div class="offer-list">
    <div class="offer-item">
        <h3 class="offer-item__title">Banco do Brasil</h3>
        <div class="offer-item__detail">
            <span class="offer-item__detail__interest">7%</span>
            <span class="offer-item__detail__installment">R$ 555,67</span>
        </div>
    </div>

    <div class="offer-item">
        <h3 class="offer-item__title">Itaú</h3>
        <div class="offer-item__detail">
            <span class="offer-item__detail__interest">8%</span>
            <span class="offer-item__detail__installment">R$ 567,95</span>
        </div>
    </div>

    <div class="offer-item">
        <h3 class="offer-item__title">Santander</h3>
        <div class="offer-item__detail">
            <span class="offer-item__detail__interest">8,4%</span>
            <span class="offer-item__detail__installment">R$ 588,93</span>
        </div>
    </div>
</div>

JavaScript?

What about

http://codepen.io/anon/pen/ojrdVB

React

MVC

Framework?

Yet Another

Only the V

In the MVC

Virtual DOM

JSX

ReactDOM.render(<div>
                    <h3>Hello World!</h3>
                </div>, document.getElementById("my-app"));

Encapsulation

Componentization

var HelloWorld = React.createClass({
    render: function() {
        return(<div><h3>Hello World!</h3></div>)
    }

});


ReactDOM.render(<HelloWorld />, 
    document.getElementById('my-app'))

Composability

Functional programming

var List = React.createClass({
    render: function() {
        return(
            <ul>
                <li>Item 1</li>
                <li>Item 2</li>
                <li>Item 3</li>
                <li>Item 4</li>
                <li>Item 5</li>
            </ul>
        );
    }
});

var ListContainer = React.createClass({
    render: function(){ 
        return(<div><h3>My List</h3><List /></div>)
    }
});

ReactDOM.render(<ListContainer />, 
    document.getElementById('my-app'))

Props

State

,

refs etc...

var HelloYou = React.createClass({
    render: function() {
        return(
            <div>
                Hello <h3>{this.props.name || 'you'}!</h3>
            </div>
        );
    }
});

ReactDOM.render(<HelloYou name="Salsicha" />, 
    document.getElementById('my-app'))

var ShowHide = React.createClass({
  getInitialState: function() {
    return {
      'isVisible' : true
    }
  }

  onClickHandler: function() {
    if(this.state.isVisible){
      this._see.classList.add('hidden');
      this._see.classList.remove('hidden');
      this.setState({ 'isVisible' : false });
    } else {
      this._not.classList.remove('hidden');
      this._not.classList.add('hidden');
      this.setState({ 'isVisible' : true });
    }
  }

  render: function() {
    return(
      <div>
        <div ref={(c) => this._see=c}>See!</div>
        <div ref={(c) => this._not=c} className="hidden">Not!</div>
        <a onClick={onClickHandler} href="javascript:void(0)">toggle</a>
      </div>
    );
  }
});

Hands-On!

Marketplace

Let's build

Components

Now you're thinking

with

 with portals 

References

• http://facebook.github.io/react/docs/getting-started.html
   
• https://blog.risingstack.com/functional-ui-and-components-as-higher-order-functions/