React, это мощная библиотека, которая позволяет с легкостью создавать пользовательский интерфейс с помощью JSX. Мы вернемся к этому подробнее через минуту. Это мощный инструмент, который я недавно добавил в свой набор навыков, который изменил мой образ мышления, когда дело доходит до создания веб-приложений.
React - это все о компонентах, которые содержат то, что будет отображаться на экране, состоянии, которое содержит ваши исходные данные или значения по умолчанию и свойства, которые передаются от компонентов к другим компонентам для вызова функции из другого компонента или отправки данных. вплоть до других компонентов. Состояние, выглядит примерно так:
Состояние - это место, где вы будете хранить данные, которые хотите передать в своем приложении. В этом случае Pokemon! Изначально мы начинаем наше состояние в форме того, что мы хотим, чтобы оно содержало. Итак, в этом случае мне нужна коллекция покемонов, поэтому для нее установлен массив. Я также хочу иметь возможность искать покемонов, поэтому давайте установим это значение в пустую строку, поскольку мы планируем, что наш поиск будет отправлять новую строку, то есть «Чармандер».
Теперь нам понадобится запрос на выборку, чтобы получить всех наших покемонов:
Там есть ключевое слово, которое очень важно!
Теперь, когда мы получили покемона, мы изменим свое состояние, чтобы все наши покемоны были помещены в массив «покемонов» [].
Мы хотим убедиться, что это произойдет только при первоначальном рендеринге нашей страницы. Мы можем сделать это с помощью componentDidMount ()
Теперь, когда этот компонент будет отрисован, мы вызовем нашу функцию getPokemon (), чтобы получить нашего покемона. Теперь мы можем вызвать наш список покемонов с помощью this.state.pokemon в этом компоненте.
Теперь перейдем к рендерингу, но я не хочу рендерить всех покемонов на страницу за один раз… Я не думаю, что это должно быть задачей этого компонента. Так что я передам его как опору PokemonCollection. Я назову эту опору покемон. Кажется уместным. Для смеха и для того, чтобы код выглядел чище, я деконструирую его так, чтобы вместо записи pokemon = {this.state.pokemon} я мог написать pokemon = {pokemon}.
Теперь в нашей коллекции PokemonCollection есть вся коллекция Pokemon. Имеет смысл, правда? В любом случае, теперь я хочу сгруппировать наших покемонов в ряды по шесть штук. Не будем вдаваться в подробности, но мы хотим передать нашего покемона еще раз, но по одному! Итак, просматривая каждого покемона один за другим, мы визуализируем компонент ‹PokemonCard /› для каждого из них.
Взгляните, как будет выглядеть отдельная «карта покемона»:
Вот как выглядит фрагмент кода:
Взгляните на это? Выглядишь немного знакомо? Если вы привыкли кодировать на ванильном JS и еще не касались React, вы, вероятно, воспользуетесь своими знаниями как HTML-кода, так и JavaScript-кода и как бы сложите их воедино.
Пользователи JavaScript также заметят, что addEventListener отсутствует на странице для распознавания клика! Вместо этого мы используем функцию onClick = {/ * для выполнения * /}. Он делает то же самое. Здесь мы храним состояние, чтобы узнать, был ли нажат покемон, чтобы показать переднюю или заднюю часть покемона, и мы абстрагировали это в функцию в компоненте.
Это JSX, это расширение синтаксиса JavaScript, он очень похож на HTML, но под ним скрывается вся мощь JavaScript.
После рендеринга в браузере посмотрите, как это выглядит в консоли:
React декларативен, вы можете все довольно четко прочитать (если вы тоже хорошо назвали свои функции и компоненты!)
Надеюсь, вы сможете понять, почему это отличный способ создания веб-приложений. Больше никаких getElementById, поскольку JSX выполняет всю работу за вас, создавая элемент, просто написав ‹div›. Фактически, он выполняет JavaScript под ‹/div›.
