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

  Рет қаралды 60,506

Web Developer Blog

Web Developer Blog

Күн бұрын

Пікірлер: 125
@sofkozl
@sofkozl 3 жыл бұрын
Как новичок скажу - все очень понятно! Наконец начинаю выстраивать четкую структуру в голове, что такое реакт и как с ним работать. Большое спасибо!
@SNSDfOu
@SNSDfOu Жыл бұрын
друг, как успехи нау?
@reyping6500
@reyping6500 Жыл бұрын
Нет, тяжело объясняет. Я на прошлом уроке не понял чем отличаются функции даже
@ВераСудницына-к8г
@ВераСудницына-к8г 4 жыл бұрын
Огромное спасибо от всех тех, кто не особо любит всяческие инструкции и документации =)) После твоих объяснений понятнее)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Приятно
@mdrama9989
@mdrama9989 4 жыл бұрын
Вместо прописываний кучи байндов можно методы создавать с помощью стрелочных функций и тогда им сразу автоматически this привяжется.
@GagikHarutyunyan_dev
@GagikHarutyunyan_dev 4 жыл бұрын
Хотел то же самое написать. Только у стрелок нету своего контекста и из за этого ссылается на уровнь выше
@ThePredsedatel
@ThePredsedatel 3 жыл бұрын
начал реакт вчера. посмотрел что надо байнд добавить и только шум
@dendenowich4199
@dendenowich4199 2 жыл бұрын
Спасибо вам ! Очень интересные уроки! Намного понятнее стало чем после доков из реакт. Привет из 11.5.2022))
@SuprunAlexey
@SuprunAlexey 2 жыл бұрын
Все актуально
@Duh280
@Duh280 Жыл бұрын
А тебе привет из 24 октября 2023. Надеюсь Реакт тебе до сих пор интересен💪
@nastassia9601
@nastassia9601 3 жыл бұрын
Спасибо за видео, немного сложновато для новичков. Слушала на скорости 0,75. много раз переслушивала, параллельно делала конспект и переписывала коды не только в программу, но и в тетрадь. На одно видео потратила около двух часов. И случилось чудо - всё стало понятным. Спасибо за ваш труд)
@akuma8865
@akuma8865 4 жыл бұрын
Очень интересные уроки, а можно код в конце каждого урока выложить для просмотра?
@ulianao1875
@ulianao1875 3 жыл бұрын
Отличные уроки, для знающих основы верстки и основы JS все понятно, смотря ваши уроки и параллельно читая документацию все встает на свои места. Grasias )))
@stormd2902
@stormd2902 3 жыл бұрын
В защиту автора хочу сказать, что из всех видосиков, что я смотрел по теме state, в этом видео все довольно просто и понятно, первый раз было не очень, потом второй раз все стало ясно. Код я прописал, все работает. Ребята, чтобы React легко давался, надо знать основы JS и HTML. Автору спасибо за простое и доступное объяснение.
@vladislav.c
@vladislav.c 4 жыл бұрын
Спасибо вам конечно за проделанную работу, но для новичка это сложно.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
понимание придет!
@vladislav.c
@vladislav.c 4 жыл бұрын
@@SuprunAlexey Очень на это надеюсь :)
@NewUserThisNewUser
@NewUserThisNewUser 2 жыл бұрын
@@vladislav.c как ваши дела с реакт?
@vladislav.c
@vladislav.c 2 жыл бұрын
@@NewUserThisNewUser С реактом как то не пошло. Переключился на VUE. Тут как то всё пошло . Либо с подачей материала повезло, либо сам по себе попроще будет.
@frexxx-7
@frexxx-7 2 жыл бұрын
@@vladislav.c устроились ли на работу куда-то?
@nikita1c
@nikita1c Жыл бұрын
Просто и информативно. Спасибо за ваши уроки!
@Stankevich
@Stankevich 4 жыл бұрын
Если честно мне мало что понятно, так как я новичок. Возможно это крутой урок для тех, кто уже имеет какие-то основы и опыт работы, но мне лично мало что понятно. Хочется более подробно узнать почему ты пишешь то или иное в коде и почему, по больше разжовывать по сути материал.
@gamerecords_site
@gamerecords_site 3 жыл бұрын
Практика в помощь )
@ricojohn8249
@ricojohn8249 3 жыл бұрын
изучите Java script, тогда всё станет понятно.
@artem_bohak
@artem_bohak Жыл бұрын
на 8:32 в this.setState в теле стрелочная функция должна возвращать объект {visibility: !state.visibility}, у меня вопрос, почему мы тут не написали !this.state.visibility? setState хранит в области видимости state и потому нам не надо явно прописывать this.state? Спасибо большое за видео!
@МихаилГоляков-е2л
@МихаилГоляков-е2л 3 жыл бұрын
Внатуре четко, спасибо большое, все понятно объяснили
@zhenya2350
@zhenya2350 4 жыл бұрын
воу-воу, 3 видео за сутки! Алексей, вы куда так разогнались ? P.S: Спасибо за твои видео
@artservice08
@artservice08 3 жыл бұрын
Посмотрел, но так и не понял зачем bind(this). Вы как-то бегло прошлись по нему. Я пробовал без этой записи и все работает, но зачем тогда она нужна (а раз пишете, то ведь есть логика)?
@СлаваКравченко-в5р
@СлаваКравченко-в5р 3 жыл бұрын
ЕСТЬ, в современном учебнике глянь learn.javascript.ru/bind. С помощью bind можно сказать мы создаём другую функцию, в которой this всегда равен тому, что мы в скобки передаём. А так как при передаче в обработчик функции функция вызовется без контекста компонента, если так можно сказать, то нам необходимо его задать явно, например с помощью bind.
@Vitalya65
@Vitalya65 2 жыл бұрын
Добрый день, подскажи пожалуйста. Если мы добавим к нашим сгенерированным - кнопку для того чтобы удалять строку. Как её реализовать ? textdel text
@kolya6971
@kolya6971 4 жыл бұрын
Когда будем продолжать делать сайт на Reactjs из подключением библиотек и всего функционала такого как форма отбратной связи??
@oblomoff1
@oblomoff1 4 жыл бұрын
Хороший материал. Спасибо за работу
@__-np6sr
@__-np6sr Жыл бұрын
Привет. Подскажи, пожалуйста как плагин для VSCode называется который двумя кликами копипастить текст?
@НиколайГроза-е9н
@НиколайГроза-е9н Ай бұрын
я как новичок говорю: Ты красава, спасибо
@suhoboy1
@suhoboy1 4 жыл бұрын
Топовый видос, до конца мне помог понять, как работает state. Но он реально для тех, кто уже немного поработал с ним, нужно больше разжёвывать для новичков. А так спасибо тебе большое!
@JanTalan
@JanTalan Жыл бұрын
отличные уроки коротко без воды .но понятно.респект..у меня когда соединяешь через bind например ..increment = this.increment.bind(this); первая this показывает ошибку ..убираю все нормально..может последние версии ?
@HilloSecond
@HilloSecond 3 жыл бұрын
Предположим у нас в state массив объектов. Вопрос, нам нужно конструировать абсолютно новый массив объектов с новым свойством, или мы можем изменить только нужное нам свойство в нужном объекте?
@denissavast
@denissavast 2 жыл бұрын
Огромное благодарю !
@stivandpolli9117
@stivandpolli9117 3 жыл бұрын
Спасибо. Хороший урок.
@nereonneo
@nereonneo 4 жыл бұрын
а почему пример только на классовых компонентах а не на функциональных
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Yakub Yakubov завтра выйдет на функциональных
@Vadimchaa
@Vadimchaa 2 жыл бұрын
@@SuprunAlexey А где?
@yuliasilber2123
@yuliasilber2123 2 жыл бұрын
Спасибо за видео. Только мне совсем понятно, зачем использовать bind(this) в примере с именем..?
@bugaga8144
@bugaga8144 3 жыл бұрын
Спасибо, кратко и понятно
@primaryworm5
@primaryworm5 3 жыл бұрын
Второй урок: ну вот три спички, мы одну отнимаем, получаем две Третий урок: вот коробок, теперь его нет, почему объясню чуть позже
@АлександрМорозов-р1х
@АлександрМорозов-р1х 4 жыл бұрын
А привязку контекста нельзя как-то с помощью стрелочных функций разрулить без bind?
@happygraymangamer6067
@happygraymangamer6067 3 жыл бұрын
У меня такой же вопрос, если знаешь ответ подскажи))))
@AbrorAbdulkasimov-kd5xt
@AbrorAbdulkasimov-kd5xt Жыл бұрын
спасибо за урок классно обяснили
@ВладимирГугин-ш7щ
@ВладимирГугин-ш7щ 4 жыл бұрын
Из видео складывается впечатление как будто реакт делался не для того, что бы упростить процесс, а что бы наоборот - усложнить
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Та нет
@TheMakerdream
@TheMakerdream 4 жыл бұрын
Примеры хорошие. Но их легче на чистом js сделать.
@marinakhadieva7816
@marinakhadieva7816 2 жыл бұрын
Очень не хватает таймкодов и банально ссылок на предыдущий и следующий урок. Не нашла плейлиста на этот курс.
@olegpavlov4329
@olegpavlov4329 4 жыл бұрын
Хорошая подача материала !!!
@Jetixxxxxxxxxx
@Jetixxxxxxxxxx 3 жыл бұрын
Пришел к тебе с официальных доков и не пожалел!
@ixen80
@ixen80 2 жыл бұрын
А почему к методам класса надо обращаться через this? а не напрямую.. например increment ... я попробовал не работает.. но почему?
@yevgeniserebriakov7641
@yevgeniserebriakov7641 4 жыл бұрын
Отлично. Быстро и понятно.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Спасибо
@antonsedchenko6332
@antonsedchenko6332 4 жыл бұрын
Отличный урок, спасибо!
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Спасибо !!
@StasKantor
@StasKantor 4 жыл бұрын
Спасибо большое за Ваш труд
@danyamaslov23
@danyamaslov23 2 жыл бұрын
У меня не работает последнее приложение с инкрементами и дикриментами, как мне можно прислать фаил или фото на проверку наличия ошибок?
@inigoloy
@inigoloy 4 жыл бұрын
Расскажи, пожалуйста, как через Apollo пробрасывать данные в React-компонент из MongoDB.
@SeniorHuguenot
@SeniorHuguenot Жыл бұрын
Жаль что я так сильно затянул с изучением реакта, теперь в ускоренном темпе сижу учу его и дипломную переписываю
@srt2046
@srt2046 4 жыл бұрын
На этот раз слишком сложно, Алекс. Пожалуйста рассказывай про каждую позицию подробнее
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Вот напишите что именно не понятно, какая строка?
@srt2046
@srt2046 4 жыл бұрын
@@SuprunAlexey сам код понятен, но непонятны сами state и props. Что это такое, за что отвечают, какие механизмы. Архитектура непонятна, в общем. А так, я постоянный зритель твоего канала) всё делаешь очень годно и доступно!
@antonsedchenko6332
@antonsedchenko6332 4 жыл бұрын
@@srt2046 тут скорее нужно больше потренироваться с классами, конструкторами классов и методами классов в js, тогда всё понятнее будет.
@indigosay
@indigosay 4 жыл бұрын
В каких проектах можно обойтись без реакта? С помощью шаблонизатора pug например)
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Посмотрите у меня одно из последних видео что такое реакт
@indigosay
@indigosay 4 жыл бұрын
@@SuprunAlexey да я смотрел, там нет ключевых моментов что такое реакт)
@AchtungBaby_87
@AchtungBaby_87 2 жыл бұрын
этот урок еще актуален? super props...кажется уже просто state = {}
@НиколайСеврук-ф7в
@НиколайСеврук-ф7в 4 жыл бұрын
А какая у тема тема в Sublime Text для Css/html/js? Мне она очень понравилась, буду рад если напишешь название.
@Алексей-п9л6н
@Алексей-п9л6н 4 жыл бұрын
Вообще-то на видео Visual Studio Code, тема похожа на Dark(Visual Studio)
@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 жыл бұрын
И ещё вопрос почему в в случаях проращивания и убывания прописывается функция (стрелочная функция), а в случае обнуления ничего не пишем
@-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 Все будет работать
@artemdme5164
@artemdme5164 3 жыл бұрын
а как мне сделать так, чтобы счетчик был, например, по модулю 3. Мне же надо тогда в инкременте проверять значение count Не понимаю синтаксис. Ну по любому там иф надо писать, но что писать в ифе непонятно.
@ThePredsedatel
@ThePredsedatel 3 жыл бұрын
handleClick = () => { this.setState(prevState => { return {count: prevState.count + 1} }) }
@Vladikslavik
@Vladikslavik 3 жыл бұрын
Зачем дублировать кнопку при visibility?
@ok_kov
@ok_kov 2 жыл бұрын
а как сделать, чтоб при значении state=0 и нажимая на кнопку decrement не разрешать отрицательные значения?
@ДенисХаритончик-м8и
@ДенисХаритончик-м8и 11 ай бұрын
по сути просто условие прописать
@romanown1361
@romanown1361 4 жыл бұрын
все конечно хорошо. но в 2020 году bind писать при наличии стрелочных функций как-то не очень. а для начинающих что это понять что то одинаково, но все же лучше сразу запоминать как более прогрессивно.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
У всех своё мнение
@sampearson3752
@sampearson3752 4 жыл бұрын
Бро твои видосы просто бомба для тех кто ищет годные уроки по react .Тебе огромно спасибо . Подписка + Лайк.Еще раз спасибо
@ITime_shorts
@ITime_shorts 4 жыл бұрын
Если у меня максимально простой метод. Мне не нужны свойства класса и этот метод я дальше никуда не передаю в другие компоненты, нужно ли мне обязательно его биндить в конструкторе?
@gagikkhachatryan3141
@gagikkhachatryan3141 4 жыл бұрын
Если не делать bind то this не будет указать на твоего класса ( а если более правильнее не будет указать на объекта который был создан с твоего класса ) , то-есть если хочешь достать свойства то должен делать bind, или как уже в комментариях написали, можешь методы создавать с помощью стрелочных функций и не делать никакой bind
@РоманВладимирович2024
@РоманВладимирович2024 4 жыл бұрын
А есть ли репозиторий с кодом?
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
Нет
@Fenjkeee
@Fenjkeee 4 жыл бұрын
Спасибо за видео.
@SuprunAlexey
@SuprunAlexey 4 жыл бұрын
=)
@igordor4576
@igordor4576 3 жыл бұрын
У меня при клике и появлении надписи кнопка становится маленькой. Кто знает почему?
@ВалерияНовикова-в8ц
@ВалерияНовикова-в8ц 3 жыл бұрын
Спасибо за уроки, все объясняется очень доступно для новичков в работе с React, а кому сложно, нужно подтянуть ООП и JavaScript как минимум, иначе не поймете ничего!!!!
@zulagwido1309
@zulagwido1309 4 жыл бұрын
Куда ты так торопишься? Мало того, что не успеваешь за твоими словами, так ещё и на качестве твоего кода это отражается. И почему не назвал компоненты как-то по-нормальному? Почему за отступами не следишь - всё скачет туда-сюда. Новички за тобой не успеют.
@tehnoblog6430
@tehnoblog6430 2 жыл бұрын
Да ну, он все хорошо объясняет, хоть я в этом и шарю, просто вспомнить смотрю, дано не работал с реактом , все классно обьясняет, тот кто захочет поймет, есть видосы и хуже где реально тип гонит и не объясняет что к чему
@imkaufimka8642
@imkaufimka8642 4 жыл бұрын
Может кто-то сможет объяснить. В state есть св-во color, могу ли я его менять не через setState, а через this.state.color : ...?
@antonsedchenko6332
@antonsedchenko6332 4 жыл бұрын
Не изменяйте состояние напрямую ! В следующем примере повторного рендера не происходит: // Неправильно this.state.color = 'red'; Вместо этого используйте setState(): // Правильно this.setState({color: 'red'}); Конструктор - это единственное место, где вы можете присвоить значение this.state напрямую.
@lordunitaz
@lordunitaz 4 жыл бұрын
Я зеленый и только учусь, но зачем подобным образом писать стейты с конструкторами, если стейт и его изменение можно определить через React.useState ? Синтаксис куда проще.
@КириллШелдер
@КириллШелдер 3 жыл бұрын
Зачем bind если можно использовать стрелочную функцию
@-web2378
@-web2378 3 жыл бұрын
Зачем писать на Реакт если можно использовать Vue?) так же и тут.
@DH-yv8um
@DH-yv8um 2 жыл бұрын
Для новичка очень тяжело понять такой подход лучше функциональный компонент .
@artemadeev7444
@artemadeev7444 3 жыл бұрын
сложно. Надо больше разжевывания. Пойду другое видео искать.
@lackevil3730
@lackevil3730 4 жыл бұрын
Как выучить JQuery ? Спасибо.
@bulatm9699
@bulatm9699 4 жыл бұрын
Учи js лучше
@aidoskashenov4532
@aidoskashenov4532 4 жыл бұрын
Третий метод надо было назвать не reset а excrement
@АлександрБердышев-с5ы
@АлександрБердышев-с5ы Жыл бұрын
Я слышал, что на классах давно никто не делает...
@ДониёрРахманов-ч1ю
@ДониёрРахманов-ч1ю 4 жыл бұрын
спасибо помогли
@NewDimix
@NewDimix 2 жыл бұрын
Ну со state вообще не разобрались, потому что ни слова о том, как использовать state в функциональных компонентах.
@bormanbormanov3323
@bormanbormanov3323 2 жыл бұрын
Пройдите курс димыча и будет капзда как просто
@brabus765
@brabus765 2 жыл бұрын
это кто? Из фиксиков?Можно по подробней
@ВалерийКуприянов-с8н
@ВалерийКуприянов-с8н 2 жыл бұрын
курс уже не актуален
@SunriseBusinessClub
@SunriseBusinessClub 4 жыл бұрын
Что за чушь с точкой с запятой в новом JS. Уже давно можно выбирать с ; или без.
@callmeromashka
@callmeromashka 3 жыл бұрын
Чел можно было сделать пример ещё интересней не используя Условия можно было выводить или обновлять данные через . innerHTML ну или на скорости это сказывается ?
@skirrsolo4077
@skirrsolo4077 2 жыл бұрын
@hugo-gf8xe
@hugo-gf8xe 3 жыл бұрын
Уроки хорошие НО уже старые
@dogvscatfunny9956
@dogvscatfunny9956 2 жыл бұрын
Не когда тут не поймёшь кто за что отвечает, чушь такую несёт слова не разобрать,
@jedixtv3362
@jedixtv3362 4 жыл бұрын
1
@KGMelis
@KGMelis 4 жыл бұрын
всем го it kamasutra
@Fenjkeee
@Fenjkeee 4 жыл бұрын
Чел не плохой, но смотреть 100 уроков, нет уж, спасибо
@TheKirk1989
@TheKirk1989 Жыл бұрын
мужик, я понимаю о чем ты говоришь, но ты нихера не можешь объяснять, либо сам не врубаешься , либо думаешь что тебя смотрят исключительно middle react dev-ы
017  Маршрутизация на примерах
3:49
Ulukbek Sharshekeev
Рет қаралды 3
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН
React State - это просто! Курс ReactJS
40:26
WebDev с нуля. Канал Алекса Лущенко
Рет қаралды 39 М.
Уроки React Js - Компоненты и свойства Props
10:30
Web Developer Blog
Рет қаралды 79 М.
React  - Курс по React для Начинающих
51:46
Bogdan Stashchuk
Рет қаралды 156 М.
REAL or FAKE? #beatbox #tiktok
01:03
BeatboxJCOP
Рет қаралды 18 МЛН