Как идентифицировать компоненты в макете дизайна для создания React-приложения

Вам интересно узнать о React JS, как разработчику JavaScript, и вы не можете дождаться момента, когда начнете создавать с его помощью что-то интересное? Если ДА, то давайте отправимся в путешествие вместе.

Теперь давайте поговорим о React

Что такое React

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

Теперь давайте перейдем к тому, зачем мы используем React.

Зачем использовать React

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

КАК ОПРЕДЕЛИТЬ КОМПОНЕНТЫ В МАКЕТЕ ДИЗАЙНА

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

Разделите макет на компоненты

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

Что такое компоненты

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

Теперь взгляните на изображение ниже, это обычная веб-страница с заголовком, боковой панелью, заголовком и разделом содержания статьи. Эти разделы страницы с точки зрения пользовательского интерфейса называются компонентами (компонент заголовка, компонент боковой панели и т.д.).

ПРИМЕЧАНИЕ: Если вы пытаетесь разделить макет страницы на компоненты, следует использовать принцип единой ответственности, который означает, что компонент в идеале должен делать только одну вещь. Если компонент становится сложным, его следует разложить на более мелкие подкомпоненты, которые также выполняют одну функцию.

Например, компонент header, sidebar, headline и article content section отображает только header, sidebar, headline и article content section соответственно.

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

Пример: Предположим, что вам предоставлен макет дизайна и конечная точка API с данными, приведенными ниже.


Макетный дизайн


Образец данных

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

Лично я предпринимаю следующие шаги для определения компонентов в макете

Без особого порядка

  1. Нарисуйте рамку вокруг содержимого макета, которое является строго значениями из данных JSON.
  2. Нарисуйте рамку вокруг каждой секции пользовательского интерфейса, которые являются многоразовыми.
  3. Несколько значений из данных JSON или Object должны быть в одной рамке, если они должны отображаться как одно содержимое (например, строка товара).
  4. Нарисуйте рамку вокруг вводимых форм (она должна содержать все необходимые типы ввода).
  5. Статический контент и не подлежащий повторному использованию может быть частью обертывающего бокса, но не как самостоятельный бокс.
  6. Охватите все содержимое одним внешним боксом, который представляет собой самый внешний компонент.

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

Номера на изображении соответствуют номерам ниже.

  1. FilterableProductTable (оранжевая коробка): Внешний блок для всего примера.

  2. SearchBar (синяя рамка): Все поля ввода пользователя

  3. таблица продуктов (зеленая рамка): Отображает и фильтрует коллекцию данных на основе пользовательского ввода

  4. ProductCategoryRow (бирюзовая рамка): Заголовок для каждой категории

  5. ProductRow (красная рамка): Строка для каждого продукта

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

Основы написания React-компонента

Компонент React — это просто функция JavaScript с именем функции, начинающимся с верхнего регистра. Функция также возвращает HTML-код, который вы хотите вернуть в DOM. В React возвращаемый HTML рассматривается как jsx (обратите внимание на использование className ниже в качестве замены class в обычном HTML), чтобы напомнить вам, что это не чистый HTML, а jsx (JavaScript XML).

Пример базового компонента React

function Person(){

    return(
        <div className="person">
            <h1>James</h1>
            <p> Your age is: 20</p> 
        </div>
    );
}

Вход в полноэкранный режим Выход из полноэкранного режима

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

Оцените статью
Procodings.ru
Добавить комментарий