React to Basics

Sorry for the poor pun!

Yet another clientside framework​ library?

Let's take a quick look back at the history of clientside frameworks

2013: React

• Created at Facebook/Instagram
• Just the UI
• Virtual DOM (Server-side rendering) 
• One-way Data Flow

Hello, world

var React = require('react')

var Hello = React.createClass({
  render() {
    return <div>Hello, world</div>
  }
})

module.exports = Hello

Properties

var React = require('react')

var Hello = React.createClass({
  render() {
    return <div>Hello, {this.props.name}</div>
  }
})

var Props = React.createClass({
  render() {
    return <Hello name="you" />
  }
})

module.exports = Props

State and Events

var React = require('react')

var Hello = React.createClass({
  getInitialState() {
    return {
      name: "world"
    }
  },
  onChange(e) {
    this.setState({
      name: e.target.value
    })
  },
  render() {
    return (
      <div>
        Hello, {this.state.name}
        <input type="text" onChange={this.onChange} />
      </div>
    )
  }
})

var State = React.createClass({
  render() {
    return <Hello />
  }
})

module.exports = State

Refs

var React = require('react')

var Refs = React.createClass({
  getInitialState() {
    return {
      buttonText: "Click Me!"
    }
  },
  onClick() {
    this.setState({
      buttonText: this.refs.input.getDOMNode().value
    })
  },
  render() {
    return (
      <div>
        <p>
          <input ref="input" type="text" />
        </p>
        <p>
          <button onClick={this.onClick}>
            {this.state.buttonText}
          </button>
        </p>
      </div>
    )
  }
})

module.exports = Refs

Lifecycle

var React = require('react')
var Velocity = require('velocity-animate')

require('velocity-animate/velocity.ui')

var Lifecycle = React.createClass({
  getInitialState() {
    return {
      value: 0
    }
  },
  componentDidMount() {
    this.refs.input.getDOMNode().focus()
  },
  componentDidUpdate() {
    if (this.state.value > 5) {
      Velocity(
        this.refs.input.getDOMNode(),
        'callout.tada'
      )
    }
  },
  onClick() {
    this.setState({
      value: this.state.value + 1
    })
  },
  render() {
    return (
      <div>
        <p>
          <input ref="input" type="text" value={this.state.value} />
        </p>
        <p>
          <button onClick={this.onClick}>
            Click Me!
          </button>
        </p>
      </div>
    )
  }
})

module.exports = Lifecycle

You now know all you need to get started with React.

No kidding.

And that's why React is so great. It's just a different (simpler) way of creating UI. Well, the Virtual DOM is magical but it's still a simple concept.

We've all been taught that fat views are bad. Computers today are fast and can only get faster.

We used to do everything in the servers. But this is the new decentralized world. We can now afford to make our clients smarter.

Just take a look at your mobile apps.

That's it! Code is up in Github:

https://github.com/marksteve/react-to-basics