React примеры: Понимаем React за 5 минут. В этой статье вы узнаете о популярной… | by Stas Bagretsov

Введение: знакомство с React – React

Вам не обязательно знать React, чтобы проходить это введение.

Прежде чем начать

В этом введении мы будем постепенно создавать небольшую игру. Возможно, вы захотите пропустить его, потому что не разрабатываете игры, но вам стоит попробовать. Подходы, которые вы изучите в этом введении, являются основополагающими для создания любого React-приложения. Их освоение даст вам глубокое понимание React.

Совет

Это введение рассчитано на людей, которые предпочитают учиться на практике. Если вам больше нравится изучать предмет от начала до конца, то начните с пошагового руководства. Введение и руководство в чём-то дополняют друг друга.

Введение состоит из нескольких разделов:

Вам не обязательно проходить все части сразу, чтобы получить пользу от этого введения. Изучите столько, сколько можете, даже если это будет один или два раздела.

Что мы собираемся писать?

В этом введении мы покажем как создать интерактивную игру крестики-нолики на React.

Результат вы можете посмотреть здесь — готовая игра. Если вы не очень хорошо понимаете код, или вы не знакомы с синтаксисом, не беспокойтесь. Цель этого введения — помочь разобраться с React и его синтаксисом.

Мы советуем вам поиграть в крестики-нолики, прежде чем продолжите чтение. Одна из особенностей, которую вы можете заметить — это нумерованный список справа от игрового поля. Этот список отображает историю всех игровых ходов и обновляется по мере игры.

Вы можете закрыть игру в крестики-нолики, как только познакомитесь с ней. Мы начнём с простой заготовки. Следующим шагом мы настроим окружение, чтобы вы могли начать создание игры.

Предварительные требования

Мы предполагаем, что вы немного знакомы с HTML и JavaScript. Однако, вы сможете изучать введение, даже если знакомы только с другими языками программирования. Мы также полагаем, что вы знакомы с такими понятиями программирования как функции, объекты, массивы и, в меньшей степени, классы.

Если вам нужно повторить основы JavaScript, мы рекомендуем прочитать вот этот учебник. Обратите внимание, что мы используем некоторые особенности из ES6 (последней версии JavaScript), такие как стрелочные функции, классы, операторы let и const. Вы можете воспользоваться Babel REPL, чтобы узнать во что компилируется ES6-код.

Настройка окружения

Есть два варианта прохождения практической части — вы можете писать код в браузере, либо настроить окружение для разработки на компьютере.

Вариант 1: Пишем код в браузере

Это самый быстрый способ для старта.

Для начала откройте эту Заготовку в новой вкладке. Вы увидите пустое поле для игры в крестики-нолики и код на React, который мы будем постепенно изменять.

Можете пропустить следующую часть и перейти к Обзору React.

Вариант 2: Локальное окружение для разработки

Это не является обязательным и не требуется этим вводным руководством!

Опционально: Инструкции для написания кода в вашем любимом редакторе

Эти настройки потребуют больше работы, но позволят продолжить разработку с использованием вашего любимого редактора. Вот что нужно сделать:

1. Убедиться, что у вас установлена последняя версия Node.js.
2. Выполнить инструкции по установке Create React App для создания нового проекта.

npx create-react-app my-app

3. Удалить все файлы в папке src/ нового проекта.

Примечание:

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

cd my-app
cd src


rm -f *


del *


cd ..

4. Создайте файл с именем index.css в папке src/ и добавьте в него вот этот CSS код.
5. Создайте файл с именем index.js в папке src/ и добавьте в него этот JS код.
6. В начало файла index.js в папкеsrc/ добавьте следующие три строчки:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';

Теперь, когда вы запустите npm start в папке проекта и откроете http://localhost:3000 в браузере, вы должны увидеть пустое поле для крестиков-ноликов.

Мы рекомендуем выполнить эти инструкции для настройки подсветки синтаксиса в вашем редакторе.

Помогите, я застрял!

Если вы застряли — обратитесь к сообществу. В частности Чат Reactiflux — это прекрасное место, где вам помогут. Если вы не дождались ответа или всё ещё не решили своей проблемы, пожалуйста, задайте вопрос, и мы вам поможем.

Обзор

Теперь, когда вы готовы, перейдём к рассмотрению React!

Что такое React?

React — это декларативная, эффективная и гибкая JavaScript библиотека для создания пользовательских интерфейсов. Она позволяет вам собирать сложный UI из маленьких изолированных кусочков кода, называемых «компонентами».

React имеет несколько разных видов компонентов, но мы начнём с подклассов React.Component:

class ShoppingList extends React.Component {
  render() {
    return (
      <div className="shopping-list">
        <h2>Список покупок для {this.props.name}</h2>
        <ul>
          <li>Instagram</li>
          <li>WhatsApp</li>
          <li>Oculus</li>
        </ul>
      </div>
    );
  }
}

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

ShoppingList является примером классового компонента React. Компонент принимает параметры, которые называются пропсами (props, сокращение от properties — свойства), и возвращает из метода render() иерархию представлений для отображения.

Метод render возвращает описание того, что вы хотите увидеть на экране. React берёт это описание и отображает результат. Если точнее, render возвращает React-элемент, который является легковесным описанием того, что нужно отрендерить. Большинство React-разработчиков используют специальный синтаксис под названием «JSX» для упрощения описания структуры. Во время компиляции синтаксис <div /> преобразовывается в React.createElement('div'). Пример выше равнозначен вот этому:

return React.createElement('div', {className: 'shopping-list'},
  React.createElement('h2', ),
  React.createElement('ul', )
);

Смотрите полную версию.

Если вам интересно, то createElement() более подробно описан в справочнике API, однако, мы не будем им пользоваться в этом введении. Вместо этого мы продолжим использовать JSX.

JSX обладает всей мощью JavaScript. В JSX вы можете использовать любые JavaScript-выражения внутри фигурных скобок. Каждый React-элемент является JavaScript-объектом, который можно сохранить в переменную или использовать внутри программы.

Приведённый выше компонент ShoppingList рендерит только встроенные DOM-компоненты вроде <div /> или <li />. Но вы также можете создавать и рендерить собственные компоненты. Например, теперь вы можете ссылаться на весь компонент со списком покупок, написав <ShoppingList />. Каждый React-компонент инкапсулирован и может использоваться независимо. Это позволяет создавать сложный UI из простых компонентов.

Разберёмся со стартовым кодом

Если вы собираетесь работать над практической частью в вашем браузере, откройте этот код в новой вкладке начальный код. Если вы собираетесь работать над практикумом локально, откройте src/index.js в папке вашего проекта (вы уже использовали этот файл в разделе настройки).

Этот стартовый код — база, с которой мы начнём разработку. Мы будем использовать готовые CSS-стили, чтобы сосредоточиться на изучении React и написании игры крестики-нолики.

Изучив код, вы обнаружите три React-компонента:

• Square (Клетка)
• Board (Поле)
• Game (Игра)

Компонент Board рендерит 9 компонентов Square, каждый из которых рендерит по одному элементу <button>. Компонент Game рендерит поле c заглушками, которые мы изменим позже. Пока у нас нет ни одного интерактивного компонента.

Передача данных через пропсы

Для начала давайте попробуем передать некоторые данные из нашего компонента Board в компонент Square.

Настоятельно рекомендуем набирать код самостоятельно, а не копировать его и вставлять. Это упрощает понимание и развивает мышечную память.

class Board extends React.Component {
  renderSquare(i) {
    return <Square value={i} />;  }
}

Изменим метод render внутри Square, заменив {/* TODO */} на {this.props.value}:

class Square extends React.Component {
  render() {
    return (
      <button className="square">
        {this.props.value}      </button>
    );
  }
}

До:

После: Вы должны увидеть число внутри каждого отрендеренного квадрата.

Посмотреть полный код этого шага

Поздравляем! Вы только что «передали проп» из родительского компонента Board в дочерний компонент Square.
Передача пропсов это то, как данные в React-приложениях «перетекают» от родительских компонентов к дочерним.

Добавим взаимодействие с компонентом

Попробуем при клике на компонент Square ставить «X».
Вначале изменим тег кнопки, который возвращается из метода render() компонента Square:

class Square extends React.Component {
  render() {
    return (
      <button className="square" onClick={function() { alert('клик'); }}>        {this.props.value}
      </button>
    );
  }
}

Теперь, если вы кликнете по Square, то увидите в браузере сообщение.

Примечание

Чтобы избежать странного поведения this, мы будем использовать синтаксис стрелочных функций для обработчиков событий (здесь и ниже):

class Square extends React.Component {
 render() {
   return (
     <button className="square" onClick={() => alert('клик')}>       {this.props.value}
     </button>
   );
 }
}

Обратите внимание что в onClick={() => alert('клик')}, мы передаём функцию в качестве значения пропа onClick. React вызовет эту функцию при клике. Пропуск () => и запись onClick={alert('клик')}довольно распространённая ошибка. Такой код будет выдавать сообщение при каждом перерендере.

Следующим шагом мы хотим, чтобы компонент Square «запоминал», что по нему кликнули и поставили «X».
Для «запоминания» компоненты используют состояние.

Компоненты React могут получить состояние, устанавливая this.state в конструкторе. this.state должно рассматриваться как приватное свойство React-компонента, определяемое им самим. Давайте сохраним текущее значение Square в this.state и изменим его при клике.

Сперва добавим конструктор к классу, чтобы инициализировать состояние:

class Square extends React.Component {
  constructor(props) {    super(props);    this.state = {      value: null,    };  }
  render() {
    return (
      <button className="square" onClick={() => alert('клик')}>
        {this.props.value}
      </button>
    );
  }
}

Примечание

В JavaScript-классах вам всегда нужно вызывать super при объявлении конструктора подкласса. Все классовые React-компоненты, у которых есть constructor, должны начинаться с вызова super(props).

Теперь изменим метод render компонента Square для отображения текущего значения из состояния при клике:

• Заменим this.props.value на this.state.value внутри тега <button>.
• Заменим обработчик onClick={...} на onClick={() => this.setState({value: 'X'})}.
• Поместим свойства className и onClick на разных строчках для лучшей читабельности.

После этих изменений тег <button>, возвращаемый из метода render компонента Square, будет выглядеть так:

class Square extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      value: null,
    };
  }

  render() {
    return (
      <button
        className="square"        onClick={() => this.setState({value: 'X'})}      >
        {this.state.value}      </button>
    );
  }
}

Вызывая this.setState из обработчика onClick (как это описано в методе render), мы говорим React, что нужно перерендерить Square при каждом клике по <button>. После обновления, this.state.value внутри Square станет X, поэтому на игровом поле мы увидим X. Если вы кликните по любому Square, должен появиться X.

Когда вы вызываете setState внутри компонента, React так же автоматически обновляет дочерние компоненты.

Посмотреть полный код этого шага

Инструменты разработки

Расширение React Devtools для Chrome и Firefox позволяет вам изучать дерево React-компонентов внутри панели инструментов разработчика вашего браузера.

Расширение React DevTools позволяет просматривать пропсы и состояние ваших React-компонентов.

После установки React DevTools, вы можете кликнуть правой кнопкой мыши на любой элемент страницы и нажать Inspect (Просмотреть код), чтобы открыть инструменты разработчика. Вкладки React («⚛️ Components» и «⚛️ Profiler») появятся справа. Используйте вкладку «⚛️️ Components» для просмотра дерева компонентов.

Внимание, чтобы это работало на CodePen нужно сделать ещё несколько действий:

1. Войти или зарегистрироваться и подтвердить вашу электронную почту (требуется для защиты от спама).
2. Нажать кнопку «Fork».
3. Нажать «Change View» и выбрать «Debug mode».
4. В открывшейся новой вкладке у вас должны появиться инструменты разработчика.

Создание игры

Теперь у нас есть базовые элементы для создания игры крестики-нолики. Для полноценной игры нам необходимо реализовать поочерёдное размещение «X» и «O», а также способ определения победителя.

Подъём состояния

Сейчас каждый компонент Square хранит в себе состояние игры. Для выявления победителя мы будем хранить значение всех 9 клеток в одном месте.

Возможно, вы предполагали, что Board просто запросит у каждого Square его состояние. Хотя такой подход в React возможен, мы его не одобряем. Из-за этого код становится трудным, провоцирует ошибки и усложняет рефакторинг. Вместо этого, лучшим решением будет хранение состояния игры в родительском компоненте Board, а не в каждом отдельном Square. Компонент Board может указывать каждому Square, что именно нужно отобразить, передавая проп. Мы так уже делали, когда передавали число в каждую клетку.

Чтобы собрать данные из нескольких дочерних элементов, или чтобы дать возможность двум компонентам общаться, вам нужно объявить общее состояние внутри родительского компонента. Родительский компонент может передать состояние обратно дочерним элементам с помощью пропсов. Это поддерживает синхронизацию дочерних компонентов друг с другом и с родительским компонентом.

Подъём состояния в родительский компонент — обычное дело при рефакторинге React-компонентов. Давайте воспользуемся случаем и попробуем это сделать.

Добавим конструктор к компоненту Board и установим начальное состояние в виде массива из 9 элементов, заполненного значениями null. Эти 9 элементов соответствуют 9 квадратам:

class Board extends React.Component {
  constructor(props) {    super(props);    this.state = {      squares: Array(9).fill(null),    };  }
  renderSquare(i) {
    return <Square value={i} />;
  }

Позже, при заполнении поля, массив this.state.squares будет выглядеть примерно так:

[
  'O', null, 'X',
  'X', 'X', 'O',
  'O', null, null,
]

Метод renderSquare внутри Board сейчас выглядит так:

  renderSquare(i) {
    return <Square value={i} />;
  }

Вначале мы передали из Board проп value вниз, чтобы отобразить номера от 0 до 8 внутри каждого Square. На другом шаге мы заменили числа знаком «X», определённом в собственном состоянии Square. Именно поэтому сейчас Square игнорирует проп value, переданный в него из Board.

Мы снова воспользуемся механизмом передачи пропсов. Изменим Board, чтобы передать каждому Square его текущее значение ('X', 'O' или null). Мы уже определили массив squares в конструкторе Board. Давайте изменим метод renderSquare, чтобы читать данные из этого массива:

  renderSquare(i) {
    return <Square value={this.state.squares[i]} />;  }

Посмотреть полный код этого шага

Теперь каждый Square получает проп value, который будет, либо 'X' или 'O', либо null для пустых клеток.

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

Вместо этого, давайте передадим из Board в Square функцию, и будем её вызывать из Square, когда по тому кликнули. Изменим метод renderSquare в Board-компоненте на:

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}      />
    );
  }

Примечание

Мы разбили возвращаемый элемент на несколько строк для удобства чтения и добавили скобки, чтобы JavaScript не вставлял точку с запятой после return и не ломал наш код.

Теперь мы передаём вниз два пропса из Board в Square: value и onClick. Проп onClick — это функция, которую Square вызывает при клике. Внесём следующие изменения в компонент Square:

• Заменим this.state.value на this.props.value внутри метода render.
• Заменим this.setState() на this.props.onClick() внутри метода render.
• Удалим constructor из Square, потому что компонент больше не отвечает за хранение состояния игры.

После этих изменений компонент Square выглядит так:

class Square extends React.Component {  render() {    return (
      <button
        className="square"
        onClick={() => this.props.onClick()}      >
        {this.props.value}      </button>
    );
  }
}

При клике на Square вызывается функция onClick, которая была передана из Board. Вот как это происходит:

1. Проп onClick на встроенном DOM-компоненте <button> указывает React установить обработчик события.
2. При клике по кнопке, React вызовет обработчик onClick, который определён в методе render() Square.
3. Этот обработчик вызовет this.props.onClick(). Проп onClick определён для Square внутри Board.
4. Т.к. Board передаёт в Square onClick={() => this.handleClick(i)}, Square при клике вызывает this.handleClick(i).
5. Мы пока не определили метод handleClick(), поэтому наш код сломается. Если вы сейчас кликните на клетку, вы увидите красный экран с ошибкой вроде this.handleClick is not a function.

Примечание

Атрибут onClick DOM-элемента <button> имеет для React особое значение, потому что это встроенный компонент. Для обычных компонентов вроде Square вы можете называть пропсы как угодно. Мы можем назвать проп Square onClick и метод для Board handleClick любым именем, и они будут работать так же. Но в React есть соглашение об именах — on[Имя события] для пропсов, отвечающих за события, и handle[Имя события] для методов обрабатывающих события.

При клике на Square мы должны получить ошибку, потому что метод handleClick ещё не определён. Давайте добавим его в класс Board:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
    };
  }

  handleClick(i) {    const squares = this.state.squares.slice();    squares[i] = 'X';    this.setState({squares: squares});  }
  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Next player: X';

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Посмотреть полный код этого шага

После этих изменений мы снова можем заполнять клетки по клику. Однако теперь состояние хранится внутри компонента Board, а не в разрозненных компонентах Square. При изменении состояния Board произойдёт повторный рендер компонентов Square. Хранение состояния всех клеток внутри компонента Board позволит в будущем определить победителя.

Поскольку компоненты Square больше не содержат состояния, они получают все значения из Board и уведомляют его при кликах. В терминах React компонент Square теперь является управляемым. Им полностью управляет Board.

Обратите внимание, что внутри handleClick мы вызвали .slice() для создания копии массива squares вместо изменения существующего массива. В следующей части мы объясним зачем создавать копию массива squares.

Почему иммутабельность так важна?

В последнем примере мы советовали использовать метод .slice() для создания и последующего изменения копии массива squares вместо изменения существующего. Теперь мы обсудим иммутабельность и почему её так важно изучить.

В целом есть два подхода к изменению данных. Первый подход — мутировать(изменять) данные, напрямую устанавливая новые значения. Второй подход — заменять данные новой копией, которая содержит изменения.

Мутирующее изменение данных

var player = {score: 1, name: 'Джефф'};
player.score = 2;

Изменение данных без мутаций

var player = {score: 1, name: 'Джефф'};

var newPlayer = Object.assign({}, player, {score: 2});

Конечный результат будет тот же, но без мутации (т.е. изменения) исходных данных напрямую. Ниже описаны преимущества такого подхода.

Сложное становится простым

Иммутабельность делает реализацию сложной функциональности проще. Ниже мы реализуем функциональность «путешествие во времени», которая позволит хранить историю игры и «возвращаться» к прошлым ходам. Эта функциональность не характерна для игр, однако, возможность отменять и заново применять действия часто встречается в приложениях. Избежание прямой мутации данных позволяет сохранять предыдущее состояния игры без изменений и обращаться к ним позже.

Обнаружение изменений

Работая с мутируемыми объектами довольно сложно обнаружить изменения, потому что они изменяются напрямую. В таком случае нам требуется сравнивать объект как со своей последней копией, так и со всем деревом объектов.

Обнаружение изменений в иммутабельных объектах намного проще. Если неизменяемый объект, на который ссылается, отличается от предыдущего, то объект изменился.

Как React понимает, когда нужно перерендерить

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

Вы можете узнать больше о shouldComponentUpdate() и как создавать чистые компоненты в статье про оптимизацию производительности.

Функциональные компоненты

Давайте сделаем Square функциональным компонентом.

В React функциональные компоненты являются более простым способом написания компонентов, которые содержат только метод render и не имеют собственного состояния. Вместо определения класса, который наследуется от React.Component, мы можем написать функцию, которая принимает на вход props и возвращает то, что должно быть отрендерено. Функциональные компоненты проще писать, чем классы, и многие компоненты могут быть оформлены таким образом.

Заменим класс Square следующей функцией:

function Square(props) {
  return (
    <button className="square" onClick={props.onClick}>
      {props.value}
    </button>
  );
}

Мы заменили this.props на props оба раза, когда обращались к ним.

Посмотреть полный код этого шага

Примечание

Когда мы заменили Square на функциональный компонент, мы также изменили onClick={() => this.props.onClick()} на более короткое onClick={props.onClick} (обратите внимание на отсутствие скобок с обеих сторон).

Очерёдность

Нам нужно исправить одну очевидную проблему в нашей игре — на поле нельзя поставить «O».

По-умолчанию установим первый ход за «X». Мы можем сделать это, изменяя начальное состояние внутри конструктора Board:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,    };
  }

Каждый раз, когда игрок делает ход, xIsNext (булево значение) будет инвертироваться, чтобы обозначить, какой игрок ходит следующим, а состояние игры будет сохраняться. Мы обновим метод handleClick класса Board, для инверсии значения xIsNext:

  handleClick(i) {
    const squares = this.state.squares.slice();
    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,    });
  }

После этих изменений «X» и «O» будут чередоваться. Попробуйте.

Давайте также изменим текст «status» в методе render класса Board так, чтобы он отображал какой игрок ходит следующим:

  render() {
    const status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    return (
      

После этих изменений наш Board-компонент должен выглядеть так:

class Board extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      squares: Array(9).fill(null),
      xIsNext: true,    };
  }

  handleClick(i) {
    const squares = this.state.squares.slice();    squares[i] = this.state.xIsNext ? 'X' : 'O';    this.setState({      squares: squares,      xIsNext: !this.state.xIsNext,    });  }

  renderSquare(i) {
    return (
      <Square
        value={this.state.squares[i]}
        onClick={() => this.handleClick(i)}
      />
    );
  }

  render() {
    const status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Посмотреть полный код этого шага

Определение победителя

Теперь, когда мы показываем, какой игрок ходит следующим, нам также нужно показать, когда игра закончена, и больше нет ходов. Скопируйте вспомогательную функцию в конец файла:

function calculateWinner(squares) {
  const lines = [
    [0, 1, 2],
    [3, 4, 5],
    [6, 7, 8],
    [0, 3, 6],
    [1, 4, 7],
    [2, 5, 8],
    [0, 4, 8],
    [2, 4, 6],
  ];
  for (let i = 0; i < lines.length; i++) {
    const [a, b, c] = lines[i];
    if (squares[a] && squares[a] === squares[b] && squares[a] === squares[c]) {
      return squares[a];
    }
  }
  return null;
}

Функция получает массив из 9 клеток, проверяет победителя и возвращает 'X', 'O' или null.

Будем вызывать calculateWinner(squares) внутри метода render класса Board, чтобы проверять, выиграл ли игрок. Если у нас есть победитель, мы покажем сообщение «Выиграл X» или «Выиграл O». Заменим объявление status в render следующим кодом:

  render() {
    const winner = calculateWinner(this.state.squares);    let status;    if (winner) {      status = 'Выиграл ' + winner;    } else {      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');    }
    return (
      

Теперь мы можем изменить метод handleClick класса Board для выхода из функции и игнорировании клика, если кто-то уже победил или если клетка уже заполнена:

  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {      return;    }    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

Посмотреть полный код этого шага

Поздравляем! Теперь у вас есть работающая игра в крестики-нолики. И кроме этого вы только что изучили основы React. Похоже, настоящий победитель здесь это вы.

Добавление путешествия во времени

В качестве последнего упражнения давайте добавим возможность «вернуться в прошлое» — к прошлым ходам игры.»

Сохраняем историю ходов

Если бы мы изменяли массив squares, реализация такой задачи была бы очень трудной.

Но мы использовали slice() для создания новой копии массива squares после каждого хода и работали с ним, не изменяя оригинала. Это позволит нам хранить каждую версию массива squares и перемещаться по ходам, которые уже были сделаны.

Сохраним массивы squares в другом массиве и назовём его history. Этот массив history будет хранить все состояния поля. От первого до последнего хода. У него будет такая структура:

history = [
  
  {
    squares: [
      null, null, null,
      null, null, null,
      null, null, null,
    ]
  },
  
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, null,
    ]
  },
  
  {
    squares: [
      null, null, null,
      null, 'X', null,
      null, null, 'O',
    ]
  },
  
]

Осталось решить, какой компонент будет отвечать за состояние history.

Подъём состояния. Снова

Мы хотим, чтобы вышележащий компонент Game отображал список последних ходов. Для этого ему понадобится доступ к history, поэтому мы поместим history в состояние родительского компонента Game.

Размещение history в состоянии компонента Game позволяет нам удалить squares из состояния его дочернего компонента Board. Так же, как мы уже «поднимали состояние» из компонента Square в Board, мы теперь поднимем его из Board в компонент-родитель Game. Это даст компоненту Game полный контроль над данными Board и позволит отдавать команду для Board на рендеринг прошлых ходов из history:

Для начала зададим начальное состояние компонента Game внутри конструктора:

class Game extends React.Component {
  constructor(props) {    super(props);    this.state = {      history: [{        squares: Array(9).fill(null),      }],      xIsNext: true,    };  }
  render() {
    return (
      <div className="game">
        <div className="game-board">
          <Board />
        </div>
        <div className="game-info">
          <div>{}</div>
          <ol>{}</ol>
        </div>
      </div>
    );
  }
}

После этого нужно, чтобы Board получил пропсы squares и onClick из компонента Game. Поскольку внутри Board у нас один обработчик кликов для всех Squares, нам достаточно передать позицию для каждого Square в обработчик onClick, чтобы показать по какой клетке мы кликнули. Для изменения компонента Board нам нужно выполнить следующие шаги:

• Удалить constructor в Board.
• Заменить this.state.squares[i] на this.props.squares[i] в методе renderSquare Board.
• Заменить this.handleClick(i) на this.props.onClick(i) в методе renderSquare Board.

Теперь компонент Board должен выглядеть вот так:

class Board extends React.Component {
  handleClick(i) {
    const squares = this.state.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      squares: squares,
      xIsNext: !this.state.xIsNext,
    });
  }

  renderSquare(i) {
    return (
      <Square
        value={this.props.squares[i]}        onClick={() => this.props.onClick(i)}      />
    );
  }

  render() {
    const winner = calculateWinner(this.state.squares);
    let status;
    if (winner) {
      status = 'Выиграл ' + winner;
    } else {
      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div>
        <div className="status">{status}</div>
        <div className="board-row">
          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }
}

Давайте обновим метод render компонента Game, чтобы использовать последнюю запись из истории для определения и отображения статуса игры:

  render() {
    const history = this.state.history;    const current = history[history.length - 1];    const winner = calculateWinner(current.squares);    let status;    if (winner) {      status = 'Выиграл ' + winner;    } else {      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');    }
    return (
      <div className="game">
        <div className="game-board">
          <Board            squares={current.squares}            onClick={(i) => this.handleClick(i)}          />        </div>
        <div className="game-info">
          <div>{status}</div>          <ol>{}</ol>
        </div>
      </div>
    );
  }

Поскольку компонент Game теперь рендерит статус игры, мы можем убрать соответствующий код из метода render внутри Board. После изменений метод render компонента Board выглядит так:

  render() {    return (      <div>        <div className="board-row">          {this.renderSquare(0)}
          {this.renderSquare(1)}
          {this.renderSquare(2)}
        </div>
        <div className="board-row">
          {this.renderSquare(3)}
          {this.renderSquare(4)}
          {this.renderSquare(5)}
        </div>
        <div className="board-row">
          {this.renderSquare(6)}
          {this.renderSquare(7)}
          {this.renderSquare(8)}
        </div>
      </div>
    );
  }

Наконец, нужно перенести метод handleClick из компонента Board в компонент Game. Мы также должны изменить handleClick, потому что состояние компонента Game имеет другую структуру. В методе handleClick компонента Game мы добавим новые записи истории в history.

  handleClick(i) {
    const history = this.state.history;    const current = history[history.length - 1];    const squares = current.squares.slice();    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{        squares: squares,      }]),      xIsNext: !this.state.xIsNext,
    });
  }

Примечание

В отличие от метода массива push(), с которым вы должно быть знакомы, метод concat() не изменяет оригинальный массив, поэтому мы предпочтём его.

Теперь компоненту Board нужно только два метода — renderSquare и render. Состояние игры и handleClick должны находиться внутри компонента Game.

Посмотреть полный код этого шага

Показываем прошлые ходы

Поскольку мы записываем ход игры, мы теперь можем показать игроку список предыдущих ходов.

Ранее мы узнали, что React-элементы — это обычные объекты JavaScript. Мы можем передавать их внутри нашего приложения. Для рендера нескольких записей в React мы можем использовать массив React-элементов.

В JavaScript у массивов есть метод map(), который обычно используется для преобразования данных. Например:

const numbers = [1, 2, 3];
const doubled = numbers.map(x => x * 2); 

Используя метод map, мы можем отобразить историю наших ходов в React-элементы, представленные кнопками на экране, и отрисовать список кнопок для «перехода» к прошлым ходам.

Давайте применим map к history внутри метода render Game-компонента:

  render() {
    const history = this.state.history;
    const current = history[history.length - 1];
    const winner = calculateWinner(current.squares);

    const moves = history.map((step, move) => {      const desc = move ?        'Перейти к ходу #' + move :        'К началу игры';      return (        <li>          <button onClick={() => this.jumpTo(move)}>{desc}</button>        </li>      );    });
    let status;
    if (winner) {
      status = 'Выиграл ' + winner;
    } else {
      status = 'Следующий ход: ' + (this.state.xIsNext ? 'X' : 'O');
    }

    return (
      <div className="game">
        <div className="game-board">
          <Board
            squares={current.squares}
            onClick={(i) => this.handleClick(i)}
          />
        </div>
        <div className="game-info">
          <div>{status}</div>
          <ol>{moves}</ol>        </div>
      </div>
    );
  }

Посмотреть полный код этого шага

Для каждого хода в истории игры мы создаём элемент списка <li>, который содержит кнопку <button>. У кнопки есть обработчик onClick, который вызывает метод this.jumpTo(). Мы ещё не реализовали этот jumpTo() метод. Пока что мы должны видеть только список ходов, которые были сделаны в игре и вот такое предупреждение в инструментах разработчика:

Warning:
Each child in an array or iterator should have a unique «key» prop. Check the render method of «Game».

Что переводится как:

Предупреждение:
Каждый элемент в массиве или итераторе должен иметь уникальный проп «key». Проверьте метод render в Game

Давайте обсудим, что это предупреждение значит.

Выбор ключа

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

Представим изменения от

<li>Алекс: 7 задач осталось</li>
<li>Бен: 5 задач осталось</li>

к

<li>Бен: 9 задач осталось</li>
<li>Клава: 8 задач осталось</li>
<li>Алекс: 5 задач осталось</li>

В дополнении к изменённым цифрам, человек, читающий это, вероятно, сказал бы что Алекс и Бен поменялись местами, а между ними вставили Клаву. Но React — это компьютерная программа, и она не знает чего мы хотим, поэтому нам нужно указать свойство key для каждого элемента списка, чтобы отличать каждый элемент от остальных. Один из вариантов — использовать строки Алекс, Бен, Клава. Если мы показываем информацию из базы данных, то в качестве ключей мы могли бы использовать идентификаторы из базы.

<li key={user.id}>{user.name}: {user.taskCount} задач осталось</li>

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

key — это специальное зарезервированное свойство в React (наряду с ref, более продвинутой функциональностью). Когда элемент создан, React извлекает свойство key и сохраняет этот ключ непосредственно в возвращаемом элементе. Хотя key выглядит как пропс, к нему нельзя обращаться через this.props.key. React автоматически использует key для определения того, какой компонент должен обновиться. Компонент не может узнать о своём ключе.

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

Если ключ не был определён, React покажет предупреждение и по умолчанию использует индекс элемента в массиве в качестве ключа. Использование индексов массива может вызвать проблемы при попытке отсортировать элементы списка или при вставке/удалении элементов. Явная передача key={i} отключает предупреждение, но вызывает те же проблемы, связанные с индексами массивов, так что в большинстве случаев лучше так не делать.

Ключи не обязательно должны быть уникальными глобально. Они должны быть уникальными только между компонентами и их братьями и сёстрами.

Реализация путешествия во времени

В истории игры крестики-нолики каждый прошлый ход имеет уникальный идентификатор: это номер хода в последовательности. Ходы никогда не меняют свой порядок, не удаляются и не добавляются в середину последовательности, так что вполне безопасно пользоваться индексом в качестве ключа.

В методе render компонента Game мы можем добавить ключ следующим образом <li key={move}> и предупреждения от React об отсутствующих ключах должны пропасть:

    const moves = history.map((step, move) => {
      const desc = move ?
        'Перейти к ходу #' + move :
        'К началу игры';
      return (
        <li key={move}>          <button onClick={() => this.jumpTo(move)}>{desc}</button>
        </li>
      );
    });

Посмотреть полный код этого шага

Клик на любой кнопке из списка выбросит ошибку, потому что метод jumpTo не определён. Прежде чем реализовывать jumpTo, мы добавим stepNumber в состояние компонента Game, для указания номера хода, который сейчас отображается.

Сначала добавим stepNumber: 0 в начальное состояние Game внутри constructor:

class Game extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      history: [{
        squares: Array(9).fill(null),
      }],
      stepNumber: 0,      xIsNext: true,
    };
  }

Далее, мы определим метод jumpTo в компоненте Game для обновления stepNumber. Мы также установим xIsNext в true, если номер хода, на который мы меняем stepNumber, чётный:

  handleClick(i) {
    
  }

  jumpTo(step) {    this.setState({      stepNumber: step,      xIsNext: (step % 2) === 0,    });  }
  render() {
    
  }

Мы сделаем ещё несколько изменений в методе Game handleClick, который выполняется когда вы кликаете на клетки.

Добавленный нами stepNumber указывает номер хода, отображающегося пользователю. Когда мы делаем очередной ход, нам нужно обновить stepNumber используя stepNumber: history.length как часть аргумента для this.setState. Это гарантирует, что мы не застрянем, показывая одно и то же после того, как был сделан новый ход.

Мы также заменим чтение this.state.history на this.state.history.slice(0, this.state.stepNumber + 1). Это гарантирует, что если мы «вернёмся назад», а затем сделаем новый шаг из этой точки, мы удалим всю «будущую» историю, которая перестала быть актуальной.

  handleClick(i) {
    const history = this.state.history.slice(0, this.state.stepNumber + 1);    const current = history[history.length - 1];
    const squares = current.squares.slice();
    if (calculateWinner(squares) || squares[i]) {
      return;
    }
    squares[i] = this.state.xIsNext ? 'X' : 'O';
    this.setState({
      history: history.concat([{
        squares: squares
      }]),
      stepNumber: history.length,      xIsNext: !this.state.xIsNext,
    });
  }

Наконец, мы изменим метод render для Game, чтобы вместо рендера последнего хода он рендерил ход, соответствующий stepNumber:

  render() {
    const history = this.state.history;
    const current = history[this.state.stepNumber];    const winner = calculateWinner(current.squares);

    

Если мы кликнем на любой ход в игровой истории, поле должно немедленно обновиться, показывая как оно выглядело после этого хода.

Посмотреть полный код этого шага

Подводя итоги

Поздравляем! Вы только что создали игру в крестики-нолики, которая:

• Позволяет вам играть в крестики нолики,
• Показывает, когда один из игроков выиграл,
• Хранит историю игры,
• Позволяет игрокам просматривать историю игры и видеть прошлые состояния игрового поля.

Хорошая работа! Мы надеемся, вы чувствуете уверенность в своих знаниях о том, как работает React.

Посмотреть готовую игру вы можете здесь: Готовый результат.

Если у вас есть дополнительное время или вы хотите попрактиковать свои новые навыки в React, вот пара идей для улучшений, которые вы можете внедрить в крестики-нолики (перечислены в порядке увеличения сложности):

1. Отобразите позицию для каждого хода в формате (колонка, строка) в списке истории ходов.
2. Выделите выбранный элемент в списке ходов.
3. Перепишите Board, используя вложенные циклы для создания клеток, вместо их жёсткого кодирования.
4. Добавьте переключатель, который позволит вам сортировать ходы по возрастанию или по убыванию.
5. Когда кто-то выигрывает, подсветите три клетки, которые привели к победе.
6. Когда победителя нет, покажите сообщение о том, что игра окончилась вничью.

В этом вводном руководстве мы затронули концепции React, включая элементы, компоненты, пропсы и состояние. Для более детального ознакомления с каждой из этих тем обратитесь к остальной документации. Чтобы узнать больше про объявление компонентов изучите Документацию по API React.Component.

Привет, мир – React

Самый маленький пример на React выглядит так:

ReactDOM.render(
  <h2>Привет, мир!</h2>,
  document.getElementById('root')
);

На странице появится заголовок «Привет, мир!».

Посмотреть на CodePen

По ссылке выше находится онлайн-редактор. Попробуйте отредактировать код и посмотрите, как изменится результат. Мы ещё увидим много таких интерактивных примеров.

Как читать это руководство

В этом руководстве мы рассмотрим строительные блоки React-приложений: элементы и компоненты. Освоив их, вы сможете создавать сложные приложения из маленьких повторно используемых частей.

Совет

Это руководство предназначено для людей, которые предпочитают изучать базовые понятия шаг за шагом. Если вы предпочитаете учиться на практике, ознакомьтесь с нашим практическим введением. Учебник и руководство в чем-то дополняют друг друга.

Это первая глава в пошаговом руководстве про основные понятия в React. Оглавление находится в боковой панели. Если вы читаете руководство с мобильного устройства, открыть навигационное меню можно, нажав кнопку в правом нижнем углу экрана.

Каждая глава в этом руководстве опирается на знания из предыдущей. Большую часть React можно изучить, прочитав главы руководства «Основные понятия» в том порядке, в котором они перечислены на боковой панели. Например, «Знакомство с JSX» — следующая глава.

Необходимый уровень знаний

React — это библиотека JavaScript, поэтому мы предполагаем, что у вас есть базовое понимание языка JavaScript. Если вы чувствуете себя неуверенно, мы рекомендуем прочесть введение в JavaScript для проверки своих знаний; оно облегчит чтение руководства по React. Это займёт от 30 минут до часа, но в результате у вас не будет ощущения, что вы одновременно изучаете и React, и JavaScript.

Примечание

В примерах руководства иногда используется новый синтаксис JavaScript. Если вы не работали с JavaScript в последние несколько лет, эти три пункта должны помочь вам.

Начинаем!

Прокрутите страницу немного ниже, чтобы перейти к следующей главе руководства.

7 известных приложений использующих ReactJS в наши дни

Посмотрим правде в глаза — digital мир меняется пока мы разговариваем. Конечно трудно приспособиться к тенденциям в такой реальности. Однако это как раз то, что делают крупные сервисы и приложения, которые у всех на слуху, в этом направлении.

Такие крупные приложения, как Facebook, Instagram, Netflix и другие, постоянно совершенствуют свой опыт и адаптируются к новым фреймворкам и трендам.

С недавнего времени, идет бурное обсуждение вокруг ReactJS и его впечатляющие возможности.

В принципе, React стал очень популярным среди разработчиков, и есть масса ресурсов, которые входят в большую часть его технических достоинств — такие как NodeJS и множество других связанных с ним фреймворков/инструментов JavaScript. Небходим ли вашему проекту React мы рассматривали в статье, где писали все «за» и «против» этой библиотеки.

Доказательство его популярности лучше всего демонстрируется приложениями, которые используют ReactJS — и сегодня я представлю вам список одних из самых известных приложений на основе ReactJS. В оригинальной статье в списке десять приложений, три показались мне не такими уж известными, поэтому были убраны.

Что такое React?

Короче говоря, React — это библиотека JavaScript для создания пользовательских интерфейсов. Очень часто он неправильно интерпретируется как фреймворк или язык программирования. React позволяет разработчикам создавать крупные веб-приложения, которые могут работать с данными, изменять их, без перезагрузки страницы. Его основная цель — быть быстрым, простым и масштабируемым. React распространяется только на пользовательский интерфейс в приложениях (источник).

Это просто среда выполнения JavaScript. Легкий, быстрый и современный способ выполнения кода на вашем компьютере.

По каким причинам одни из самых крупных компаний используют React?

#1 Facebook

Facebook использует ReactJS, хоть и частично. Мобильное приложение также построено на версии React под названием React Native, суть то же самое, хоть и отвечает за отображение iOS и Android нативных компонентов  вместо элементов DOM.

Интересно, что Facebook является тем местом, где изначально была создана библиотека ReactJS, поэтому очевидно, что он его использует. В настоящее время Facebook открыл бета-версию полностью переписанного ReactJS, получившего название React Fiber.

#2 Instagram

Роль ReactJS в Instagram огромна. Доказательством этого являются многочисленные функции, такие как геопозиционирование, API Google карт, точность поисковой системы, а также теги, которые вылетают без хэштегов. И все это есть в API приложения — что действительно впечатляет.

#3 Netflix

React версия работает также и с Netflix — особенно на их платформе под названием Gibbon, где используется для низкопроизводительных телевизионных устройств вместо DOM, используемых в веб-браузерах. Netflix даже опубликовал официальное сообщение в блоге, объясняя, как библиотека ReactJS помогает повысить скорость запуска, производительность, модульность и другие преимущества.

UI инженеры Netflix прямо так и пишут в блог посте:

На наше решение принять React повлияли ряд факторов, в первую очередь: 1) скорость запуска, 2) производительность и 3) модульность.

#4 New York Times

Пару месяцев назад New York Times разработала отличный новый проект, который имитирует внешний вид звезд на красном ковре Оскара. Очевидно, что интерфейс этого проекта был встроен в React и позволяет пользователям фильтровать галерею разных фотографий за 19 лет. Ре-рендеринг в этом проекте является лишь одной из впечатляющих функций, за которые мы можем поблагодарить ReactJS.

Примечание: на момент перевода этой статьи, проект красный ковер не функционировал должным образом.

#5 Yahoo! Mail

Удивительно (или нет), почтовый клиент Yahoo!, тоже использует React. С тех пор как Facebook завладел Yahoo!, появилась идея мощной и упорядоченной архитектуры, и именно поэтому React был включен по максимуму.

Инженеры, работающие на платформе Yahoo Mail, нуждались в большом количестве обновлений. Как говорится в блоге на Tumblr:

Для платформы Yahoo Mail следующего поколения мы хотели:

• Прогносируемый флоу ~ Легкая отладка
• Независимо развертываемые компоненты
• Более низкий уровень вхождения
• Независимость от больших библиотек

В итоге мы решили пойти за ReactJS и Flux по следующим причинам

• React реализует односторонний реактивный поток данных
• Виртуальный DOM позволяет выполнять код на стороне клиента и сервера
• Код в Javascript
• Растущее и активное сообщество

#6 WhatsApp

Несмотря на то, что до его официального запуска было несколько бета-версий, WhatsApp использует ReactJS для создания пользовательских интерфейсов. 

#7 Dropbox

Dropbox переключился на ReactJS более года назад. Как раз в то время, когда React стал очень популярным среди разработчиков приложений.

Заключение

В конце концов, производительность разработки с ReactJS, повышение эффективности и многочисленные организационные преимущества — все это является причиной того, почему крупные и известные приложения обновляются до ReactJS и используют преимущества, предлагаемые этой библиотекой. И несмотря на каждое обновление «фреймворка», которое несет за собой какие-то дополнительные затраты, все это малозначимо, когда дело доходит до создания идеального пользовательского интерфейса — будь то веб или мобильное приложение.

Неточный перевод статьи на brainhub.eu

работа с состояниями компонентов класса, примеры кода

От автора: как только вы приступите к изучению React, вы столкнетесь с понятием state. State имеет огромное значение в React. Возможно, это первая причина, почему вы стали изучать React. Давайте рассмотрим понятие React state и принцип его работы.

Что такое state?

State (состояние) в React – это объект простого JS, позволяющий отслеживать данные компонента. Состояние компонента может меняться. Смена состояния компонента зависит от функциональности приложения. Изменения могут основываться на ответе от пользователя, новых сообщениях с сервера, ответа сети и т.д.

Состояние компонента должно быть приватным для компонента и контролироваться им. Изменения состояния компонента необходимо делать внутри компонента – инициализация и обновление состояния компонента.

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

Состояния доступны только для компонентов класса. Главная причина, почему вы захотите использовать компоненты класса, а не функциональные компоненты заключается в том, что компоненты класса могут обладать состоянием. Давайте разберемся, в чем разница. Функциональные компоненты – это JS функции:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

const App = (props) => {
return (
<div>
{ this.props }
</div>
)
}

Если вам необходима такая простая функциональность, как сверху, то функциональные компоненты подойдут идеально. Компонент класса намного сложнее.

class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: ‘johndoe’ }
}
render() {
const { username } = this.state
return(
<div>
{ username }
</div>
)
}
}

Выше я устанавливаю состояние username компонента в строку.

Конструктор

Судя по официальной документации, инициализация состояния происходит в конструкторе. Инициализация проходит через установку this.state в объект, как сверху. Помните: state – это объект простого JS. Первичное состояние компонента App было задано в объект state, в котором хранится ключ username и значение johndoe (this.state = { username: ‘johndoe’ }).

Инициализация состояния компонента может быть настолько сложной:

constructor(props) {
super(props)
this.state = {
currentTime: 0,
status: false,
btnOne: false,
todoList: [],
name: ‘John Doe’
}
}

Доступ к состоянию

Доступ к инициализированному состоянию можно получить в методе render(), как я сделал сверху.

render() {
const { username } = this.state
return(
<div>
{ username }
</div>
)
}

Другой способ:

render() {
return(
<div>
{ this.state.username }
</div>
)
}

Разница в том, что в первом примере я извлек username из состояния, но его можно записать через const status = this.state.username. Благодаря деструктуризации ES6, я не обязан идти таким путем. Не смущайтесь, когда видите такое. Важно знать, что когда я делал это, я не переназначал состояние. Первичные настройки состояния были проведены в конструкторе. Повторно их делать не нужно – никогда не обновляйте состояние компонента напрямую.

Обратиться к состоянию можно this.state.property-name. Не забывайте, что после инициализации состояния для использования this.state необходимо получить доступ к состоянию.

Обновление состояния

Единственный допустимый способ обновления состояния компонента – через setState(). Разберем это на примере. Во-первых, начну с создания метода, который будет вызываться для обновления username компонента. Этот метод должен получить аргумент, который будет использовать для обновления состояния.

handleInputChange(username) {
this.setState({username})
}

Еще раз, обратите внимание, что я передаю объект в setState(). Далее мне необходимо передать эту функцию в обработчик события, который вызывается при изменении значения поля ввода. Обработчик события предоставит контекст события, которое было вызвано, что позволяет получить значение, введенное в поле, через event.target.value. Это аргумент, переданный в метод handleInputChange(). Метод render должен выглядеть следующим образом.

render() {
const { username } = this.state
return (
<div>
<div>
<input
type=»text»
value={this.state.username}
onChange={event => this.handleInputChange(event.target.value)}
/>
</div>
<p>Your username is, {username}</p>
</div>
)
}

При каждом вызове setState() в React отправляется запрос на обновление DOM через обновленное состояние. Теперь вы понимаете, что обновление состояния можно отложить.

Компонент должен выглядеть следующим образом:

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

class App extends React.Component {
constructor(props) {
super(props)
this.state = { username: ‘johndoe’ }
}
handleInputChange(username) {
this.setState({username})
}
render() {
const { username } = this.state
return (
<div>
<div>
<input
type=»text»
value={this.state.username}
onChange={event => this.handleInputChange(event.target.value)}
/>
</div>
<p>Your username is, {username}</p>
</div>
)
}
}

Передача состояния в виде свойств

Состояние можно передавать в виде свойств от родителя к дочернему компоненту. Создадим новый компонент для создания списка напоминаний. У компонента будет поле ввода ежедневных задач, задачи будут передаваться как свойства в дочерний компонент.

Попробуйте создать родительский компонент сами, используя полученные знания.

Начнем с создания первичного состояния компонента.

class App extends React.Component {
constructor(props) {
super(props)
this.state = { todoList: [] }
}
render() {
return()
}
}

У состояния компонента есть todoList, заданный в пустой массив. В методе render() я хочу возвращать форму для отправки задач.

render() {
const { todoList } = this.state
return (
<div>
<h3>Enter your to-do</h3>
<form onSubmit={this.handleSubmit}>
<label>Todo Item</label>
<input
type=»text»
name=»todoitem»
/>
<button type=»submit»>Submit</button>
</form>
</div >
)
}

После ввода и нажатия на кнопку отправки будет вызываться метод handleSubmit. Этот метод будет обновлять состояние компонента. Я буду обновлять состояние путем добавления нового значения в todoList массив через concat. Так будет устанавливаться значение для todoList внутри метода setState(). Как это выглядит:

handleSubmit = (event) => {
event.preventDefault()
const value = (event.target.elements.todoitem.value)
this.setState(({todoList}) => ({
todoList: todoList.concat(value)
}))
}

При каждом клике на кнопку отправки получается контекст события. Останавливать стандартное действие отправки, которое перезагружает страницу, будем через event.preventDefault(). Введенное в поле значение присваивается переменной value, которая потом передается как аргумент при вызове todoList.concat(). React обновляет состояние todoList через добавление нового значения в первичный пустой массив. Этот новый массив становится текущим состоянием todoList. Цикл повторяется при добавлении нового элемента.

Цель – передать отдельный элемент в дочерний компонент в виде свойства. Для этого урока будем называть компонент TodoItem. Вставьте код ниже в родительский div внутри метода render().

<div>
<h3>Your todo lists include:</h3>
{ todoList.map(i => <TodoItem item={i} /> )}
</div>

Мы проходимся в цикле по todoList через map. То есть в компонент TodoItem передается один элемент в виде свойства. Для этого вам нужен компонент TodoItem, который получает свойство и рендерит его в DOM. Я покажу, как сделать это через функциональные компоненты и компоненты класса.

Функциональный компонент:

const TodoItem = (props) => {
return (
<div>
{props.item}
</div>
)
}

Компонент класса:

class TodoItem extends React.Component {
constructor(props) {
super(props)
}
render() {
const {item} = this.props
return (
<div>
{item}
</div>
)
}
}

Если в этом компоненте не нужно управлять состоянием, лучше использовать функциональный компонент.

Повышение уровня

При разработке React приложений вы часто будете обрабатывать состояние. Изучив описанные выше темы вы должны быть уверены в том, что сможете погрузиться в продвинутую часть управления состоянием в React. Для более продвинутого изучения рекомендую официальную документацию React State and Lifecycle, а также Uber React Guide on Props vs State.

Автор: Kingsley Silas

Источник: //css-tricks.com/

Редакция: Команда webformyself.

React JS. Основы

Изучите основы ReactJS на практическом примере по созданию учебного веб-приложения

Получить курс сейчас!

ReactJS: основы

Изучите основы ReactJS и создайте ваше первое приложение на ReactJS

Смотреть

Топ-20 приложений на React Native в 2021 году

Делимся лучшими лучшими React Native-решениями и рассказываем о том, что же такого особенного в этом кроссплатформенном фреймворке. 

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

1. Instagram

Жизнь без Instagram — представить такое сегодня могут разве что единицы. Для многих площадка стала главным источником новостей. Instagram помогает добыть информацию, в буквальном смысле, по всем фронтам: от спортивных тренировок до горячих скандалов знаменитостей и вегетарианских рецептов.

Instagram — одна из самых популярных платформ в мире. За один месяц приложение посещает 1 миллиард активных пользователей, более 500 миллионов используют его ежедневно. В своем официальном блоге команда Instagram сообщила, что благодаря React Native им удалось за короткое время реализовать функционал одновременно для iOS и Android-версий.

НАШИ ПРИЛОЖЕНИЯ НА REACT NATIVE

2. Skype

В начале 2017 года команда Skype сообщила о разработке мобильного приложения на React Native. Android-версия приложения представляла собой полностью обновленную версию Skype. Изменениям подверглась существенная часть продукта: от дизайна до функционала.

Во время разработки мобильной версии команда Skype позаимствовала значительную часть функционала «прежнего» Skype и внедрила новые фичи. Так, например, в приложении появилось дополнение Giphy от Microsoft — с его помощью пользователи могут обмениваться гифками в чате.

Миллионы людей по всему миру все так же используют Skype.

3. UberEats

Сервис UberEats позволяет заказывать еду из любимых ресторанов.

Чтобы связать рестораны, курьер-партнеров и пользователей, команда Uber решила усовершенствовать панель управления Restaurants и переписать все компоненты на React Native.

Позже разработчики рассказали о «плодах» проделанной работы. На React Native была написана лишь небольшая часть системы UberEats, однако решение использовать этот фреймворк для панели управления Restaurants оказалось более чем правильным. После интеграции React Native обновленная версия панели управления Restaurants стала привычным инструментом для большинства ресторанов UberEats. Это, в свою очередь, помогло расширить клиентскую базу Uber и сделать UberEats одним из топовых сервисов по доставке еды в США.

4. Walmart

Сегодня Walmart — это одна из самых популярных сетей магазинов в мире. Стремясь удержать позицию топового игрока в ритейл-индустрии, команда Walmart сделала большую ставку на React Native.

C помощью React Native Walmart написали iOS и Android-версии приложения, привлекая не две, а одну команду разработчиков и, соответственно, вдвое сократили трудозатраты. Благодаря быстрому циклу разработки (важное преимущество React Native) команда смогла ускорить дату релиза приложения, обойти главных конкурентов и удовлетворить нужды покупателей.

Преимущества этого кроссплатформенного фреймворка во многом перевешивают недостатки. Именно поэтому Walmart рекомендуют использовать React Native в мобильной разработке. Всем: от стартапов, до компаний из рейтинга Fortune-500.

5. Tesla

Tesla, всемирно известный производитель электрокаров, также использовали React Native для разработки мобильного приложения. Внешний вид и поведение iOS и Android-версий ничем не отличались для конечного пользователя. Весь функционал приложения, включая зарядку, фары, клаксон, панорамную крышу работает одинаково на обеих платформах.

6. Facebook Ads

Для Facebook, команды представившей миру React Native в 2015, фреймворк является важной частью технологического стека.

7. Wix

Wix, популярный конструктор сайтов, спроектировали мобильное приложение на React Native.

Сервис также представил ускоренный курс React Native — с его помощью новички могут выучить основы еще до начала работы с фреймворком. C мая прошлого года все желающие могут найти курс в открытом доступе.

8. Bloomberg

После того,  как Bloomberg приняли решение разработать мобильное приложение, команда рассчитывала найти технологию, которая улучшит пользовательский опыт и справится с персонализированным контентом. Выбор пал на React Native.

Используя этот фреймворк, разработчики Bloomberg быстро переписали iOS и Android-версии клиентского приложения, добавили новый функционал. На всю работу ушло всего 5 месяцев, что вдвое меньше разработки с нативными технологиями.

9. Airbnb

Airbnb — это абсолютный лидер среди сервисов аренды жилья. C его помощью легко найти «угол» практически в любой точке мира. В 2016 году React Native сильно помог Airbnb ускорить процесс разработки мобильного приложения.

10. SoundCloud Pulse

Еще одно решение в подборке — SoundCloud Pulse, приложение для управления аккаунтов артистов. 

На этапе разработки мобильного приложения  команда SoundCloud столкнулась с рядом трудностей. В частности, это касалось поиска iOS-разработчиков. React Native помог обойти это препятствие. SoundCloud и по сей день используют этот кроссплатформенный фреймворк. 

11. Whym

Whym — это переводчик в режиме реального времени для деловых поездок и  путешествий. Для разработки мобильной версии приложения Whym решили использовать React Native. И не прогадали!

12. ChaperHome

ChaperHome — еще одно решение, созданное с помощью React Native. Приложение помогает повысить уровень безопасности — собственной и близких людей. Чтобы предотвратить опасные ситуации, пользователь выбирает «защитников» (эти люди получат уведомление в случае тревоги) и устанавливает время прибытия в пункт назначения.

13. Shine

Shine —это платформа, которая помогает бороться со стрессом с помощью мотивирующих статей, лозунгов и аудиозаписей. Написанное на React Native приложение успело набрать популярность в США и Канаде.

14. Microsoft OneDrive

Microsoft OneDrive — это сервис для облачного хранения и синхронизации информации от Microsoft.  Для разработки мобильной версии OneDrive команда использовала React Native.

15. Townske

Townske — это приложение-путеводитель, которое поможет вам найти лучшие местные достопримечательности, кафе и магазины практически в любом крупном городе по всему миру. Благодаря React Native дизайн приложения получился очень отзывчивым  — это значит, что приложение работает быстрее и более плавно, чем гибридное.

16. Gyroscope

Gyroscope на основе собранных данных может построить полную историю вашей жизни. С помощью этого приложения вы можете отслеживать свои шаги, сон, прогресс тренировок, пульс и вообще все, что вас волнует. Это мобильное приложение на React Native интегрируется с Apple Health и другими источниками данных, а потом формирует отчеты со всеми отслеживаемыми данными.

17. Pinterest

Мобильное приложение Pinterest поможет вам найти вдохновение и идеи для чего угодно — что приготовить на ужин, что подарить коллеге, как украсить дом к празднику и т.д. Их команда решила использовать React Native, чтобы сократить время разработки и добиться нативного внешнего вида приложения.

18. Discord

Discord — это приложение для обмена текстовыми и голосовыми сообщениями, созданное специально для геймеров. Для создания приложения на iOS они использовали React Native и были довольны результатом. Сейчас в Дискорде миллионы активных пользователей, приложение на 99.9% crash-free, а его рейтинг в App Store — 4.8 звезды.

19. Salesforce

Мобильное приложение Salesforce позволяет вам управлять своим бизнесом прямо с телефона. Вы можете просматривать запланированные мероприятия или получать обновления по учетным записям на ходу. Это приложение также было разработано на React Native.

20. Hive

Приложение Hive позволяет пользователям управлять своими устройствами в умном доме. Вы можете включать и выключать свет, управлять отоплением и горячей водой одним нажатием на экран. Приложение было разработано с использованием React Native в среде AWS.

Вместо вывода

В статье мы бегло пробежались по топовым мобильным приложениям, которые появились благодаря React Native. Каждое из них — про разное и для разных людей, но все-таки есть кое-что, что их объединяет. Все (без исключения) чертовски популярны!

С точки зрения перформанса и пользовательского опыта, React Native — отличное решение. Этот фреймворк позволит вам создать продукт, который найдет отклик среди пользователей. Поэтому всем, кто ищет подходящую технологию для мобильной разработки, настоятельно рекомендуем присмотреться к React Native.

Те, кто регулярно читают нашу рассылку, запускают стартапы в 5 раз быстрее. Присоединяйтесь!

Те, кто регулярно читают нашу рассылку, запускают стартапы в 5 раз быстрее. Присоединяйтесь!

Привет, мир – React

Самый небольшой пример на React выглядит так:

ReactDOM.render(
  <h2>Привет, мир!</h2>,
  document.getElementById('root')
);

На странице отображается заголовок «Привет, мир!».

Попробовать на CodePen

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

Как читать это руководство

В этом руководстве мы рассмотрим строительные блоки React-приложений: элементы и компоненты. Как только вы освоите их, то сможете создавать сложные приложения из небольших повторно используемых частей.

Совет

Это руководство предназначено для людей, которые предпочитают концепцию обучения «шаг за шагом». Если вы предпочитаете учиться на практике, ознакомьтесь с нашим практическим руководством. Возможно, вы обнаружите, что руководство и учебник дополняют друг друга.

Это первая глава в пошаговом руководстве по основным концепциям React. В боковой панели навигации вы найдёте список всех его глав. Если вы читаете эту страницу с мобильного устройства, вы можете открыть навигацию по главам, нажав на кнопку в правом нижнем углу экрана.

Каждая глава этого руководства основывается на знаниях, представленных в предыдущих главах. Вы можете узнать большинство из React, прочитав главы руководства «Основные концепции» в том порядке, в котором они перечислены в боковой панели. Например, «Введение в JSX» — следующая глава после этой.

Ожидаемый уровень знаний

React — это библиотека JavaScript, поэтому мы предполагаем, что у вас есть базовое понимание языка JavaScript. Если вы не очень уверенны, мы рекомендуем изучить данное введение в JavaScript для проверки своего уровня знаний, чтобы успешно изучить это руководство. Это может занять от 30 минут до часа, но в результате вам не придётся чувствовать, что вы одновременно изучаете и React, и JavaScript.

Примечание

Данное руководство в примерах иногда использует некоторые из новых возможностей JavaScript. Если вы не работали с JavaScript в последние несколько лет, эти три пункта должны дать знания, достаточные для комфортного чтения этой документации.

Давайте начнём

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

11 библиотек компонентов React Native, о которых стоит знать в 2018 году

Список полезных библиотек UI компонентов React Native для создания пользовательского интерфейса в вашем следующем приложении. Перевод статьи Джонатана Саринга «11 React Native Component Libraries You Should Know in 2018».

Учитывая растущую популярность React и подхода «mobile first» (когда приложение разрабатывается изначально под мобильные платформы) (а также PWA), не стоит удивляться, что React Native с каждым днем все шире применяется в сообществе.

Как и сам React, React Native предлагает строить пользовательские интерфейса сыиспользованием изолированных компонентов. Библиотеки компонентов для создания UI помогут вам экономить время. Используя готовые компоненты, вы можете создавать свои приложения быстрее.

Представляем список полезных библиотек, с которых стоит начать. Если мы что-то забыли, добавляйте свои предложения в комментариях!

1. NativeBase

Со своими 10 тысячами звезд на Github и тысячей форков, NativeBase является очень популярной библиотекой UI-компонентов. Она предоставляет десятки кросс-платформенных компонентов для React Native.

С NativeBase вы можете использовать «из коробки» любые сторонние нативные библиотеки. Сам проект имеет богатую экосистему, от полезных руководств для начинающих до настраиваемых шаблонов тем. Вот отличный мануал по использованию библиотеки.

2. React Native Elements

У React-native-elements больше 12 тысяч звезд на GitHub. Это гибко настраиваемый кросс-платформенный набор инструментов для создания UI, целиком написанный на Javascript.

Авторы библиотеки заявляют: «Идея React Native Elements больше касается структуры компонентов, чем собственно дизайна. Это ведет к меньшему количеству бойлерплейт-кода в настройке отдельных элементов при полном контроле над их дизайном». Благодаря этому данный набор инструментов должен быть привлекательным как для начинающих, так и для опытных разработчиков. Вот пример приложения, написанный самими разработчиками библиотеки, где все компоненты показаны в действии.

3. Shoutem

Shoutem это UI-комплект React Native, состоящий из трех частей: UI-компоненты, темы и компонент Animation. На Github у этого проекта 3,5 тысячи звезд. Эта библиотека предоставляет набор кросс-платформенных компонентов для iOS и Android. Все компоненты удобны в использовании и хорошо кастомизируются. У каждого компонента также есть предопределенный стиль, сочетаемый с остальными, так что можно создавать сложные компоненты без ручного определения сложных стилей.

4. UI Kitten

У этой библиотеки 3 тысячи звездна GitHub. Она предоставляет набор компонентов React Native, пригодных для повторного использования и легко настраиваемых. Темы можно менять «на лету» – с помощью передачи флага. Вот отличный пример приложения, где используется UI Kitten.

5. React Native Material UI

Это библиотека для реализации материального дизайна Google, предоставляющая набор прекрасно кастомизируемых UI-компонентов. На Github у проекта 2 тысячи звезд.

Примечательно, что в контексте максимальной настраиваемости эта библиотека использует простой JS-объект под названием uiTheme. По умолчанию объект uiTheme основан на lightTheme, которую можно найти здесь. А вот список компонентов библиотеки с наглядными примерами.

6. React Native Material Kit

Эта библиотека не обновлялась с 2017 года, но все равно заслуживает упоминания. На GitHub у нее более 4000 звезд. В ней содержится базовый, но тем не менее полезный набор UI-компонентов и тем, реализующих material design от Google.

Библиотека простая и функциональная. Но, в свете невысокой поддержки проекта, используйте эту библиотеку с осторожностью.

7. Nachos UI

У этого проекта 1,5 тысячи звезд. Nachos UI это библиотека React Native, в которой содержится больше 30 настраиваемых компонентов. Благодаря react-native-web, эти компоненты подходят также и для web-а. Вдобавок к  поддержке jest, prettier и yarn, эта тщательно продуманная библиотека предлагает глобальный менеджер тем. Великолепно!

8. React Native UI Library

Над этим проектом работает Wix engineering. Это самый современный набор UI-инструментов для React Native (demo) с поддержкой «из коробки» react-native-animatable и react-native-blur. Библиотека поставляется с заранее предопределенными стилевыми решениями, включая Colors, Typography, Shadows, Border Radius и многие другие. Обратите внимание.

9. React Native Paper

React Native Paper (около 1,5 тысячи звезд на Github) это кросс-платформенная библиотека UI-компонентов, реализующая material design. Имеет глобальную поддержку тем и опциональный babel-plugin для уменьшения объема пакета. Это приложение поможет вам быстро понять идею.

10. React Native Vector Icons

У этой библиотеки почти 10 тысяч звезд. Она представляет собой набор настраиваемых иконок для React Native с поддержкой NavBar/TabBar/ToolbarAndroid и full styling. Не удивительно, что библиотека очень полезна и используется в тысячах приложений.

React Native Vector Icons предоставляет готовые наборы иконок для ваших приложений. Здесь вы найдете все примеры представленных в ней значков.

11. Teaset

Teaset это UI-библиотека для React Native, в которой содержится больше 20 компонентов на чистом JS(ES6). Компоненты хорошо кастомизируются и отлично выглядят. Библиотека не очень хорошо документирована, но, тем не менее, проста в использовании.

Hello World — React

Самый маленький пример React выглядит так:

  ReactDOM.render (
  
 Привет, мир! 
,
  document.getElementById ('корень')
);  

Отображается заголовок «Привет, мир!» на странице.

Попробовать на CodePen

Щелкните ссылку выше, чтобы открыть онлайн-редактор. Не стесняйтесь вносить некоторые изменения и посмотреть, как они повлияют на результат. На большинстве страниц этого руководства есть примеры для редактирования, подобные этому.

Как читать это руководство

В этом руководстве мы рассмотрим строительные блоки приложений React: элементы и компоненты. Освоив их, вы сможете создавать сложные приложения из небольших многократно используемых частей.

Подсказка

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

Это первая глава в пошаговом руководстве по основным концепциям React.Вы можете найти список всех его глав на боковой панели навигации. Если вы читаете это с мобильного устройства, вы можете получить доступ к навигации, нажав кнопку в правом нижнем углу экрана.

Каждая глава в этом руководстве основана на знаниях, представленных в предыдущих главах. Вы можете изучить большую часть React, прочитав главы руководства «Основные концепции» в том порядке, в котором они появляются на боковой панели. Например, «Введение в JSX» — это следующая глава после этой.

Допущения к уровню знаний

React — это библиотека JavaScript, поэтому мы предполагаем, что вы имеете базовое представление о языке JavaScript. Если вы не очень уверены в себе, мы рекомендуем пройти обучение по JavaScript, чтобы проверить свой уровень знаний и дать вам возможность следовать этому руководству, не заблудившись. Это может занять от 30 минут до часа, но в результате вам не придется думать, что вы изучаете React и JavaScript одновременно.

Примечание

В этом руководстве иногда используется новый синтаксис JavaScript в примерах. Если вы не работали с JavaScript в последние несколько лет, эти три пункта должны помочь вам в этом.

Приступим!

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

15 удивительных примеров веб-разработки на React

Что такого хорошего в веб-разработке на React?

React — это интерфейсный фреймворк номер один во всем мире.У него более 1300 участников, более 5000 готовых к использованию компонентов и миллионы загрузок каждую неделю.

React был создан Джорданом Уолке, инженером-программистом в Facebook в 2012 году. Всего через год это был с открытым исходным кодом и с тех пор находится в стадии масштабной разработки при поддержке огромного и очень активного сообщества по всему миру.

Что делает React Web Development таким уникальным? Во-первых, это , предназначенный для масштабирования. Компонентная архитектура позволяет разработчикам написать код один раз, а затем повторно использовать его во всех своих приложениях.В Интернете есть обширная библиотека компонентов, управляемая сообществом. Разработчики React любят подход многократного использования. С точки зрения бизнеса, экономит огромное количество времени и позволяет вам и команде разработчиков сосредоточиться на конкретных задачах вашего проекта. Это огромное удовольствие для каждой компании, занимающейся разработкой React.

Как агентство React, мы любим отличные проекты на React. Сегодня мы представляем вам 15 историй удивительной веб-разработки на React. Пожалуйста, наслаждайтесь!

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

С точки зрения кода, Facebook огромен. Его кодовая база включает более 20000 компонентов, и, хотя он в значительной степени основан на React , его технический стек намного сложнее. Чтобы не перечислять все технологии, они также используют PHP и Python (а именно: фреймворк Tornado).React используется не только в веб-версии платформы. Он также является базой для других продуктов FB, таких как Whatsapp и Instagram (описание ниже).

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

Когда Instagram был приобретен Facebook в 2012 году, у него не было веб-версии приложения.Но было очевидно, что они должны его создать. Выбранная библиотека была, никаких сюрпризов, React.

С самого начала веб-версия Instagram на 100% основана на библиотеке React . В веб-версии Instagram есть несколько интересных функций, которые стали возможными благодаря React. Одним из примеров является Geoshare, который позволяет просматривать фотографии в реальном времени на карте мира. Другие — это счетчик хэштегов в реальном времени или Localgram, который помогает находить фотографии, которые люди публикуют в каждом конкретном месте.

Asana — один из лучших инструментов для управления проектами. Это веб-приложение и мобильное приложение, предназначенное для помощи командам в организации, отслеживании и управлении своей работой. Asana демонстрирует постоянный рост с момента своего запуска в 2008 году. Что касается 2020 года, у нее более 82 000 платежеспособных клиентов по всему миру, и недавно она привлекла 75 миллионов долларов в рамках раунда финансирования серии D. Среди их клиентов вы найдете такие звездные компании, как Spotify, Uber, Autodesk или Trivago.

Веб-приложение

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

На то были веские причины: React похож на Luna Views, и его было довольно легко интегрировать. Более того, реализация виртуальной DOM помогла нам решить множество проблем пользовательского интерфейса, касающихся фокуса и анимации.

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

Эрик Пелц, технический директор @ Asana

Просмотр огромных кусков материала для экзамена, попытка наконец понять, как работает математика, желание изучить историю от А до Я. Как бы вы ни хотели заниматься самообразованием, вы можете найти все ресурсы для этого в Академии Хана, платформе, которая доказывает, что качественные учебные материалы действительно могут быть бесплатными.

Khan Academy была основана как некоммерческая организация еще в 2008 году Салманом Кханом, педагогом и математиком, который хотел, чтобы дети во всем мире получали бесплатную помощь, в которой они нуждаются, когда дело доходит до учебы.После более чем 10 лет существования Khan Academy онлайн-платформа теперь доступна на нескольких языках и предлагает курсы по таким различным предметам, как математика, физика, экономика и гуманитарные науки. Каждый курс заполнен профессиональными видеороликами, объясняющими тему и соответствующими упражнениями.

Инженеры Khan Academy используют все замечательные функции как стандартного React, так и React Native, фреймворка, предназначенного для разработки мобильных приложений. Последнее позволяет им эффективно обновлять свои мобильные приложения для iOS и Android.Чтобы узнать больше о том, как Khan Academy использует React, стоит также заглянуть в специальный, регулярно обновляемый блог ее инженеров.

Codecademy — это интерактивная бесплатная онлайн-платформа, предлагающая бесплатные классы программирования. Это одна из самых популярных образовательных платформ для будущих веб-разработчиков и разработчиков мобильных приложений. Более 45 миллионов человек доверили Codecademy свой профессиональный рост.

Команда разработчиков

Codecademy очень довольна своей веб-разработкой на React.Поскольку он основан на компонентах, они смогли тестировать отдельные части пользовательского интерфейса изолированно, не мешая остальной части приложения. Возможность обслуживания почти полной страницы для поисковых систем значительно улучшила их SEO.

Кроме того, благодаря совместимости React с унаследованным кодом, они смогли поэкспериментировать с добавлением последовательных частей к существующей кодовой базе. Бонни Эйзенман, инженер-программист из Codeacademy, рекомендует поэкспериментировать с React, чтобы проверить, как он может вписаться в ваш код.

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

Бонни Эйзенман, инженер-программист Codecademy.com.

Yahoo! Приложение для рассылки пришло очень долгим путем.Созданный в 1999 году с использованием C ++ и HTML, он развивался через Java и PHP, а в 2015 году закончился React и NodeJS.

На данный момент Yahoo! Почтовая служба остро нуждалась в изменениях. Им нужно было реализовать предсказуемый поток, который позволил бы легко отладить, более актуальную кодовую базу и независимо развертываемые компоненты.

Прежде чем они решили перейти на React, Yahoo! Команда рассматривала Angular JS и Ember JS, но им не хватало гибкости Yahoo! нужный.

Наконец, они решили переписать архитектуру сервиса с помощью React и Flux.Это решение было вызвано несколькими причинами, такими как односторонний реактивный поток данных и виртуальная модель DOM, которая позволяет выполнять рендеринг на стороне клиента и сервера. Они также подчеркнули важность растущего сообщества вокруг React.

Присутствие React в стеке технологий New York Times следует приписать их нынешнему техническому директору Нику Роквеллу. Когда он присоединился к NYT, он столкнулся с очень разнообразным стеком, который упорядочился.

Боже, они воспользовались этой свободой.Go, Scala, Hadoop, Redshift, Dynamo, SQS и многие другие были моментом под солнцем, с маржинальным планированием, основанным на постоянстве или масштабе. Физическая инфраструктура также была разбросана.

Ник Роквелл, технический директор The New York Times

Роквелл и его команда упростили стек. Теперь они используют комбинацию React, Node и GraphQL, которая обеспечивает New York Times более стабильный интерфейс. Это существенное отличие от PHP, загружающего HTML и JavaScript.

React, похоже, неплохо работает для New York Times.В конце концов, весь онлайн-универсум New York Times будет переработан с помощью React.

Atlassian — австралийская компания-производитель программного обеспечения для предприятий, которая создает продукты для разработчиков программного обеспечения и управления проектами. Если вы агентство по разработке программного обеспечения или компания, занимающаяся разработкой программного обеспечения, вы, вероятно, пользуетесь их продуктами. Такие инструменты, как JIRA и Confluence, есть в их портфолио.

Atlassian действительно является компанией React, поскольку они используют React как внутри компании, так и за ее пределами.Они извлекают выгоду из многих функций React, таких как возможность развертывания в Интернете, на мобильных устройствах и на настольных компьютерах, что позволяет разработчикам повторно использовать библиотеки между платформами.

Если программное обеспечение пожирает мир, значит, JavaScript пожирает программное обеспечение, а React пожирает JavaScript. Кажется, что в этой пищевой цепочке React играет большую роль в нашем будущем.

Трэвис Смит, евангелист разработчиков @ Atlassian

Несмотря на то, что существует все больше и больше способов оплаты в Интернете, а электронный банкинг растет, PayPal, который часто называют пионером отрасли, все еще преуспевает.К концу 2020 года в PayPal было 361 миллион активных учетных записей пользователей и 21 миллион торговых счетов. Выручка компании также постоянно увеличивается. За 2019 финансовый год Paypal сообщил о доходах в размере 2,459 млрд долларов США с годовым доходом в размере 17,772 млрд долларов США, что на 15% больше, чем в предыдущем финансовом цикле.

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

Как написала команда инженеров в своем блоге на Medium:

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

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

Версия React также работает с Netflix — особенно на их платформе под названием Gibbon, которая используется для недорогих телевизионных устройств вместо DOM, используемого в веб-браузерах.Netflix даже опубликовал официальный пост в блоге, в котором объясняется, как библиотека React может помочь улучшить скорость запуска, производительность, модульность и другие преимущества.

Инженеры пользовательского интерфейса

Netflix рассказали следующее:

На наше решение о внедрении React повлиял ряд факторов, в первую очередь: 1) скорость запуска, 2) производительность во время выполнения и 3) модульность.

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

Очевидно, что разработчики Uber фанаты React. Достаточно взглянуть на веб-сайт Uber: в общей сложности 90 миллионов посетителей занимают первое место в рейтинге наземного транспорта, поэтому этот веб-сайт должен обеспечивать высочайшее качество обслуживания пользователей. React играет здесь важную роль.

Команда инженеров Uber использовала возможности React с момента создания сайта. С его помощью команда создала множество библиотек с открытым исходным кодом (вы можете использовать их для своего проекта!). Наиболее впечатляющими являются инструменты отрисовки карт.

Кроме того, команда Uber создала Base Web, систему дизайна, которая предоставляет повторно используемые компоненты для разработки пользовательского интерфейса. Он построен на основе React и позволяет создавать пользовательские интерфейсы, не зависящие от устройства. Команда заявляет, что надежность, доступность и индивидуальность являются ключевыми характеристиками, и поощряет использование системы в любом веб-проекте.

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

Лиланд Ричардсон, инженер Airbnb, описывает преимущества React двумя простыми фразами:

• «Повторное использование / переносимость: компоненты React можно использовать повторно.
• Возможность рефакторинга: React делает ваш код очень простым для рефакторинга и повторения.”

Airbnb давно не использует React. Но выбор был правильным: платформа растет и расширяется, и при этом React не перестает улучшаться. Каждая новая версия предоставляет удобные функции для обновления и обслуживания огромного рынка P2P, такого как Airbnb.

Тем временем инженеры Airbnb вносят свой вклад в экосистему React. Например, они предоставили полезный React Sketch.библиотека приложений для нужд разработчиков и дизайнеров.

А вот еще один лидер рынка, который использовал потенциал React в своем программном веб-продукте. В 2017 году Microsoft представила Microsoft Outlook, инструмент управления личной информацией. Он включает в себя электронную почту, календарь, контакты и компоненты задач. Продукт доступен в веб-версии и мобильной версии. Здесь мы уделяем сайту особое внимание.

В своем блоге Microsoft сообщает нам о «… представлении более гибкой среды веб-разработки, которая обеспечивает обновленный поиск, более свежий вид с современным стилем общения и новый дизайн, который позволяет просматривать, читать и прикреплять файлы и фото быстрее.«

Угадайте, о каком фреймворке идет речь? Да, это React.

Dropbox, служба хостинга файлов, говорит о другом. Их пример — об успешном, но сложном переходе от CoffeeScript к выигрышной комбинации Typescript и React.

Еще в 2012 году решение было беспорядочным. Многочисленные инженеры-программисты внесли свой вклад в кодовую базу. Однако лишь немногие из них знали о том, что происходило на сайте.Команда выбрала язык Typescript, а позже, в 2016 году, приступила к редизайну библиотеки React. Созданный с помощью React и Typescript, веб-сайт добился отличных результатов.

Вы когда-нибудь замечали, как быстро можно получить доступ к предварительному просмотру любого документа в Dropbox? Собирая данные файла, React анализирует количество страниц и размер страницы, строит скелет и визуализирует предварительный просмотр, когда пользователь прокручивает страницу вниз. Команда Dropbox использовала комбинацию React JS, других инструментов JS и нескольких методов оптимизации, чтобы обеспечить «плавность работы во всех поддерживаемых браузерах».«

В течение почти десяти лет веб-система управления задачами была основана на Backbone JS и Coffeescript. Еще в 2009 году это был относительно мощный стек технологий. Но время летит незаметно, как и инструменты JS. Поэтому команда решила перейти на более динамичный стек.

Команда разработчиков столкнулась с двумя серьезными проблемами.

• Архитектуру Backbone JS было сложно поддерживать + ограниченные возможности Trello;
• Процедура кеширования была непонятной и трудной для выполнения.

React и Typescript были выбраны в качестве основных инструментов для решения проблем, связанных с восстанием. Позже к команде присоединился GraphQL.

В результате мы можем наслаждаться простотой использования веб-сайта Trello, его хорошо продуманными компонентами и фантастической отзывчивостью.

Ideamotive управляет сетью проверенных веб-разработчиков, владеющих различными технологиями, включая React. Наши таланты в области веб-разработки создают пользовательские веб-приложения для стартапов, компаний, занимающихся расширением масштабов, и предприятий по всему миру.

Ищете опытного разработчика React? Напишите нам!

Примеры проектов — Material-UI

Подборка примеров проектов для начала.

Официальные примеры

Вы можете найти несколько примеров проектов в репозитории GitHub в папке / examples :

Create React App — отличный проект для изучения React.
Ознакомьтесь с доступными альтернативами, чтобы определить, какой проект лучше всего соответствует вашим потребностям.

Исходный код этого сайта документации также включен в репозиторий.
Это немного более сложный проект.
Просмотрите папку / docs для
инструкции по сборке.

Более сложные примеры проектов

Если вы хотите начать с более полного и реального примера, вы можете взглянуть на премиальные темы и шаблоны или:

Бесплатно

• React Most Wanted:

  • Создано с помощью приложения Create React
  • Пользовательский сценарий Create React App для запуска нового проекта с помощью всего одной команды CLI
  • Сборка для Firebase, включая аутентификацию с использованием официального пользовательского интерфейса Firebase Web Auth
  • Маршрутизация с помощью React Router, включая обработку ошибок (404) и отложенную загрузку
  • Включены все функции PWA (ПО, уведомления, запрос отложенной установки и др.)
  • Оптимизированная и масштабируемая производительность (все ~ 100 точек на Lighthouse)

• РМУИФ:

  • При загрузке с приложением Create React, тот же инструментарий работает с самого начала
  • Построен на базе Firebase со всеми их продуктами для Интернета
  • Надежная маршрутизация с React Router, включая защищенные маршруты и обработку ошибок
  • Расширенная поддержка мобильных устройств с полноэкранными диалоговыми окнами и видами с возможностью реагирования для вкладок
  • Межплатформенный мониторинг приложений с акцентом на отчеты об ошибках с помощью Sentry

• Смысл материала:

  • График с повторными диаграммами
  • React Router включен в пример навигации
  • Докер-контейнер с сервером Nginx для производственной сборки
  • Создано с помощью приложения Create React

• Шаблон React SaaS:

  • Создано с помощью приложения Create React
  • Содержит целевую страницу, блог, область для входа / регистрации и панель администратора.
  • Полностью маршрутизируется с использованием реактивного маршрутизатора
  • Ленивая загрузка компонентов для повышения производительности
  • Компоненты для статистики, текста с поддержкой эмодзи, загрузки изображений и многого другого…

Платный

• ScaffoldHub:

  • Создайте свое полное приложение с помощью этого онлайн-инструмента
  • Выберите свой фреймворк и библиотеку (React & Material-UI!)
  • Выберите свою базу данных (SQL, MongoDB или Firestore)
  • Смоделируйте свою базу данных и приложение с помощью интуитивно понятного графического интерфейса пользователя
  • Создайте свое приложение, включая полную бэкэнд-платформу
  • Просмотрите свое приложение в Интернете и загрузите сгенерированный код

демонстраций, примеров и учебных примеров компонентов пользовательского интерфейса Syncfusion React

демонстрационных примеров, примеров и учебных примеров компонентов пользовательского интерфейса Syncfusion React

Лучшие компоненты для разработки веб-приложений

Лучшие компоненты для разработки веб-приложений

Essential JS 2 для React — это современная библиотека компонентов пользовательского интерфейса React, которая была
построен с нуля, чтобы быть легким,
отзывчивый, модульный и удобный для сенсорного ввода.
также включает полную поддержку
Угловой,
Фреймворки Vue, ASP.NET MVC и ASP.NET Core.
Исследуйте и учитесь, используя демонстрационные программы в разделе «Компоненты» и примеры.
Приложения
в разделе «Витрины приложений».

Лучшие компоненты React

Сетки

Визуализация данных

Формы

Редакторы

Календари

Кнопки

Выпадающее меню

Навигация

Уведомления

Нам доверяют ведущие мировые компании

Конструктор диаграмм — это веб
заявление
который используется для создания диаграмм, таких как блок-схема, организационная
Диаграммы Chart и Mind Map.

Доступен на

Outlook как пользовательский интерфейс
справляться
ваш почтовый ящик.

Доступен на

Рассчитывает ваш платеж по кредиту
на основе
сумма кредита, проценты и срок.

Доступен на

Отслеживайте и визуализируйте свои ежедневные расходы
удобным способом с отличным интерфейсом.

Доступен на

Приложение для записи на прием к врачам в клинике, позволяющее управлять их приемами к пациентам.

Доступен на

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

Доступен на

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

Доступен на

Отслеживайте и визуализируйте программные и аппаратные активы организации.

Доступен на

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

Доступен на

React-Bootstrap · Документация React-Bootstrap

Узнайте, как включить React Bootstrap в свой проект

Установка №

Лучший способ использовать React-Bootstrap — использовать пакет npm, который
вы можете установить с пряжи (или пряжи , если хотите).

Если вы планируете настраивать файлы Bootstrap Sass или не хотите
чтобы использовать CDN для таблицы стилей, может быть полезно
также установите vanilla Bootstrap.

 npm install react-bootstrap bootstrap 

Импорт компонентов #

Вы должны импортировать отдельные компоненты, например:
react-bootstrap / Button , а не вся библиотека.
При этом задействуются только те компоненты, которые вы используете,
может значительно сократить объем кода, который вы в конечном итоге отправляете
клиент.

 Кнопка импорта из 'response-bootstrap / Button';


импортировать {Button} из 'response-bootstrap'; 

Глобальные каталоги браузера #

Мы предоставляем react-bootstrap.js и
react-bootstrap.min.js пакетов со всеми компонентами
экспортируется в окно .ReactBootstrap объект. Эти
пакеты доступны в unpkg, так как
а также в пакете npm.

 

<сценарий
  src = "https: // unpkg.com / react-dom / umd / react-dom.production.min.js "
  crossorigin> 

<сценарий
  src = "https://unpkg.com/react-bootstrap@next/dist/react-bootstrap.min.js"
  crossorigin> 

 

Примеры #

React-Bootstrap запустил репозиторий с несколькими базовыми примерами CodeSandbox.
кликните сюда
чтобы проверить их.

Таблицы стилей #

Поскольку React-Bootstrap не зависит от очень точной версии
Bootstrap, мы не поставляем никаких включенных CSS.Однако некоторые
Для использования этих компонентов требуется таблица стилей .

CSS №

 {}

импортировать 'bootstrap / dist / css / bootstrap.min.css'; 

Как и какие стили Bootstrap вы включаете, зависит от вас, но
Самый простой способ — включить последние стили из CDN. Маленький
больше информации о преимуществах использования CDN можно найти
здесь.

 <ссылка
  rel = "таблица стилей"
  href = "https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
  целостность = "sha384-B0vP5xmATw1 + K9KRQjQERJvTumQW0nPEzvF6L / Z6nronJ3oUOFUFpCjEUQouq2 + l"
  crossorigin = "анонимный"
/> 

Sass #

Если вы используете Sass , самый простой способ — включить исходные файлы Sass Bootstrap
в вашем основном файле Sass, а затем потребуйте его в своем src / index.js или App.js файл.
Это относится к типичному приложению create-react-app в других случаях использования, которые вам, возможно, придется настроить
сборщик по вашему выбору для компиляции таблиц стилей Sass / SCSS в CSS.

@import "~ bootstrap / scss / bootstrap";



import './App.scss'; 

Customize Bootstrap #

Если вы хотите настроить тему Bootstrap или любые переменные Bootstrap
вы можете создать собственный файл Sass:

$ theme-colors: (
    "информация": помидор,
    «опасность»: бирюзовый
);


@import "~ bootstrap / scss / bootstrap"; 

… И импортируйте его в основной файл Sass.

@import "обычай"; 

Расширенное использование #

См. Документацию Bootstrap
для более сложных случаев использования и подробностей о настройке таблиц стилей.

Темы #

React-Bootstrap совместим с существующими темами Bootstrap. Только
следуйте инструкциям по установке для выбранной темы.

Осторожно!

Поскольку React-Bootstrap полностью переопределяет JavaScript в Bootstrap, он не совместим автоматически с темами, расширяющими поведение JavaScript по умолчанию.

Create React App

Если вы хотите добавить настраиваемую тему в свое приложение с помощью Create React
App, у них есть дополнительная документация для Create React App и
Бутстрап
здесь

Поддержка браузеров #

Мы стремимся поддерживать все браузеры, поддерживаемые обоими
Реагировать
и Bootstrap.

Окончательная форма документов — Примеры

Хотите помочь? Нам нужно перенести все эти примеры из CodeSandbox сюда. Мы будем очень благодарны за PR, которые помогут в этом процессе. 🙏

Простой пример

Использует встроенные входы React: input , select и textarea для создания формы без проверки.

Синхронная проверка уровня записи

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

Синхронная проверка на уровне поля

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

Синхронная проверка уровня записи (с отложенной обработкой ошибок)

Иногда вы хотите дать пользователю возможность пройти через краткое недопустимое значение на пути к действительному, например.грамм. строка даты, в которой должны быть два числа по обе стороны от косой черты. С простым компонентом отложенного рендеринга это становится легко. Кроме того, ошибка исчезнет сразу же, когда пользователь исправит проблему.

Асинхронная проверка на уровне поля

Демонстрирует, как правила проверки на уровне поля могут быть асинхронными (вернуть
Promise ), а также как показать «проверяющий» счетчик во время жизни
Обещание .

Гибридная синхронная / асинхронная проверка уровня записи

Демонстрирует, как можно смешивать синхронные и асинхронные шаблоны проверки на
на уровне записи, синхронно возвращая ошибки и возвращаясь к
асинхронный вызов (путем возврата Promise ), если проверка синхронизации проходит.

Ошибки отправки

Демонстрирует, как вернуть ошибки отправки из неудачных отправок. Обратите внимание, что Promise должен разрешить ошибку отправки (не отклонить). Отклонение зарезервировано для сообщений или исключений сервера.

Сторонние компоненты

Демонстрирует, насколько легко использовать сторонние компоненты ввода. Все третьи
компонент партии действительно нужен значение и onChange , но более сложный
компоненты могут принимать такие вещи, как ошибки.

Материал-UI

💥 Оптимизация производительности с помощью подписок 💥

Демонстрирует, как, ограничивая, какие части состояния формы должен визуализировать компонент формы, сокращается количество повторных отрисовок всей формы. Тем не менее, если внутри него требуется какая-то часть состояния формы, для ее достижения можно использовать компонент .

Строго типизированная форма и значения полей с TypeScript

Демонстрирует, как использовать универсальные шаблоны JSX для строгого ввода полей, заставляя только компонент, который может принимать тип для этого поля.

Независимый компонент ошибок (с реквизитами рендеринга)

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

Независимый компонент ошибок (с крючками)

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

Загрузка и инициализация значений

Демонстрирует, как форма может быть инициализирована после получения данных путем передачи
initialValues ​​ как опора.

Массивы полей

Демонстрирует использование компонента из
массивов реакции-финальной формы ,
для рендеринга массива входов, а также использовать push , pop и remove
мутации.

Поля Компонент

Хотите знать, как получить состояние поля сразу из нескольких полей?

Люди, пришедшие из Redux-Form, могут задаться вопросом, где находится эквивалент компонента Fields Redux Form, как способ получения состояния сразу из нескольких полей.Ответ заключается в том, что он не включен в библиотеку, потому что его очень легко написать, рекурсивно составляя компоненты Field вместе.

Расчетные поля

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

Полевые предупреждения

Демонстрирует, как силу подписок и мутаторов можно использовать для создания
механизм предупреждений: логика для отображения сообщения рядом с каждым полем, которое является , а не и
ошибка (таким образом, , а не препятствует отправке формы).

Многоразовые группы полей

Демонстрирует, как поля могут быть сгруппированы в повторно используемые компоненты.

Поля с префиксом

Демонстрирует, как API контекста React можно использовать для предоставления «оболочки префикса».
вокруг полей, чтобы добавить структуру к дате вашей формы. Это похоже на то, как Redux Form
FormSection компонент работает.
Между этим и примером многоразовых групп полей ваш
вариант использования, если необходимо выполнить миграцию с FormSection .

Внешнее представление

Демонстрирует использование документа .getElementById () или закрытие для запуска
отправка извне формы. Для получения дополнительной информации см.
Как я могу инициировать отправку извне формы?

Форма мастера

Демонстрирует использование React Final Form для создания многостраничной формы «мастера» с проверкой на каждой странице.

Разбор и форматирование (и нормализация)

Демонстрирует использование свойств parse и формата в 🏁 React Final Form для точного управления потоком данных из состояния формы через ввод и обратно в состояние формы.Обратите внимание, что вы можете использовать parse для «нормализации» ваших значений.

Автосохранение с Debounce

Демонстрирует использование компонента FormSpy для отслеживания изменений значений и автоматической отправки различных значений после периода устранения неполадок.

Автосохранение с выборочной защитой

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

Автосохранение при размытии поля

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

Механизм пользовательской проверки

Демонстрирует, насколько невероятно расширяемы FormSpy , мутатор setFieldData и свойства рендеринга за счет реализации настраиваемого механизма проверки, полностью отличного от встроенной проверки в 🏁 Final Form, что позволяет применять особые режимы, например проверку только одного поля. когда это поле размыто.

Загрузка, нормализация, сохранение и повторная инициализация

Демонстрирует, как создать компонент оболочки для обработки загрузки, нормализации данных, сохранения и повторной инициализации формы, чтобы поддерживать чистое / грязное состояние с сохраненными данными.

🏎️ Понижающая передача типа вперед

Демонстрирует использование в качестве входных данных компонента «Дауншифт с опережением ввода».

Пример Redux

Единственная причина хранить данные формы 🏁 Final Form в Redux — это необходимость иметь возможность читать их извне.Этот пример демонстрирует, как использовать FormSpy для хранения копии данных вашей формы в хранилище Redux. Обратите внимание, что каноническая авторитетная версия данных все еще находится в 🏁 Final Form. Если вам нужно изменить ваши данные с помощью диспетчеризации действий Redux, вам, вероятно, следует использовать Redux Form.

Условные поля

Иногда вам может потребоваться условно показать или скрыть некоторые части вашей формы в зависимости от значений, которые пользователь уже предоставил для других входных данных формы.🏁 React Final Form позволяет сделать это очень легко, создав компонент Condition из компонента Field .

Прослушивание внешних изменений

Обернув компонент ExternalModificationDetector с отслеживанием состояния в компонент Field , мы можем отслеживать изменения значения поля и, зная, активно ли поле, определять, когда значение поля изменяется из-за внешних воздействий.

Фокус на первой ошибке

Демонстрирует, как включить декоратор 🏁 Final Form Focus для обеспечения этой функциональности из коробки.

Пример кредитной карты

Демонстрирует, как создать отличный UX для кредитной карты с помощью React Credit Cards.

Представление Async Redux

Хотите использовать redux-saga или redux-observable для управления отправкой форм? Теперь вы можете, используя response-redux-prom-listener , преобразовать ваши отправленные действия Redux в Promise , которые 🏁 React Final Form ожидает для своей функции onSubmit .

Правила декларативной формы

Что, если бы вы могли определить правила для обновления полей, когда другие поля изменяют как компоненты ? В этом примере исследуются такие возможности.Также есть пост на Medium о его написании и создании сопутствующей библиотеки, react-final-form-listeners .

Форматировать строку по шаблону

Демонстрирует использование библиотеки «строка за шаблоном» для создания масок ввода для полей 🏁 React Final Form.

AsyncTypeahead и Redux

Демонстрирует создание AsyncTypeahead для выбора пользователей github с сохранением результатов поиска в хранилище redux и состояния формы (выбранные пользователи github) через react-final-form .Также используется мутатор setFieldData .

Формат при размытии

Демонстрирует, как использовать опору formatOnBlur , чтобы отложить форматирование значения поля формы до тех пор, пока поле не потеряет фокус. Очень полезно для форматирования чисел, например валют.

Стилизация с 🍭 Smooth-UI

Демонстрирует, как использовать библиотеку стилей Smooth-UI, чтобы ваши формы выглядели потрясающе! Все, что вам действительно нужно, — это компонент более высокого порядка, который адаптирует элементы управления формой 🍭 Smooth-UI для работы с 🏁 React Final Form.

Укладка с помощью Chakra-UI

Демонстрирует, как использовать библиотеку стилей пользовательского интерфейса Chakra, чтобы ваши формы выглядели потрясающе!

Пример CLI 🤯

Да! Вы действительно можете использовать 🏁 React Final Form в интерфейсе командной строки! Благодаря таким пакетам, как Ink и Pastel, возможности управления состоянием формы Final Form отлично работают в командной строке.

Начало работы с React: руководство для начинающих

React — замечательная библиотека JavaScript, которая покорила сообщество разработчиков.Короче говоря, разработчикам стало проще создавать интерактивные пользовательские интерфейсы для веб-платформ, мобильных и настольных платформ. Сегодня тысячи компаний по всему миру используют React, в том числе такие известные компании, как Netflix и Airbnb.

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

Предварительные требования

Прежде чем начать изучать React, имеет смысл иметь базовые представления о HTML, CSS и JavaScript. Это также поможет получить базовое представление о Node.js, а также о менеджере пакетов npm.

Чтобы следовать этому руководству, на вашем компьютере должны быть установлены как Node, так и npm. Для этого перейдите на страницу загрузки Node.js и скачайте нужную версию (npm поставляется в комплекте с Node). Кроме того, вы можете обратиться к нашему руководству по установке Node с помощью диспетчера версий.

Что такое React?

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

Приложения

React построены с использованием повторно используемых компонентов пользовательского интерфейса , которые могут взаимодействовать друг с другом. Компонент React может быть компонентом на основе классов или так называемым функциональным компонентом.Компоненты на основе классов определяются с использованием классов ES6, тогда как функциональные компоненты — это базовые функции JavaScript. Обычно они определяются с помощью стрелочной функции, но они также могут использовать ключевое слово function . Компоненты на основе классов будут реализовывать функцию render , которая возвращает некоторый JSX (расширение Regular JavaScript от React, используемое для создания элементов React), тогда как компоненты функций будут возвращать JSX напрямую. Не волнуйтесь, если вы никогда не слышали о JSX, мы подробнее рассмотрим это позже.

Компоненты

React можно разделить на компонентов с сохранением состояния, и компонентов без состояния, . Работа компонента без состояния заключается в простом отображении данных, которые он получает от своего родительского компонента React. Если он получает какие-либо события или входные данные, он может просто передать их своему родительскому элементу для обработки.

С другой стороны, компонент с отслеживанием состояния отвечает за поддержание определенного состояния приложения. Это может включать получение данных из внешнего источника или отслеживание того, вошел ли пользователь в систему или нет.Компонент с отслеживанием состояния может реагировать на события и входные данные для обновления своего состояния.

Как правило, вы должны стремиться писать компоненты без сохранения состояния там, где это возможно. Их легче повторно использовать как в вашем приложении, так и в других проектах.

Понимание виртуального DOM

Прежде чем мы перейдем к кодированию, вы должны знать, что React использует виртуальную модель DOM для обработки рендеринга страницы. Если вы знакомы с jQuery, вы знаете, что он может напрямую управлять веб-страницей через HTML DOM .Во многих случаях это прямое взаимодействие почти не создает проблем. Однако в некоторых случаях, например при запуске интерактивного веб-приложения в реальном времени, производительность может сильно снизиться.

Чтобы противостоять этому, была изобретена концепция Virtual DOM (представление реального DOM в памяти), которая в настоящее время применяется во многих современных UI-фреймворках, включая React. В отличие от HTML DOM, виртуальным DOM гораздо проще манипулировать, и он способен обрабатывать множество операций за миллисекунды, не влияя на производительность страницы.React периодически сравнивает виртуальную DOM и HTML DOM. Затем он вычисляет разницу, которую он применяет к HTML DOM, чтобы она соответствовала виртуальной DOM. Таким образом, React гарантирует, что ваше приложение будет отображаться с постоянной скоростью 60 кадров в секунду, а это означает, что пользователи испытывают небольшую задержку или ее отсутствие.

Запустить пустой проект React

В соответствии с предварительными условиями, я предполагаю, что у вас уже настроена среда Node с последней версией npm (или, возможно, Yarn).

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

Давайте установим это сейчас:

  npm i -g create-react-app
  

Затем используйте его для создания нового приложения React.

  приложение-сообщение-приложение для создания-реакции
  

В зависимости от скорости вашего интернет-соединения это может занять некоторое время, если вы впервые запускаете команду create-response-app . По пути устанавливается множество пакетов, которые необходимы для настройки удобной среды разработки, включая веб-сервер, компилятор и инструменты тестирования.

Если вы не хотите устанавливать слишком много пакетов глобально, вы также можете npx , что позволяет загружать и запускать пакет, не устанавливая его:

  npx i -g create-react-app
  

Выполнение любой из этих команд должно привести к примерно следующему:

  ...
Успех! Создано приложение для реакции в C: \ Users \ mike \ projects \ github \ message-app
Внутри этого каталога вы можете выполнить несколько команд:

  начало пряжи
    Запускает сервер разработки.сборка пряжи
    Объединяет приложение в статические файлы для производства.

  пряжа тест
    Запускает тестовый раннер.

  выброс пряжи
    Удаляет этот инструмент и копирует зависимости сборки, файлы конфигурации
    и скрипты в каталог приложения. Если вы сделаете это, вы не сможете вернуться!

Мы предлагаем вам начать с ввода:

  cd message-app
  начало пряжи

Удачного взлома!
  

После завершения процесса настройки проекта выполните следующие команды, чтобы запустить приложение React:

  CD сообщение-приложение
npm start
  

Вы должны увидеть следующий результат:

 ....

Скомпилировано успешно!

Теперь вы можете просматривать приложение react-app в браузере.

  Локальный: http: // localhost: 3000
  В вашей сети: http://192.168.56.1:3000

Обратите внимание, что сборка разработки не оптимизирована.
Чтобы создать производственную сборку, используйте сборку пряжи.
  

Ваш браузер по умолчанию должен запуститься автоматически, и вы должны получить такой экран:

Теперь, когда мы убедились, что наш стартовый проект React работает без ошибок, давайте посмотрим, что происходит под капотом.16.13.1 «,
«react-scripts»: «3.4.3»
},
«scripts»: {
«start»: «запуск сценариев реакции»,
«build»: «сборка сценариев реакции»,
«test»: «test-scripts test»,
«eject»: «реагировать-скрипты извлекать»
},
«eslintConfig»: {
«расширяет»: «приложение-реакция»
},
«список браузеров»: {
«производство»: [
«> 0,2%»,
«не умер»,
«не op_mini все»
],
«разработка»: [
«последняя хромированная версия»,
«последняя версия Firefox»,
«последняя 1 версия сафари»
]
}
}

Как видите, приложение Create React установило для нас несколько зависимостей.Первые три связаны с библиотекой тестирования React, которая (как вы могли догадаться) позволяет нам тестировать наш код React. Затем у нас есть react и react-dom , основные пакеты любого приложения React и, наконец, react-scripts , которые настраивают среду разработки и запускают сервер (который вы только что видели).

Затем идут четыре сценария npm, которые используются для автоматизации повторяющихся задач:

• start запускает сервер разработки
• build создает готовую к производству версию вашего приложения
• test запускает упомянутые выше тесты
• eject откроет среду разработки вашего приложения

Эта последняя команда заслуживает более подробного рассмотрения.Инструмент Create React App обеспечивает четкое разделение вашего реального кода и среды разработки. Если вы запустите npm run eject , приложение Create React перестанет скрывать свои действия и скопирует все в файл package.json вашего проекта. Хотя это дает вам более тонкий контроль над зависимостями вашего приложения, я бы не рекомендовал вам это делать, поскольку вам придется управлять всем сложным кодом, используемым при создании и тестировании вашего проекта. Если дело доходит до этого, вы можете использовать customize-cra для настройки процесса сборки без извлечения.

Приложение

Create React также поддерживает ESLint (как видно из свойства eslintConfig ) и настраивается с использованием правил ESLint для приложения response.

Свойство browserslist файла package.json позволяет указать список браузеров, которые будет поддерживать ваше приложение. Эта конфигурация используется инструментами PostCSS и транспиляторами, такими как Babel.

Одна из самых крутых функций, которые вам понравятся в приложении Create React, — это то, что оно обеспечивает горячую перезагрузку прямо из коробки.Это означает, что любые изменения, которые мы вносим в код, приведут к автоматическому обновлению браузера. Изменения в коде JavaScript перезагрузят страницу, а изменения в CSS обновят DOM без перезагрузки.

А пока давайте сначала остановим сервер разработки, нажав Ctrl + C . После остановки сервера удалите все, кроме файлов serviceWorker.js и setupTests.js в папке src . Если вам интересно узнать, чем занимаются работники сферы обслуживания, вы можете узнать о них больше здесь.

Кроме этого, мы создадим весь код с нуля, чтобы вы могли понять все, что находится в папке src .

Введение в синтаксис JSX

Определенный в документации React как «расширение синтаксиса для JavaScript», JSX — это то, что упрощает написание компонентов React. Используя JSX, мы можем передавать HTML-структуры или элементы React, как если бы они были стандартными значениями JavaScript.

Вот быстрый пример:

  импортировать React из react;

экспортировать функцию по умолчанию App () {
  const message = 
 Я заголовок 
;
  возврат (сообщение);
}
  

Обратите внимание на строку const message =

Я заголовок

; .Это JSX. Если вы попытаетесь запустить это в веб-браузере, вы получите ошибку. Однако в приложении React JSX интерпретируется транспилером, таким как Babel, и отображается в код JavaScript, который может понять React.

Примечание: вы можете узнать больше о JSX в нашем руководстве «Введение в JSX».

Раньше файлы React JSX имели расширение .jsx . В настоящее время инструмент Create React App генерирует файлы React с расширением .js .Хотя расширение файла .jsx все еще поддерживается, разработчики React рекомендуют использовать .js . Однако есть противоположная группа разработчиков React, включая меня, которые предпочитают использовать расширение .jsx по следующим причинам:

• В VS Code Emmet сразу работает с файлами .jsx . Однако вы можете настроить VS Code для обработки всех файлов .js как JavaScriptReact , чтобы Emmet работал с этими файлами.
• Существуют разные правила линтинга для стандартного кода JavaScript и React JavaScript.

Однако в этом руководстве я буду придерживаться того, что дает нам приложение Create React, и придерживаться окончания файла .js .

Привет, мир! в React

Давайте приступим к написанию кода. Внутри папки src вновь созданного message-app создайте файл index.js и добавьте следующий код:

  импортировать React из react;
импортировать ReactDOM из react-dom;

ReactDOM.render (
 Hello World 
, document.getElementById ('root'));
  

Снова запустите сервер разработки, используя npm start или yarn start . Ваш браузер должен отображать следующее содержимое:

Это самый простой пример React «Hello World». Файл index.js — это корень вашего проекта, в котором будут отображаться компоненты React. Позвольте мне объяснить, как работает код:

• Строка 1. Пакет React импортирован для обработки JSX.
• Строка 2: Пакет ReactDOM импортируется для рендеринга корневого компонента React.
• Строка 3: Вызов функции рендеринга с передачей:
  • 
    

    Hello World

    : элемент JSX

  • document.getElementById ('root') : контейнер HTML (здесь будет отображаться элемент JSX).

HTML-контейнер находится в файле public / index.html . В строке 31 вы должны увидеть

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

Хотя JSX действительно очень похож на HTML, есть несколько ключевых отличий. Например, нельзя использовать атрибут класса , поскольку это ключевое слово JavaScript. Вместо этого используется className . Кроме того, такие события, как onclick , записываются в JSX как onClick . Давайте теперь изменим наш код Hello World:

  const element = 
 Hello World 
;
ReactDOM.render (элемент, document.getElementById ('корень'));
  

Я перенес код JSX в постоянную переменную с именем element . Я также заменил теги h2 тегами div . Чтобы JSX работал, вам нужно заключить элементы в один родительский тег.

Взгляните на следующий пример:

  const element =  Привет,   Джейн ;
  

Приведенный выше код не работает.Вы получите синтаксическую ошибку, указывающую, что вы должны заключить соседние элементы JSX во включающий тег. Примерно так:

  const element = 

     Здравствуйте 
     Джейн 
    
;
  

Как насчет оценки выражений JavaScript в JSX? Простой. Просто используйте фигурные скобки, например:

  const name = "Джейн";
const element = 
 Здравствуйте, {name} 
  

… или так:

  const user = {
  firstName: 'Джейн',
  lastName: "Лань"
}
const element = 
 Здравствуйте, {пользователь.firstName} {user.lastName} 
  

Обновите свой код и убедитесь, что в браузере отображается сообщение «Привет, Джейн Доу». Попробуйте другие примеры, например {5 + 2} . Теперь, когда у вас есть основы работы с JSX, давайте продолжим и создадим компонент React.

Объявление компонентов React

Приведенный выше пример был упрощенным способом показать вам, как работает ReactDOM.render () . Как правило, мы инкапсулируем всю логику проекта в компоненты React, которые затем передаются в ReactDOM.функция рендеринга .

Внутри папки src создайте файл с именем App.js и введите следующий код:

  импортировать React, {Component} из 'react';

class App extends Component {

  оказывать(){
    возвращаться (
      

        Привет, мир снова!
      
    )
  }
}

экспортировать приложение по умолчанию;
  

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

  импортировать React из react;
импортировать ReactDOM из react-dom;

импортировать приложение из './App';

ReactDOM.render (<Приложение />, document.getElementById ('root'));
  

 

оказывать() {
  const headerStyle = {
    цвет: '# ff0000',
    textDecoration: 'подчеркивание'
  }
  возвращаться (
    

      
 Привет, мир снова! 
    
  )
}
  

 

возвращаться (
  

    
 Снова привет! 
  
)
  

  h2 {
  размер шрифта: 4rem;
}
  

  импорт './App.css';
  

  .header-red {
  размер шрифта: 4rem;
  цвет: # ff0000;
  оформление текста: подчеркивание;
}
  

  
 Привет, мир снова! 
  

  импортировать React из react;

class MessageView расширяет React.Компонент {
  оказывать() {
    возвращаться(
      

        

           От: 
           Джон Доу 
        
        

           Статус: 
           Непрочитанные 
        
        

           Сообщение: 
           Удачного дня! 
        
      
    )
  }
}

экспортировать MessageView по умолчанию;
  

  кузов {
  цвет фона: # EDF2F7;
  цвет: # 2D3748;
  семейство шрифтов: -apple-system, BlinkMacSystemFont, «Segoe UI», Roboto, Oxygen, Ubuntu, Cantarell, «Open Sans», «Helvetica Neue», без засечек;
}

h2 {
  размер шрифта: 2rem;
}

.container {
  ширина: 800 пикселей;
  маржа: 0 авто;
}

.сообщение {
  цвет фона: # F7FAFC;
  ширина: 400 пикселей;
  маржа сверху: 20 пикселей;
  граница-верх: сплошной 2px #fff;
  радиус границы: 8 пикселей;
  отступ: 12 пикселей;
  box-shadow: 0 10px 15px -3px rgba (0, 0, 0, 0.1), 0 4px 6px -2px rgba (0, 0, 0, 0,05);
}

.поле{
  дисплей: гибкий;
  justify-content: гибкий старт;
  маржа сверху: 2 пикселя;
}

.метка {
  font-weight: жирный;
  размер шрифта: 1 бэр;
  ширина: 6бэр;
}

.ценить {
  цвет: # 4A5568;
}

.content .value {
  стиль шрифта: курсив;
}
  

  импортировать React, {Component} из 'react';

import './App.css';
импортировать MessageView из './message-view';

class App extends Component {
  оказывать(){
    возвращаться (
      
    )
  }
}

экспортировать приложение по умолчанию;
  

  импортировать React из react;

экспортировать функцию по умолчанию MessageView () {
  возвращаться (
    

      

         От: 
         Джон Доу 
      
      

         Статус: 
         Непрочитанные 
      
      

         Сообщение: 
         Удачного дня! 
      
    
  );
}
  

  импортировать React из react;

class MessageView extends React.Component {
  оказывать() {
    const message = this.props.message;

    возвращаться(
      

        

           От: 
           {сообщение.from} 
        
        

           Статус: 
           {message.status} 
        
        

           Сообщение: 
           {message.content} 
        
      
    )
  }
}

экспортировать MessageView по умолчанию;
  

  импортировать React, {Component} из 'react';
импортировать MessageView из './message-view';

class MessageList расширяет Component {
  state = {
    сообщение: {
      от: 'Марта',
      content: "Я скоро буду путешествовать",
      статус: "прочитано"
    }
  }

  оказывать() {
    возвращаться(
      

        
 Список сообщений 
        
      
    )
  }
}

экспортировать список сообщений по умолчанию;
  

  импортировать React, {Component} из 'react';
импортировать список сообщений из './ список-сообщений ';

import './App.css';

class App extends Component {
  оказывать(){
    возвращаться (
      <Список сообщений />
    )
  }
}

экспортировать приложение по умолчанию;
  

  импортировать React из react;
импортировать PropTypes из 'prop-types';

class MessageView extends Component {
  
]

MessageView.propTypes = {
  сообщение: PropTypes.object.isRequired
}

экспортировать MessageView по умолчанию;
  

  состояние = {
  сообщение: "Не объект!"
}
  

  Предупреждение: Неудачный тип опоры: недопустимая опора `message` типа` string`, переданная в `MessageView`, ожидаемый` объект`.
    в MessageView (в message-list.js: 13)
    в MessageList (в App.js: 9)
    в приложении (в src / index.js: 6)
  

  класс MessageList расширяет компонент {
  state = {
    Сообщения:  [
      {
        _id: 'd2504a54',
        от: 'Джон',
        content: 'Мероприятие начнется на следующей неделе',
        статус: "непрочитано"
      },
      {
        _id: 'fc7cad74',
        от: 'Марта',
        content: "Я скоро буду путешествовать",
        статус: "прочитано"
      },
      {
        _id: '876ae642',
        из: 'Иаков',
        content: «Поговорим позже.Хорошего дня!',
        статус: "прочитано"
      }
    ]
  }

  оказывать() {
    const messageViews = this.state.messages.map (
      message => 
    )

    возвращаться(
      

        
 Список сообщений 
        {messageViews}
      
    )
  }
}
  

  импортировать React, {useState} из «реагировать»;
импортировать MessageView из './message-view';

экспортировать функцию по умолчанию MessageList () {
  const initialValues ​​= [
    {
      _id: 'd2504a54',
      от: 'Джон',
      content: 'Мероприятие начнется на следующей неделе',
      статус: "непрочитано"
    },
    {
      _id: 'fc7cad74',
      от: 'Марта',
      content: "Я скоро буду путешествовать",
      статус: "прочитано"
    },
    {
      _id: '876ae642',
      из: 'Иаков',
      content: «Поговорим позже. Хорошего дня!',
      статус: "прочитано"
    }
  ];

  const [сообщения] = useState (initialValues);
  const messageViews = сообщения.карта(
    message => 
  );

  возвращаться (
    

      
 Список сообщений 
      {messageViews}
    
  );
}
  

  импортировать React из react;
импортировать PropTypes из 'prop-types';

const MessageView = ({сообщение}) => {
  const {от, статус, содержание} = сообщение;

  возвращаться(
    

      

         От: 
         {from} 
      
      

         Статус: 
         {status} 
      
      

         Сообщение: 
         {content} 
      
    
  );
};

MessageView.propTypes = {
  сообщение: PropTypes.object.isRequired
}

экспортировать MessageView по умолчанию;
  

  const MessageView = ({сообщение}) => {
  ...
}
  

  const {от, статус, содержание} = сообщение;