РЕАКТИВ JS

Библиотека JavaScript для создания пользовательских интерфейсов.

декларативный

React позволяет безболезненно создавать интерактивные пользовательские интерфейсы. стиль простые представления для каждого состояния в вашем приложении, а React может оперативно обновлять и отображать просто правильные части как только ваши знания изменятся.

Декларативные представления создают ваш код много надежных и их легче исправлять.

Компонентный

Создавайте инкапсулированные компоненты, которые управляют своим состоянием, а затем компонуйте их для создания расширенных пользовательских интерфейсов.

Поскольку логика компонентов написана на JavaScript а не в шаблонах, вы сможете просто передать получать информацию через ваше приложение и сохранять состояние вне DOM.

Узнай один раз, пиши где угодно

Мы не делаем предположений об остальном стеке ваших технологий, поэтому вы можете разрабатывать новые функции в React, не переписывая существующий код.

React также может отображать на сервере с помощью Node и запускать мобильные приложения с помощью React Native.

Простой компонент

Компоненты React имеют метод render(), который принимает входные данные и возвращает то, что должно отображаться. В этом примере используется XML-подобный синтаксис, известный как JSX. Это позволяет render() получать доступ к входным данным, переданным в компонент. реквизит.

React не требует использования JSX. Чтобы увидеть необработанный код JavaScript, сгенерированный на этапе компиляции JSX, используйте REPL Babel.

Пример кода

class HelloMessage extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

root.render(<HelloMessage name="Taylor" />);

Вывод

Hello Taylor

Компонент с состоянием

Компонент может хранить данные внутреннего состояния в дополнение к входным данным (через this.props) (доступ через this.state). Когда данные о состоянии компонента изменяются, визуализированная разметка обновляется путем повторного вызова render().

Пример кода

class Timer extends React.Component {
  constructor(props) {
    super(props);
    this.state = { seconds: 0 };
  }

  tick() {
    this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

  componentDidMount() {
    this.interval = setInterval(() => this.tick(), 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        Seconds: {this.state.seconds}
      </div>
    );
  }
}

root.render(<Timer />);

Приложение

Мы можем создать простое приложение Todo, используя свойства и состояние. В этом примере состояние используется для отслеживания текущего списка элементов, а также текста, введенного пользователем. Несмотря на то, что обработчики событий отображаются встроенными, они будут собраны и реализованы с использованием делегирования событий.

Пример кода

class TodoApp extends React.Component {
  constructor(props) {
    super(props);
    this.state = { items: [], text: '' };
    this.handleChange = this.handleChange.bind(this);
    this.handleSubmit = this.handleSubmit.bind(this);
  }

  render() {
    return (
      <div>
        <h3>TODO</h3>
        <TodoList items={this.state.items} />
        <form onSubmit={this.handleSubmit}>
          <label htmlFor="new-todo">
            What needs to be done?
          </label>
          <input
            id="new-todo"
            onChange={this.handleChange}
            value={this.state.text}
          />
          <button>
            Add #{this.state.items.length + 1}
          </button>
        </form>
      </div>
    );
  }

  handleChange(e) {
    this.setState({ text: e.target.value });
  }

  handleSubmit(e) {
    e.preventDefault();
    if (this.state.text.length === 0) {
      return;
    }
    const newItem = {
      text: this.state.text,
      id: Date.now()
    };
    this.setState(state => ({
      items: state.items.concat(newItem),
      text: ''
    }));
  }
}

class TodoList extends React.Component {
  render() {
    return (
      <ul>
        {this.props.items.map(item => (
          <li key={item.id}>{item.text}</li>
        ))}
      </ul>
    );
  }
}

root.render(<TodoApp />);

Компонент, использующий внешние плагины

Вы можете использовать React для взаимодействия с другими библиотеками и фреймворками. В этом примере используется замечательная внешняя библиотека Markdown для преобразования значения ‹textarea› в реальном времени.

Пример кода

class MarkdownEditor extends React.Component {
  constructor(props) {
    super(props);
    this.md = new Remarkable();
    this.handleChange = this.handleChange.bind(this);
    this.state = { value: 'Hello, **world**!' };
  }

  handleChange(e) {
    this.setState({ value: e.target.value });
  }

  getRawMarkup() {
    return { __html: this.md.render(this.state.value) };
  }

  render() {
    return (
      <div className="MarkdownEditor">
        <h3>Input</h3>
        <label htmlFor="markdown-content">
          Enter some markdown
        </label>
        <textarea
          id="markdown-content"
          onChange={this.handleChange}
          defaultValue={this.state.value}
        />
        <h3>Output</h3>
        <div
          className="content"
          dangerouslySetInnerHTML={this.getRawMarkup()}
        />
      </div>
    );
  }
}

root.render(<MarkdownEditor />);

Лучший учебник по JavaScript