Не так давно у меня случился внезапный отпуск. Поэтому я решил повысить уровень своих существующих знаний о React. Обычно я повышаю свои навыки, создавая проекты. Я решил создать приложение React. Я искал в Интернете идеи и в один прекрасный день наткнулся на курс Full Stack Web Developer от Андрея Негойе, где он собирал свою онлайн-колоду карт. Поэтому я решил создать такое же приложение.
Прежде чем мы пойдем дальше, я хотел бы сообщить, что я скопировал значения CSS из его проекта, а также имена переменных, но я понял каждую часть проекта и написал код самостоятельно.
Шаг 1: Инициализация проекта
Когда я посмотрел репозиторий git Андрея, я понял, что он использовал генератор create-react-app. Я решил сделать свой проект простым и читабельным, поэтому я использовал CDN только для того, чтобы сэкономить место и не переборщить.
Весь код, написанный в проекте, написан на JavaScript и строго соответствует стандарту ES6, используемому React.
Шаг 2. Переосмысление приложения с точки зрения компонентов
React построен на концепции повторно используемых компонентов, чтобы помочь вам сделать себя СУХИМ (не повторяйте себя). Компонент кодируется только один раз, но используется много раз. На рисунке показаны компоненты, которые используются в проекте.
The structure of the App would be this way:
<App>
<Card List>
<Card />
<Card List />
<Searchfield />
<App />
Компонент App будет контейнером всего нашего проекта и будет действовать как корневой узел в дереве DOM.
Карточка является основным компонентом всех элементов. Он отображает изображение и детали человека. В большинстве случаев количество людей может быть большим, поэтому я поместил все эти карты в компонент CardList, чтобы упростить управление состоянием.
Компонент Панель поиска позволяет нам искать определенное имя в компоненте CardList. Компонент Search Bar и компонент CardList имеют компонент App в качестве своего родителя. Это обеспечивает однонаправленный поток данных, которого React придерживается и настаивает на использовании.
Шаг 3: Создание приложения
Все компоненты, используемые в проекте, записываются в один файл index.js, связанный с index.html на начальном этапе.
Сначала кодируется компонент Карточка, а остальные компоненты следуют в файле.
Для стилизации карты используется фреймворк Тахионы. id, name и email — реквизиты компонента. Но не рекомендуется воздействовать или менять реквизит напрямую. Вместо этого создаются и назначаются переменные с теми же именами, что и реквизиты. Источником изображения является бесплатный API под названием Robohash. Данные для карточки берутся из ее родительского элемента, то есть из элемента CardList. Имя в теге ‹h2› и адрес электронной почты в теге ‹p› — это данные, поступающие из другого поддельного API, который обслуживает поддельных пользователей, фотографии и т. д. Но мы не можем написать каждую карточку, поэтому мы будем передавать данные в качестве реквизита. в компонент CardList и пусть он обрабатывает генерацию карточек.
Создание компонента CardList
Компонент CardList работает над созданием карт, которые будут отображаться на экране, принимая информацию, которая будет отображаться в качестве входных данных (реквизитов).
Реквизиты, передаваемые этому компоненту, представляют собой список имен и адресов электронной почты, которые извлекаются из поддельного API.
Компонент CardList получает массив объектов в качестве реквизита. Этот массив сопоставляется с другим, содержащим карты, готовые к отображению. Это делается с помощью функции map(). Проще говоря, он преобразует данные из API в карточки для отображения.
Примечание. Использование функции forEach() приводит к ошибкам. forEach(), как и map(), принимает функцию в качестве аргумента, но применяет функцию только к элементам массива, для которого она вызывается. Он не возвращает массив результатов. Функция map() возвращает массив результатов.
Создание компонента поля поиска
Поле поиска — это простой функциональный компонент, который имеет только поле ввода и обработчик событий для компонента.
Обработчик событий Search Field обрабатывает операцию поиска. Опция — это функция, которая является частью компонента приложения. Он написан таким образом, чтобы обеспечить однонаправленный поток данных, которого требует React. Стилизация компонентов выполняется Tachyons. Наконец, пришло время создать компонент App.
Создание компонента приложения
Компонент App является корнем всего приложения. Именно в этом компоненте извлекаются данные, реализуется функциональность Окна поиска и приложение показывается пользователю.
Вот объяснение того, что делает компонент. Первоначально он устанавливает для своего состояния (robots and searchfield) пустые значения и отображает компонент SearchBox и тег ‹h1›. Когда React вводит его в DOM, он запускает метод componentDidMount() для извлечения данных и установки состояния роботов для извлеченных данных и запуска рендеринга. () для отображения карточек.
Функция onSearchChange запускается каждый раз при изменении значения SearchBox. На простом английском языке он отображает весь CardList, если в поле поиска ничего не введено. Когда что-то вводится в поле поиска, он просматривает все доступные имена или адреса электронной почты в robots (что является состоянием компонента приложения). Затем он повторно отображает CardList с соответствующими элементами. Последние две строки подключают приложение React из его виртуального DOM к DOM браузера.
Прежде чем мы закончим, давайте добавим еще немного стилей к приложению в файле App.css, который мы прикрепили к файлу index.html. Таблица стилей указывает браузеру установить для фона линейный градиент и использовать SEGA LOGO FONT в качестве шрифта для тегов ‹h1›.
Готовый проект выглядит так.
Вот и подошло к концу создание моего проекта.
Спасибо, что прочитали эту статью. Надеюсь, вы нашли его продуктивным и интересным. Подписывайтесь на меня на Medium, чтобы не пропустить больше сообщений о компьютерных науках и веб-разработке.
Хорошего дня !!!
