Introduction to React

Who am I

React

What is React?

  • Library for UI
  • Built by Facebook
  • Used at Facebook, Instagram, etc...
  • Mainly for Web

React

React

  • Just the UI
  • Virtual DOM
  • Data flow

Just the UI

Just the UI

  • No Controller
  • No Model
  • No View Model
  • No 2-way data binding
  • No Directives

React Component

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

React.render(<Hello target="World" />, document.body);

JSX

  • Compile JSX to JS
  • XML like extension to ECMAScript
  • Optional

Compile JSX

  • Dynamic compile with JSXTransformer.js
  • Precompile with react-tools

JSXTransformer.js

<html>
  <head>
    <script src="build/react.js"></script>
    <script src="build/JSXTransformer.js"></script>
  </head>
  <body>
    <div id="example"></div>
    <script type="text/jsx">
      React.render(
        <h1>Hello, world!</h1>,
        document.getElementById('example')
      );
    </script>
  </body>
</html>

react-tools

Installation

npm install -g react-tools

Watch

jsx --watch src/ build/

Others

  • browserify with reactify
  • react-rails

Harmony option

  • Arrow functions
  • Classes
  • Object method
  • Destructuring assignment
  • Rest params
  • Spread property
  • and more

React component

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

React.render(<Hello target="World" />, document.body);

React props

  • Set as the attribute
  • Get from this.props
  • Immutable

Stateful component

var ClickableElement = React.createClass({
  getInitialState() {
    return { count: 0 };
  },
  render() {
    return (
      <div>
        <h1>Count: {this.state.count}</h1>
        <a onClick={this.onClick}>Click!</a>
      </div>
    );
  },
  onClick(e) {
    this.setState({ count: this.state.count + 1 });
  }
});

State

  • Refer from this.state
  • Initial value from getInitialState
  • Set with this.setState
  • Rerendered when it is changed

Lifecycle Methods

var TestComponent = React.createClass({
  // When it is added to DOM
  componentDidMount() {
    window.addEventListener('resize', this._onResize);
  },

  // When it is removed from DOM
  componentWillUnmount() {
    window.removeEventListener('resize', this._onResize);
  },

  _onResize() {
  }
});

How to define components

Defining components

  • Intuitive
  • Easy to understand
  • Easy to catch up the codes

Virtual DOM

Virtual DOM

State1

<div class="bar">ABC</div>

State2

<div class="bar">DEF</div>
document.querySelector('.bar').innerHTML('DEF');

What is Virtual DOM?

  • Virtual JavaScript representation of DOM
  • Diff/Patch algorithym
  • High performance

Data flow

One-way data flow

var ParentComponent = React.createClass({
  render(){
    return (
      <ChildComponent foo="bar" />
    );
  }
});

var ChildComponent = React.createClass({
  render(){
    return (
      <div>{ this.props.foo }</div>
    );
  }
});

One-way data flow

  • Parent to child
  • Simple

Flux

Flux

  • Suggested by Facebook
  • Application architecture
  • Not a framework

Flux

View and user interaction

var TodoItem = React.createClass({
  render() {
    return (
      <form onSubmit={this.onSubmit}>
        <input type="text" value={this.state.value} onChange={this.onChange} />
        <input type="submit" value="Add Todo" />
      </form>
    );
  },
  onChange(e) {
    this.setState({value: e.target.value});
  },
  onSubmit(e) {
    e.preventDefault();
    TodoActions.create(this.state.value);
  }
});

Actions

var TodoActions = {
  create(text) {
    AppDispatcher.dispatch({
      actionType: TodoConstants.TODO_CREATE,
      text: text
    });
  }
}

Store


var TodoStore = assign({}, EventEmitter.prototype, {
  addTask(text) {
    this._tasks.push(text);
  },
  getAll() {
    return this._tasks;
  },
  emitChange() {
    this.emit(CHANGE_EVENT);
  },
  addChangeListener(callback) {
    this.on(CHANGE_EVENT, callback);
  },
  removeChangeListener(callback) {
    this.removeListener(CHANGE_EVENT, callback);
  }
}

AppDispatcher.register(function(action) {
  switch(action.actionType) {
    case TodoConstants.TODO_CREATE:
      TodoStore.addTask(action.text);
      TodoStore.emitChange();
      break;
  }
});

View

var TodoApp = React.createClass({
  componentDidMount() {
    TodoStore.addChangeListener(this._onChange);
  },

  componentWillUnmount() {
    TodoStore.removeChangeListener(this._onChange);
  },

  _onChange() {
    this.setState({tasks: TodoStore.getAll() });
  }
});

Flux

  • Requires to write a bit more
  • Easy to track the codes
  • Separation of concerns

React & Flux

  • Simple
  • Easy to understand
  • Fun

Thank you