Реагировать

React - это библиотека JavaScript для создания пользовательских интерфейсов, а для создания пользовательских интерфейсов React использует так называемый компонент. Возникает вопрос, что такое Component и почему React посвящен именно им? Итак, давайте обсудим это подробнее

Составная часть

Итак, давайте теперь погрузимся во все основы компонентов. И для этого имейте в виду то, что вы узнали в предыдущем разделе. React - это библиотека JavaScript для создания пользовательских интерфейсов. И мы также узнали, что в целом HTML, CSS и JavaScript также предназначены для создания пользовательских интерфейсов.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Больше контента на plainenglish.io