Многоразовый компонент в React

Задний план

React: библиотека JavaScript для создания пользовательских интерфейсов.

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

Настраивать

Мы будем использовать Create React App для начальной загрузки нашей разработки, прежде чем мы это сделаем, через мгновение убедитесь, что на вашем компьютере установлен Node JS.

➜  ~ node -v
v14.9.0
➜  ~ npm -v
6.14.8

Чтобы создать приложение с помощью Create React App, запустите приведенный ниже код.

npx create-react-app my-app
cd my-app
npm start

npx create-react-app сгенерируйте React в каталоге папок my-app, мы можем назвать это как угодно. Затем, после всей установки, мы cd в этот каталог, тогда мы можем запустить npm start, чтобы запустить наш только что созданный сайт, работающий на localhost 3000.

Мы собираемся использовать файлы App.js и App.css соответственно, мы не собираемся удалять какой-либо из CSS, который мы только собираемся добавить к нему, и изменять некоторые из них. Так что давай избавимся от этого

Вышеупомянутый CSS добавлен под последнее определение CSS в App.js в классе .App-header, мы меняем background-color: #e5e5e5, это даст нам светлый фон, как показано в GIF ниже.

Что мы строим

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

Создание простой кнопки - это просто объяснение техники, которую можно использовать для любого типа компонента. Если вы использовали UI-фреймворк, такой как Bootstrap, вы заметите, как вы можете добавить некоторые классы к кнопке и получить другой внешний вид.

Как мы можем создать в React компонент, который также можно стилизовать по-разному, в зависимости от передаваемых в них свойств?

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

Начиная

Все наши реализации теперь будут продолжены в App.js. Вы можете удалить или обновить App.js код, используя приведенный выше код, который является нашей отправной точкой. Итак, теперь нам нужно реализовать вызов нового компонента myButton

Выше представлена наша базовая реализация MyButton. Теперь давайте подумаем о том, как мы хотим, чтобы наш пользователь использовал наш Компонент. Мы хотим, чтобы наш пользователь мог установить mode на dark or light, мы также хотим, чтобы наш пользователь компонента мог установить size на small, medium or large, чтобы использование было примерно таким:

<MyButton>Learn React</MyButton>
<MyButton mode="dark">Learn React</MyButton>
<MyButton mode="light">Learn React</MyButton>

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

Сейчас мы деструктурируем className mode и упаковываем любые другие свойства в ...otherProps, вы можете прочитать о деструктурировании здесь и про операторы распространения здесь. ... называется оператором спреда. Используя строковый литерал и интерполяцию, мы можем получить значение режима, переданного пользователем, и добавить его класс CSS, соответствующий тому, который уже реализован в App.css, если пользователь не проходит ни в каком режиме, мы уже предоставили значение по умолчанию light this make наш компонент можно использовать повторно, так как член нашей команды не должен беспокоиться о деталях реализации, они просто передают реквизиты и получают ожидаемый результат.

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

Вывод

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

Репозиторий кода:

peterayeniofficial / reusable-button-component
Этот проект был загружен с помощью приложения Create React. В каталоге проекта вы можете запустить: Запускает приложение на… github.com

Предварительный просмотр проекта:

Https://reusable-button-component.vercel.app/