React позволяет нам разбить пользовательский интерфейс на логически связанные компоненты. Эти компоненты в совокупности образуют полную структуру приложения.
Но если вы новичок в мире React, вы обнаружите, что застряли в том, как подойти к дизайну макета и разбить его на реагирующие компоненты. Разделение приложения на компоненты - это первый и самый важный шаг в создании реагирующего приложения. Хорошая структура делает ваше приложение масштабируемым, поддерживаемым и тестируемым.
В этой статье мы узнаем, как -
- Разбейте макет на реагирующие компоненты
- Преобразуйте эти компоненты в иерархию компонентов
Что будем строить?
Я знаю, что этот макет не выглядит впечатляющим. Я сделал это просто, и создав его в React, вы научитесь структурировать свое приложение на профессиональном уровне! Итак, сдержите волнение и приступим.
ШАГ 1 - Вайрфрейминг
Перед созданием приложения вы должны создать его грубый каркас. Каркас - это не что иное, как визуальное представление каркаса вашего приложения. Это даст вам четкое представление о том, как будет выглядеть ваше приложение.
ШАГ 2 - Разбивка на компоненты
Когда ваш каркас будет готов, вы можете начать разбивать его на отдельные компоненты. Теперь это может быть непросто для новичков. Что можно считать составной частью?
Компонент - это все, что имеет самостоятельное значение в макете.
Например, у калькулятора есть экран и много кнопок. Экран является компонентом, так как он используется отдельно для отображения вычислений. Отдельная кнопка также является составной частью. И, наконец, весь калькулятор можно рассматривать как корневой компонент, поскольку он объединяет вместе компоненты экрана и кнопки.
Итак, разбив макет на компоненты, я получил структуру, представленную ниже.
- Приложение: внешний (корневой / родительский) компонент, который объединяет (отображает) другие (дочерние) компоненты.
- Введение. В разделе целевой страницы отображается заголовок, подзаголовок и другой компонент Кнопка.
- Кнопка: отображает кнопку.
- Навыки: раздел навыков на веб-странице.
- SkillItem: индивидуальный навык внутри компонента Навыки.
ШАГ 3 - Создание иерархии компонентов
Хорошая работа. После того, как вы узнаете компоненты своего приложения, давайте определим некоторые отношения между ними.
Мы создаем древовидную диаграмму, называемую иерархией компонентов. Это дает нам информацию о родительско-дочерних отношениях между компонентами, сообщает нам о том, какой компонент отображает другие компоненты, и помогает нам организовать общее состояние приложения.
Шаги по созданию иерархии компонентов -
- Начните с корневого компонента (Приложение). Это будет корневой узел дерева.
- Найдите его прямые дочерние компоненты (Введение и Навыки).
- Составьте дерево и представьте Приложение в качестве корневого узла, а Введение и Навыки - его дочерними узлами.
- Теперь повторите тот же процесс с другими узлами компонентов. Найдите прямых потомков компонентов с рисунка 3.
Поздравляю! Вы узнали, как создать иерархию компонентов.
Вот иерархия компонентов -
Вещи, которые мы получаем из приведенной выше иерархии -
- Приложение - родительский компонент приложения.
- Приложение отображает два дочерних компонента - Введение и Навыки.
- Intro отображает компонент Button
- Компонент Skills отображает SkillList (я создал этот компонент как компонент-оболочку, чтобы обернуть все элементы навыков. Разве не путаница?)
- Наконец, SkillList отображает три компонента SkillItem.
Итак, это первые шаги, которым вы должны следовать, чтобы создать ответный проект.
Спасибо за внимание!
