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

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

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

Шаг 1. Разбейте пользовательский интерфейс на иерархию компонентов

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

Шаг 2. Создайте статическую версию в React

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

Шаг 3. Определите минимальное представление состояния пользовательского интерфейса

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

  1. Он передается от родителя через реквизит? Если да, то, вероятно, это не государство.
  2. Остается ли он неизменным с течением времени? Если да, то, вероятно, это не государство.
  3. Можете ли вы вычислить его на основе любого другого состояния или реквизита в вашем компоненте? Если да, то это не государство.

Шаг 4. Определите, где должен располагаться ваш штат

Следующим шагом является определение того, какой компонент будет владельцем каждого состояния. Reactjs.org рекомендует выполнить следующие шаги, чтобы понять это:

Для каждой части состояния в вашем приложении:

Определите каждый компонент, который отображает что-то на основе этого состояния.

Найдите общий компонент-владелец (один компонент над всеми компонентами, которым требуется состояние в иерархии).

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

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

Шаг 5. Добавьте обратный поток данных

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

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

Reactjs.org предлагает исчерпывающую документацию по процессу Thinking in React. Просмотрите эту документацию для получения дополнительной информации.