Уроки React Js - State, состояние компонента и примеры

แชร์
ฝัง
  • เผยแพร่เมื่อ 10 ธ.ค. 2024

ความคิดเห็น • 125

  • @sofkozl
    @sofkozl 3 ปีที่แล้ว +13

    Как новичок скажу - все очень понятно! Наконец начинаю выстраивать четкую структуру в голове, что такое реакт и как с ним работать. Большое спасибо!

    • @SNSDfOu
      @SNSDfOu ปีที่แล้ว

      друг, как успехи нау?

    • @reyping6500
      @reyping6500 ปีที่แล้ว

      Нет, тяжело объясняет. Я на прошлом уроке не понял чем отличаются функции даже

  • @ВераСудницына-к8г
    @ВераСудницына-к8г 3 ปีที่แล้ว +16

    Огромное спасибо от всех тех, кто не особо любит всяческие инструкции и документации =)) После твоих объяснений понятнее)

  • @nastassia9601
    @nastassia9601 3 ปีที่แล้ว +5

    Спасибо за видео, немного сложновато для новичков. Слушала на скорости 0,75. много раз переслушивала, параллельно делала конспект и переписывала коды не только в программу, но и в тетрадь. На одно видео потратила около двух часов. И случилось чудо - всё стало понятным. Спасибо за ваш труд)

  • @dendenowich4199
    @dendenowich4199 2 ปีที่แล้ว +8

    Спасибо вам ! Очень интересные уроки! Намного понятнее стало чем после доков из реакт. Привет из 11.5.2022))

    • @SuprunAlexey
      @SuprunAlexey  2 ปีที่แล้ว +5

      Все актуально

    • @Duh280
      @Duh280 ปีที่แล้ว

      А тебе привет из 24 октября 2023. Надеюсь Реакт тебе до сих пор интересен💪

  • @ulianao1875
    @ulianao1875 3 ปีที่แล้ว +1

    Отличные уроки, для знающих основы верстки и основы JS все понятно, смотря ваши уроки и параллельно читая документацию все встает на свои места. Grasias )))

  • @stormd2902
    @stormd2902 3 ปีที่แล้ว +2

    В защиту автора хочу сказать, что из всех видосиков, что я смотрел по теме state, в этом видео все довольно просто и понятно, первый раз было не очень, потом второй раз все стало ясно. Код я прописал, все работает.
    Ребята, чтобы React легко давался, надо знать основы JS и HTML. Автору спасибо за простое и доступное объяснение.

  • @nikita1c
    @nikita1c ปีที่แล้ว

    Просто и информативно. Спасибо за ваши уроки!

  • @mdrama9989
    @mdrama9989 4 ปีที่แล้ว +16

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

    • @GagikHarutyunyan_dev
      @GagikHarutyunyan_dev 4 ปีที่แล้ว

      Хотел то же самое написать. Только у стрелок нету своего контекста и из за этого ссылается на уровнь выше

    • @ThePredsedatel
      @ThePredsedatel 3 ปีที่แล้ว

      начал реакт вчера. посмотрел что надо байнд добавить и только шум

  • @suhoboy1
    @suhoboy1 4 ปีที่แล้ว

    Топовый видос, до конца мне помог понять, как работает state. Но он реально для тех, кто уже немного поработал с ним, нужно больше разжёвывать для новичков. А так спасибо тебе большое!

  • @МихаилГоляков-е2л
    @МихаилГоляков-е2л 3 ปีที่แล้ว +2

    Внатуре четко, спасибо большое, все понятно объяснили

  • @denissavast
    @denissavast 2 ปีที่แล้ว

    Огромное благодарю !

  • @НиколайГроза-е9н
    @НиколайГроза-е9н หลายเดือนก่อน

    я как новичок говорю: Ты красава, спасибо

  • @oblomoff1
    @oblomoff1 4 ปีที่แล้ว +1

    Хороший материал. Спасибо за работу

  • @AbrorAbdulkasimov-kd5xt
    @AbrorAbdulkasimov-kd5xt ปีที่แล้ว

    спасибо за урок классно обяснили

  • @vladislav.c
    @vladislav.c 4 ปีที่แล้ว +11

    Спасибо вам конечно за проделанную работу, но для новичка это сложно.

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +5

      понимание придет!

    • @vladislav.c
      @vladislav.c 4 ปีที่แล้ว +2

      @@SuprunAlexey Очень на это надеюсь :)

    • @NewUserThisNewUser
      @NewUserThisNewUser ปีที่แล้ว

      @@vladislav.c как ваши дела с реакт?

    • @vladislav.c
      @vladislav.c ปีที่แล้ว +1

      @@NewUserThisNewUser С реактом как то не пошло. Переключился на VUE. Тут как то всё пошло . Либо с подачей материала повезло, либо сам по себе попроще будет.

    • @frexxx-7
      @frexxx-7 ปีที่แล้ว

      @@vladislav.c устроились ли на работу куда-то?

  • @bugaga8144
    @bugaga8144 3 ปีที่แล้ว

    Спасибо, кратко и понятно

  • @stivandpolli9117
    @stivandpolli9117 3 ปีที่แล้ว +1

    Спасибо. Хороший урок.

  • @zhenya2350
    @zhenya2350 4 ปีที่แล้ว +12

    воу-воу, 3 видео за сутки!
    Алексей, вы куда так разогнались ?
    P.S: Спасибо за твои видео

  • @artem_bohak
    @artem_bohak ปีที่แล้ว +1

    на 8:32 в this.setState в теле стрелочная функция должна возвращать объект {visibility: !state.visibility}, у меня вопрос, почему мы тут не написали !this.state.visibility? setState хранит в области видимости state и потому нам не надо явно прописывать this.state? Спасибо большое за видео!

  • @yevgeniserebriakov7641
    @yevgeniserebriakov7641 4 ปีที่แล้ว

    Отлично. Быстро и понятно.

  • @Stankevich
    @Stankevich 4 ปีที่แล้ว +31

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

    • @gamerecords_site
      @gamerecords_site 3 ปีที่แล้ว

      Практика в помощь )

    • @ricojohn8249
      @ricojohn8249 2 ปีที่แล้ว

      изучите Java script, тогда всё станет понятно.

  • @antonsedchenko6332
    @antonsedchenko6332 3 ปีที่แล้ว +1

    Отличный урок, спасибо!

  • @akuma8865
    @akuma8865 4 ปีที่แล้ว +14

    Очень интересные уроки, а можно код в конце каждого урока выложить для просмотра?

  • @StasKantor
    @StasKantor 4 ปีที่แล้ว

    Спасибо большое за Ваш труд

  • @sampearson3752
    @sampearson3752 4 ปีที่แล้ว +1

    Бро твои видосы просто бомба для тех кто ищет годные уроки по react .Тебе огромно спасибо . Подписка + Лайк.Еще раз спасибо

  • @Fenjkeee
    @Fenjkeee 4 ปีที่แล้ว

    Спасибо за видео.

  • @olegpavlov4329
    @olegpavlov4329 4 ปีที่แล้ว

    Хорошая подача материала !!!

  • @Jetixxxxxxxxxx
    @Jetixxxxxxxxxx 3 ปีที่แล้ว

    Пришел к тебе с официальных доков и не пожалел!

  • @primaryworm5
    @primaryworm5 3 ปีที่แล้ว +3

    Второй урок: ну вот три спички, мы одну отнимаем, получаем две
    Третий урок: вот коробок, теперь его нет, почему объясню чуть позже

  • @Vitalya65
    @Vitalya65 2 ปีที่แล้ว

    Добрый день, подскажи пожалуйста. Если мы добавим к нашим сгенерированным - кнопку для того чтобы удалять строку. Как её реализовать ? textdel text

  • @kolya6971
    @kolya6971 4 ปีที่แล้ว +3

    Когда будем продолжать делать сайт на Reactjs из подключением библиотек и всего функционала такого как форма отбратной связи??

  • @JanTalan
    @JanTalan ปีที่แล้ว

    отличные уроки коротко без воды .но понятно.респект..у меня когда соединяешь через bind например ..increment = this.increment.bind(this); первая this показывает ошибку ..убираю все нормально..может последние версии ?

  • @artservice08
    @artservice08 3 ปีที่แล้ว +3

    Посмотрел, но так и не понял зачем bind(this). Вы как-то бегло прошлись по нему. Я пробовал без этой записи и все работает, но зачем тогда она нужна (а раз пишете, то ведь есть логика)?

    • @СлаваКравченко-в5р
      @СлаваКравченко-в5р 3 ปีที่แล้ว +1

      ЕСТЬ, в современном учебнике глянь learn.javascript.ru/bind. С помощью bind можно сказать мы создаём другую функцию, в которой this всегда равен тому, что мы в скобки передаём. А так как при передаче в обработчик функции функция вызовется без контекста компонента, если так можно сказать, то нам необходимо его задать явно, например с помощью bind.

  • @HilloSecond
    @HilloSecond 3 ปีที่แล้ว

    Предположим у нас в state массив объектов. Вопрос, нам нужно конструировать абсолютно новый массив объектов с новым свойством, или мы можем изменить только нужное нам свойство в нужном объекте?

  • @ВалерияНовикова-в8ц
    @ВалерияНовикова-в8ц 3 ปีที่แล้ว

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

  • @__-np6sr
    @__-np6sr ปีที่แล้ว

    Привет. Подскажи, пожалуйста как плагин для VSCode называется который двумя кликами копипастить текст?

  • @yuliasilber2123
    @yuliasilber2123 2 ปีที่แล้ว

    Спасибо за видео.
    Только мне совсем понятно, зачем использовать bind(this) в примере с именем..?

  • @АлександрМорозов-р1х
    @АлександрМорозов-р1х 4 ปีที่แล้ว +1

    А привязку контекста нельзя как-то с помощью стрелочных функций разрулить без bind?

    • @happygraymangamer6067
      @happygraymangamer6067 3 ปีที่แล้ว

      У меня такой же вопрос, если знаешь ответ подскажи))))

  • @nereonneo
    @nereonneo 4 ปีที่แล้ว +3

    а почему пример только на классовых компонентах а не на функциональных

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว

      Yakub Yakubov завтра выйдет на функциональных

    • @Vadimchaa
      @Vadimchaa 2 ปีที่แล้ว

      @@SuprunAlexey А где?

  • @marinakhadieva7816
    @marinakhadieva7816 2 ปีที่แล้ว

    Очень не хватает таймкодов и банально ссылок на предыдущий и следующий урок. Не нашла плейлиста на этот курс.

  • @danyamaslov23
    @danyamaslov23 2 ปีที่แล้ว

    У меня не работает последнее приложение с инкрементами и дикриментами, как мне можно прислать фаил или фото на проверку наличия ошибок?

  • @ДониёрРахманов-ч1ю
    @ДониёрРахманов-ч1ю 4 ปีที่แล้ว

    спасибо помогли

  • @SeniorHuguenot
    @SeniorHuguenot ปีที่แล้ว

    Жаль что я так сильно затянул с изучением реакта, теперь в ускоренном темпе сижу учу его и дипломную переписываю

  • @ixen80
    @ixen80 2 ปีที่แล้ว

    А почему к методам класса надо обращаться через this? а не напрямую.. например increment ... я попробовал не работает.. но почему?

  • @srt2046
    @srt2046 4 ปีที่แล้ว +5

    На этот раз слишком сложно, Алекс. Пожалуйста рассказывай про каждую позицию подробнее

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว

      Вот напишите что именно не понятно, какая строка?

    • @srt2046
      @srt2046 4 ปีที่แล้ว +4

      @@SuprunAlexey сам код понятен, но непонятны сами state и props. Что это такое, за что отвечают, какие механизмы. Архитектура непонятна, в общем.
      А так, я постоянный зритель твоего канала) всё делаешь очень годно и доступно!

    • @antonsedchenko6332
      @antonsedchenko6332 3 ปีที่แล้ว

      @@srt2046 тут скорее нужно больше потренироваться с классами, конструкторами классов и методами классов в js, тогда всё понятнее будет.

  • @ВладимирГугин-ш7щ
    @ВладимирГугин-ш7щ 4 ปีที่แล้ว +2

    Из видео складывается впечатление как будто реакт делался не для того, что бы упростить процесс, а что бы наоборот - усложнить

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว +1

      Та нет

    • @TheMakerdream
      @TheMakerdream 4 ปีที่แล้ว +1

      Примеры хорошие. Но их легче на чистом js сделать.

  • @igordor4576
    @igordor4576 3 ปีที่แล้ว

    У меня при клике и появлении надписи кнопка становится маленькой. Кто знает почему?

  • @Vladikslavik
    @Vladikslavik 3 ปีที่แล้ว

    Зачем дублировать кнопку при visibility?

  • @ok_kov
    @ok_kov 2 ปีที่แล้ว

    а как сделать, чтоб при значении state=0 и нажимая на кнопку decrement не разрешать отрицательные значения?

  • @AchtungBaby_87
    @AchtungBaby_87 2 ปีที่แล้ว

    этот урок еще актуален? super props...кажется уже просто state = {}

  • @artemdme5164
    @artemdme5164 3 ปีที่แล้ว

    а как мне сделать так, чтобы счетчик был, например, по модулю 3. Мне же надо тогда в инкременте проверять значение count Не понимаю синтаксис. Ну по любому там иф надо писать, но что писать в ифе непонятно.

    • @ThePredsedatel
      @ThePredsedatel 3 ปีที่แล้ว +1

      handleClick = () => {
      this.setState(prevState => {
      return {count: prevState.count + 1}
      })
      }

  • @romanown1361
    @romanown1361 4 ปีที่แล้ว

    все конечно хорошо. но в 2020 году bind писать при наличии стрелочных функций как-то не очень. а для начинающих что это понять что то одинаково, но все же лучше сразу запоминать как более прогрессивно.

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว

      У всех своё мнение

  • @inigoloy
    @inigoloy 4 ปีที่แล้ว

    Расскажи, пожалуйста, как через Apollo пробрасывать данные в React-компонент из MongoDB.

  • @imkaufimka8642
    @imkaufimka8642 4 ปีที่แล้ว

    Может кто-то сможет объяснить. В state есть св-во color, могу ли я его менять не через setState, а через this.state.color : ...?

    • @antonsedchenko6332
      @antonsedchenko6332 3 ปีที่แล้ว

      Не изменяйте состояние напрямую
      !
      В следующем примере повторного рендера не происходит:
      // Неправильно
      this.state.color = 'red';
      Вместо этого используйте setState():
      // Правильно
      this.setState({color: 'red'});
      Конструктор - это единственное место, где вы можете присвоить значение this.state напрямую.

  • @indigosay
    @indigosay 4 ปีที่แล้ว

    В каких проектах можно обойтись без реакта? С помощью шаблонизатора pug например)

    • @SuprunAlexey
      @SuprunAlexey  4 ปีที่แล้ว

      Посмотрите у меня одно из последних видео что такое реакт

    • @indigosay
      @indigosay 4 ปีที่แล้ว

      @@SuprunAlexey да я смотрел, там нет ключевых моментов что такое реакт)

  • @PUBG-sf5en
    @PUBG-sf5en 3 ปีที่แล้ว

    У меня такой вопрос можно ли в
    increment() {
    this.setState(state => ({
    count: state.count + 1
    }));
    }
    Прописать вместо + 1, просто ++
    Т.к. я попробовал у меня не сработало
    Мои догадки по этому следующее что ++ это сравнимо с присваиванием +=, а к state.count мы ничего не присваиваем, а просто добавляем 1.
    Мне, конечно, не принципиально писать ++, просто интересно почему так не работает, а если и работает то как?
    P.S. Просто хочу углубиться в понимание React'a. Спасибо)

    • @PUBG-sf5en
      @PUBG-sf5en 3 ปีที่แล้ว +1

      И ещё вопрос почему в в случаях проращивания и убывания прописывается функция (стрелочная функция), а в случае обнуления ничего не пишем

    • @-web2378
      @-web2378 3 ปีที่แล้ว

      @@PUBG-sf5en для начала надо разобраться почему в одном моменте идёт стрелочная функция, в другом просто setState и внутри объект. Все просто, когда тебе нужно обновить состояние и при этом тебе неважно, что до этого лежало в state, то ты пишешь setState и внутрь объект передаешь. Оно топорно обновит состояние. А вот когда тебе важно, что мол новое состояние зависит от старого, допустим у тебя счётчик... тебе перед тем как менять состояние на новое необходимо знать, а какое же там состояние сейчас, какая цифра в состоянии находится. То тут получается, что ты хочешь изменить состояние, но при этом оно ЗАВИСИТ от старого, то есть ты возьмёшь старое состояние и прибавишь допустим единицу к нему... тогда надо писать setState и передавать Стрелочную функцию, где она принимает аргумент предыдущего состояния.. это я ответил на второй вопрос и частично на первый. В первом вопросе как раз стрелочная функция и аргумент state. Осталось ответить почему + 1 а не ++. Все просто) в переменной state внутри стрелочной функции находится Старое состояние, мы не имеем право напрямую изменять состояние. То есть я не могу писать state++, оно равносильно state=state + 1 , поэтому надо писать state + 1

    • @ВладимирЕфременко-ж6ч
      @ВладимирЕфременко-ж6ч 2 ปีที่แล้ว

      count: --state.count
      count: ++state.count
      Все будет работать

  • @ITime_shorts
    @ITime_shorts 4 ปีที่แล้ว

    Если у меня максимально простой метод. Мне не нужны свойства класса и этот метод я дальше никуда не передаю в другие компоненты, нужно ли мне обязательно его биндить в конструкторе?

    • @gagikkhachatryan3141
      @gagikkhachatryan3141 4 ปีที่แล้ว

      Если не делать bind то this не будет указать на твоего класса ( а если более правильнее не будет указать на объекта который был создан с твоего класса ) , то-есть если хочешь достать свойства то должен делать bind, или как уже в комментариях написали, можешь методы создавать с помощью стрелочных функций и не делать никакой bind

  • @DH-yv8um
    @DH-yv8um 2 ปีที่แล้ว +1

    Для новичка очень тяжело понять такой подход лучше функциональный компонент .

  • @КириллШелдер
    @КириллШелдер 3 ปีที่แล้ว

    Зачем bind если можно использовать стрелочную функцию

    • @-web2378
      @-web2378 3 ปีที่แล้ว

      Зачем писать на Реакт если можно использовать Vue?) так же и тут.

  • @РоманВладимирович2024
    @РоманВладимирович2024 3 ปีที่แล้ว

    А есть ли репозиторий с кодом?

  • @lackevil3730
    @lackevil3730 4 ปีที่แล้ว +1

    Как выучить JQuery ? Спасибо.

    • @bulatm9699
      @bulatm9699 4 ปีที่แล้ว +2

      Учи js лучше

  • @lordunitaz
    @lordunitaz 4 ปีที่แล้ว

    Я зеленый и только учусь, но зачем подобным образом писать стейты с конструкторами, если стейт и его изменение можно определить через React.useState ? Синтаксис куда проще.

  • @НиколайСеврук-ф7в
    @НиколайСеврук-ф7в 4 ปีที่แล้ว

    А какая у тема тема в Sublime Text для Css/html/js? Мне она очень понравилась, буду рад если напишешь название.

    • @Алексей-п9л6н
      @Алексей-п9л6н 4 ปีที่แล้ว

      Вообще-то на видео Visual Studio Code, тема похожа на Dark(Visual Studio)

  • @zulagwido1309
    @zulagwido1309 4 ปีที่แล้ว +19

    Куда ты так торопишься? Мало того, что не успеваешь за твоими словами, так ещё и на качестве твоего кода это отражается. И почему не назвал компоненты как-то по-нормальному? Почему за отступами не следишь - всё скачет туда-сюда. Новички за тобой не успеют.

    • @tehnoblog6430
      @tehnoblog6430 2 ปีที่แล้ว

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

  • @АлександрБердышев-с5ы
    @АлександрБердышев-с5ы ปีที่แล้ว

    Я слышал, что на классах давно никто не делает...

  • @aidoskashenov4532
    @aidoskashenov4532 4 ปีที่แล้ว +1

    Третий метод надо было назвать не reset а excrement

  • @SunriseBusinessClub
    @SunriseBusinessClub 4 ปีที่แล้ว

    Что за чушь с точкой с запятой в новом JS. Уже давно можно выбирать с ; или без.

  • @artemadeev7444
    @artemadeev7444 3 ปีที่แล้ว +1

    сложно. Надо больше разжевывания. Пойду другое видео искать.

  • @NewDimix
    @NewDimix 2 ปีที่แล้ว

    Ну со state вообще не разобрались, потому что ни слова о том, как использовать state в функциональных компонентах.

  • @bormanbormanov3323
    @bormanbormanov3323 2 ปีที่แล้ว

    Пройдите курс димыча и будет капзда как просто

  • @callmeromashka
    @callmeromashka 3 ปีที่แล้ว

    Чел можно было сделать пример ещё интересней не используя Условия можно было выводить или обновлять данные через . innerHTML ну или на скорости это сказывается ?

  • @skirrsolo4077
    @skirrsolo4077 2 ปีที่แล้ว

  • @dogvscatfunny9956
    @dogvscatfunny9956 2 ปีที่แล้ว +1

    Не когда тут не поймёшь кто за что отвечает, чушь такую несёт слова не разобрать,

  • @jedixtv3362
    @jedixtv3362 4 ปีที่แล้ว

    1

  • @hugo-gf8xe
    @hugo-gf8xe 3 ปีที่แล้ว

    Уроки хорошие НО уже старые

  • @TheKirk1989
    @TheKirk1989 ปีที่แล้ว

    мужик, я понимаю о чем ты говоришь, но ты нихера не можешь объяснять, либо сам не врубаешься , либо думаешь что тебя смотрят исключительно middle react dev-ы

  • @KGMelis
    @KGMelis 4 ปีที่แล้ว

    всем го it kamasutra

    • @Fenjkeee
      @Fenjkeee 4 ปีที่แล้ว +1

      Чел не плохой, но смотреть 100 уроков, нет уж, спасибо