Блог

Видео текст:

[00:00] => Узнайте, как использовать React и TypeScript в этом превосходном курсе от roadside coder.
[00:05] => Это единственное видео, которое вам понадобится для начните создавать приложения react с помощью TypeScript.
[00:10] => В этом видео мы сначала изучим основы машинописного текста с абсолютного нуля, а затем
[00:14] => узнайте, как интегрировать их в наши приложения React js, создав потрясающий проект. Мы будем
[00:19] => посмотрите, как мы можем использовать TypeScript с крючками React например, использовать состояние, использовать ссылку и использовать редукторы. Как
[00:26] => передавать реквизиты от одного компонента к другому, определяя типы реквизитов компонента и многое другое,
[00:31] => намного больше. Но подождите, что такое машинопись? И чем он отличается от JavaScript?
[00:37] => Таким образом, машинопись — это надмножество JavaScript и построен поверх этого.
[00:41] => Согласно веб-сайту TypeScript, TypeScript — это JavaScript, который масштабируется, что означает, что он идеально подходит для
[00:47] => большие проекты и приложения производственного уровня. Плюс это избавляет вас от многих, я имею в виду, многих ошибок.
[00:53] => И большинство приложений, которые вы используете сегодня, являются наиболее скорее всего, построен с использованием машинописного текста. Итак, вот что
[00:58] => проект, который мы собираемся построить. Это называется Задача fi. Так что это в основном наше приложение для составления списка дел,
[01:02] => но гораздо более продвинутый. Так что, если я продолжу и наберу выученный, машинописный текст и выберу
[01:11] => теперь мы видим, что здесь есть несколько значков . Первый предназначен для редактирования значка. Так что давайте
[01:15] => скажите «изучите машинопись сейчас» и нажмите «Ввод». Таким образом, вы можете видеть, что список дел был отредактирован.
[01:20] => И мы также можем удалить список дел, нажав на эту кнопку. Например, если я нажму на это, вы
[01:24] => вижу, что он был удален. И мы можем завершить работу, нажав на эту галочку. Или там
[01:30] => есть еще один способ завершить это, перетащив его в раздел «Выполненные задачи».
[01:36] => Это потрясающая функция этого приложения, которую мы можем перетаскивание между активными задачами и завершенными
[01:41] => задачи, я включил оба этих способа, чтобы отметить два взноса и перетащить их в раздел «выполнено», чтобы выполнить
[01:46] => чтобы вы могли использовать то, что вам больше подходит. Кроме того, вы можете заметить, если я войду и напечатаю что-нибудь
[01:51] => и нажмите кнопку «Перейти», вы увидите анимацию нажатия кнопки, вот так.
[01:57] => И вы можете видеть, что я также включил анимацию для этих двух сборов, когда мы наводим на них курсор.
[02:02] => Так что это действительно хорошее приложение для начинающих, чтобы учитесь реагировать с помощью машинописи. Кроме того, если вы
[02:07] => заинтересованы в большем количестве подобных обучающих программ по React js, обязательно загляните на мой канал, который называется
[02:11] => придорожный программист. Недавно я загрузил полный полноценная серия учебных пособий по чат-приложению myrn stack на моем
[02:16] => канал, ссылка будет в описании ниже. Так что без лишних слов давайте начнем.
[02:25] => Так что я открою VS code здесь. И теперь давайте быстро подойдем к нашему терминалу и
[02:29] => инициализировать новое приложение React с машинописным текстом. Но подождите,
[02:32] => мы не знаем, как это сделать. Так что поехали к нашему браузеру и поиску реагирует, машинопись.
[02:40] => И нажмите на эту ссылку. Так как мы собираемся использовать создайте приложение react, мы пойдем и нажмем на
[02:46] => здесь. Так что это похоже на наше обычное приложение react установка, мы просто должны добавить это
[02:52] => тире тире шаблон машинописи после него. Так что давайте идите вперед и сделайте это. Итак, MPX, создайте приложение react,
[03:00] => и название нашего приложения, скажем , учебник по машинописи, и тире тире, шаблон машинописи,
[03:11] => и нажмите enter. Теперь, что это сделает , так это отправится в репозиторий NPM.
[03:18] => И он собирается инициализировать новое приложение React с все зависимости от машинописи. И все эти
[03:22] => файлы вместо точки j, s будут называться в ТОЧКЕ TSX. Итак, если мы вернемся к нашей документации,
[03:29] => это для запуска нового приложения create react проект. Но если у вас уже есть проект, который
[03:34] => запущен и работает с React и JavaScript, вы можете добавить машинопись, установив эту установку npm
[03:41] => Машинопись со всеми типами. Ну вот, наше приложение React инициализировано, теперь давайте быстро
[03:46] => переключитесь в эту папку, набрав учебник по машинописи компакт -диска. Или мы можем перейти в папку «Открыть файл».
[03:54] => А затем откройте эту папку. Вот и мы. Давайте иметь взгляните на структуру папок. Так что в src,
[03:59] => обычно мы видим, что у нас есть app.js здесь, но сейчас у нас есть точка приложения TSX и точка индекса TSX. Так что давайте
[04:06] => продолжайте и запустите наше приложение, набрав NPM. Начать. Здесь мы уходим. Наше приложение успешно запущено. Теперь давайте
[04:15] => вернитесь к нашему VS-коду. И я собираюсь удалить несколько файлов, которые нам не нужны. Так что докладывайте
[04:20] => настройка пяти жизненно важных параметров, тестовый логотип, приложение SVG, точечный тест и удаление. Теперь он будет жаловаться, потому что
[04:28] => он где-то использовал эти файлы. Например, внутри приложения точка TSX. Мы использовали логотип.
[04:33] => Так что давайте уберем отсюда все, что внутри. И давайте пока просто наберем «Привет, мир».
[04:40] => И внутри индекса dot TSX мы использовали этот веб-отчет о жизненно важных показателях. Так что давайте уберем это.
[04:46] => И давайте посмотрим. Вот так мы и идем. У нас есть привет, мир написано здесь. Но вы можете видеть, что это в
[04:50] => центр, чтобы мы удалили все значения по умолчанию стили из AB dot css. Теперь все хорошо. Знаешь, что
[04:56] => есть ли этот тип в машинописном тексте? Итак, давайте продолжим и разберемся в типах, которые предоставляет нам TypeScript.
[05:02] => Итак, давайте скажем прямо здесь, если я продолжу и наберу «пусть имя равно просмотру»она». Так что в JavaScript,
[05:11] => произошло то, что JavaScript автоматически решает каков тип этой переменной. Так что, если мы продолжим
[05:17] => и наведя на него курсор, мы увидим, что тип — строка. Но в машинописном тексте мы должны явно
[05:23] => определите эти типы. Так что просто идите сюда и введите двоеточие и строку. Итак, вот как вы определяете
[05:30] => тип переменной. Так что, если я продолжу и удалю это, и если я попытаюсь произнести имя, равное,
[05:36] => допустим, пять, теперь вы увидите ошибку. номер типа не может быть присвоен строке типа.
[05:43] => Таким образом, это строгая проверка типов, которая помогает нам в машинописи. Но если мы продолжим и жестокое обращение
[05:50] => Видишь, никаких проблем. Нет, давайте продолжим и назначим let h числом. Таким образом, мы можем присвоить ему тип номера.
[06:01] => Аналогично, у нас есть и множество других типов, таких как массив логических объектов, кортеж, неопределенный,
[06:08] => ноль, и их очень много. Так что просто так, давайте продолжайте, как мы назначаем логическое значение, поэтому давайте скажем, что let есть
[06:14] => студент и введите логическое значение. Итак, вот как мы назначаем это должно быть логическое значение, логическое значение может быть истинным или ложным.
[06:21] => Теперь, что, если мы хотим, чтобы переменная называлась хобби, и мы хотим, чтобы он содержал множество
[06:28] => хобби, которые в основном являются строками, поэтому мы собираемся ввести строку с двоеточием.
[06:33] => И поэтому это будет массив строк, верно? Так что мы просто добавим эти скобки
[06:37] => прямо перед ним. Теперь он говорит, что эта переменная может содержать только массив строк, если она захочет
[06:44] => быть массивом чисел. Так что мы можем ввести номер здесь. Теперь следующий тип называется кортежем. Теперь, что такое
[06:51] => кортеж? Так что давайте предположим, что если я продолжу и скажу: «катись». Так что делает кортеж, так это то, что кортеж содержит фиксированное количество
[06:59] => значения и типов, которые определяются во время объявления. Так что позвольте мне просто войти и набрать номер
[07:05] => строка с запятой. Итак, теперь, что может содержать эта переменная, будет ли она содержать одно число
[07:12] => и одна струна. Поэтому, если я продолжу и скажу, что бросок равен двум, я прочитаю оба числа. Так что это будет
[07:19] => есть проблема номер типа не может быть присвоен для ввода строки. Так что это должна быть строка.
[07:24] => Так что кое-что Да, вот и все. Он работает абсолютно нормально. Так что это называется кортежем. Сейчас
[07:31] => далее — для объектов. Как мы определяем объект? Таким образом, есть два способа сначала определить объект
[07:37] => является ли ведущий человек нашим обычным способом, которым мы можем вводить двоеточие и объект. Но это не рекомендуемый способ
[07:45] => чтобы сделать это. Потому что объект может иметь множество свойств внутри него, например, если я хочу
[07:50] => Человек возражает против того, чтобы у него было имя и возраст. Так как же мы знаем, что этот объект person содержит все
[07:56] => эти свойства. Поэтому мы используем нечто, называемое ключевое слово типа или ключевое слово интерфейса. Сейчас,
[08:02] => не волнуйтесь, я собираюсь подробнее обсудить этот тип и интерфейс позже. Но сейчас,
[08:06] => в качестве введения я собираюсь ввести тип. И мы собираюсь определить тип этого объекта person. Так
[08:12] => человек, теперь хорошей практикой является сохранение первой буквы типов в качестве заглавной. Так что я
[08:18] => собираюсь набрать тип человека. И вместо этого позвольте мне просто добавить свойство имени и возраста. Так что имя
[08:23] => это будет строка, а возраст будет числом. Итак, теперь давайте продолжим и назначим этот тип
[08:30] => человек к переменной этого типа. Итак, теперь этот объект будет содержать все свойства, которые
[08:36] => находятся внутри этого типа человека. Так что, если Я продолжаю и равняюсь, скажем так, имени,
[08:43] => и дайте ему название, давайте пока просто дадим ему название. Сейчас ты увидишь,
[08:48] => он жалуется на то , что в этом типе отсутствует возраст собственности. Итак, это, как вы можете видеть,
[08:53] => этот тип имеет свойство name и свойство age. Таким образом, мы должны дать ему и то, и другое
[08:57] => свойства. Так что, если я войду и назову, скажем, возраст, и сохраню его, вы увидите, что это работает
[09:03] => абсолютно нормально. Но что, если мы хотим сделать это свойство возраста является необязательным? Так что мы просто
[09:08] => собираюсь подойти сюда и добавить знак вопроса. Таким образом, это означает, что это свойство теперь является необязательным.
[09:14] => Теперь, если я продолжу и уберу его отсюда, никаких проблем. Приложение работает абсолютно нормально. Сейчас
[09:19] => что, если мы захотим иметь другую переменную, которая будет содержать массив объектов Person.
[09:25] => Так что, если я пойду и создам, давайте, давайте посмотрим. Поэтому мы хотим, чтобы это был массив этого объекта.
[09:32] => Поэтому мы просто подойдем сюда и назначим ему тип человека и массив. Так что точно так же, как мы это сделали
[09:39] => здесь, наверху, если бы мы хотели быть массивом объекта person, мы могли бы просто присвоить ему такой тип, как
[09:44] => этот. Итак, вы видите, как легко назначать типы в Машинописный текст. А теперь позвольте мне убрать все это барахло.
[09:51] => Позвольте мне пока прокомментировать это. А теперь сюда, что, если мы захотим нашу, скажем так, переменную возраста,
[09:58] => чтобы быть числом и строкой одновременно, я хочу, чтобы оно содержало как число, так и строку.
[10:04] => Поэтому мы просто собираемся использовать нечто , называемое объединением в машинописи. Так что за союз,
[10:09] => вы собираетесь ввести символ и добавить к нему другой тип. Давайте продолжим и назначим это. Так что давайте
[10:16] => скажи возраст. Если я назначаю строку, никаких проблем, она работает нормально. Если я войду и назначу номер,
[10:21] => да, он работает абсолютно нормально. Все в порядке. Сейчас давайте посмотрим, хотим ли мы определить функцию, печать.
[10:28] => Имя. И что делает эта функция, так это принимает имя и просто регистрирует его в консоли. Так что теперь у нас есть
[10:35] => ошибка. Таким образом, в нем говорится, что имя неявно имеет любой тип. Ладно, без проблем. Там говорится, что у этого имени есть
[10:41] => любой тип. Таким образом, он просто предоставил тип строки. Теперь, если мы продолжим и присвоим этому печатному имени,
[10:47] => имя, затем оно пойдет и напечатает это. Просто подобный этому. Но каков способ предоставить тип
[10:56] => на какую-то функцию? Как мы объявляем тип функции? Итак, есть два способа определить функцию? Один,
[11:02] => допустим, если я продолжу и скажу: «позвольте напечатать имя», я могу предоставить ему тип функции.
[11:12] => Это работает абсолютно нормально. Хорошо, там написано время печати уже определено. Позвольте мне
[11:16] => просто убери это сейчас. Так что это работает абсолютно нормально. Вы можете использовать эту функцию
[11:21] => тип, но, как и у объектов, есть лучший способ назначить функцию. Итак, что мы можем сделать, это,
[11:27] => мы можем правильно определить функцию того, сколько вещей он будет содержать. Так что давайте скажем это,
[11:32] => так что это берет свое название. Так что это займет некоторое тип имени, которое будет строкой,
[11:39] => и за что он собирается вернуться в нашем случае, это ничего не возвращал. Таким образом, возвращаемый тип был
[11:45] => пустота. Итак, вот как вы присваиваете тип имени. И не волнуйтесь, если у вас возникнут проблемы
[11:50] => понимание всего этого, когда мы идем включите и создайте проект, затем вы собираетесь
[11:53] => чтобы понять все эти вещи очень, очень глубоко. Так же, как этот тип возврата void,
[11:58] => это может иметь тип возвращаемого числа, строку тип возврата, пользовательский тип возврата, точно так же, как этот
[12:03] => человек здесь. Теперь, что, если мы хотим , чтобы что-то из этого имело какую-то ценность, скажем, если я хочу, чтобы
[12:10] => имя, чтобы внутри него было какое-либо значение, а не просто строка, число или что-то еще ,
[12:16] => мы можем придать ему любой тип. Так что любой тип не имеет никаких ограничений, вы можете буквально
[12:21] => храните в нем что-нибудь. Но, но это не рекомендуется. Потому что очевидно,
[12:25] => зачем нам нужен машинописный текст, если мы просто хотим чтобы придать этому какой-либо вид чему угодно. Так что это
[12:30] => рекомендуется давать тип каждому и каждому переменная в машинописном тексте. Но нет, я сказал,
[12:34] => не рекомендуется использовать ни один из них. Но вместо любого другого есть гораздо лучший тип, который вы можете использовать.
[12:41] => Так что этот тип называется неизвестным. Так что, если я продолжу и скажу имя человека, если мы не знаем, что это за тип’
[12:48] => будет, так что мы можем пойти дальше и ввести неизвестный сюда. И он также может принимать любой тип. Так что это
[12:54] => рекомендуется вместо любого. Итак, вот так, поскольку мы определили здесь функцию, и
[12:59] => мы не знаем, к чему это приведет, если мы даже не знаю, вернет ли это что-нибудь
[13:03] => или нет. Так что мы просто пойдем и напечатаем «никогда». Итак, что делает пустота, так в чем разница?
[13:09] => void и никогда не является void возвращает неопределенное, но никогда ничего не возвращает. Так что это
[13:14] => есть разница между пустотой и никогда, я бы настоятельно рекомендую вам пойти и прочитать об этом
[13:19] => документация. Так что, если я, если ты продолжишь поиски Машинопись, упс, я допустил опечатку. Ага. Машинопись
[13:25] => и просто зайдите на этот веб-сайт, машинопись, Lang dot org и нажмите на этот документ здесь,
[13:30] => и нажмите на это руководство по машинописи. Да, есть эта документация. Так что в основном это
[13:36] => собираюсь пойти дальше и нажать на повседневные типы. Так смотрите любые функции и множество других типов,
[13:41] => вы можете увидеть здесь все типы, которые определены здесь. Так что я бы очень рекомендовал вам
[13:45] => пойти и почитать на этой странице. Я собираюсь включить ссылку на эту страницу в описание.
[13:51] => Ладно, круто. А теперь давайте вернемся к этому делу Я же говорил тебе, что мы собираемся углубиться в это дело.
[13:55] => Так что же это за штука, называемая типом? Таким образом, этот тип называется псевдонимом. Итак, союзники состоят из двух
[14:02] => типы. Один из них — тип, а другой — интерфейс. Так что давайте продолжим и исследуем оба эти вопроса.
[14:07] => Итак, вы уже видели этот тип, называемый типом человек. Итак, как мы определяем это, используя
[14:12] => интерфейс? Так что позвольте мне просто продолжить здесь. И если мы хотим определить интерфейс, просто добавьте
[14:19] => перейдите сюда и просто удалите этот знак равенства. Теперь это будет работать абсолютно так же, как
[14:26] => этот тип работал. Так что теперь, возможно , вы думаете, тогда какой смысл включать и то, и другое
[14:31] => из этих? В чем разница между ними? Так позвольте мне рассказать вам, в чем разница между ними. Так что в
[14:35] => введите то, что происходит, поэтому позвольте мне просто определить тип. Допустим, у типа x будет, скажем,,
[14:45] => который является строкой и B, который является числом. Теперь, если мы создали еще один такой тип, называемый типом,
[14:56] => y, z, теперь что, если мы захотим использовать эти свойства из типа x внутри этого типа You.
[15:04] => Так что все, что мы можем сделать, это просто пойти сюда и добавить x. И вот что это будет делать, так это то, что происходит
[15:12] => чтобы содержать все эти свойства, а также все это свойство. Так что, если я продолжу и позволю Y равняться,
[15:20] => и почему и назначьте это, этот тип y, и вместо него, если я продолжу и добавлю C, который является строкой,
[15:29] => так что позвольте мне пока кое-что добавить . Б, это число, так что ты увидишь,
[15:35] => он жалуется, что это так, что его не хватает некоторые значения, запятая b. Но если я удалю это,
[15:41] => тогда все будет работать абсолютно нормально. Видите ли, в данном случае мы должны предоставить
[15:46] => это эти значения, это A и B. Таким образом, тип может быть вытянутый вот так. Но как мы можем сделать это в
[15:53] => случай с интерфейсом, так что позвольте мне просто продолжить вот и набери в лицо, как у парня профессия,
[16:03] => которая будет строкой. Упс, я чего-то здесь не понимаю. Ага. Так что, если мы захотим расширить
[16:09] => человек в интерфейсе этого парня, так что это проще чем печатать, поэтому мы просто будем печатать.,
[16:17] => человек. Так что лично я делаю то, что мне очень нравится использовать интерфейс. Так что это делает все намного проще,
[16:24] => это поможет вам легко расширить его. Так что, если вы в курсе классов в JavaScript, поэтому у нас есть такие классы, как
[16:30] => вот как вы можете предоставить тип нашим классам с помощью интерфейса. Таким образом, имя класса расширяется
[16:38] => этот человек-интерфейс, но давайте просто не будем сейчас вдаваться в подробности, это бесполезно
[16:42] => прямо сейчас для нас. Ну и что с того, что этот человек взаимодействует хочет расширить этот тип, внезапно просто удалите
[16:51] => теперь мы можем расширить и то, и другое, если вы хотите иметь свойства человека
[16:56] => внутри крестика, который собирается сделать человек. И это будет работать абсолютно нормально. Сейчас,
[17:02] => если мы хотим сделать наоборот, то есть если мы хотим иметь свойства x внутри человека,
[17:10] => тогда мы можем сделать расширение X. И это будет работает абсолютно нормально. Так вот как это работает.
[17:18] => Так что позвольте мне удалить все это сейчас. Теперь все основы машинописи в стороне,
[17:23] => пришло время начать создавать наше приложение React и понять, как мы используем TypeScript с React,
[17:28] => состояние реагирует, крючки, подпорки и т. Д. Итак, одна вещь, которая Я забыл упомянуть, что это приложение разделено на
[17:34] => две части. В этом видео я объясню вам вся реакция и машинописная часть этого приложения.
[17:39] => И в нашем следующем видео мы собираемся реализовать перетаскивание. В этом видео,
[17:43] => мы собираемся создать это приложение. Так что давайте скажем , что не добавлено к чему-то и к некоторым другим тоже.
[17:50] => Да, итак, в этом видео мы создадим упрощенную версию этого приложения, чтобы, если вы
[17:55] => только здесь, чтобы понять часть сценария приложения React, вам не придется тратить свое время впустую. И
[18:00] => в нашем следующем видео мы собираемся реализовать это функция перетаскивания, которую я показывал вам ранее
[18:04] => во вступительном видео. Кроме перетаскивания, это абсолютно то же самое, вы также можете редактировать их,
[18:09] => вы можете пометить их как завершенные и тому подобное. Так что давайте продолжим и создадим это приложение. Так что я
[18:15] => собираюсь пристыковать его к борту. Теперь позвольте мне сначала преобразуйте эту функцию в функцию со стрелкой.
[18:20] => Итак, чтобы определить тип этого компонента, сначала позвольте мне просто навести на него курсор, вы можете видеть, что он говорит нам
[18:27] => определение типа этого компонента заключается в том, что это функция, которая возвращает нам точечный элемент JSX. Так
[18:33] => это точечный элемент JSX, возвращаемый этой функцией. Но что это за функция такая?
[18:38] => Каков точный тип этой функции, так что это функциональный компонент, верно? Так что мы просто
[18:43] => собираюсь подойти сюда, и Колин отреагирует.фк. Так что это функциональный компонент. Поэтому мы предоставляем ему
[18:49] => тип этого react.fc. Теперь есть еще куча других типов. Так что, если вы продолжите и нажмете CTL
[18:56] => пространство, и вы увидите, что есть множество типов. Итак, одним из таких типов является
[19:00] => узел реагирования. Таким образом, это поддерживает все типы. Так что это может быть логическое значение, это может быть реакция, точка,
[19:07] => реагировать, ребенок, реагировать, фрагмент, реагировать, Портал, нулевой, неопределенный и все такое прочее. Но с тех пор, как
[19:14] => мы хотим, чтобы это был функциональный компонент, поэтому мы собираюсь ввести react FC. А теперь давайте войдем в него.
[19:19] => Вместо этого я собираюсь ввести span и дать этому классу название заголовка. И внутри него,
[19:25] => Я собираюсь написать задание E phi, которое будет чтобы быть названием нашего приложения. Вот так мы и идем.
[19:31] => Давайте дадим этой штуке несколько основных стилей. Так что, если Я захожу в приложение внутри приложения dot css, я собираюсь
[19:37] => чтобы импортировать шрифт Google под названием nucia. Пойдем в Google и введите нейтральный шрифт. Вот он.
[19:46] => А в скрипте просто нажмите «Выбрать этот стиль» и нажмите «Импортировать» и возьмите этот шрифт
[19:54] => и приклейте его сюда. Итак, давайте сначала дадим нашему приложению несколько стилей, поэтому я просто приведу
[20:02] => стили для приложения и заголовка, потому что я не хотите тратить время на написание CSS, потому что это
[20:06] => учебник по машинописи, а не учебник по CSS. Так что там мы идем, чего только не было. Это общий
[20:11] => размер, я просто даю ему некоторую ширину и высоту 100, ширину видового экрана и 100, высоту видового экрана,
[20:16] => некоторые отображают изгиб и колонку направления изгиба так, чтобы все вещи внутри него были
[20:21] => выровненные сверху вниз, выровняйте элементы по центру. И цвет фона будет таким
[20:26] => семейства шрифтов голубоватого цвета, которые у нас есть импортирован всего минуту назад. Что касается направления, то мы
[20:31] => собираюсь придать тексту преобразования размер шрифта в верхнем регистре 40 пикселей, некоторое поле, некоторый цвет и их
[20:37] => индекс будет одним, потому что мы всегда хотели быть на вершине. Теперь ты поймешь
[20:41] => почему я предоставил это всего за минуту. Когда я предоставляю это, анимация так, чтобы это не исчезало
[20:48] => далеко в глубине, он всегда появляется сверху. Так что об этом мы позаботимся позже.
[20:52] => И немного текста, выровненного по центру. И я просто собираюсь также задать ему несколько медиа-запросов.
[20:57] => То есть, когда он меньше 800 пикселей, что произойдет так, что граница верха и низа будет
[21:03] => будет 15 пикселей вместо 30 пикселей, а размер шрифта составит 35 пикселей, вот и все.
[21:08] => Так что давайте двигаться вперед. Также у нас нет точки TSX и создаем наше поле ввода, которое является этой штукой,
[21:15] => это поле ввода. Так что ниже этого промежутка я собираюсь для создания нового компонента под названием поле ввода
[21:22] => вход. Теперь, очевидно, этот компонент не существуют еще. Итак, давайте создадим новую папку под названием
[21:27] => компоненты. И внутри этого я собираюсь создать новый компонент под названием поле ввода, точка TSX. F, C.
[21:40] => Теперь, если вы не знаете, как я это сделал, я используя расширение под названием es seven react Redux,
[21:45] => что-то вроде того. Да, это, это тот самый таким образом, вы можете загрузить его, и вы можете ввести RFC и
[21:49] => он будет генерировать этот шаблон. Так что я просто собираюсь ввести сейчас ввод здесь и
[21:55] => импортируйте его, набрав здесь Ctrl пробел. И он собирается автоматически импортировать это. Да, вот и мы.
[22:01] => А теперь давайте начнем строить эту штуку. Так внутри этого подразделения, и вы знаете, что,
[22:06] => Я просто собираюсь заполнить здесь анкету, так как это будет форма. Так что вместо формы,
[22:10] => и давайте предположим, что в форме будет класс. И внутри этого у меня будет входной тег
[22:19] => ввод, это будет тип ввода, заполнитель будет указывать ввод
[22:26] => задача. И да, вот так все начинает обретать форму. И у нас будет название класса
[22:34] => из поля ввода. Так что теперь, если вы не знаете, что это шаблон именования, которому я следую, это
[22:41] => называемое соглашением bem о написании имен классов CSS, вы можете просто погуглить его и прочитать об этом подробнее.
[22:46] => Сейчас это не важно, но это бэм соглашение о написании CSS-класса, вы можете игнорировать
[22:51] => это, если хотите, и дайте свои собственные имена классов. А теперь под этим у меня будет кнопка,
[22:56] => который будет говорить «иди», и у него будет название класса
[23:02] => о чем и типе отправки. Да, вот и мы идти. Теперь давайте по-быстрому оформим их оба,
[23:12] => Я собираюсь создать CSS-файл здесь под названием стили расставляют точки над css и импортируют этот файл внутри него.
[23:20] => Поэтому импортируйте стили в CSS. И внутри этого css с точками стилей я собираюсь добавить
[23:28] => занятия. Так что позвольте мне объяснить вам все по порядку. Итак, прежде всего, для родительского тега,
[23:33] => входной тег, у меня будет дисплей изгиб и ширина будут равны 90. В настоящий момент,
[23:38] => Я не придал значения этому окну ввода. Вот почему это не работает. Но я собираюсь
[23:43] => чтобы сделать это очень скоро, я даю ему относительную позицию, потому что мы собираемся сделать это
[23:47] => кнопка внутри этой мы собираемся расположить эту кнопку внутри нее, в этом поле ввода справа,
[23:52] => поэтому мы собираемся придать этому абсолютный позиционирующий. Вот почему мы даем родителю
[23:56] => контейнер для взаимного позиционирования и выравнивания предметов быть центром. Теперь для поля ввода, как
[24:03] => это будет 100% радиус границы, некоторый радиус границы, немного отступов слева вверху, сверху
[24:09] => внизу и слева справа, некоторый размер шрифта, некоторая граница , вы можете видеть это, это просто общие стили,
[24:15] => некоторые переходы, чтобы наша анимация выглядела плавной. Потому что мы добавляем анимацию поверх
[24:20] => здесь вы можете увидеть анимацию кнопки. Теперь ниже мы собираемся добавить несколько фокус-классов. Так
[24:26] => всякий раз, когда мы нажимаем на это, весь экран темнеет , и только это отображается правильно. Так что, если я пойду и
[24:33] => нажмите на это, теперь вы можете увидеть, что означает эта тень врезки? Так что вы можете видеть вот здесь,
[24:38] => это поле находится внутри этого, этого поля ввода, так что эта вставка предназначена для этого. И когда мы сосредоточимся на этом,
[24:47] => что должно произойти, так это то, что это обеспечит тень коробки снаружи всей внешней части
[24:52] => это поле ввода. Так вот что это происходит. Так фокус сосредоточен на классах, используемых, когда мы нажимаем на
[24:58] => это поле ввода. Так что это всего лишь базовый CSS. Теперь для нашей кнопки, которая вводится для отправки,
[25:04] => мы собираемся провести этот урок. Так что позиция будет абсолютной упс, я думаю,
[25:10] => одно двоеточие, так что да, одно двоеточие. Да, просто как это. Таким образом, в настоящее время анимация не
[25:16] => работают, но я собираюсь заставить их работать всего через минуту. Так что позиция будет абсолютной,
[25:20] => потому что, если мы этого не сделаем, посмотрим, что будет чтобы это произошло, это должно быть за пределами этого. Так
[25:23] => мы хотим, чтобы он располагался внутри, а справа будет ноль. Так что мы хотим, чтобы это
[25:29] => быть абсолютно правой стороной, некоторой шириной и высота, некоторый запас, некоторый радиус границы,
[25:34] => границы не будет, какой-то размер шрифта, цвет фона и просто общий стиль, некоторые
[25:40] => небольшой кусочек тени от коробки, который вы можете видеть поверх вот здесь, под этим. Итак, это все, теперь давайте представим
[25:45] => это анимация. Поэтому, когда мы наведем на него курсор, прежде всего, произойдет то, что вы сможете это увидеть
[25:50] => светится. Итак, давайте предоставим ему класс наведения . Вот так, вы можете увидеть цвет фона
[25:56] => становится немного светлее. И когда он активен, то есть когда мы нажимаем на него, нам нужна анимация
[26:02] => случиться. Таким образом, преобразование будет иметь масштаб 0,8, мы хотим, чтобы оно стало немного меньше. Видеть,
[26:08] => точно так же, как это, и тень коробки будет также немного меньше от 10 пикселей до пяти
[26:13] => пикселей, так что это дает нам некоторый эффект глубины. Сейчас давайте перейдем к основной функциональности нашего приложения,
[26:18] => это создает состояние для того, чтобы мы могли сделать это внутри приложения dot TSX. Давайте создадим наш первый
[26:25] => государство. Поэтому я собираюсь ввести состояние использования. И давайте дадим этому штату название «надо делать».
[26:33] => И у него будет начальное значение empty. Давайте импортируем состояние пользователя. Да, именно так.
[26:40] => Теперь мы должны придать этому состоянию тип так как мы используем машинопись. Так что мы должны
[26:45] => чтобы дать этому право на тип. Итак, поскольку мы дали этому пустую строку, давайте посмотрим, что это за тип
[26:52] => является. Это тип строки, поэтому мы должны чтобы придать этому типу строку. Если мы удалим это
[26:58] => и наведите курсор на это, вы увидите, что тип теперь не определен, потому что он не знает, что это за тип
[27:02] => является. Но мы должны указать этот тип строки, потому что наше задание будет иметь тип string,
[27:08] => верно? Итак, введите строку, и позвольте мне просто дать ей начальное значение empty. Так вот как ты
[27:12] => определите строку, используя эти скобки, эти заостренные скобки вот здесь. А что теперь, если ты захочешь
[27:19] => чтобы принимать внутри него несколько типов значений. Так как я уже объяснял ранее, мы можем использовать союз
[27:24] => подойди сюда и дай этот номер. И точно так же, как сейчас, все будет работать абсолютно нормально.
[27:30] => Итак, правила, которые я объяснил вам ранее в видео, все правила применимы и здесь,
[27:34] => если вы хотите быть массивом, вы можете добавить это как будто это действительно круто. Теперь давайте просто представим
[27:39] => это нужно сделать и установить для нашего поля ввода компонент. Так что просто, как обычно, реагируй, чтобы сделать,
[27:49] => точно так же мы собираемся дать его, но теперь он выдаст нам ошибку, потому что в нем говорится
[27:54] => свойство «делать» не существует в этом компоненте. Так что мы должны заставить его существовать на этом
[28:01] => компонент. Так что давайте пойдем сюда. И давайте попробуем принять это, чтобы сделать набор запятых, чтобы сделать все еще собирается
[28:10] => дайте нам элемент привязки, который неявно имеет любой тип. Так что эта штука имеет любой тип. Поэтому мы
[28:15] => предполагается, что вы определяете тип для этого. Так что мы можем просто продолжить здесь, за этими скобками
[28:21] => и двоеточие и предоставить эти типы. Так что делать будет иметь тип и набор для выполнения будет
[28:28] => есть свой типаж. Так что позвольте мне просто вместо того, чтобы писать это вот здесь, я просто собираюсь создать его прямо здесь
[28:33] => здесь. Так что я просто собираюсь создать интерфейс это я тебе уже объяснял раньше. Итак, интерфейс,
[28:38] => скажем так, реквизит. Так что реквизит будет иметь ценность нужно делать и приступать к делу. Чтобы мы знали, что делать
[28:45] => что делать с его строкой. Верно? Легко. Но что нужно делать, потому что набор действий — это функция, верно?
[28:53] => Итак, как мы узнаем, что такое тип набора двух взносов? Так давайте вернемся к приложению dot TSX. И это легко сделать
[28:58] => знайте, что если вы продолжите и остановитесь на этом, вы собираюсь увидеть, как эта штука, написанная здесь, отреагирует или
[29:04] => но сейчас вы, возможно, не сможете понять что это такое на самом деле, просто продолжайте и скопируйте это
[29:10] => и приклейте его сюда. И теперь вы увидите, что нам предоставили это таким образом. Так что
[29:18] => реквизит. Да, теперь все будет хорошо работать. Да, вот и мы. Наше приложение работает абсолютно нормально.
[29:24] => Так что это просто в основном тип этого набора для выполнения, вам не нужно понимать
[29:28] => все это. Это всего лишь название. Вы можете просто взять их, наведя курсор на это
[29:33] => потрясающе. Поэтому я надеюсь, что вы понимаете суть того, как мы используем это вещество. Теперь вместо того, чтобы определять
[29:39] => реквизит здесь, что вы можете сделать, так это то, что вы также можете дайте это вот так. Итак, как я вам уже говорил,
[29:45] => это функциональный компонент, поэтому react.fc. И перед этим мы можем предоставить эти реквизиты
[29:55] => просто так. Все, что вам кажется более легким, вы можете использовать. Так что эта штука в принципе не так уж и велика
[30:01] => необходимо, потому что он уже знает, что это функциональный компонент. Теперь давайте просто перейдем к
[30:06] => наш входной тег и присваиваем ему значение to do. И что касается перемен, то это изменит наше состояние дел.
[30:17] => И когда нужно принять событие, e точка, целевое значение точки, теперь называется, давайте попробуем сделать консоль, войдите сюда
[30:26] => и посмотрите, работает ли это, чтобы что-то сделать. Да, это работает нормально. Здорово. Теперь, чтобы сделать это, мы
[30:34] => при создании внутри него будет несколько свойств . Первое свойство будет иметь
[30:39] => уникальный идентификатор. Так что, если я продолжу здесь и создам задание здесь, то у этого задания будет много свойств,
[30:45] => у него есть свойство first this to do, которое содержит этот текст внутри него. Любой из них собирается
[30:51] => быть уникальным идентификатором. А третий собирается быть делается переменным. Так делается, значит, если это
[30:57] => сделано или нет, завершено оно или нет. Так что мы будем следить за этой штукой.
[31:02] => Итак, давайте пойдем и создадим модель для того, чтобы сделать потому что мы собираемся использовать это, чтобы сделать
[31:07] => во многих местах. Так что давайте просто создадим его отдельно. Поэтому я собираюсь создать новый файл
[31:12] => называется model.ts.ts, а не TSX. Потому что это могло бы быть обычным файлом машинописи. Так что внутри этого я
[31:19] => собираюсь создать интерфейс под названием «делать», и это у вас будут свойства, о которых я упоминал,
[31:26] => вызывается идентификатор, который, очевидно, будет числом, для создания свойства, которое будет строкой,
[31:32] => и делается собственность, которая будет Логический. Здорово. Теперь мы хотим его где-нибудь использовать
[31:39] => ещё. Так что давайте просто экспортируем эту штуку. Так что экспортируйте интерфейс. Да, отлично. Теперь мы собираемся создать
[31:45] => другое состояние, в котором будут содержаться все наши, для этого мы постоянно входим
[31:50] => наши два взноса вот здесь. Так что это должно быть внутри определенного штата, верно? Так что используйте
[31:55] => государство. И давайте назовем это взносами. И это происходит быть пустым массивом. Теперь вы, возможно, думаете,
[32:02] => как мы собираемся обеспечить этот тип? Так Какого типа это будет, потому что это будет
[32:07] => быть массивом из двух взносов. Поэтому мы собираемся импортировать модель, которую мы создали для этого. Вот и мы,
[32:15] => он был импортирован. Так нужно делать, и это происходит чтобы быть массивом, поэтому мы сделаем его массивом.
[32:21] => Итак, вот как вы создаете массив типа или интерфейса. Потрясающе. Теперь давайте попробуем создать
[32:29] => обработайте функцию добавления, которая добавит два сбора в это состояние. Итак, давайте вернемся к нашему приложению. И
[32:34] => Я собираюсь создать новую функцию здесь const. И добавь, для этого потребуется что-то
[32:42] => внутри него, и оно вернется. Так что это функция здесь. Теперь это займет
[32:49] => событие с момента отправки. Так что прямо здесь , когда бы мы ни отправляли форму, она должна
[32:56] => добавьте это внутри нашего дескриптора add. Теперь давайте возьмем эту функцию и передаем ее в наше поле ввода.
[33:04] => И это должно выдать нам ошибку, потому что эта функция не существует. Да, вот и мы.
[33:09] => Теперь мы, что мы должны делать? Мы должны чтобы добавить эту функцию здесь, в этих реквизитах. Так
[33:15] => ручка добавления, какой будет эта функция? Так точно так же, как я учил вас ранее, мы должны
[33:21] => чтобы определить функцию точно так же, как это. Итак, поскольку эта функция ничего не вернет,
[33:25] => поэтому я просто напишу это как эту функцию, и она ничего не вернет. Так давайте же примем это
[33:31] => сюда. Да, именно так. Итак, что же такое мы собираемся делать, когда всякий раз, когда мы нажимаем на это
[33:37] => Кнопка «Перейти», поэтому всякий раз, когда мы нажимаем «Отправить», эта, эта функция должна срабатывать. Скоро представлю,
[33:47] => мы должны выстрелить из этого функция добавления ручки. Здорово.
[33:52] => Теперь одна вещь, которую вы заметите, всякий раз, когда вы нажимаете нажмите «Перейти», вы увидите, как страница обновляется,
[33:56] => тоже. Поэтому, чтобы избежать этого, мы переходим к внутреннему нормальному JavaScript, мы просто переходим
[34:02] => к этой функции, и мы берем здесь переменную события и просто записываем событие, чтобы предотвратить
[34:11] => по умолчанию. Верно? Но это, но это приведет нас к этой ошибке. У него неявно есть любой тип. Поэтому мы
[34:18] => предполагается, что они обеспечивают этот тип. Так что давайте зайдите в Google и введите, введите событие и отреагируйте.
[34:26] => Машинописный текст. Так что я просто пытаюсь показать тебе все вот что вам нужно делать всякий раз, когда вы застреваете в
[34:31] => особая вещь в машинописи React. Так что давайте иди сюда. И вы можете видеть, что это дало нам
[34:38] => этот тип реагирует на изменение события HTML элемента ввода. Так что мы можем принять это, но есть лучший тип.
[34:44] => Вместо этого давайте поищем в нем синтетическое событие react dot, или есть еще один тип
[34:50] => называется событием формы точки реакции, которое мы можем использовать. Да, вот и мы. Реагировать на событие формы. Так что все
[34:56] => из них эти будут работать. Так что я просто говоря, что трачу на вас лучшее, что вы должны использовать
[35:02] => Реагировать на событие формы. Теперь это не даст нам никакой ошибки. Хорошо, значит, это выдает нам ошибку,
[35:06] => потому что мы не установили этот тип вон там в наш реквизит прямо здесь. Поэтому мы
[35:11] => предполагается, что мы определяем это и здесь, потому что мы должны определять это повсюду
[35:15] => мы отправляем эту переменную. Так здорово. Это потрясающе. Теперь всякий раз, когда мы нажимаем на этот обработчик,
[35:20] => что должно произойти, так это то, что это должно установить наше состояние это должно установить наши два взноса. Так что установите два взноса
[35:27] => чтобы быть тем, что прежде всего, мы собираемся проверить , есть ли что-то внутри, что нужно сделать,
[35:33] => тогда только мы должны установить, что поступать правильно. Так что принимайтесь делать и принимать все, что угодно
[35:40] => это уже входит в два взноса этого переменная. И мы собираемся добавить еще одно, чтобы сделать
[35:45] => итак, запятая, какие три поля были первыми, это идентификатор, поэтому мы собираемся сгенерировать для этого 10 случайных идентификаторов.
[35:53] => Давайте просто наберем точку с датой прямо сейчас. Таким образом, для этого будет сгенерирован случайный идентификатор. Так что теперь, как вы можете
[35:59] => видите ли, как только я сэкономлю, он начнет жаловаться отсутствуют следующие свойства для выполнения и
[36:04] => сделано. Так что давайте просто добавим их. Запятая, чтобы сделать, чтобы сделать то, что нужно сделать, и сделано. Очевидно, что это
[36:15] => просто создан, так что это еще не сделано. Так что я просто дам этому значение по умолчанию false. Упс, данные здесь.
[36:21] => Так что встречайся с дот прямо сейчас. Ага. Поэтому вместо того, чтобы писать это чтобы сделать двоеточие, чтобы сделать, мы можем просто написать, чтобы сделать, так как
[36:27] => у них обоих одно и то же имя, потрясающе. Это прекрасно. Все работает нормально. И что теперь, после этого,
[36:32] => после того, как было создано то, что нужно сделать, мы предполагается, что мы должны это сделать, мы должны опустошить это
[36:36] => поле ввода, верно? Итак, что нужно сделать, это сделать быть пустым. Ладно, круто. Давайте попробуем это сделать.
[36:44] => Мы собираемся сделать консольный журнал, так что я собираюсь сделать консольный журнал, хорошо, давайте проверим
[36:51] => приставка. Если я нажму на «Вперед», да, вот и все. Он сгенерировал этот массив и очистил его.
[36:58] => Да, вот и мы. Если мы продолжим здесь, то да, он создал и то, и другое, чтобы сделать что-то случайное
[37:04] => Идентификатор выполнен и является ложным. Потрясающе. Теперь давайте продолжим и представим все это в виде этого
[37:11] => компонент, этот тип компонента карты. Так что я собираюсь пойти сюда и создать новый компонент
[37:18] => называется список дел. Теперь мы должны создать этот компонент списка дел. Но прежде чем мы сделаем это,
[37:26] => Я забыл сделать одну вещь. Итак, если мы перейдем внутрь поля ввода, то здесь возникнет одна проблема.
[37:32] => Поэтому, если мы продолжим, наберем и нажмем enter, чтобы вы могли видеть, он сохранит это теневое состояние. Так что, если мы
[37:40] => продолжайте снова и нажмите enter, чтобы сохранить это теневое состояние. Так каково же решение для
[37:44] => что всякий раз, когда мы нажимаем Enter, он должен избавиться от этой фоновой тени. Так что для этого мы
[37:50] => собираюсь использовать крючок React под названием use ref. Итак, давайте посмотрим, как мы используем use ref с TypeScript. Первый из
[37:56] => все, что мы должны добавить в дескриптор отправки. Так что позвольте мне просто написать и отправить вот так.
[38:02] => А пока позвольте мне просто отобразить все эти два взноса здесь, на точечной карте, чтобы мы могли видеть их все.
[38:09] => Так что, например, вы можете видеть, что все эти действия в отношении взносов начинают появляться здесь.
[38:13] => Здорово. Теперь, если мы продолжим здесь, мы пойдем чтобы создать ссылку на использование. Так что, если вы не знаете, что
[38:19] => пользователь, ссылка на пользователя в основном похожа на то, когда мы используйте точку документа, чтобы получить элемент по имени класса,
[38:24] => или документировать, или получать элемент по идентификатору, мы подключаем эти конкретные компоненты,
[38:29] => HTML. Так что просто идите сюда и введите «использовать ссылку». И я собираюсь назвать этот ref как входной ref,
[38:36] => и начальное значение будет равно быть нулевым. Давайте импортируем эту ссылку.
[38:41] => Именно так. И мы собираемся предоставить эту ссылку нашему тегу ввода. Так
[38:47] => равно входному значению. Так вот как это работает. Но как мы должны придать этому реферу тип, и что теперь
[38:54] => будет типом этого входного тега, так что это очень просто. Просто подойди сюда и наведи на него курсор.
[39:00] => И вы увидите , что здесь написана какая-то чушь, которую никто не понимает.
[39:06] => Итак, что мы собираемся делать, мы просто собираюсь взять эту штуку,
[39:10] => Элемент ввода HTML. Так что это то, что нам нужно. Так если мы хотим определить тип этой формы,
[39:17] => это тип элемента формы HTML с деформацией. Так на самом деле это закономерность. Так что, если мы предполагаем
[39:22] => чтобы писать для div, это HTMLDivElement. Итак, для ввода это элемент ввода HTML. Так что давайте возьмем это
[39:30] => и точно так же, как пользователь, если мы собираемся добавить его внутри этих скобок здесь. Итак, HTML
[39:36] => элемент ввода, теперь он знает, что это HTML входной элемент. Итак, что мы собираемся сделать, чтобы получить
[39:41] => избавьтесь от этого размытия, всякий раз, когда мы нажимаем enter, поэтому при отправке он просто выполнит это объявление дескриптора.
[39:49] => И что еще он собирается делать. Это займет этот вход ref, вход ref. Теперь я собираюсь показать
[39:54] => вы знаете, в чем преимущество добавления типа здесь. Итак, введите красную точку, это просто объект, называемый
[40:00] => текущий. Итак, теперь он показывает нам эту текущую точку вы увидите, что у нас есть все функции, которые
[40:05] => мы можем выполнить эту работу на этом входном объекте. Итак, у нас здесь есть функция под названием размытие.
[40:11] => Поэтому мы будем использовать размытие. Итак, что делает размытие , так это смещает фокус с этого поля ввода,
[40:17] => мы добавили размытие здесь. И вы можете видеть, что он уже добавил автоматически добавленное это
[40:21] => вопросительный знак, потому что он не уверен, что это произойдет быть необязательным, или если это будет иметь
[40:26] => любая ценность внутри него. Так что да, давайте продолжим и попробуем это сделать. Если мы что-нибудь введем, нажмите enter,
[40:32] => да, вот и мы. Он избавился от этого пятна. Так вот как мы используем крючок use Rev с машинописным текстом.
[40:39] => Давайте вернемся к нашему приложению dot TSX. И мы есть собираясь создать компонент списка дел, давайте
[40:45] => зайдите внутрь нашего компонента и создайте новый файл вызывается Для Списка Дел точка TSX. АФК, просто так,
[40:54] => это будет функциональный компонент React, ой, react dot . И давайте сначала импортируем эту штуку.
[41:05] => Вот так мы и идем. Это важно. Теперь давайте зайдем внутрь этого компонента списка дел и создадим это. Так
[41:10] => внутри этого подразделения, прежде всего, я собираюсь чтобы дать этому подразделу имя класса из двух взносов.
[41:17] => И давайте также импортируем нашу таблицу стилей. Так что импортируйте
[41:22] => стили точечной косой черты точечный css внутри этих двух разделов, я собираюсь отобразить его на карте через все
[41:30] => два взноса. Но подождите, у нас здесь нет двух взносов . Так что мы должны привести их сюда. Так
[41:35] => предполагается, что мы должны внести два взноса и также установить два взноса. Потому что мы собираемся удалить их
[41:41] => из этого компонента. Поэтому мы собираемся удалить их и пометить как завершенные. Итак, мы отправляемся
[41:45] => также нужно установить взносы. Итак, настроенный на то, чтобы сделать так, чтобы это собираюсь, очевидно, собираюсь жаловаться, потому что мы
[41:51] => не определили, вы знаете тип этих двух сборов и установили два сбора. Итак, давайте определим это
[41:56] => сюда. И подставлять лицо под взносы. Так что же делать сделать это было то, что нужно было сделать массив такого типа.
[42:04] => Так что давайте сначала займемся импортом. Да, именно так. И это был набор из двух взносов. Здорово.
[42:11] => Теперь следующим делом были сборы. Теперь, опять же, мы не знаем, как нам определить эту вещь.
[42:16] => Так что давайте просто зайдем в приложение точка TSX и наведем курсор на это. И давайте просто возьмем эту штуку
[42:24] => и принеси это сюда. Да, это абсолютно нормально.
[42:27] => О, хорошо. Мы его еще не назначили. Я всегда забываю чтобы назначить реквизит. И давайте обновим его. Да,
[42:33] => все в порядке. Это просто говорит о том, что мы его не импортировали . Верно. Хорошо. Итак, это говорит о том, что мы не
[42:40] => предоставил это для сборов и установил для сборов. Так давайте просто по-быстрому передадим это взносам
[42:46] => к взносам. Видишь, это то, что мне нравится в Машинопись, она ясно говорит вам, что такое
[42:52] => все идет не так. И JSU может задаться вопросом, О, хорошо, вот что происходит, почему он выдает ошибку. Так что устанавливайте
[42:59] => делать, это ясно показывает вам, что вы есть предполагается, что вы будете делать дальше в своем заявлении. Так что давайте
[43:04] => вернитесь к нашему списку дел наверх. Да, и давайте начнем сопоставлять все это с взносами. Одинокие двое.
[43:16] => И давайте войдем в это, давайте просто создадим все это вы знаете о компоненте карты,
[43:21] => давайте создадим отдельный компонент для самой этой карты. Поэтому я собираюсь создать отдельный
[43:26] => компонент называется «одно дело». Так что сейчас позвольте мне просто добавить сюда список
[43:33] => чтобы посмотреть, работает ли он нормально или нет, чтобы do.to делай.
[43:38] => Так что, если мы просто используем удалить его и посмотрим, имея точку , вы увидите, что у нас есть три идентификатора свойств, все готово.
[43:44] => И что делать. Так что нам нужно действовать отсюда. Позволь я предоставляю это, чтобы немного потерять стиль.
[43:51] => Поэтому вместо стилей и css я собираюсь добавить это, чтобы сделать так, чтобы это был просто гибкий дисплей
[43:56] => подобный этому. Таким образом, он появляется в аналогичной строке. И когда нужно сделать больше одного дела, это просто
[44:01] => завернутый в другую линию. Так что это не будет работайте сейчас, потому что мы еще не создали эти карты
[44:06] => компонент. Таким образом, гибкость отображения оправдывает пространство содержимого равномерно так, чтобы пространство между ними составляло 90% и
[44:12] => гибкая обертка из репса. Так что давайте войдем и создадим это единственный компонент, который нужно сделать. Итак, давайте создадим
[44:19] => новый компонент называется single, чтобы сделать точку в SX AFC. Именно так. Теперь, если мы вернемся к нашему приложению,
[44:31] => вы можете видеть, что у нас здесь есть несколько иконок, для пример, этот значок редактирования, этот значок удаления и
[44:35] => это галочка или значок завершения. Поэтому для этого мы используем библиотеку под названием react. Упс, реагируй
[44:44] => значки. Поэтому, если вы выполните поиск в Google по значкам react, вы найдете этот результат здесь. И
[44:50] => давайте просто установим эту библиотеку npm install react значки и откройте другой терминал и установите его.
[44:59] => Теперь, тем временем, после установки, давайте перейдем к значкам react и найдем и отредактируем значок. Так что вы можете видеть это
[45:06] => это значок редактирования, который мы собираемся использовать, чтобы найдите значок удаления. Это значки удаления
[45:12] => просто так поставьте галочку или готово, может быть, да, вот так, это значок готово.
[45:18] => Итак, это то, что мы собираемся использовать. Ну вот, реакции успешно установлены. Давайте
[45:24] => продолжайте создавать наше приложение. Так что же это за вещи что мы собираемся отправить на этот сингл, чтобы сделать
[45:28] => компонент. Итак, давайте перейдем к нашему списку дел и, прежде всего, импортируем это сюда.
[45:34] => Одиноко делать, да, просто так. Так что мы собираюсь отправить это, чтобы сделать это, очевидно, так что делай.
[45:45] => И поскольку мы наносим его на карту, так что мы собираемся предоставить ему ключ
[45:49] => чтобы do.id . И мы отправим все эти два взноса. Итак, два взноса. Таким образом, все два взноса являются
[45:57] => будет необходимо для удаления материала и доставать вещи и тому подобное. Так и надо делать.
[46:04] => Теперь это выдаст нам ошибку, потому что мы еще не установили реквизит,
[46:07] => очевидно. Такой свободный. Да, именно так. И я полагаю, что теперь нам придется иметь дело с некоторыми ошибками.
[46:13] => Да, вот и мы, мы здесь. Во-первых, позвольте я получаю все эти вещи. Так что делать
[46:18] => запятая, для взносов запятая установлена в взносы. И вот здесь, давайте определим интерфейс. Или ты знаешь, что,
[46:27] => давайте просто определим тип, чтобы вы могли освоить обе эти вещи, реквизит.
[46:33] => И, как вы знаете, в интерфейсе мы не пишем этот знак равенства, но в типе мы это делаем.
[46:39] => Итак, прежде всего, что нужно сделать, что собираюсь быть тем типом, который нужно делать
[46:44] => модель, которую мы создали. Теперь второе по взносам которые мы посылаем. Итак, что же будет
[46:49] => тип взносов будет представлять собой набор дел, а затем третий набор взносов,
[46:58] => это будет тот тип, который мы скопировано здесь, вот так.
[47:03] => Вот так мы и идем. Теперь это не должно быть проблемой. И давайте определим это здесь.
[47:08] => Именно так. Да, все работает нормально. Хорошо, давайте начнем создавать наши единственные два компонента.
[47:14] => Так что это тоже будет форма. Потому что мы собираемся добавить дополнительные функциональные возможности,
[47:20] => ты узнаешь, почему я сделал это форма, когда я создаю добавленную функциональность.
[47:27] => И вместо этого у меня есть промежуток с именем класса для одного текста. Так что это
[47:36] => в основном будет отображаться, что нужно сделать, чтобы do.to делай, давай посмотрим, сработает это или нет. Если я пойду вперед
[47:43] => и нажмите enter, да, это показывает, что нужно сделать. Теперь ниже этого, ниже этого, у нас будет див
[47:51] => внутри подразделения мы собираемся создать все это. Это, все эти значки, первый значок,
[47:58] => и мы собираемся держать их внутри тега span. Итак, давайте дадим им имя класса icon
[48:04] => иметь три иконки. Итак, первым будет заполнение, редактирование текста, AI, заполнение, редактирование. Так как же
[48:12] => используем ли мы это? Если я продолжу и нажму на это? Да, так что, если я подойду сюда и вставлю это. Сейчас
[48:18] => Я собираюсь рассказать вам, как вы можете использовать React значки. Так что вам нужно обратить внимание вот на это,
[48:23] => что написано в первых двух буквах. Так что это значок I типа. Таким образом, существует много типов
[48:30] => икона. Позвольте мне показать вам импорт из иконок. Так если он пойдет и нажмет косую черту, мы будем там
[48:35] => куча типов значков, таких как AI, bi, CG. Так нам нужен искусственный интеллект, верно? Так что нажми на это, вот так,
[48:42] => и просто возьмите это и импортируйте оттуда. Посмотрим, сработает ли это, если я не ошибаюсь. Он
[48:52] => Да, вот и мы. Он сгенерировал этот значок редактирования. Так что просто так, все, что нам нужно, — это искусственный интеллект.,
[48:58] => удалить и ИИ. Третий был чем-то другим, Я верю. Давайте посмотрим. Так что давайте возьмем это и
[49:06] => запятая. Да, вот что. И третий был Доктор медицины закончил. Так что вы можете просто идти дальше и просто искать его
[49:14] => сюда. И тот, что был сделан. Так что я этого не сделал и теперь вы должны импортировать его из MD. Так что
[49:24] => просто воспроизведен. MD сделано с самого начала. О, да, там есть все эти три иконки.
[49:34] => Потрясающе. Давайте продолжим и оформим их. Так что я собираюсь импортировать нашу таблицу стилей сюда.
[49:41] => Зайдите внутрь стилей. Прежде всего, для нашего сингла to due diligence. Это и есть этот стиль, он идет
[49:47] => чтобы иметь отображение гибкости и с будет 29,5 на обычном экране, но когда мы делаем это
[49:53] => ответ, как вы можете видеть, сейчас выглядит не очень хорошо , поэтому он улучшит ситуацию в
[49:57] => отзывчивый, поэтому, когда размер экрана меньше Затем 800 пикселей, я собираюсь сделать его в натуральную величину.
[50:03] => Так что я просто собираюсь это сделать буквально через минуту. Так что после этого
[50:07] => радиус границы будет составлять пять пикселей, отступ внутри него составит 20 пикселей. И маржа
[50:12] => как вы можете видеть, верхняя часть будет иметь 15 пикселей, так что она сохранит небольшой зазор
[50:17] => и какое-нибудь фоновое изображение. Так что ты можешь взять это фоновое изображение из репозитория Git. Поэтому мы
[50:22] => собираетесь найти репозиторий Git, просто зайдите чтобы github.com/push-e ДАЛЬШЕ, внутри хранилища.
[50:33] => Теперь поищите здесь машинопись. Таким образом, вы можете увидеть задачу react TypeScript, если я просто продолжу
[50:38] => сюда. И это важно, вы просто нажмите здесь и нажмите на это
[50:42] => Учебная ветка машинописи. Таким образом, весь код то, чему я учу в этом уроке, будет
[50:47] => быть внутри учебника по React TypeScript ветка. Итак, когда вы переходите в src, компоненты,
[50:54] => стили, и ссылка находится прямо здесь, вы можете воспользоваться ссылкой на эту фотографию, или вы можете добавить свой
[51:00] => собственная фотография, как ты и хочешь. Да. Итак, далее, к сделайте текст с одной точкой, теперь мы оформляем ваш текст в
[51:06] => немного, этот текст. Таким образом, flex one означает, что это собирается занять все доступное пространство, и это
[51:12] => если вы перенесете весь контент на другую сторону этой панели, размер шрифта не будет
[51:17] => будет 20 пикселей. И теперь это будет использовано, когда мы сделаем его полем ввода. Так что прямо сейчас я
[51:23] => не нужно обращать на это внимание. Так что я могу сказать, да, у всех этих значков останется поле
[51:27] => 10 пикселей, размер шрифта 25 пикселей, а курсор будет устойчивым, вы можете видеть наш
[51:33] => курсор стал указателем, позвольте мне быстро добавить к нему отзывчивость для нашего поля ввода
[51:40] => будет иметь вес 95% при размере экрана менее 78 пикселей
[51:45] => взносы будут иметь вес 95%. Тот это. И для того, чтобы сделать сингл, будет иметь
[51:51] => на 100% это единственный компонент и для делать будет 100 Я имею в виду весь список,
[51:56] => верно. Так что, если я сохраню это, видите, это выглядит хорошо. Теперь на больших экранах ширина увеличивается
[52:01] => должно составлять 40% для компонента single to do. Так что да, вот и все. Хорошо, теперь давайте попробуем
[52:06] => введите больше в взносы. Потрясающе. Так что, если мы перейдем на меньший экран, да, он отлично реагирует.
[52:13] => Но теперь вы видите, что это не работает. Потому что мы не создали для них соответствующую функциональность
[52:18] => тем не менее, для редактирования Удалите и готово. Так давайте продолжим и сделаем это. Прежде всего,
[52:23] => Я собираюсь добавить функциональность для done. Так на пустом промежутке времени я собираюсь добавить щелчок по кнопке
[52:29] => функция. И что он собирается делать, он собирается запустить ручку, выполнить функцию, и он собирается
[52:38] => отправьте ему свой идентификатор, чтобы сделать идентификатор. Итак, эта ручка сделана не существует настроено на давайте продолжим и создадим его
[52:46] => константа обработана, вот так. И вы можете видеть, что там написано, что вы отправляете это на do.id,
[52:53] => но вы не получите его там. Так что давайте примем это там. Таким образом, мы собираемся получить
[52:57] => идентификатор здесь, и этот идентификатор будет иметь номер типа. Итак, что теперь мы будем делать
[53:03] => что делать с этим идентификатором, мы собираемся манипулировать нашим набором, чтобы определить состояние с помощью этого идентификатора. Так что
[53:08] => для сбора точечной карты. Итак, что мы собираемся делать, мы собираемся отобразить этот массив и
[53:15] => какой бы идентификатор ни совпадал с этим идентификатором, мы сделаем существует свойство перехода от ложного к истинному,
[53:22] => и наоборот. Так что мы собираемся взять делать, и мы собираемся сказать, нужно ли do.id
[53:31] => совпадает с возгласами, если к do.id является равно идентификатору, который мы отправляем,
[53:38] => тогда что нам прикажешь делать? Мы собираемся взять это для того, чтобы сделать все объекты недвижимости, и мы собираемся
[53:43] => изменение схемы свойств «готово» выполнено. И мы собираемся инвертировать значение, которое уже было
[53:50] => там. Так в чем же do.is сделано. В противном случае мы просто собираюсь вернуть то, что нужно сделать просто так. О,
[54:02] => Я забыл завернуть все это в карту. Так что да, теперь все работает нормально. Орфографическая ошибка
[54:09] => здесь все кончено. Да, теперь все работает нормально. Теперь, если мы продолжим и нажмем вот здесь, это будет
[54:16] => сделайте его отключенным. Но очевидно, что вы не можете увидеть это прямо сейчас, потому что мы этого не реализовали. Так
[54:21] => то, что мы собираемся сделать, мы собираемся проверить это здесь. Если это будет завершено, то просто
[54:25] => вычеркни это, иди сюда. И мы собираемся чтобы проверить, так что сделайте текущий, чтобы do.is . Сделано,
[54:32] => если это будет сделано, то это будет вычеркнуто. В противном случае он будет отображаться как обычный.
[54:40] => Так что здесь он войдет в обычный режим. В противном случае это будет вместо того, чтобы охватывать просто
[54:46] => поскольку это метка забастовки, вы можете ее увидеть было сделано. Если я снова нажму здесь,
[54:52] => это еще не сделано. Да, вот так просто. Теперь давайте продолжайте и реализуйте функцию удаления.
[54:57] => Так что я собираюсь подойти сюда И давайте скопируем это вот так,
[55:03] => Я собираюсь добавить это сюда. И вместо дескриптора готово, мы собираемся добавить дескриптор Удалить.
[55:09] => Давайте создадим функцию удаления дескриптора прямо под этой константой и удалите.
[55:17] => И вот так просто, это займет Идентификатор, который будет номером. Теперь это
[55:24] => довольно просто, мы просто будем делать то, что мы есть собираюсь сделать это фильтром. Так что ставьте на взносы до точки
[55:31] => фильтр. Что делать, если для do.id не равно идентификатору, только затем возвращается к этому значению, если мы нажмем на это,
[55:45] => вместо этого идентификатора все они будут возвращен, и этот будет удален.
[55:49] => Так что, если я нажму на это, да, вот так. Вот как это работает. Потрясающе. Теперь немного сложная часть,
[55:57] => мы собираемся реализовать добавленную функциональность. Так что давайте продолжим и сделаем это. Так что за это,
[56:01] => мы собираемся создать два государства. Первый из них будет следите за тем, включен РЕЖИМ РЕДАКТИРОВАНИЯ или нет. И
[56:07] => второй сохранит значение редактора , чтобы сделать так, как вы указываете. Первый будет предназначен для редактирования,
[56:15] => что будет правдой или ложью. Так что это будет быть логическим. Итак, давайте добавим этот тип логического значения.
[56:24] => Также импортируйте состояние пользователя. Верно? Да. Поэтому важно, чтобы вы заявили, что другой,
[56:30] => он сохранит добавленный текст «Сделать». Поэтому добавлено, чтобы сделать это, это будет строка
[56:39] => строка, по умолчанию она будет пустой. Или вы знаете, что он не будет пустым,
[56:45] => на самом деле, в нем уже будет эта штука. Так, чтобы do.to .
[56:51] => Делать, он будет содержать в do.to делай вместо этого. Поэтому всякий раз, когда вы нажимаете режим редактирования,
[56:57] => для этого появится поле ввода текста ввода ценность. Просто перейдите сюда для редактирования по щелчку мыши.
[57:08] => Что мы будем делать? Мы собираемся проверить, если ВКЛЮЧЕН РЕЖИМ РЕДАКТИРОВАНИЯ или нет. Так что, если редактировать, если режим редактирования
[57:14] => находится не на, а на do.is если это не будет сделано. Так что, если это еще не сделано, значит, потому, что если это уже сделано,
[57:25] => тогда какой смысл его редактировать? Так что если это не так, то только тогда мы будем его редактировать,
[57:30] => затем установите значение «редактировать» равным значению «затем установите значение «редактировать» на «закрыть», тогда мы не должны
[57:38] => отредактируйте это правильно? Упс, я забыл это сделать или создать обратный вызов здесь. Так что, если это не будет сделано,
[57:46] => тогда только мы должны его редактировать. Верно, круто. Таким образом, это поможет нам переключаться между
[57:50] => Режимы редактирования. Так что, если я пойду и сделаю это в настоящее время, это не сработает. Поэтому мы должны добавить
[57:56] => поле ввода здесь и условное обозначение здесь. Итак, давайте добавим условное. Так что я собираюсь сказать
[58:03] => если РЕЖИМ РЕДАКТИРОВАНИЯ ВКЛЮЧЕН РЕЖИМ РЕДАКТИРОВАНИЯ ВКЛЮЧЕН, то это собираюсь отобразить поле ввода. Кроме этого,
[58:10] => если он не включен, то он будет отображать нормальную, то есть эту часть. Хорошо, вводная информация
[58:19] => как это. Что не так? О, мы должны убрать эту штуку?
[58:28] => Да, все в порядке. Да, вот и мы. Если я нажму на это снова, сделайте это. Ладно, мы еще не оформили это в стиле
[58:36] => пока. Так что давайте просто сначала создадим его, а потом я пойду чтобы придать ему стиль. Прежде всего, ценность внутри него,
[58:42] => это будет вот что. Эту правку нужно сделать. Итак, какую ценность вы вложили в это?
[58:47] => Чтобы do.to ? Сделай так, чтобы ты увидел, как я это надену? Да, похоже. Поэтому позвольте мне обновить эту страницу.
[58:55] => И если я нажму на него, вы увидите, что он появится. Во-вторых, мы собираемся добавить изменение On
[59:00] => функция. Итак, при изменении мы собираемся обновить это редактирование набора, чтобы сделать это. Установите редактирование на
[59:09] => измените, скажем, точку события, целевую точку ценность. Так что добавьте событие сюда. Ага.
[59:19] => И у него будет название класса, чтобы мы могли стилизовать эту штуку под сингл to dues.
[59:29] => текст. Опять же, следуя соглашению BIM здесь. Ага. Итак, вот мы и пришли. Также,
[59:35] => всякий раз, когда мы нажимаем на это, когда так далее меняется что будет делать onchange, он собирается обновить
[59:39] => государство, но то, что я хочу всякий раз, когда нажимаю всякий раз, когда я нажимаю Ввод, он будет
[59:44] => измените состояние или оно собирается отправить его и изменить фактическое, чтобы сделать это, я собираюсь
[59:49] => создайте редактирование дескриптора здесь, и это будет стреляйте всякий раз, когда это будет отправлено на отправку.
[59:58] => Редактировать Таким образом, для этого потребуются две вещи, прежде всего событие, а другое —
[60:06] => быть, чтобы do.id . Так что это еще не было создано. Давайте сначала создадим его const и проверим. И
[60:15] => мы делаем все сначала на мероприятии, которое будет иметь тип
[60:19] => событие в форме точки. А другой будет быть идентификатором, который будет иметь тип number.
[60:27] => Ладно, круто. Итак, после того, как это будет отправлено, что он собирается делать,
[60:31] => прежде всего, это будет препятствовать поведению по умолчанию, чтобы экран не отображался
[60:36] => обновленный. А затем мы собираемся установить взносы для сбора точечной карты. Внутри него, если для do.id
[60:48] => совпадает с идентификатором, отправленным ими. Это отправляется на отправку там, что собирается делать,
[60:54] => все это уйдет на уплату взносов. Я имею в виду, все имущество, подлежащее оплате. И вместо того, чтобы
[61:00] => как, например, но просто просто как мы это сделали, с этим покончено,
[61:05] => который собирается обновить это, чтобы сделать так, чтобы сделать будет добавлено, чтобы сделать. А если это не совпадает,
[61:13] => он просто собирается вернуть это, чтобы сделать это, вот и все. И после этого он установит значение add в false.
[61:24] => Именно так. Так что давайте продолжим и попробуем вот это. Если Я захожу в «Привет» и нажимаю «Ввод». Да, ты можешь
[61:29] => видите, он был отредактирован. Здравствуй, мир. Ведущий Да, это редактирование работает абсолютно нормально.
[61:37] => Так что давайте сначала оформим это так, чтобы это не выглядело уродливо. Кроме того, если ты помнишь, я положил это вот сюда.
[61:46] => Эта штука, если я ее уберу, ты пойдешь чтобы увидеть, нажму ли я на это, вы увидите
[61:50] => этот уродливый контур вот здесь. Так что, если я удалю это, вы не увидите этот набросок здесь.
[61:55] => О, так это было сообщение. И я работал. Хорошо. Я написал этот тест вот здесь. Ага. Теперь это
[62:02] => должно сработать. Да, вот и мы. Так что да, я думаю он работает абсолютно нормально. Но ты знаешь,
[62:06] => есть один недостаток, который я только что заметил: если мы нажмем на эту кнопку редактирования, вы увидите, что фокус делает
[62:12] => не заходя внутрь этого входного компонента, мы имеем чтобы вручную нажать здесь, а затем ввести его. Так
[62:16] => давай просто позаботимся об этом. Так что мы просто уходим чтобы снова использовать, используйте крючок use ref. Так
[62:25] => используйте ссылку. И я собираюсь назвать его input ref. Вы можете называть это как угодно, на самом деле это не имеет значения. И
[62:33] => так же, как мы делали ранее, прежде всего, позвольте я импортирую это. И точно так же, как мы делали раньше,
[62:38] => давайте возьмем эту штуку. Нам нужно идти. Да. Элемент ввода SGML.
[62:45] => Да, и укажите, что эта ссылка равна входной ссылке. И мы собираемся создать здесь эффект использования, который,
[62:54] => всякий раз, когда правка меняется, она будет срабатывать вот так. Это означает, что для этого придется подождать
[63:00] => позвольте мне показать вам ссылку на ввод. Первый вход Polycom введите ссылку выше этой. Да, так что введите точку отсчета
[63:07] => текущий точечный фокус. Так что мы сосредоточимся на этой штуке. Всякий раз, когда это меняется, поэтому, если я пойду и нажму
[63:15] => редактировать, вы можете видеть, что фокус уже находится внутри этого. Да, все работает нормально. Крутой. Так что наш к
[63:22] => приложение «список дел» успешно завершено. Но осталось еще кое-что, что мне нужно объяснить
[63:27] => ты. То есть используйте крюк-редуктор. Итак, для объяснения пользовательского крючка пользователя. Вы знаете, если вы не знаете, что
[63:34] => используйте крючок редуктора, я создал полное видео об этом. Мое предыдущее видео было посвящено использованию крюка редуктора,
[63:39] => Я научил вас, как вы можете создать приложение для корзины покупок при использовании используйте крюк-редуктор. Так что ты можешь идти дальше и
[63:44] => смотрите это видео, ссылка на которое будет в описании или я нажимаю кнопку выше. Но если вы уже знаете,
[63:49] => давайте продолжим и поймем, как мы можем использовать Машинопись с пользовательским крючком пользователя. Так что внутри
[63:53] => это модели dot TSX, я просто собираюсь объяснить вам. Так что это будет для тебя домашним заданием.
[63:58] => Я собираюсь объяснить, что вы используете крючок редуктора, и ваша задача будет заключаться в том, чтобы реализовать его внутри этого
[64:03] => проект. Итак, допустим, мы создали здесь компонент, позвольте мне создать фиктивный компонент.
[64:10] => И внутри этого мы собираемся создать уменьшенный, используя использование
[64:14] => редуктор. И, как я уже говорил вам в предыдущем видео, что мы делаем в исследованиях пользователей,
[64:18] => мы указали начальное значение. Поэтому мы предоставляем это начальное значение. Прежде всего, позвольте мне просто импортировать его
[64:24] => просто так. Так что давайте перенесем это сюда . Да, мы можем импортировать его вот так.
[64:30] => И теперь мы собираемся предоставить ему редуктор. Итак, давайте скажем, чтобы сделать редуктор.
[64:38] => И это вернет нам состояние и отправка. Теперь давайте создадим это, чтобы сделать редуктор.
[64:44] => Так что продолжайте делать редуктор. Теперь, что делает редуктор брать? Для этого требуется состояние, и оно предпринимает действия.
[64:52] => Поэтому нам нужно предоставить типы нашему состоянию и действию. Итак, давайте просто сначала напишем состояние
[64:57] => действие с запятой. Так каким же будет государство? Таким образом, штат будет состоять из двух взносов,
[65:05] => верно? Так что мы можем просто взять этот интерфейс, и правильно сделать, и множество дел. Так
[65:13] => вот как мы определяем государство, и что такое мы будем продолжать наши действия. Итак, наше действие
[65:18] => нам нужно будет добавить три вещи, добавить то, что нужно сделать, удалить то, что нужно сделать, и готово. Так
[65:24] => он собирается выполнить три действия. Итак, давайте создадим тип для нашего действия. Итак, введите действия
[65:31] => и переходим к первому действию, к тому, что будет, так что мы хотим, чтобы они были по одному за раз, верно? Любой
[65:38] => объявление может быть выполнено, или может быть выполнено удаление или выполнение . Так что мы просто напишем вот так
[65:43] => сбоку от фигурных скобок мы напишем тип, потому что очевидно, что это действие имеет два свойства,
[65:48] => верно? Один из них — тип, а другой — полезная нагрузка. Так что печатайте будет объявлением, а полезная нагрузка будет
[65:57] => строка, потому что мы отправляем что-то для добавления что-то, мы собираемся отправить строку из
[66:02] => поле ввода. Так вот, в противном случае, что происходит случиться так, что позвольте мне просто написать это здесь.
[66:08] => В противном случае позвольте мне скопировать это. В противном случае, это произойдет, это будет иметь действие удаления.
[66:15] => И обратитесь к нам, нам просто нужно отправить идентификатор. поэтому мы собираемся ввести номер здесь.
[66:21] => В противном случае, мы собираемся сделать законченное действие. И это это тоже будет номер. Так вот как ты
[66:29] => определите свои действия. Теперь мы просто возьмем его и назначим вот здесь, вот так. Окей,
[66:34] => теперь давайте создадим это, чтобы сделать редуктор. Так что внутри у нас будет чехол для подмены. Так что позвольте мне просто
[66:40] => принеси его сюда. Итак, это наш редуктор. Послушай, если ты уже работали над редуктором повторного использования, тогда вы
[66:46] => собираюсь понять, как это работает. Это просто для того, чтобы понять, как вы можете интегрировать TypeScript внутри
[66:50] => об этом. Так что это просто действие добавления, мы просто добавляем это действие вот так, действие удаления,
[66:56] => это только то, что я уже сделал в проекте. Вот как вы создаете редуктор использования
[67:01] => в наших приложениях React. Так что я просто сделаю это прокомментировано. Так что, в принципе, то, что я хотел
[67:06] => объясню вам, это тип действия и тип состояния, так что да. Так что теперь то, что я хочу, чтобы ты сделал, это я
[67:12] => хочу, чтобы ты взял этот редуктор, и я хочу, чтобы ты для интеграции внутри нашего приложения. А если ты этого не сделаешь
[67:17] => знаете, как вы это делаете, сэр, что просто необходимо посмотреть мое предыдущее видео, которое находится на сайте пользователя reducer. Потрясающе.
[67:23] => Таким образом, мы успешно поняли, как реагировать с Машинописный текст. И давайте начнем интегрировать перетаскивание
[67:28] => и зайдите в наше приложение. Итак, давайте внесем соответствующие изменения в пользовательский интерфейс, чтобы мы могли идти дальше и
[67:33] => сделай так, чтобы это выглядело вот так. Поэтому всякий раз, когда мы вводим «что делать», оно появляется в активных задачах. И мы должны
[67:40] => здесь есть раздел с выполненными задачами. Так что давайте идите и внесите изменения в это конкретное приложение.
[67:45] => Поэтому я собираюсь перейти к компоненту списка взносов.
[67:50] => И позвольте мне удалить этот день. И я собираюсь чтобы добавить еще один раздел, называемый контейнером.
[67:58] => И внутри этого контейнера, мы собираюсь вызвать еще одного сотрудника для сбора взносов.
[68:05] => Теперь эти два взноса, они будут за это конкретные активные задачи. И мы собираемся создать
[68:10] => еще один раздел для наших выполненных задач. Так что я собираюсь взять этот раздел и вставить его, и давайте добавим еще один
[68:18] => класс здесь. Давайте посмотрим, как это сделать. И вместо того и другого мы собираемся добавить немного кода,
[68:24] => прежде всего, мы добавим этот тег span для заголовков. Итак span.to взносы
[68:33] => подчеркивание подчеркивания заголовка. Хорошо, и вместо этого я буду писать активные задачи.
[68:41] => А ниже мы отнесем это на счет взносов состояние, которое передается из точки AB в TSX. И
[68:48] => мы собираемся выплатить все необходимые взносы делать. И снова, как и раньше,
[68:57] => мы собираемся сделать наш сингл, чтобы сделать компонент здесь. Так много нужно сделать.
[69:04] => И мы собираемся передать им пропуск, чтобы это сделать, и нам нужно отправить на сборы. Также ясность.
[69:15] => Отлично, значит, они должны работать сейчас. Ладно, это не так выглядишь сейчас действительно хорошо. Так что я собираюсь исправить
[69:22] => это позже. Так что давайте скопируем это. И я собираюсь чтобы вставить это внутрь нашего, нужно также удалить.
[69:30] => Да, это выглядит некрасиво. Поэтому вместо активных задач, Я собираюсь написать выполненные задания. Так что прямо сейчас я
[69:38] => просто передаю это в дорожную карту сборов внутри этого, но позже у нас будет отдельный
[69:42] => состояние для оплаты взносов, и мы собираемся чтобы отобразить это конкретное состояние здесь. Сейчас
[69:46] => давайте придадим ему некоторый стиль, чтобы он не выглядишь так уродливо. Итак, перейдите в стиль dot CSS, и давайте
[69:52] => начните с изменения этой ширины на 95%. И приходи здесь, внизу, я нахожусь чуть ниже, над этим, чтобы сделать
[70:01] => Я собираюсь добавить класс контейнера , который мы создали в контейнере.
[70:04] => И мы собираемся предоставить этот контейнер цветной дисплей сгибается так, чтобы он отображался
[70:09] => в одном ряду. Так что показывайте, сгибайте, некоторую ширину 95%. И я собираюсь привнести несколько стилей, чтобы мы
[70:20] => не нужно тратить время на написание CSS, мы собираемся чтобы добавить немного полей сверху, чтобы создать некоторый интервал
[70:26] => содержимое justify будет разнесено между ними так , чтобы у некоторых из них было некоторое пространство между ними,
[70:31] => точно так же, некоторые элементы выравнивания для начала сгибания так, чтобы они были выровнены с самым началом
[70:36] => контейнер. Крутой. Теперь мы собираемся внести некоторые изменения в это, чтобы внести взносы. Так что я собираюсь удалить это и
[70:43] => измените ширину на 47,5%, потому что они занимают половину экрана, верно, так что 47,5%,
[70:51] => и я собираюсь снять эту гибкую пленку. И я собираюсь добавить, я собираюсь заставить их называть их так
[70:56] => чтобы они появлялись в одном ряду. Так что прямо сейчас, если вы видите, что они появляются бок о бок, я собираюсь сделать
[71:01] => их колонка направления изгиба, некоторые данные, дайте им немного отступов, немного границ радиусом в пять пикселей и
[71:07] => какой-нибудь цвет фона. Так что давайте посмотрим. Да, это выглядит довольно неплохо. И теперь мы должны сделать это
[71:12] => единственное, что нужно сделать, чтобы охватить весь этот раздел. Но прежде всего, давайте представим некоторые задачи.,
[71:19] => стиль so.to Делать — это значит двигаться, это значит идти чтобы размер шрифта составлял 30 пикселей
[71:30] => предусмотрено 30 пикселей. Теперь, что касается единого взноса, нам уже нужно предоставить его во всю ширину, мы этого не делаем
[71:35] => нужно предоставить ему что-либо из этого, потому что дисплей является гибким. Так что все это автоматически будет охватывать
[71:39] => оно. Да, вот и мы. И мы собираемся добавить некоторые перейдите к нему так, чтобы, когда мы наведем курсор на это,
[71:45] => он немного растет. Поэтому мы собираемся добавить это тоже зависание. Но сначала позвольте мне добавить только
[71:50] => переход длится 0,2 секунды. И давайте добавим эти стили наведения точно так же, как это. Поэтому, когда мы зависаем на
[71:57] => эта прямоугольная тень будет состоять из пяти пикселей. И мы собираемся увеличить его до 1,03. Так что это будет
[72:03] => немного больше. Так что смотри сюда. Да, это и есть анимация. Потрясающе. А теперь давайте спустимся.
[72:11] => Теперь нам нужно удалить вставить медиа-запрос, я собираюсь удалить это, нам это больше не нужно,
[72:16] => потому что с автоматическим управлением, но для нашего делать это, когда экран меньше, чем
[72:21] => 100 пикселей, нам придется сделать это с шириной 45%. Так что давайте проверим это. Да,
[72:27] => именно так. Теперь далее, внутри здесь, для того, чтобы сделать это, я собираюсь добавить немного нижнего края
[72:33] => так что на небольших экранах это выглядит немного аккуратнее . Кроме того, нам нужно удалить это на 100%.
[72:40] => Так, чтобы это создавало небольшой промежуток, и мы собираемся добавить несколько стилей контейнеров, чтобы сделать их
[72:46] => сверху донизу. Так что мы собираемся предоставить этот контейнер, какое-то гибкое направление колонны
[72:50] => ширина ширина 95%. Так что в настоящее время это половина, около 50%. Но мы собираемся сделать гибкое направление, чтобы
[72:58] => будь столбцом. Да, именно так. А также, эти выполненные задания должны иметь цвет фона
[73:04] => из красного. Итак, давайте добавим класс удаления, который мы добавили . Таким образом, цвет фона будет красным. Да,
[73:12] => это выглядит намного лучше. Крутой. Теперь я думаю, что наш пользовательский интерфейс сделано. Теперь давайте приступим к реализации
[73:17] => красивый пакет DND в наше приложение. Так Я собираюсь открыть новую вкладку и выполнить поиск в react,
[73:23] => красивый И. Давайте перейдем к этому пакету NPM. И вот и мы. У нас есть инструкции по установке
[73:29] => сюда. И у нас есть кое-какая документация, если вы хотите продолжить и прочитать это, вы можете сделать
[73:33] => тот. Итак, вот как будет работать перетаскивание. Итак, мы собираемся обернуть все наше приложение этим
[73:38] => перетащите контекстный тег. И место, которое является этим место, где будут оказываться все наши взносы,
[73:43] => мы завернем его в капельницу. И одно единственное задание будет обернуто перетаскиваемым
[73:48] => метка. Если вы не можете понять это прямо сейчас, не волнуйтесь, я все объясню
[73:52] => по мере того, как мы продвигаемся вперед. Давайте подойдем к нашему терминалу и вставим это. И PMI реагируют на прекрасный DND
[73:59] => О, вот и мы. Он установлен. Позвольте мне закрыть этот терминал. И давайте перейдем к нашему приложению dot TSX. И я
[74:05] => собираюсь создать новое состояние для наших завершенных дел. Так что используйте государственную подписку на взносы
[74:15] => и для начала это будет пустой массив . И это будет того же типа, что и
[74:20] => тип взносов. Теперь, если вы пишете на JavaScript, вам не нужно беспокоиться обо всех этих типах
[74:24] => и прочее, вы можете напрямую просто создавать, использовать в таком состоянии. Теперь нам нужно отправить оба
[74:29] => из них в наш компонент списка дел здесь. Набор завершен, чтобы оплатить еще и эту вещь.
[74:40] => Очевидно, что это дает нам ошибку, потому что мы потому что этого нет в нашем списке взносов.
[74:45] => Так что давайте продолжим и добавим это. Так закончено. Опять же, вам не нужно беспокоиться обо всех
[74:50] => это если вы пишете на JavaScript. Таким образом, это был массив взносов второго типа. Так что мы собираемся принять это
[74:58] => добавьте его сюда и установите завершено
[75:04] => к взносам. Знаешь что? Как мы добавили тип к этому? Мы просто останавливаемся на этом и берем это
[75:15] => хорошо, закончили с взносами? Да, это прекрасно. Все правильно, так что наше приложение до сих пор работает нормально. Сейчас
[75:22] => как мы можем добавить react beautiful И в наше приложение. Так нам нужно зайти в наше приложение dot TSX, которым мы являемся
[75:28] => уже внутри. Поэтому нам нужно обернуть это чем-то , что называется контекстом перетаскивания. Так что перетаскивайте, отбрасывайте контекст.
[75:37] => И мы собираемся завершить все наше приложение.
[75:41] => Внутри этого, теперь нам нужно импортировать его из react beautiful DND. Так что в порту из
[75:50] => реагируй, прекрасный DND и просто иди сюда, нажимай Ctrl пробел Контрольное пространство упс, хорошо,
[75:56] => это не произойдет. О, я понял, мы забыли сделать одну вещь, мы забыли установить типы для
[76:01] => эта конкретная библиотека. Поэтому всякий раз, когда вы устанавливаете несколько зависимостей в TypeScript,
[76:06] => они требуют, чтобы вы установили для них некоторые типы. Так что я собираюсь нажать здесь.
[76:11] => И это приведет нас сюда, так что нам нужно чтобы скопировать эту строку, или мы можем просто скопировать это поверх
[76:16] => здесь. И просто вернитесь, откройте другой терминал и просто установите эти типы. Потому что эти
[76:22] => типы важны для функционирования этого пакета должным образом. Или вот так мы и поступим. Он установил позвольте мне
[76:27] => закройте этот терминал. И теперь, если я пойду и нажму Ctrl Пробел, и нажмите на это, вы можете увидеть, что у него есть
[76:33] => импортированный. Теперь он говорит об ошибке. Поэтому для этого требуется реквизит под названием drag end, который мы собираемся
[76:39] => беспокойтесь о будущем, но не нужно беспокоиться о прямо сейчас. Итак, давайте перейдем к списку дел. И вместо этого
[76:44] => из нашего компонента списка дел мы собираемся завершить это с помощью чего-то, что называется сбрасываемым. Потому что это
[76:49] => область прямо здесь может быть удалена. район, этот район также является тропическим районом. Так что, если я что-нибудь напечатаю,
[76:54] => ладно, значит, это будет непростая задача. И это будет что-то тропическое.
[76:59] => Так что давайте завернем это внутрь droppable. Так прямо под этим я собираюсь добавить возможность удаления.
[77:06] => И я собираюсь ухватиться за это
[77:10] => и протолкни его внутрь. Теперь у этого сбрасываемого будет идентификатор, очевидно, он все еще
[77:17] => раздавать это вокруг дракона. Так что позвольте мне пока добавить это к Дракону. Просто так. Да,
[77:23] => хорошо. Итак, он перестал выдавать ошибки там, там, но здесь он выдает некоторые
[77:28] => ошибка, для этого требуется сбрасываемый реквизит. Итак, прежде всего, нам нужно предоставить этому удаляемому идентификатору.
[77:34] => Таким образом, удаляемый идентификатор — это не что иное, как уникальная идентификация этой удаляемой зоны. Так что мы собираемся предоставить
[77:40] => это, скажем, список дел, хорошо, и внутри него мы можем, мы можем просто поместить его вот так,
[77:47] => нам нужно передать обратный вызов, а затем нам нужно чтобы переместить его туда. Так что я собираюсь открыть
[77:52] => фигурная скобка, и внутри функции вы можете сказать, что мы собираемся взять этот div и вставить его.
[78:01] => Теперь внутри этой функции требуется несколько параметры. Так что первый будет предоставлен.
[78:06] => И о втором я расскажу позже. Итак, прежде всего, предоставлено, так что же предоставлено собирается делать
[78:12] => итак, что же потребовалось для этого, и предоставьте это нашему родительскому подразделу этого конкретного удаляемого
[78:17] => зона. Так что родителю, если нам нужно обеспечить отдых, и у нас будет provided.in рефери, чтобы
[78:24] => реагировать красиво DND может контролировать это как падение зона. А также, нам также необходимо распространять предоставленные
[78:31] => точечный сбрасываемый реквизит. Так вот о чем он просил . Точечный сбрасываемый реквизит. Да, это прекрасно.
[78:41] => Крутой. Так что, но все же, если ты продолжишь здесь и делай что угодно, ты увидишь,
[78:46] => это все еще не работает, потому что мы должны сделать много чего еще, кроме этого. Так что давайте
[78:50] => сделайте и эту зону выпадения, точно так же, как мы сделали с этой штукой. Так что я собираюсь скопировать это,
[78:55] => иди прямо сюда. И давайте поместим этот раздел внутрь отсюда. И вместо списка дел я собираюсь
[79:02] => изменить его название, чтобы сделать, это удалить. Хорошо, теперь нам нужно снова предоставить ему эту функцию,
[79:09] => точно так же, как мы сделали с предыдущим. Так что я собираюсь завладеть этим подразделением внутри,
[79:19] => именно так. Мы собираемся воспользоваться предоставленным , и мы собираемся воспользоваться обеими этими вещами,
[79:24] => и нам нужно предоставить его нашему родительскому подразделению. Просто подобный этому. Ладно, круто. Никакой ошибки, и все же
[79:32] => не работает. Ничего. Ладно, да, я забыл одну вещь. Мы передали это заполненное на сборы
[79:38] => так что нам это тоже нужно. Так что позвольте мне оставить их себе сюда. Запятая, установите значение «завершено» в «взносы».
[79:47] => Ага. Так что мы отнесем это заполненное к взносам и заменим его этими двумя взносами.
[79:53] => Так что с этим, этим и вместо этого, я собираюсь добавить «набор завершен» к взносам, Да, так что теперь ты будешь
[80:01] => видите ли, это ничего не покажет, даже если мы добавим здесь много чего есть. Ладно, круто. Так что один
[80:07] => еще одна вещь, которую я забыл сделать, это то, что нам нужно отправить индекс в наш компонент «единый взнос», потому что
[80:12] => он будет отслеживать, какой из этих конкретных делать то, что тебя тащат, не волнуйся, я
[80:17] => собираюсь объяснить это всего через секунду. Так что на данный момент, просто следуйте дальше, передавая этот индекс как индекс,
[80:24] => вы увидите, как я собираюсь это использовать. Опять же, это дает ошибку, потому что
[80:27] => единственное, что нужно сделать, не существует, кроме индекса прямо сейчас, но мы заставим его принять это.
[80:34] => Хорошо, теперь давайте перейдем к единым взносам и добавим тип индекса, который будет числом.
[80:42] => И здесь тоже я собираюсь добавить индекс. Отлично, теперь нам нужно записать этот сингл в качестве
[80:49] => перетаскиваемый. вещь. Так что за пределами этого, Я собираюсь добавить тег под названием перетаскиваемый.
[80:58] => И я собираюсь завернуть всю эту форму в это перетаскиваемый. Просто так, и точно так же,
[81:05] => мы собираемся добавить функцию внутри этого как хорошо. Но давайте просто предоставим ему перетаскиваемый идентификатор.
[81:11] => И мы собираемся сделать это перетаскиваемое удостоверение личности, чтобы это должно быть уникально, верно, так что я просто иду
[81:16] => чтобы предоставить идентификатор двух взносов для этого. Так чтобы do.id.to строка, и я собираюсь предоставить ее
[81:25] => индекс так, чтобы он сохранял ловушку отслеживания индекса. Итак, это тот же самый индекс, который мы привели
[81:30] => из компонента «Список дел». А теперь внутри него давайте добавим нашу функцию, примем форму
[81:41] => и положи это внутрь него. Точно так же, как вы можете видеть, мы помещаем форму внутрь этого. Сейчас,
[81:47] => опять же, нам нужно принять меры. Итак, вы видите, что это просто похожие вещи, мы просто
[81:52] => нужно кое-что сделать, и тогда все будет хорошо. идти. Так что внутри этого нам просто нужно предоставить
[81:58] => несколько вещей обеспечивали точечный перетаскиваемый реквизит. Так ранее мы ставили эту штуку на откидывающийся реквизит,
[82:05] => но вот здесь мы поставим перетаскиваемый реквизит и еще кое-что, мы собираемся добавить перетаскивание
[82:11] => обращаться с реквизитом. И, конечно, нам нужно предоставить ссылку, чтобы она могла правильно ее контролировать.
[82:17] => Да, именно так. Теперь, если мы отправимся в наш браузер, и давайте кое-что добавим. И если я
[82:25] => хватай его, ты видишь, что он работает. Но здесь есть кое -какая проблема. Так что, если я пойду дальше и возьму это,
[82:31] => вы можете видеть это, эта штука левитирует здесь. Почему это происходит? Также смотрите,
[82:38] => если мы пойдем сюда, он остановится здесь, но потом возвращается в исходное положение. Так что, если я продолжу и
[82:42] => сделай это так, это не спасет государство. Так нам нужно добавить эту логику. Поэтому мы собираемся добавить это
[82:48] => логика позже. Но сначала нам нужно позаботиться об этой штуке. Почему это парит в воздухе? Так
[82:52] => чтобы исправить это, мы перейдем к нашему списку взносов. И прямо здесь мы собираемся кое-что добавить
[82:59] => позвонил поставщику, предоставил заполнитель точек. И точно так же мы собираемся добавить это сюда как
[83:08] => именно так. Теперь, если я продолжу и возьми это, да, ты же видишь, что это,
[83:13] => он создает пустой заполнитель для этого элемента. Так что, если я пойду дальше, вы сможете увидеть
[83:19] => это дает нам пространство, на которое можно упасть. Круто, но, но это все равно не спасает государство.
[83:25] => Так что давайте продолжим и напишем логику для этого. Так что, если Я перехожу к приложению dot TSX, возможно, вы помните это на
[83:31] => функция перетаскивания при перетаскивании и функции. Так что я ухожу чтобы создать эту функцию сейчас. Так что давайте уберем это.
[83:39] => И const при перетаскивании при перетаскивании и, и давайте добавим эту функцию прямо здесь.
[83:47] => Теперь это при перетаскивании заканчивается, отправляет этот параметр , называемый результатом. Итак, мы собираемся принять результат
[83:53] => параметр. И параметр результата будет иметь тип отбрасывайте результаты. Теперь отбросьте результаты отбрасывания. Так что, если ты
[84:00] => кодирование на JavaScript, вам не нужно делать это очевидно, но в машинописном тексте вы это делаете.
[84:04] => Так что отбросьте результат. И ты можешь видеть, и ты можешь видеть он импортировал это из прекрасного ДНР.
[84:13] => А теперь давайте посмотрим, что находится внутри этого результата переменная. Так что давайте пойдем и зарегистрируем это. Итак, результат.
[84:19] => И давайте зайдем в ваш браузер, откроем консоль. И если я продолжу и перетащу его, да, вы сможете увидеть
[84:27] => у нас кое-что есть. Так что давайте исследуем это. Внутри этого у нас есть два поля сначала для пункта назначения
[84:32] => и другое для источника. Итак, что такое источник источник — это то, откуда он взялся, например,
[84:38] => если оно пришло отсюда, значит, оно даст этому то, что хорошо, у него нулевой индекс в этом
[84:44] => массив. Так что это был нулевой индекс и пункт назначения есть место, где я его уронил, вот я его и уронил
[84:50] => сюда. Так что у него будет индекс один таким образом, он попал в индекс одного в этом конкретном
[84:56] => область. Итак, как мы определяем, в какой области Так помните, мы предоставили ему удаляемый идентификатор, так что это
[85:03] => собираюсь сказать нам, что это было в удаляемом удостоверении личности, оно было удалено в удаляемом удостоверении личности и взято из
[85:09] => список двух взносов. Так что, если я продолжу, возьму это и брошу сюда, вы увидите, что
[85:14] => источник — в список взносов, а пункт назначения — в сделать — это удалить. Так что да, вот как мы собираемся
[85:21] => реализуйте нашу логику. Так что давайте выясним. Так что мы собираюсь убрать обе эти вещи из результата.
[85:27] => Итак, результат, и мы вычислим источник и пункт назначения. И что теперь мы будем с этим делать?
[85:36] => Прежде всего, мы собираемся проверить, нет ли пункта назначения, если переменная назначения пуста,
[85:41] => как это должно произойти? Если я, если мы возьмем это и подождем, позвольте мне просто сначала записать это.
[85:49] => Да, так что, если я возьму это и просто оставлю на пустом месте, мы посмотрим,
[85:55] => пункт назначения равен нулю. Так что, если пункт назначения равно нулю, нам ничего не нужно делать.
[85:59] => Так что, если пункт назначения не существует, значит, мы просто собираюсь вернуть его. В противном случае повторное использование
[86:10] => случай будет, если мы возьмем это и бросим в том же положении. Так что, если источник и
[86:15] => пункт назначения тот же, тогда мы также собираемся ничего не делать. Так что, если точка назначения удаляемый идентификатор
[86:26] => равен идентификатору удаляемой точки источника, и он находится в том же индексе. Так что я собираюсь скопировать это,
[86:34] => вставьте это и вместо идентификатора Роквелла укажите правильный индекс, так что, если он находится в том же индексе, а также,
[86:39] => так что возвращайся. Здорово. Итак, это были наши базовые кейсы. Итак, после этого мы собираемся объявить переменную
[86:47] => называется add. И мы собираемся объявить еще два переменные. Первый из них будет активным, который будет
[86:54] => имейте все два взноса в состоянии списка взносов в этом состоянии. Поэтому мы собираемся добавить его сюда,
[87:02] => и другой будет завершен, который будет чтобы внутри него были все заполненные взносы.
[87:11] => Да, вот так просто. Теперь, почему я назначил его этому активному, почему мы не можем просто напрямую
[87:16] => манипулируйте им. Итак, опять же, когда мы манипулируем нашей активной переменной, мы собираемся предоставить ее
[87:20] => наш набор для создания государства. Так что это будет более аккуратно способ сделать это. Итак, теперь мы собираемся проверить с
[87:25] => откуда он взялся. Итак, мы собираемся сначала проверить источник, и мы будем исходить из этого
[87:29] => конкретный источник. Так что, если прежде всего мы собираемся чтобы проверить, пришло ли оно из списка дел с удаляемым идентификатором,
[87:35] => таким образом, точка источника может быть удалена, идентификатор, если он равен, для делать — это перечислять, тогда что мы будем делать внутри
[87:43] => из этой добавленной переменной мы возьмем, что особая вещь, такая активная, и она была в
[87:50] => индекс исходного точечного индекса, верно, так что мы идем чтобы взять исходный точечный индекс, мы собираемся взять
[87:55] => это из исходного точечного индекса, а затем мы собираюсь удалить его из этого конкретного места.
[88:00] => Итак, активный точечный срез, я имею в виду сращивание. Таким образом, вы можете видеть, что здесь сращивание используется для манипулирования
[88:07] => массивы, удалите или добавьте внутри массива. Итак, мы перейдем к индексу точек источника, и мы
[88:14] => собираетесь удалить его, удалите один элемент из этого место, то есть тот предмет, который мы взяли в
[88:19] => добавление. Теперь мы собираемся сделать то же самое и для удаления двух сборов. Так что еще нужно сделать, это удалить.
[88:24] => Так что, если это было в полном объеме, оно пришло из-за там, так что мы собираемся взять это из полного
[88:30] => и когда я уберу его оттуда, хорошо, круто. Так мы взяли на себя эту конкретную задачу, и теперь нам нужно
[88:36] => чтобы добавить его в пункт назначения. Так что СИЛЬМО аналогично, мы собираемся проверить, так что позвольте мне просто скопировать это.
[88:45] => Поэтому, если идентификатор исходной точки, подлежащий удалению, должен список дел, тогда что мы будем делать?
[88:51] => Активное точечное соединение. Так что теперь мы уходим чтобы добавить его внутрь этого массива. Хорошо.
[88:58] => Итак, где нам нужно его добавить, нам нужно чтобы добавить в него точечный индекс назначения. Сейчас,
[89:02] => поскольку мы ничего не удаляем, поэтому мы просто собираюсь сказать «ноль», ничего не удаляй. Но что
[89:06] => что мы делаем? Мы добавляем его, поэтому мы скажем добавить эту переменную добавления, которую мы взяли отсюда,
[89:12] => мы собираемся добавить его сюда. Скопируйте это и вставьте сюда. И вместо активного,
[89:17] => мы собираемся написать полный текст. И теперь, когда мы манипулировали обеими этими переменными,
[89:22] => теперь мы собираемся добавить его в наш штат. Так что все готово, закончено с взносами, которые у нас будут, будет
[89:28] => завершите и установите двойку, которая будет активна. Теперь это должно сработать, если все кажется
[89:37] => хорошо. Да, выглядит неплохо. Давайте продолжим и попробуем это сделать. Если я возьму его и брошу здесь,
[89:44] => ладно, что-то явно пошло не так. О, для добавления этого нам нужно добавить это сюда. Нам нужно
[89:50] => пишите пункт назначения, а не источник, потому что мы проверяю пункт назначения, верно? Вернуться и
[89:57] => попробуй отбросить это. Да, он работает абсолютно нормально. Видите, вы видите, как легко это реализовать
[90:03] => перетащите и перетащите в приложения React js. Но подождите, мне нужно сделать еще кое-что. Так что, если я
[90:10] => поднимите его, я должен увидеть какой-нибудь индикатор, который это в том режиме перетаскивания. Или если мы остановимся на этом,
[90:15] => они должны светиться. И если я наведу курсор на эту конкретную часть, она должна загореться. Так
[90:20] => давайте обеспечим это, я собираюсь пойти в свой код и внутри моего компонента списка дел.
[90:25] => Итак, я уже говорил вам, что для этого требуется еще один параметр. И это моментальный снимок.
[90:30] => Итак, мы собираемся сделать этот снимок, и давайте перейдите к названиям наших классов. И я собираюсь завернуть это
[90:34] => в этом фигурные скобки и укажите этот шаблон строка, чтобы мы могли написать js внутри нее.
[90:41] => И я собираюсь открыть эти фигурные скобки и написать snapshot.is перетягивание. Так что
[90:47] => если он затягивает с этим, то укажите ему название класса активного препарата. Иначе,
[90:57] => не предоставляйте ему никаких названий классов. Точно так же мы сделаем это и для того, чтобы завершить его. Так
[91:06] => при обратных значках и запятой моментальные снимки моментальный снимок перетаскивается, затем перетаскивается, удаляется,
[91:20] => или, возможно, перетаскивание завершено. Давайте продолжим и добавим CSS для обоих из них, вместо наших стилей. Я есть
[91:30] => просто собираюсь сделать их цвет фона немного более интенсивным. Так что, если мы продолжим, если я выберу это
[91:35] => вверх, вы можете видеть, если я наведу на это курсор, оно будет светиться. Если я наведу на это курсор, это будет светиться
[91:41] => просто так. И я хочу увеличить тень этого, чтобы сделать то же самое, когда она будет схвачена мной. Так
[91:48] => если я продолжу и перейду к нашему синглу, чтобы сделать это снова, у нас также будет снимок здесь.
[91:56] => И с этим нужно что-то делать., Я собираюсь добавить еще один класс.
[92:02] => Итак snapshot.is волочащийся. Так вот, там это было, тянется, так и здесь это тянется.
[92:13] => Поэтому мы дадим ему название класса drag. В противном случае мы не будем предоставлять
[92:17] => любое имя класса. И давайте добавим для этого эти стили. Я собираюсь добавить немного интенсивного назад
[92:23] => фоновая тень DOM в тени коробки. Так что в 20 пикселей раньше, если вы помните, было 15 пикселей.
[92:30] => Так что, если я возьму это, вы увидите , что тень стала немного интенсивнее.
[92:36] => Потрясающе, так что вы видите, как легко это реализовать перетащите и перетащите в приложения React js. Я
[92:41] => хотелось бы увидеть проекты, которые вы, ребята, делаете после изучения этого.
[92:44] => Так что спасибо вам всем за просмотр этого видео. Если ты нравится это видео, просто дайте этому видео огромный жир
[92:48] => большой палец вверх и не забудьте подписаться на канал. Просто иди в youtube.com/roadside кодировщик
[92:54] => и нажмите на кнопку «подписаться». Это мотивирует меня чтобы создавать больше таких потрясающих видео для вас, ребята.