REACTivating

the web

REACTivating the web

About us

Daniela Borges

@sericaia

Sérgio Ramos

@ramitos

REACTivating the web

Syllabus

React basics & HACK-it-all

REACTivating the web

JavaScript library

for building user interfaces

REACTivating the web

React is fast due to its architecture

REACTivating the web

Architecture

REACTivating the web

React uses JSX syntax

REACTivating the web

React uses JSX syntax

    var BirthdayInfo = React.createClass({
      render: function() {
        return (
          <div>
            We are going to have a party!        
          </div>
          );
      }
    });

React uses JSX syntax

REACTivating the web

React uses JSX syntax,

but you don't need to use it

REACTivating the web

Plain JavaScript

    var BirthdayInfo = React.createClass({
      render: function() {

        return React.DOM.div(null, 
            "We are going to have a party!");
      }
    });

REACTivating the web

Let's try this!

{ /* our first React component */ }

REACTivating the web

Let's try this!

{ /* our first React component */ }

1. clone git rep 

    https://github.com/sericaia/REACTivating-the-web

3. create my first React component 

2. ignore server-side stuff  (for now, please take a look at it later)

REACTivating the web

Components

React fundamental unit

represents a DOM element

REACTivating the web

Components

render ()

REACTivating the web

Components

events

REACTivating the web

Components

nested components             nested DOM nodes

REACTivating the web

Components

nested components             nested DOM nodes

Guest

Guest

BirthdayInfo

GuestList

BirthdayContentPage

REACTivating the web

Components

{ /* show me code, please! */ }

var BirthdayContentPage = React.createClass({
  render: function() {
    return (
      <div>
	  <h1>Birthday Party</h1>
	  <BirthdayInfo />
	  <GuestList guestList={this.props.guestList} />
      </div>
      );
  }
});

REACTivating the web

Properties ('Props') versus States

REACTivating the web

this.props

    <GuestList guestList={this.props.guestList} />

REACTivating the web

this.props

    var XPTOComponent = React.createClass({

      getDefaultProps: function() {
        return {
          guestList: [{name: 'Zé'}, {name: 'Mónica'}]
        };
      }

      /* ... */
    });

REACTivating the web

this.state

What happen if D changes?

REACTivating the web

this.state

What happen if D changes?

re-render()

REACTivating the web

this.state

    var XPTOComponent = React.createClass({

      getInitialState: function() {

        return {
              guestList: this.props.guestList,
              guestName: "enter your name...",
            };

      }
      /* ... */
    });

REACTivating the web

this.state

this.setState()

receives an object with states

merges (like github)

REACTivating the web

this.state

this.getInitialState()

this.setState()

{

    guestHobbies: ["dance",  

         "football, "magic tricks"],
    guestName: "enter name..."
}

{
    guestName: "Mónica",

    guestHobbie: "Dance" 
}

{
    guestHobbies: ["dance",  "football,

                                             "magic tricks"],   

    guestName: "Mónica",

    guestHobbie: "Dance" 
}

REACTivating the web

Let's try this!

{ /* play with React props and state */ }

Useful resources

    https://facebook.github.io/react/docs/transferring-props.html

    https://facebook.github.io/react/docs/component-api.html#setstate

REACTivating the web

Props Validation

REACTivating the web

Props Validation

    var Guest = React.createClass({
         propTypes: {
              name: React.PropTypes.string.isRequired
         },    
    
        /* ... */
    });

REACTivating the web

Props Validation

https://facebook.github.io/react/docs/reusable-components.html

React.PropTypes.array

React.PropTypes.bool

React.PropTypes.func

React.PropTypes.number

React.PropTypes.object

React.PropTypes.oneOf(['News', 'Photos'])

React.PropTypes.oneOfType(

       [ React.PropTypes.string, React.PropTypes.number])

          ...

REACTivating the web

Props Validation

but you could also create your own...

    var Guest = React.createClass({
         propTypes: {
              name: function(props, propName, componentName) {
                    if(props[propName] !== "xpto") {
                        throw new Error(propName + " must be equal to xpto");
                    }
              }
         }
    });

REACTivating the web

Let's try this!

{ /* play with React props validation */ }

REACTivating the web

Let's try this!

{ /* play with React props validation */ }

Useful resources

    https://facebook.github.io/react/docs/reusable-components.html

REACTivating the web

HTML Attrs

REACTivating the web

HTML Attrs

for                   htmlFor

     class                className

REACTivating the web

HTML Attrs

     class                className

    var BirthdayInfo = React.createClass({
      render: function() {
        return (
          <div className="birthdayInfo">
            <p>We are going to have a party!</p>
            <p>I am very cheapskate, so I will ask the guests...</p>
          </div>
          );
      }
    });

REACTivating the web

How can I use styles?

(without className's)

REACTivating the web

    // style.js
    
    var style = {
      tableStyle: {
        backgroundColor: '#f5f5f5'
      },
    };
    
    module.exports = style;

REACTivating the web

    // style.js
    
    var style = {
      tableStyle: {
        backgroundColor: '#f5f5f5'
      },
    };
    
    module.exports = style;

    var style = require('style.js');

    /* .... */

    // some react component
    <table style={style.tableStyle}>
        <thead>
            <tr>
               <th>Column 1</th>
               <th>Column 2</th>
            </tr>
        </thead>
        <tbody>
           (...)
        </tbody>
    </table>

REACTivating the web

React escapes content by default

REACTivating the web

React escapes content by default,

but you can still do shit if you want...

   <p dangerouslySetInnerHTML={{__html: this.props.data}}></p>

{ /* nop, we are not going to try this... */ }

{ /* also, please don't try this at home without parental control... */ }

REACTivating the web

Events

REACTivating the web

Events

DOM

track browser

events

Component

express events of an app or specific component level

REACTivating the web

DOM Events

imagine that we have a checklist

    var Guest = React.createClass({
      getInitialState: function(){
          return {
            checked: false
          };
      },
      /* ... */
    });

REACTivating the web

DOM Events

    var Guest = React.createClass({
        /* ... */
        render: function() {
          return (
            <tr>
              <td>
                <input type="checkbox" checked={this.state.checked}
                    onChange={this.handleChange} />
              </td>
              <td>{this.props.name}</td>
            </tr>
            );
        }    
    });

REACTivating the web

DOM Events

    var Guest = React.createClass({
        /* ... */

        handleChange: function(){
          this.setState({checked: !this.state.checked});
        }

        /* ... */
    });

REACTivating the web

DOM Events

    var AnotherExample = React.createClass({
        handleChange: function(event){
          console.log(event.target.value)
        }
    });

 <input type='text' onChange={this.handleChange} />   <!-- simple input field -->

another example...

We can access the input value as we to in plain JS events

REACTivating the web

Let's try this!

{ /* create your own DOM Event example */ }

REACTivating the web

Let's try this!

{ /* create your own DOM Event example */ }

Useful resources

    https://facebook.github.io/react/docs/events.html

REACTivating the web

Component Events

 ===

domain/application specific events

REACTivating the web

Component Events

    var Guest = React.createClass({
        /* ... */
        render: function() {
          return (
            <tr>
              <td>{this.props.name}</td>
              <td style={style.tableContent}>
                <button onClick={this._onDelete}>X</button>
              </td>
            </tr>
            );
        }    
    });

 === domain specific events

REACTivating the web

Touch Events

    React.initializeTouchEvents(true)

you need to tell React to support it

REACTivating the web

Let's try this!

{ /* create your birthday party manager */ }

REACTivating the web

Let's try this!

{ /* create your birthday party manager */ }

REACTivating the web

What can I do more?

{ /* Expand */ }

Compare your code with #final branch

     sericaia/REACTivating-the-web

Guest Number : add simple counter

Guest companion :  +1, +2, etc. and their names and what they will bring

REACTivating the web

{ /* Learn */ }

Forms in React    https://facebook.github.io/react/docs/forms.html

         Controlled vs Uncontrolled Components

      References

      getDOMNode()

Virtual DOM     https://facebook.github.io/react/docs/glossary.html

Component Lifecycle    

       https://facebook.github.io/react/docs/component-specs.html   

What can I do more?

REACTivating the web

{ /* Explore */ }

React-router : add client-side routing   

         http://rackt.github.io/react-router

React-bootstrap : make it pretty   

        http://react-bootstrap.github.io

What can I do more?

REACTivating the web

{ /* Explore */ }

What can I do more?

www.meetup.com/require-lx​       

REACTivating the web

{ /* Nothing, it's over. Let's lunch! */ }

What can I do more?

Daniela Borges

@sericaia

daniela@yld.io

Sérgio Ramos

@ramitos

sergio@yld.io