presentation.jsx

// React.js - wprowadzenie

// Czym jest i gdzie jest jego miejsce?

// Jak uczyć się Reacta?

// JSX

<h1>
  {document.title}
</h1>

<input type="text" value={someVariable} />
<input type="text" value={orFunctionCall()} />

<MyCustomComponent someKey={someVariable} />

// Pierwszy komponent

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

// props

<HelloWorld name={name} />

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

// state cz. 1

var HelloWorld = React.createClass({
  getInitialState: function() {
    return {
      name: "Adam"
    };
  },

  render: function() {
    return (
      <h1>
        Hello {this.state.name}!
      </h1>
    );
  }
});


// state cz. 2

var HelloWorld = React.createClass({
  getInitialState: function() {
    return {
      name: "Adam"
    };
  },

  render: function() {
    return (
      <div>
        <h1>
          Hello {this.state.name}!
        </h1>
        <input type="text"
          value={this.state.name}
          onChange={this.handleNameChange} />
      </div>
    );
  },

  handleNameChange: function(event) {
    this.setState({
      name: event.target.value
    });
  }
});

// JSX raz jeszcze

var HelloWorld = React.createClass({
  render: function() {
    var items = [1, 2, 3, 4].map(function (number) {
      return (
        <li>
          {number}  
        </li>
      );
    });

    return (
      <ul>
        {items}
      </ul>
    );
  }
});

// cykl życia komponentu

var HelloWorld = React.createClass({
  componentDidMount: function() {
    this.interval = setInterval(
      this.refresh,
      this.props.refreshTime
    );
  },

  componentWillUnmount: function() {
    clearInterval(this.interval);
  },

  refresh: function() {
    // [...]
  },

  render: function() {
    // [...]
  }
});