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

Мы продолжаем курс уроков по React js для начинающих и в этом видео мы рассмотрим состояние компонента. State отвечает за состояние компонента, его можно определять, можно в последствии и изменять с помощью метода setState, все это на примерах я покажу и на практике расскажу.
Курс «Python для веб-разработки» от SkillFactory: clc.to/tiIJTQ

[@user-kj6yy5wx3s]

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

[@SuprunAlexey]

Приятно

[@sofkozl]

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

[@SNSDfOu]

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

[@reyping6500]

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

[@dendenowich4199]

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

[@SuprunAlexey]

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

[@Duh280]

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

[@ulianao1875]

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

[@mdrama9989]

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

[@GagikHarutyunyan_dev]

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

[@ThePredsedatel]

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

[@user-hm6qe5yh3g]

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

[@oblomoff1]

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

[@nastassia9601]

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

[@nikita1c]

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

[@zhenya2350]

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

[@StasKantor]

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

[@stivandpolli9117]

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

[@antonsedchenko6332]

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

[@SuprunAlexey]

Спасибо !!

[@akuma8865]

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

[@bugaga8144]

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

[@suhoboy1]

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

[@vladislav.c]

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

[@SuprunAlexey]

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

[@vladislav.c]

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

[@NewUserThisNewUser]

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

[@vladislav.c]

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

[@frexxx-7]

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

[@yevgeniserebriakov7641]

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

[@SuprunAlexey]

Спасибо

[@denissavast]

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

[@olegpavlov4329]

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

[@seriousman109]

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

[@SuprunAlexey]

=)

[@primaryworm5]

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

[@Stankevich]

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

[@user-vf4if2oe7m]

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

[@ricojohn8249]

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

[@AbrorAbdulkasimov-kd5xt]

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

[@user-bh2sz9tz6f]

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

[@stormd2902]

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

[@kolya6971]

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

[@artservice08]

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

[@user-er6ce4il7o]

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

[@Jetixxxxxxxxxx]

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

[@artem_bohak]

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

[@Vitalya65]

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

[@SeniorHuguenot]

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

[@srt2046]

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

[@SuprunAlexey]

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

[@srt2046]

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

[@antonsedchenko6332]

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

[@inigoloy]

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

[@__-np6sr]

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

[@user-rp8oy2kf5d]

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

[@SuprunAlexey]

Та нет

[@TheMakerdream]

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

[@JanTalan]

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

[@yakubyakubov7799]

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

[@SuprunAlexey]

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

[@Vadimchaa]

@@SuprunAlexey А где?

[@sampearson3752]

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

[@yuliasilber2123]

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

[@ITime_shorts]

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

[@gagikkhachatryan3141]

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

[@HilloSecond]

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

[@marinakhadieva7816]

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

[@user-gk6xq8wk3w]

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

[@happygraymangamer6067]

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

[@user-ou8mf6mn4s]

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

[@user-rk7zn5kh4q]

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

[@danyastream2744]

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

[@ixen80]

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

[@DH-yv8um]

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

[@user-ep3it8ed2t]

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

[@romanown1361]

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

[@SuprunAlexey]

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

[@igordor4576]

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

[@aidoskashenov4532]

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

[@Vladikslavik]

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

[@indigosay]

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

[@SuprunAlexey]

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

[@indigosay]

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

[@ok_kov]

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

[@user-tm2gc3fg1m]

по сути просто условие прописать

[@user-tv4mn2fu6x]

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

[@AchtungBaby-io7zl]

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

[@artemdme5164]

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

[@ThePredsedatel]

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

[@user-ge1fh8xl2v]

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

[@SuprunAlexey]

Нет

[@PUBG-sf5en]

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

[@PUBG-sf5en]

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

[@-web2378]

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

[@user-ub5bf8jq8d]

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

[@imkaufimka8642]

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

[@antonsedchenko6332]

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

[@skirrsolo4077]

[@user-mn3sp6om8t]

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

[@jedixtv3362]

1

[@user-zk6hl9si3t]

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

[@-web2378]

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

[@lackevil3730]

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

[@bulatm9699]

Учи js лучше

[@artemadeev7444]

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

[@zulagwido1309]

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

[@tehnoblog6430]

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

[@bormanbormanov3323]

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

[@brabus765]

это кто? Из фиксиков?Можно по подробней

[@user-tv2tw9tu4i]

курс уже не актуален

[@SunriseBusinessClub]

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

[@NewDimix]

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

[@callmeromashka]

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

[@hugo-gf8xe]

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

[@KGMelis]

всем го it kamasutra

[@seriousman109]

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

[@dogvscatfunny9956]

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

[@TheKirk1989]

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