React 12: Поднятие состояния

  Рет қаралды 8,538

Школа web-программирования Constcode

Школа web-программирования Constcode

3 жыл бұрын

В архитектуру приложения на React'е нужно закладывать хранение данных. Несколько независимых друг от друга компонента могут использовать одни и те же данные и очень важно чтобы актуальность этих данных распространялась на все приложение. Для этого нужно поднять состояние до общего родительского компонента.
Наш главный курс "JavaScript старт" - constcode.ru/javascript-start
Бесплатная консультация - constcode.ru/free-lesson
Контакты:
Сайт - constcode.ru
VK - constcode
KZfaq - / @web-constcode6252
Telegram - t.me/constcode
Discord - / discord
Материал урока:
github.com/Aleksey-Danchin/re...
ru.reactjs.org/docs/lifting-s...
ru.reactjs.org/docs/compositi...
ru.reactjs.org/docs/thinking-...

Пікірлер: 31
@homesergei1801
@homesergei1801 3 жыл бұрын
Спасибо!!! За хорошее, понятное, доходчивое объяснение. Приятно и полезно учиться с такими примерами и объяснениями!!!
@web-constcode6252
@web-constcode6252 3 жыл бұрын
Рад стараться!
@outofrange9100
@outofrange9100 3 жыл бұрын
Очень классно, что ты каждый раз проговариваешь мелочи вроде «откроем консоль, чтобы видеть ошибки», «импортируем компонент», несмотря на то, что плейлист подходит к концу, и вроде это уже подразумевается автоматически👍🏼
@web-constcode6252
@web-constcode6252 3 жыл бұрын
Научился! Спасибо, что заметили =))
@alfa_main
@alfa_main 3 жыл бұрын
Лайк и подписка) Очень хорошо объяснил, лучше чем в документации, там уж слишком тяжело написано, а оказалось что все легче чем я думал) Спасибо)
@web-constcode6252
@web-constcode6252 3 жыл бұрын
Документация, на мой взгляд, хорошо написана. Но нужно время и опыт чтобы её читать.
@alfa_main
@alfa_main 3 жыл бұрын
@@web-constcode6252 для новичков не совсем, тяжело понимается мной)
@rolpogo
@rolpogo Жыл бұрын
До конца ролика тлел надежду, что будет исправлено название CiriesList🤦‍♂
@bama2619
@bama2619 Жыл бұрын
Спасибо, из-за скорости не совсем въехал, но принцип понял. Сейчас буду писать код и просматривать видео еще раз с паузами. Буду писать изменения цвета фона компонента при нажатии на кнопку.
@web-constcode6252
@web-constcode6252 Жыл бұрын
Ок, я про скорость тоже понял, что не надо было ускорять. Будут вопросы, пиши
@user-tn3si4yl4h
@user-tn3si4yl4h 9 ай бұрын
На всякий случай тренируюсь и преобразовываю функции в классы. По заданию от урока совместно с классом: class App extends React.Component { constructor(props) { super(props); this.state = { cities: [ { name: 'Москва', describtion: 'Столица России' }, { name: 'Cанкт-Петербург', describtion: 'Культурная столица России' }, ], currentIndex: 0, } this.handlerChangeCity = this.handlerChangeCity.bind(this); this.handlerSelectCity = this.handlerSelectCity.bind(this); } handlerChangeCity (describtion) { this.setState({ cities: this.state.cities.map((city, index) => { if (index === this.state.currentIndex) { return { ...city, describtion, }; } return city; })}); } handlerSelectCity (n) { this.setState({currentIndex: n}); } render () { const currentIndex = this.state.currentIndex; const cities = this.state.cities; return ( ) } } export default function City (props) { const city = props.city; return ( {city.name} props.onChangeCity(e.target.value)} > ); }
@outcast-cr5yy
@outcast-cr5yy 2 жыл бұрын
спасибо, очень полезно.
@web-constcode6252
@web-constcode6252 2 жыл бұрын
Рад стараться)
@petrplotnikov4307
@petrplotnikov4307 2 жыл бұрын
наконец я это победил.. ваше обьяснение очень помогло, спасибо...
@web-constcode6252
@web-constcode6252 2 жыл бұрын
крут
@vanunsakanyan2188
@vanunsakanyan2188 3 жыл бұрын
очень четка обяснено спосибо!!!!
@web-constcode6252
@web-constcode6252 3 жыл бұрын
Спасибо, стараемся
@cradleofkaschenko2057
@cradleofkaschenko2057 3 жыл бұрын
Спасибо!
@web-constcode6252
@web-constcode6252 3 жыл бұрын
Рад стараться =)
@mrirashin
@mrirashin 2 жыл бұрын
А можете поправить ссылку на урок (код) в github? По настоящей ссылке открывается совсем другое.
@web-constcode6252
@web-constcode6252 2 жыл бұрын
По ссылке на github будет возможность выбрать нужную ветку.
@Grishenkovvv
@Grishenkovvv 3 жыл бұрын
Хорошо объясняешь но желательно помедленнее чутка
@web-constcode6252
@web-constcode6252 3 жыл бұрын
Учтем пожелания
@qwe-rty-
@qwe-rty- 2 жыл бұрын
Алексей Щербаков из Зеленограда
@web-constcode6252
@web-constcode6252 2 жыл бұрын
У нас в Зеленограде много ребят с тв и youtube. Алексей Щербаков, Антон Лапенко, Денис Косяков, Сергей Мигельевич Шестепёров, Алексей Данчин. С Тимуром Хафизовом даже в настолки играли.
@dlazder3937
@dlazder3937 4 ай бұрын
describtion...
@devillyach2970
@devillyach2970 2 жыл бұрын
без ускорения и помедленнее
@web-constcode6252
@web-constcode6252 2 жыл бұрын
Ок, спс, бдт
@user-ls2rz4tj6w
@user-ls2rz4tj6w Жыл бұрын
Все классно, только НЕ НУЖНО УСКОРЯТЬ ВИДЕО когда пишешь код! Пожалуйста, не делай больше так.
@web-constcode6252
@web-constcode6252 Жыл бұрын
Можно поставить скорость 0.5x
React 13: Хук useState
23:16
Школа web-программирования Constcode
Рет қаралды 4,4 М.
React 06: Жизненный цикл компонента
11:32
Школа web-программирования Constcode
Рет қаралды 8 М.
NERF WAR HEAVY: Drone Battle!
00:30
MacDannyGun
Рет қаралды 32 МЛН
Tom & Jerry !! 😂😂
00:59
Tibo InShape
Рет қаралды 60 МЛН
Learn About AI for Business Week 2
19:30
Justin Coleman
Рет қаралды 2
React 18: Хук useRef
9:54
Школа web-программирования Constcode
Рет қаралды 9 М.
React 15: Хук useMemo и useCallback
13:38
Школа web-программирования Constcode
Рет қаралды 25 М.
Как создать React JS проект и загрузить его на Github Pages
8:18
Типичный Веб Разработчик
Рет қаралды 5 М.
React 03: Рендер и монтирование
7:04
Школа web-программирования Constcode
Рет қаралды 7 М.
React 07: Обработка событий
14:14
Школа web-программирования Constcode
Рет қаралды 7 М.
React 01: Создание проекта
12:54
Школа web-программирования Constcode
Рет қаралды 9 М.