Я пытался понять реакцию на некоторое время. У меня почему-то в голове не укладывается. Поскольку Freecodecamp обновляется, в моих знаниях есть пробелы, и мне казалось, что это был огромный скачок от Javascript и Jquery к написанию реагирующих компонентов и навигации в области реагирующих вещей.

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

Проект заключается в создании таблицы лидеров, в которой используются два разных списка Json freecodecamp. Каждый список представляет собой таблицу лидеров, основанную на разных категориях; последние 30 дней и статистика за все время. Пользователь должен иметь возможность:

  1. выберите категорию для просмотра
  2. Посмотрите, сколько баллов у каждого пользователя в обеих категориях.

Я работаю на Mac и использую Webstorm IDE.

Среда Webstorm IDE позволяет создать приложение React одним нажатием кнопки.

Он инициализировал простое приложение для реагирования. Поскольку я новичок в React, мне неудобно все объяснять.

Единственное, что я сделал, это очистил некоторые файлы изображений, которые поставлялись с ним, а также выпотрошил компонент приложения.

Первым делом нужно получить данные из учетной записи FCC Heroku (https://fcctop100.herokuapp.com/api/fccusers/top/recent и https://fcctop100.herokuapp.com/api/fccusers/top /все время"). Я добавил эти два URL-адреса в качестве переменных после импорта и отправил нативную ответную выборку для ввода данных (для начала я использовал только один URL-адрес). Снова и снова пытаясь понять правильный синтаксис, я нашел «этот пост на FCC и смог заставить отображать имена пользователей в браузере.

Теперь я хочу добавить аватарки.

Мне нужно будет добавить тег ‹Image/›, но получить источник из данных для тега может быть немного сложно. Это связано с тем, что все изображения имеют разный размер и по какой-то причине они не будут отображаться таким образом. Итак, вы должны явно указать ширину и высоту ваших изображений в теге.

<td><Image source={{uri : item.img}} style={{width: 70, height: 70}}/></td>

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

Для этого я использовал навигационную панель начальной загрузки. Сначала я установил и сохранил пакет react-bootstrap с помощью npm. После этого я скопировал навигационную панель отсюда. Затем я обновил его для своих нужд; удалил много элементов, но оставил два элемента меню, которые соответствуют 30-дневному списку и списку за все время. Наконец, мне пришлось выяснить, как обрабатывать пользователя, выбирающего один из этих вариантов.

Я использовал функцию типа handleChange. Если вы внимательно посмотрите на документацию по навигационным панелям, в каждом примере есть вкладка Развернуть, где вы можете увидеть код. Это один из кодов:

В открытии вкладки Nav есть что-то, что называется onSelect. При этом вы можете указывать, что происходит, когда вы нажимаете кнопки на панели навигации, а также можете передавать определенные атрибуты кнопок в функцию.

Я переключил eventKeys на соответствующий из двух URL-адресов и передал его в функцию дескриптора, которая идентична функции componentWillMount(), но я передал нужный URL-адрес через атрибут selectedKey.

Я добавил «navbar-fixed-top», потому что хотел — DWI — .

Теперь это работает так:

Великолепный.

Но когда я открываю инструменты разработчика в хроме, я получаю следующие ошибки:

Я не могу найти много информации о том, что может быть не так с тем, что ‹tr› является дочерним элементом таблицы. Кажется, это постоянная проблема, но не похоже, что она что-то сломает, поэтому я позволю ей соврать.

Но я нашел кое-что о том, как исправить ключевую проблему. Проблема в том, что итераторы действительно предпочитают уникальный ключ для каждого элемента. Я узнал об этом от Egghead.io. Для моих целей было бы достаточно использовать индекс функции сопоставления.

Я также пошел дальше и использовал указатель для нумерации своего списка.

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

Теперь я лучше понимаю, как работает реакция и что я могу с ней сделать. Делать один и тот же проект двумя разными войнами имеет большое значение.

Далее Хероку. Готовый продукт здесь.

Если у вас есть совет для меня, не стесняйтесь комментировать

Вера Ворри

гитхаб: https://github.com/Vworri

сайт: vworri.github.io