В этом разделе мы изучим что такое компонент, компонентный подход создания приложения, композиция и декомпозиция.
Пришло время изучить одну из важнейших тем современной веб разработки. Давайте вспомним, с чего все начиналось и к чему мы пришли. Все начиналось с того, что какие-то отдельные файлы (.js) подключались к файлу (.html), но с развитием веб разработки люди создавали различные инструменты, подходы и принципы для упрощения и поддержания фронтенд приложения. На сегодняшний день самым лучшим вариантом создания приложения является компонентный подход.
Для того, чтобы понять смысл компонентного подхода давайте выясним что же такое сам компонент. Итак, компонент - независимый модуль приложения или независимый кусок кода, который можно переиспользовать в любом месте приложения неограниченное количество раз. Компонентный подход в свою очередь заключается в создании приложения, основанном на таких компонентах. Компонентный подход пришел с появление Фреймворков, и он следует принципу DRY (don't repeat yourself - не повторяйся). Суть подхода заключается в том, что нам не нужно писать один и тот же код несколько раз, нам достаточно переиспользовать уже готовый компонент, и при изменении внутренней структуры данного куска кода нам достаточно изменить его всего в одном месте (в самом компоненте) - как по мне, просто бомба. Данный подход в программировании гарантирует разработчикам экономию времени, читаем
ость кода, безопасное редактирование и исправление проблем (багов) в приложении. Компонентный подход также очень сильно развит на React. Очень часто можно услышать или прочитать о проблемах (багах) в таких крупных приложениях, как Facebook, Google, VK и др. Возможно, иногда это очень незначительные баги, но их сложно решать, из-за трудно читаемого и запутанного кода, который может даже представлять из себя 2000 строк. Как раз таки причиной создания React компанией Фейсбук были проблемы с исправлением ошибок на самом Фейсбук.
Давайте теперь перейдем наконец непосредственно к нашей теме, а именно “Компонентный подход в React приложениях”. Чтобы использовать компонентный подход нам нужно научиться создавать компонент в React приложении. React предоставляет нам 2 способа создания компонента:
Классовый
Функциональный
Чаще всего используют функциональный способ создания компонента. Функция и функциональный способ является более легким и легко читаемым. Классовый способ имеет в своем арсенале больше возможностей управления логикой приложения. Но функциональный подход является более удобным и он также дает возможность для создания крупных приложений.
Вот простой пример создания функционального компонента (с официального сайта https://ru.reactjs.org):
На данном примере продемонстрирован компонент при помощи объявления функции Function declaration, но можно создавать компоненты всеми типами функций (Function expression, Arrow function).
Классовый способ имеет более сложную реализацию. Вот самый простой пример создания компонента классовым способом (с официального сайта https://ru.reactjs.org):
Функциональный подход предпочтительней, но выбор всегда остается за вами.
Суть компонентов в React приложении - это возвращать React элемент. Что же такое React элемент? Это маленькие строительные кирпичи, на которых строится приложение. Они представляют из себя объект и самым лучшим способом написания таких элементов - это JSX.
Вот простой пример JSX (с официального сайта https://ru.reactjs.org):
Который скомпилируется в (с официального сайта https://ru.reactjs.org):
Компонентный подход содержит в себе два ключевых термина:
Композиция
Декомпозиция
Под словом композиция понимается строение крупного объекта путем соединения более мелких частей. Декомпозиция же является обратным процессом композиции, то есть разделение сложного объекта на более мелкие части.
Давайте теперь разберем компонентный подход в React приложении на следующем примере.
Допустим, что нам нужно создать страницу состоящую из трех секций - header, main content и footer. Визуальная иллюстрация показана на картинке ниже.
Используя компонентный подход мы должны сначала используя декомпозицию разделить данную страницу на независимые функциональные компоненты. Используя картинку выше мы можем видеть, что страница состоит из трех частей и следовательно мы можем разделить ее на 3 функциональных компонента.
src/components.Header.jsx
src/components/Main.jsx
src/components/Footer.jsx
Теперь нам остается импортировать все 3 файла в файл App.js.
Вот что у меня получилось:
Буду рад, если этот пост будет кому-нибудь полезен! А для меня это был первый опыт :-)