Быстро создать приложение React Todo с помощью хуков и бит

Как легко создать простое приложение с повторно используемыми компонентами React из bit.dev.

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

Хуки Bit и React

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

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

Используете компонентную архитектуру? Ищете лучшее совместное использование кода и модульность? Создаете систему / библиотеку дизайна пользовательского интерфейса? Тогда определенно выбирайте Bit.

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

Я бы сделал еще один шаг и объединил эти удивительные инструменты (Bit и Hooks) для создания модульного приложения Todo. Итак, без дальнейших промедлений, приступим.

Совет: если вы не знаете о перехватчиках React, ознакомьтесь с этими статьями.

Приложение Todo

Мы будем использовать semantic-ui-react для стилизации нашего приложения, используя его привлекательные компоненты пользовательского интерфейса. Это отличная библиотека компонентов React UI, превращенная в коллекцию компонентов с помощью Bit, чтобы можно было найти и использовать отдельные компоненты.

Начать

Мы будем использовать приложение create-react-app для создания нашего проекта React.

create-react-app hooks-todo

Пришло время настроить Bit:

• Создайте аккаунт, если еще не сделали.
• Создайте коллекцию, дайте любое название.
• Установите Bit на свой компьютер.

yarn global add bit-bin
// OR
npm install bit-bin -g

• Инициализировать Bit в проекте.

bit init

Вернемся к React. Мы будем использовать 3 компонента для создания нашего приложения:

1. Компонент AddItem

Имя говорит само за себя. Этот компонент будет отвечать за добавление нашей задачи todo. Этот компонент будет содержать состояние ввода и будет передавать его при нажатии кнопки родительскому компоненту todos массиву.

Как упоминалось ранее, мы будем использовать semantic-ui-react для разработки компонентов пользовательского интерфейса.

Чтобы использовать эти компоненты, мы можем установить их с помощью Yarn или NPM из bit.dev:

yarn add @bit/semantic-org.semantic-ui-react.button
yarn add @bit/semantic-org.se mantic-ui-react.input
// OR
npm i @bit/semantic-org.semantic-ui-react.button
npm i @bit/semantic-org.se mantic-ui-react.input

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

2. Компонент ListItem

Этот компонент перечисляет задачи из массива todos в родительском компоненте. Мы получаем массив в качестве свойств, а затем сопоставляем массив для отображения списка. Мы будем использовать компонент theList из семантического пользовательского интерфейса.

yarn add @bit/semantic-org.semantic-ui-react.list
// OR
npm i @bit/semantic-org.semantic-ui-react.list

3. Компонент Todo

Это родительский компонент, отвечающий за обработку состояния todos. Состояние обрабатывается с помощью крючкаuseState. Добавление элемента в состояние задачи и удаление элемента из состояния задачи обрабатываются в этом компоненте.

Мы будем использовать метод unique-id из lodash для предоставления уникального идентификатора и SemanticUiStyle для предоставления стиля.

yarn add @bit/lodash.lodash.unique-id
yarn add @bit/semantic-org.semantic-ui-react.internal.style-links
// OR
npm i @bit/lodash.lodash.unique-id
npm i @bit/semantic-org.semantic-ui-react.internal.style-l

Как только все компоненты готовы. Мы должны отправить их в созданную коллекцию Bit.

bit add src/components/*
# Importing the compiler for the build
bit import bit.envs/compilers/react --compiler
bit tag --all 1.0.0
bit export your_username.collection_name

После этого наша коллекция должна выглядеть примерно так:

Заключение

В этой статье мы обсудили некоторые интересные вещи, связанные с Bit and Hooks. Надеюсь, вам понравилась эта статья и вы узнали что-то новое, а если вы это сделали, то подпишитесь на меня, чтобы получить больше контента на Medium, а также в Twitter. Пожалуйста, не стесняйтесь комментировать и спрашивать что угодно. Спасибо за чтение 🙏.

Учить больше