Эта статья является ответом на перевод статьи «Как искать пользователей на GitHub с помощью React + RxJS 6 + Recompose» , который буквально вчера научил нас совместному использованию React, RxJS и Recompose. Что ж, предлагаю сейчас посмотреть, как это можно реализовать без этих инструментов.
Отказ от ответственности Многим может показаться, что данная статья содержит элементы троллинга, написана на скорую руку и для развлечения.
Так вот, это так.
Поскольку это ответная статья, я решил построить ее в том же пошаговом формате, что и оригинал.
Кроме того, в статье также ставится цель сравнить исходную реализацию с описанной здесь.
Поэтому он содержит обилие ссылок и цитат из оригинала.
Давайте начнем.
Эта статья предназначена для людей, имеющих опыт работы с React и RxJS. Я просто делюсь шаблонами, которые показались мне полезными для создания такого пользовательского интерфейса.Эта статья предназначена для людей, имеющих опыт работы с Javascript (ES6), HTML и CSS. Также в своей реализации я буду использовать «исчезающий» каркас SvelteJS , но он настолько прост, что для понимания кода не требуется опыта его использования.
Мы по-прежнему делаем то же самое: 
Никаких классов, работы жизненного цикла или setState.Да, без классов, работы жизненного цикла или setState. А также без React, ReactDOM, RxJS, Recompose. А кроме того, без компонентаFromStream, createEventHandler, joinLatest, map, startWith, setObservableConfig, BehaviorSubject, merge, of, catchError, Delay, Filter, Map, pluck, SwitchMap, Tap, {еще одна фигня}.
Короче, вы поняли .
Подготовка
Все, что тебе нужно, у меня Пример REPL на сайте SvelteJS. Можно поковыряться там, или локально, скачав исходники оттуда (кнопка с характерным значком).Сначала давайте создадим простой файл App.html, который будет корневым компонентом нашего виджета, со следующим содержимым:
Здесь и далее я использую стили из оригинальной статьи.<input placeholder="Имя пользователя GitHub"> <style> input { font-size: 20px; border: 1px solid black; border-radius: 3px; margin-bottom: 10px; padding: 10px; } </style>
Обратите внимание, что сейчас они находятся в области видимости, т. е.
применяются только к этому компоненту, и вы можете смело использовать имена тегов там, где это уместно.
Я буду писать стили непосредственно в компонентах, потому что SFC, а также потому, что REPL не поддерживает экспорт CSS/JS/HTML в разные файлы, хотя это легко сделать с помощью Препроцессоры Svelte .
Перекомпоновать
Давайте расслабимся.
Компонент потока
.солнечные ванны.
Конфигурация
.пить кофе.
Перекомпоновать + RxJS
.пока другие.
карта
.работа.
Добавляем обработчик событий
Конечно, это не совсем обработчик, а просто привязка: <input bind:value=username placeholder="Имя пользователя GitHub">
Что ж, давайте определим значение имени пользователя по умолчанию:
<script>
export default {
data() {
return {
Теги: #JavaScript #svelte #react.js #Реактивное программирование #Разработка веб-сайтов #JavaScript #react.js
-
Google Живой Человек
19 Oct, 24 -
Veeam Explorer Для Microsoft Sharepoint 2013
19 Oct, 24 -
Arm-Кластер От Gumstix
19 Oct, 24 -
О Вреде Компьютеров
19 Oct, 24
