Несколько лет назад я написал статью под названием Давайте построим панель поиска в React где я показал читателям (как вы уже догадались!) Как построить панель поиска в React. Когда я написал эту статью, React Hooks не существовало, поэтому она написана с использованием компонентов класса. С момента публикации поста я получил несколько запросов, чтобы переписать пост, показывающий, как создать строку поиска с помощью React Hooks. После перерыва в блог, чтобы сосредоточиться на моей семье и заваленной работой, я рад сообщить, что это этот пост!
В этом посте я буду следовать примерно той же структуре, что и оригинал. В моем последнем посте я использовал посылку, чтобы объединить все свои пакеты и создать свой код. Parcel сделал несколько улучшений с этого поста, поэтому я буду придерживаться этого инструмента сборки для этого поста.
Настройка проекта
Я буду использовать интерфейс командной строки, чтобы настроить свой проект. Если вы новичок в командной строке или нуждаетесь в переподготовке, я написал Пост в блоге, в котором объясняется большинство команд, я буду использовать Анкет
Создание папки проекта и настройка структуры
Чтобы начать, я буду создавать папку проекта на своем компьютере, а затем создавать структуру файла для моего приложения. Когда Используя посылку , вы можете выбрать, как вы хотите, чтобы ваш проект был структурирован Так что я собираюсь придерживаться структуры, подробно описанной ниже. Во -первых, команды, чтобы настроить:
mkdir react-hooks-searchbar && cd $_
Эта команда создаст папку для проекта и переместит вас в папку. Далее вы создадите папку приложений и все начальные файлы в вашем проекте. Примечание: я использую Bash, поэтому, если вы используете PowerShell или что -то подобное, некоторые из этих команд не будут работать.
mkdir app && touch .gitignore index.html app/app.jsx
После ввода команды выше, структура проекта должна выглядеть следующим образом:
- приложение/
- app.jsx
- .gitignore
- index.html
Установка пакетов для проекта
Следующим шагом является установка зависимости для проекта. Для этого проекта я буду держать его максимально простым. Как и первый проект, я буду использовать React, Reactdom и Bulma для фронта. Прежде чем вы сможете установить зависимости для проекта, вам необходимо инициировать проект.
npm init -y
-y Флаг ответит «да» на все вопросы, задаваемые при настройке проекта с NPM, что делает вещи намного быстрее. Далее вам нужно установить свои зависимости Dev. Это зависимости, которые вы будете использовать только в своей среде разработки, поэтому их не нужно загружать на производство.
npm install --dev parcel @babel/preset-react
Затем вам нужно добавить зависимости, которые будут использоваться в производственной среде.
npm install react react-dom bulma
Давайте кратко поговорим о том, для чего, для которого вы добавлены каждый из добавленных вами пакетов:
- React: Библиотека для ускорения разработки (кажется очевидной для учебника React, верно?) Связь
- React-Dom: Библиотека, которая позволяет реагировать на взаимодействие с DOM в браузере. Связь
- Посылка: Библиотека, которая не требует конфигурации. Связь
- @Babel /предустановленная реакция: Библиотека, которая сообщает посылке, как справиться с JSX. Связь
- Булма: CSS Framework, которая использует Flexbox и прост в использовании. Связь
Проверка package.json и добавление сценариев
Если вы откроете свой Package.json Файл, вы должны увидеть Все зависимости, перечисленные в рамках зависимости и DevDependencies , соответственно. В то время как у вас есть этот файл, вы можете добавить сценарии, чтобы запустить свой проект и Вавилон, чтобы добавить пресеты Babel. Хотя ваши версии могут отличаться от моих, когда вы читаете это, ваш Package.json Файл должен выглядеть похожим на мой после добавления сценарии и Вавилон объекты.
{
"name": "react-hooks-searchbar",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"dev": "parcel index.html",
"build": "parcel build index.html"
},
"babel": {
"presets": ["@babel/preset-react"]
},
"dependencies": {
"bulma": "^0.9.2",
"react": "^17.0.1",
"react-dom": "^17.0.1"
},
"devDependencies": {
"@babel/preset-react": "^7.12.13",
"parcel": "^1.12.4"
}
}
Подготовка файла index.html
Когда посылка начинает связывать приложение, он смотрит на index.html Файл, который затем привлечет все наше приложение React. Из -за этого нам нужно заполнить index.html Задайте с каким -то кодом, чтобы рассказать ему, что привлечь. В целом, это будет довольно простой HTML -файл. После того, как у вас открыт файл в редакторе кода, вы можете ввести html: 5 (Предполагая, что у вас установлен Эммет) и нажмите вкладку. Редактор кода заполнит кучу кода по умолчанию, и это будет основой для вашего index.html файл.
После того, как вы сделаете базовые леса, вам нужно добавить div с идентификатором приложение к телу вашей структуры. После Div вам понадобится тег сценария с SRC Будучи App.jsx, которое вы создали ранее. Это все, что вам нужно в этом файле, хотя вы можете изменить заголовок страницы в голове, если хотите. Как только все это будет сделано, ваш файл index.html должен выглядеть как код ниже.
React Hooks Search
Настройка приложения React
Теперь, когда index.html Файл настроен, вы можете начать создавать свое приложение. Чтобы начать, откройте свой app/app.jsx Файл и добавьте код ниже. Это просто отобразит стилизованный тег H1 с надписью «Поиск», чтобы убедиться, что конфигурация работает должным образом.
import React from 'react';
import ReactDOM from 'react-dom';
import 'bulma/bulma';
const App = () => {
return (
Search
);
}
ReactDOM.render(Теперь, если вы запустите заявку и посетите http://localhost: 1234 Вы должны увидеть белый фон с черным текстом с «поиском». Чтобы запустить приложение, запустите следующую команду:
npm run dev
При использовании Dev Скрипт, Parcel проведет горячую нагрузку, так как вы вносите изменения в проект, он автоматически перезагрузит и обновляет страницу с помощью изменений. Это огромная экономия времени, так как вам не придется продолжать начинать и останавливать приложение.
Что такое крючки React?
Если вы читали мои предыдущие сообщения в блоге о Реагировать компоненты или Создание поисковой панели с React , вы видели оба класс и функциональные компоненты .Когда Эти посты были написаны, только компонент класса может иметь состояние. С тех пор команда React проделала большую работу, чтобы сделать код гораздо более кратким и одним из способов достижения этого через крючки. Из -за этих огромных улучшений можно иметь методы состояния и жизненного цикла внутри функционального компонента.
Хотя есть несколько крючков, которые вы можете использовать для различных целей, я просто сосредоточусь на одном, в частности. Этот крючок USESTATE Hook, который позволяет создавать кусок данных, а также изменить его без настройки конструктора и не суетиться с компонентом класса.
Добавление состояния в приложение
Первый шаг к использованию USESTATE Крюк должен импортировать его из реагировать библиотека. Вы можете использовать его из Реагировать Если хотите, если хотите, но я предпочитаю использовать названные экспорты, чтобы сохранить код немного чище. Ваш импорт React теперь должен выглядеть так:
import React, {useState} from 'react';
Теперь, когда вы импортировали USESTATE Крюк, вы можете создать свой государственный элемент. Для этого вы создадите переменную состояния и назначите ей значение. В этом случае вы создадите переменную, называемую список Анкет Вы также создадите переменную под названием SETLIST Это будет то, как вы манипулируете переменной состояния при необходимости. Эти имена являются произвольными и могут быть тем, что вам нравится, хотя типичная соглашение об именах состоит в том, чтобы установить «установить» перед капитализированным именем переменной государства. Приведенный ниже код иллюстрирует, как добавить состояние списка с множеством элементов в качестве значения по умолчанию.
import React from 'react';
import ReactDOM from 'react-dom';
import 'bulma/bulma';
const App = () => {
const [list, setList] = useState([
"Go to the store",
"Wash the dishes",
"Learn some code"
]);
return (
Search
);
}
ReactDOM.render(Как видите, переменные установлены на USESTATE Функция с аргументом является значение по умолчанию. В этом случае это множество строк, хотя это может быть любой тип данных, включая нулевой Или вы даже можете оставить это пустым.
Отображение и добавление элементов
Что хорошего в том, чтобы иметь список элементов в штате, если пользователь не видит или добавляет элементы в свой список? Приведенный ниже код покажет вам, как отобразить элементы в упорядоченном списке, и создать поле и кнопку для добавления новых элементов в список. Я использую map () функционируйте здесь, что итерация над массивом и что -то возвращает. В этом случае что -то возвращаемое – это код JSX, который будет отображаться. Код ниже показан обновленный код для компонента.
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'bulma/bulma';
const App = () => {
const [list, setList] = useState([
"Go to the store",
"Wash the dishes",
"Learn some code"
]);
const addItem = (e) => {
e.preventDefault();
const item = e.target.newItem.value;
if (item) setList([...list, item]);
e.target.reset();
}
return (
{list.map((item, key) => (
- {item}
))}
);
}
ReactDOM.render(Вы можете увидеть функцию в приведенном выше коде, называемом additem который получает значение ввода и добавьте его в массив в состоянии, используя оператор спреда. Наконец, функция очищает данные в форме, поэтому она готова к следующей задаче.
В возвращении компонент итерации над элементами в список массив, чтобы отобразить его для пользователя. Когда элемент добавлен в список Массив, компонент повторно рендеринг и обновляет указанный элемент с помощью новых данных.
Удаление предметов
Теперь, когда пользователь может добавить элементы в свой список дел, вам нужно дать им возможность удалить их. Это будет сделано путем добавления кнопки справа от каждого элемента списка, который запускает функцию, чтобы найти элемент в список массив и удаление его с помощью JavaScript фильтр метод Как только это будет сделано, отображаемый список будет обновляться с помощью указанного элемента.
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'bulma/bulma';
const App = () => {
const [list, setList] = useState([
"Go to the store",
"Wash the dishes",
"Learn some code"
]);
const addItem = (e) => {
e.preventDefault();
const item = e.target.newItem.value;
if (item) setList([...list, item]);
e.target.reset();
}
const handleDelete = (item) => {
setList(list.filter(li => li !== item));
}
return (
{list.map((item, key) => (
-
{item} handleDelete(item)} />
))}
);
}
ReactDOM.render(Создание строки поиска
Теперь, когда у вас есть приложение «Список задач», пришло время добавить функциональность поиска. Это должно быть нечувствительным и обновлять в режиме реального времени. Это потребует ввода поиска, который затем использует фильтр Метод в изменении, чтобы отобразить только элементы в списке, которые соответствуют строке поиска.
import React, {useState} from 'react';
import ReactDOM from 'react-dom';
import 'bulma/bulma';
const App = () => {
const [search, setSearch] = useState(``);
const [list, setList] = useState([
"Go to the store",
"Wash the dishes",
"Learn some code"
]);
const addItem = (e) => {
e.preventDefault();
const item = e.target.newItem.value;
if (item) setList([...list, item]);
e.target.reset();
}
const handleDelete = (item) => {
setList(list.filter(li => li !== item));
}
return (
setSearch(e.target.value)}
placeholder="Search..."
/>
{list.filter(li => li.toLowerCase().includes(search.toLowerCase())).map((item, key) => (
-
{item} handleDelete(item)} />
))}
);
}
ReactDOM.render(Приведенный выше код добавляет вход и проверку, чтобы увидеть, включена ли строка поиска в любой из элементов списка. Это не идеальное решение, но этого достаточно для базовой проверки и в качестве точки прыжка, если вам нужна более конкретная функциональность.
Вывод
Точно так же, у вас есть строка поиска, созданная с помощью React Hooks. Весь компонент (включая импорт и реакцию) составляет 63 строки. Это сравнивается с исходной версией компонентов класса, которая составила 135 строк. Переключившись на крючки, компонент становится более читабельным и сокращает количество кода пополам! Ваше приложение готово создать, читать, удалять и поиск элементов в списке задач.
Есть вопросы? Вы можете найти меня в Твиттере в @iam_timsmith .
Оригинал: “https://dev.to/iam_timsmith/let-s-build-a-search-bar-using-react-hooks-59jn”