React Cheat Sheet

Основы

1. React.createElement(type, props, children)

Создать ReactElement с переданными ему class, props, children.

var link = React.createElement('a', {href: '#'}, "Save")
var nav = React.createElement(MyNav, {flat: true}, link)

2. React.cloneElement(element, props, children)

Создать новый ReactElement объединенный с новыми props и children.

3. ReactDOM.render(element, domNode)

Взять ReactElement, отредерить его и вставить DOM node.

ReactDOM.render(React.createElement('div'), document.getElementById('container'))

4. ReactDOM.findDOMNode(element)

Вернуть DOM node соответствующий заданному элементу (после рендеринга).

Особые props

children - автоматически добавляется в this.props функцикй React.createElement.
className - соответствует атрибуту class в HTML.
htmlFor - соответствует атрибуту for в HTML.
key - уникальные идентификаторы для каждого ReactElement. Используется с элементами в массивах.
ref - принимает callback function, которая будет вызвана:
        1. с экземпляром компонента или DOM node при его монтировании (mount).
        2. с null или unmount и когда произошло изменение функционала.
style - принимает объект со стилями style вместо строки.

Типы props

Доступны в составе React.PropTypes. По желанию добавить .isRequired.

| any | array | bool | element | func |
| node | number | object | string |

instanceOf(constructor)
oneOf(['News', 'Photos'])
oneOfType([propType, propType])

Компоненты Class Components

var MyComponent = React.createClass({

    displayName: 'MyComponent',

    /* ... options and lifecycle methods ... */

    render: function() {
        return React.createElement( /* ... */ )
    },

    ... далее опции и методы ...

});

Опции

propTypes - объект содержащий сопоставления имен props с их типами
getDefaultProps - function() возвращает объект
getInitialState - function() возвращает объект

Методы жизненного цикла компоненты

componentWillMount - function()
componentDidMount - function()
componentWillReceiveProps - function(nextProps)
shouldComponentUpdate - function(nextProps, nextState) возвращает boolen
componentWillUpdate - function(nextProps, nextState)
componentDidUpdate - function(prevProps, prevState)
componentWillUnmount - function()

Описание характеристик экземпляров компонентов:

- Доступны через this внутри класса компонента (class component)
- Компоненты без состояний (stateless functional components) не имеют экземпляров компонентов (component instances).
- Обслуживаются как объекты переданные в ref callbacks
- Один экземпляр компонента может обслуживать множество ReactElements.

Свойства

props - содержит любые свойства props переданные в React.createElement
state - содержит состояние state установленное через функцию setState и полученное через функцию getInitialState

Методы

1. setState(changes) - применяет изменения к this.state и перерисовывает компонент
2. forceUpdate() - немендленно перерисовывает компонент в DOM

Код в стиле ECMAScript 6

Компоненты - это классы

export class MyComponent extends Component {
    componentWillMount() {
        // ...
    }
    render() {
        return <div>Hello World</div>
    }
}

Свойства статичны

export class MyComponent extends Component {
    static propTypes = {
        // ...
    }
    static defaultProps = {
        // ...
    }
}

Первоначальное состояние

export class MyComponent extends Component {
    state = {
        disabled: this.props.disabled,
    }
}

Конструкторы заменяют собой componentWillMount

export class MyComponent extends Component {
    constructor(props) {
        super(props)
        // Do stuff
    }
}

Привязывайте методы к вашему компоненту, когда используете их в качестве обработчиков handlers

export class MyComponent extends Component {
    onMouseEnter = event => {
        this.setState({hovering: true})
    }
}

Импорт React

JSX предполагает, что объект React доступен, поэтому его надо тоже импортировать

import React, { Component, PropTypes } from 'react'

Деструктурирование особенно удобно для компонентов с неизменным состоянием (stateless)

export const Commas = ({items, ...otherProps}) => <div {...otherProps}>{items.join(', ')}</div>

Строковые литералы можно использовать для динамического создания className

<input className={`Control-${this.state}`} />

и для создания динамических имен свойств

this.setState({
    [`${inputName}Value`]: e.target.value,
});

Декораторы классов можно использовать в качестве mixin

@something(options)
class MyComponent extends Component {}

// В итоге превращается в

let MyComponent = something(options)(
    class MyComponent extends Components {}
)

Дополнительные подсказки

Basic class

React.createClass({
  render: function () {
    return (
      <div>Hello {this.props.name}</div>
    );
  }
});

Using components

var Component = React.createClass({ ... });

var compo = React.render(<Component />, mountnode);

States

this.setState({ editing: true });
this.state.editing === true
this.replaceState({ ... });

Properties

this.setProps({ fullscreen: true });
this.props.fullscreen === true

this.replaceProps({ ... });

API

c.getDOMNode() // deprecated 0.13
React.findDOMNode(c) // 0.13+

c.forceUpdate()
c.isMounted()

Methods

{
  render: function()
  getInitialState: function()
  getDefaultProps: function()
  mixins: []
  propTypes: {} / for validation /
  statics: { .. } / static methods /
  displayName: '..' / automatically filled in by jsx /
}

Lifecycle

componentWillMount()
componentDidMount()

// not on initial render
componentWillReceiveProps(props)
shouldComponentUpdate(props, state)
componentWillUpdate(props, state)
componentDidUpdate(prevProps, prevState)

componentWillUnmount()

// ...there is no DidUnmount or ReceiveState.

Initial States

React.createClass({
  getInitialState: function () {
    return {data: []};
  },

  render: function () {
    return (
      <CommentList data={this.state.data} />
    );
  }
});

Default Properties

React.createClass({
  getDefaultProps: function () {
    return {name: ''};
  }
);

Before Rendering

React.createClass({
  componentWillMount: function () {
    $.get(this.props.url, function (data) {
      this.setState(data);
    });
  },

  render: function () {
    return (
      <CommentList data={this.state.data} />
    );
  }
});

Actions

<form onSubmit={this.handleSubmit}>
  Name: <input ref="name">
</form>

React.createClass({
  handleSubmit: function (event) {
    name = this.refs['name'].getDOMNode().value;
    // see two-way binding below
  }
})

Two-way binding

React.createClass({
  mixins: [React.addons.LinkedStateMixin],
  getInitialState: function() {
    return {value: 'Hello!'};
  },
  render: function() {
    return <input type="text" valueLink={this.linkState('value')} />;
  }
});
// LinkedStateMixin adds a method to your React component called
// linkState().

Lists

var TodoList = React.createClass({
  render: function() {
    var createItem = function(itemText) {
      return <li>{itemText}</li>;
    };
    return <ul>{this.props.items.map(createItem)}</ul>;
  }
});

Property validations

React.createClass({
  propTypes: {
    // required
    requiredFunc: React.PropTypes.func.isRequired,
    requiredAny: React.PropTypes.any.isRequired,

    // primitives, optional by default
    bool: React.PropTypes.bool,
    func: React.PropTypes.func,
    number: React.PropTypes.number,
    string: React.PropTypes.string,
  }
});

Class set

render: function() {
  var cx = React.addons.classSet;
  var classes = cx({
    'message': true,
    'message-important': this.props.isImportant,
    'message-read': this.props.isRead
  });
  // same final string, but much cleaner
  return <div className={classes}>Great Scott!</div>;
}

Propagating properties to children

var VideoPlayer = React.createClass({
  render: function() {
    return <VideoEmbed {...this.props} controls='false' />;
  }
});

<VideoPlayer src="video.mp4" />

Mixins

var TickTock = React.createClass({
  mixins: [SetIntervalMixin]
}

SetIntervalMixin = {
  componentWillMount: function() { .. }
}