Я пытался понять реакцию на некоторое время. У меня почему-то в голове не укладывается. Поскольку Freecodecamp обновляется, в моих знаниях есть пробелы, и мне казалось, что это был огромный скачок от Javascript и Jquery к написанию реагирующих компонентов и навигации в области реагирующих вещей.
Я не думаю, что этот конкретный модуль требовал, чтобы я использовал реакцию для создания таблицы лидеров, и, если столкнуться, я построил ее без нее, и это было прямолинейно, но я решил сделать это трудным путем, чтобы немного попрактиковаться.
Проект заключается в создании таблицы лидеров, в которой используются два разных списка Json freecodecamp. Каждый список представляет собой таблицу лидеров, основанную на разных категориях; последние 30 дней и статистика за все время. Пользователь должен иметь возможность:
- выберите категорию для просмотра
- Посмотрите, сколько баллов у каждого пользователя в обеих категориях.
Я работаю на 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