Тёмный

React для НОВИЧКОВ [2023]: первый проект на React JS | Как запустить приложение на React? 

Pomazkov JS
Подписаться 20 тыс.
Просмотров 40 тыс.
50% 1

- Что такое React JS?
- Для чего он нужен?
- С чего начать изучение?
- Как запустить свой первый проект на React?
Всё это вы узнаете, досмотрев ролик до конца. В нём я познакомлю Вас с Реакт с нуля и научу работать с этой библиотекой.
Приятного просмотра! 🔥
➡️ ROADMAP с НУЛЯ до MIDDLE: • Что должен знать JUNIO...
* ТАЙМ-КОДЫ:
00:00 Что вы узнаете
00:27 Что такое React JS?
00:44 Преимущества React
01:41 Что такое Виртуальный DOM
02:41 Как создать проект на React
04:30 Что такое create-react-app
06:34 Обзор шаблона CRA
09:51 Запуск проекта на React
13:20 Что такое JSX
13:56 Подготовка проекта к разработке
15:50 Создание React компонентов
18:17 Что такое React Fragment
20:00 Отображение повторяющихся элементов
21:45 map vs forEach в JS
24:13 Ошибка key в map
25:21 Заключение
* СОЦ. СЕТИ:
👀 Instagram - / pomazkov.js
🚀 Telegram - t.me/pomazkovjs
* ОБО МНЕ:
Меня зовут Арсений Помазков, я - senior frontend-разработчик, начавший карьеру на американской фрилансе-бирже и прошедший путь от «стажёра» до «старшего разработчика».
Я обучился программированию самостоятельно, и моя цель - показать вам, что веб-разработка - это не только перспективно и востребовано, но и очень увлекательно 🔥
#фронтенд #реакт #reactjs #javascript

Опубликовано:

 

1 июн 2024

Поделиться:

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист
Посмотреть позже
Комментарии : 154   
@antonvasyukov763
@antonvasyukov763 11 месяцев назад
Супер доступное и понятно объяснение! Спасибо за проделанную работу! Очень жду продолжение видео по React
@tatigrape747
@tatigrape747 7 месяцев назад
Спасибо огромное за видео, всё четко и не занудно, у меня наконец получилось сделать всё правильно 👍 с радостью продолжу смотреть все видео и тренироваться больше и больше!
@user-qt3lg3st8f
@user-qt3lg3st8f Год назад
Спасибо большое! Лучшее объяснение что я видел и слушал. Просто Браво! Вы большой молодец что создаете качественный и полезный контент!
@annaevlanova6505
@annaevlanova6505 4 месяца назад
Хотим больше про реакт!) Проэкт первый создали, надо же и дальше что то делать)
@user-nn8bc1zi3p
@user-nn8bc1zi3p 8 месяцев назад
Отличное видео! Пожалуйста продолжайте! Все четко, ничего лишнего и реально проснулась )))
@monitor-ym5ho
@monitor-ym5ho 7 месяцев назад
Долго мучался - сздание проекта по другому старому видео, сдесь все получилось. Подписка.
@andreybaev3141
@andreybaev3141 Год назад
Про Vite было бы очень интересно послушать! Спасибо за видео =)
@user-oo9yx9jb6z
@user-oo9yx9jb6z 6 месяцев назад
Отличное видео для быстрого старта. Приятный на слух голос и простая подача 👍
@user-ke5bp3cj8r
@user-ke5bp3cj8r Год назад
Арсений, спасибо за видео. Очень круто и понятно объясняешь, очень приятно слушать! Ждём продолжения!
@ccdeal
@ccdeal 6 месяцев назад
Для старта как мне показалось отличное видео) Спасибо)
@vgshenshin
@vgshenshin Год назад
Круто объясняешь! Хоть я и проходил уже эти темы, повторение не навредит. Очень наглядно показал про CRA 👍
@AprilPictures
@AprilPictures 5 месяцев назад
Все по полочкам объяснил спасибо. Не так как не которые воду льют , а сразу к делу вот это я поддерживаю! Спасибо тебе!
@alexcherepanov6152
@alexcherepanov6152 Год назад
бро, подписался на канал! все по делу, ждем след уроков
@user-bs3rp9cg9t
@user-bs3rp9cg9t 23 дня назад
Базара нет! От души родной как понятно и четко объяснил ❤
@user-kr1fw8bi5t
@user-kr1fw8bi5t 6 месяцев назад
Спасибо за видео, подробно и содержательно!
@mehman.jafari
@mehman.jafari 27 дней назад
Крутой видеоролик, жду ещё по React думаю очень скоро будет видео по React🔥🔥🔥
@aleksey_poplaukhin
@aleksey_poplaukhin Месяц назад
Лучше видео по введению в реакт в мире. Спасибо! Нужно больше видео о реакт)
@user-gi4qw8wf1u
@user-gi4qw8wf1u 7 месяцев назад
Спасибо❤ Ждем еще видео по ReactJs-как принимать и отправлять данные из/в beckend
@skymortem
@skymortem Год назад
Посмотрел твой материал. Блин, парень, продолжай. Очень жаль, что так мало видео пока. Я занимаюсь профессиональной разработкой 15 лет, но совсем в другой области. И сейчас есть необходимость сделать сайт, ищу материалы по фронту. Такой мощной, лаконичной и понятной подачи еще не видел
@nargizagayfullina4062
@nargizagayfullina4062 4 месяца назад
Спасибо за понятное объяснение 🙏
@KirillChayevskiy
@KirillChayevskiy Год назад
Спасибо за видео. Очень хорошая форма подачи. Хотелось бы в такой же понятной форме разобрать вопрос про стейт менеджеры. Когда нужен Redux/MobX, когда ReactContext, а когда можно обойтись без них
@Stre_k0za
@Stre_k0za 4 месяца назад
Это самое толковое объяснение которое я смогла найти на русскоязычном YT за последние 3 дня поисков)) Спасибо и удачи тебе в развитии канала.
@svetlanaandreeva8762
@svetlanaandreeva8762 7 дней назад
Спасибо за урок очень помогает новичкам.
@sohodoll1235
@sohodoll1235 Год назад
зашел чисто лайк поставить) а посмотрю попозже 8-)
@ukrainianigor
@ukrainianigor 10 месяцев назад
Очень круто инфу доносишь, чувак хорош!!!
@VagonFactov
@VagonFactov 9 месяцев назад
Дякую. Гарний відос для нульового старту реакт 🤙
@dimitrusmeleskausas2086
@dimitrusmeleskausas2086 8 месяцев назад
спасибо! жду еще про реакт!
@dealhubpro
@dealhubpro Год назад
Спасибо за урок. А то начал было изучать nextjs, но понял что без знаний реакта там делать нечего. Урок подан отлично, обычно никто не объясняет что и для чего, а сразу начинают что то сложное городить.
@neobulk3761
@neobulk3761 2 месяца назад
Спасибо, очень доходчиво!
@raiska.88
@raiska.88 4 месяца назад
Отличный урок!
@user-wt7rz2nj7e
@user-wt7rz2nj7e 3 месяца назад
Очень интересный контент делаешь, продолжай в том же духе !
@user-sr9bw8nm3z
@user-sr9bw8nm3z Месяц назад
Спасибо! все понятно!
@user-of1nn3kf5c
@user-of1nn3kf5c Год назад
всё четко объяснил, спасибо
@rea-55
@rea-55 5 месяцев назад
Спасибо, отлично объясняешь! Голосую за Vite!😄
@spiderokjs
@spiderokjs 2 месяца назад
Чувак, ты лучший!
@user-xo8bo9se5e
@user-xo8bo9se5e Год назад
Спасибо! Крутой обзор!
@mishaudalov9845
@mishaudalov9845 10 месяцев назад
мужик, как же ты хорош!
@tetianatryhub505
@tetianatryhub505 День назад
Как все последовательно, доходчиво! Просто восторг! Спасибо) Лучшее изложение информации!
@pomazkovjs
@pomazkovjs День назад
На канале вчера вышла обновленная версия этого видео - расширенная, с более современным инструментов. Советую посмотреть по горячим следам, будет видна разница как раз)
@eugeneskrypnyk7396
@eugeneskrypnyk7396 Год назад
Спасибо БОЛЬШОЕ)!
@user-km3bz8pe9z
@user-km3bz8pe9z 3 месяца назад
Очень доступно😁
@exelione2229
@exelione2229 6 месяцев назад
Доступно и понятно, спасибо. Продолжай, у тебя хорошо получается. Хочу много уроков от тебя по реакту и JS
@pomazkovjs
@pomazkovjs 6 месяцев назад
Прямо сейчас готовится ролик по this и еще много контента 🙌🏼
@MrXrey2020
@MrXrey2020 2 месяца назад
Вы очень круто объясняете жду не дождусь новых видео про реакт
@yan_zaharov
@yan_zaharov 8 месяцев назад
Шикарнейший гайд по Реакту
@Kickmin
@Kickmin 9 месяцев назад
Очень круто рассказал, низкий поклон тебе, теперь я понял! Лучшее объяснение на русско язычном ютубе!
@namalkin1981
@namalkin1981 Месяц назад
Красавец, спасибо
@armminas3186
@armminas3186 3 месяца назад
интересно было земляк
@kell7505
@kell7505 Год назад
Видео очень понятное и интересное! Легкая подача материала позволяэт лучше усвоит урок! Скажи пожалуйста, можем ли мы использовать в переменой значения PRIMARY KEY, AUTOINCREMENT?
@user-pe7dz5xg7v
@user-pe7dz5xg7v Год назад
В поддержку, хорошо объясняешь
@moonsev
@moonsev 10 месяцев назад
Приятно смотреть, 🎉
@gloomly2759
@gloomly2759 Год назад
Огромное спасибо рекомендациям Ютуба за такую находку, а также большое спасибо автору за контент
@leonidserafimovich4844
@leonidserafimovich4844 9 месяцев назад
посмотрел 6 минут и уже узнал больше чем из всех видио на ютубе!! долби брат!!!
@eugeneskrypnyk7396
@eugeneskrypnyk7396 Год назад
ОЧЕНЬ жду следующий ролик по реакту. Надеюсь будет полный курс для джуна. На ютубе много курсов но они либо не самые свежие +4 года либо рассказывают как попало.
@user-ev8yn9dn6v
@user-ev8yn9dn6v 7 месяцев назад
Не пишу комменты, но тут не смог удержаться - СПАСИБО!!!! лайк подписка. У тебя талант. Записался на платные курсы, ни бум бум. на них react-vite устанавливали, а тут что так и не понял.
@A_A_A182
@A_A_A182 Год назад
Хорошее вводное видео, спасибо
@user-ci5fn7js4x
@user-ci5fn7js4x Год назад
Хорошо объясняешь, спасибо
@user-tq2lm6sn1t
@user-tq2lm6sn1t 7 месяцев назад
Ты суппер крутой! Спасибо!
@vyacheslavm.9557
@vyacheslavm.9557 Месяц назад
Спасибо👍
@trimberg
@trimberg Год назад
спасибо! лучший подход, когда новое видео?
@Igor_UA
@Igor_UA 4 месяца назад
Ай, молодец )))
@yokooomori2439
@yokooomori2439 Месяц назад
Ну , что тут сказать 140 коментов сами за себя говорят, это действительно лучшее видео на ютуб по реакту. У меня всё получилось, всё заработало, всё понятно. Можно же так объяснять, вот бы всегда всё шло так как в этом видео) Ну тут определённо лайк, подписка со всех аккаунтов , рассылка всем друзьям и огромный респект! СПАСИБО!!!!!!
@alexandregorov3239
@alexandregorov3239 11 месяцев назад
Я посмотрел 4 или 5 видео по типу "Реакт для новичков" и только с твоего объяснения понял, спасибо тебе большое!
@pomazkovjs
@pomazkovjs 11 месяцев назад
Воу, огонь! Очень рад слышать) Спасибо!
@namerrorone2890
@namerrorone2890 Год назад
Очень понятно объяснил, для чайников, прошу продолжай)
@daneelradaev1440
@daneelradaev1440 Год назад
спасибо за интересное и полезное видео
@andreivelento9327
@andreivelento9327 8 месяцев назад
Супер!
@Kumaradji
@Kumaradji 7 месяцев назад
спасибо болльшое за видео!
@user-gh5dz4ue8n
@user-gh5dz4ue8n 5 месяцев назад
Привет Походу самый понятный вводный урок по React на RU-vid Был рад пройти твой авторский курс по реакт Красава, так держать Подписался, поставил лайк, написал коммент
@pomazkovjs
@pomazkovjs 5 месяцев назад
Огонь, спасибо!)
@ruru6778
@ruru6778 5 месяцев назад
Очень хочется от вас все о реакте 🙏🙏🙏
@FF-gq3hm
@FF-gq3hm Год назад
крутой контент!
@1oky
@1oky Год назад
качество видео и подача супер! может что то про собесы запишешь или про первую работу?
@pomazkovjs
@pomazkovjs Год назад
Спасибо! Принято, подумаю над идеями)
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Спасибо большое очень понятное объяснение
@pomazkovjs
@pomazkovjs Год назад
Всегда пожалуйста!
@user-wx1cj9ln8v
@user-wx1cj9ln8v Год назад
Хорошо обьясняешь. Я бы посмотрел от тебя разбор Event Loop
@sergejchap62
@sergejchap62 3 месяца назад
Спасибо за видео. Про Vite также интересно. Так понимаю Node.Js - это сервер поддержки проекта. ReacJs работает лишь с этим сервером. А не Nginx или другими? Извините за наивный вопрос.
@asaiku
@asaiku 11 месяцев назад
Все круто! Давай теперь про vite
@ruru6778
@ruru6778 5 месяцев назад
Вы очень крутой!!!!
@alexandrkiriluk5868
@alexandrkiriluk5868 9 месяцев назад
Спасибо, что открыл дверь и простелил дорожку в мир реакт )) Есть курс свой ?
@johnnguyen5510
@johnnguyen5510 10 месяцев назад
супер контент/ жаль что мало его пока что
@ispeak9571
@ispeak9571 10 месяцев назад
Засыпал под твой видос, после слов "мы не будем ничего удалять из стартового проекта как большинство ютуберов" проснулся, подписался, поставил лайк. Чел я слежу за тобой. Делай контент ❤
@RamaRama-qv3jo
@RamaRama-qv3jo Год назад
Было бы здорово, если ты выпустил видео про работу с многомерными ассоциативными массивами в React TS.
@Shah.livestream
@Shah.livestream 10 месяцев назад
Спасибо
@diggerdog001
@diggerdog001 Год назад
Арсений, будет продолжение этих обучающих роликов про реакт? Или ты просто для ознакомления сделал? Мне понравилась манера речи у тебя, мне прям все понятно как ты объясняешь
@pomazkovjs
@pomazkovjs Год назад
Планирую сделать продолжение, да) Спасибо!
@AntonioBenderas
@AntonioBenderas Год назад
​@@pomazkovjs 🔥
@xflyiwnl2537
@xflyiwnl2537 8 месяцев назад
@@pomazkovjsесть новости?
@brendi3884
@brendi3884 Год назад
продолжай, пожалуйста!
@jlakamka
@jlakamka 6 месяцев назад
Вот это тут конкурентов, конечно... :DD
@user-gv7km2vz1r
@user-gv7km2vz1r 5 месяцев назад
спасибо
@user-ft1ts1yz8t
@user-ft1ts1yz8t 8 месяцев назад
Я хорошо знаю Vue, Nuxt. Нужно ли изучать react, next ?
@faruhiuuu6015
@faruhiuuu6015 Год назад
Спасибо за видео :) А можешь сделать видео о react-native!!!
@pomazkovjs
@pomazkovjs Год назад
Всегда пожалуйста) Эта тема мне самому интересна, но боюсь, что не смогу полноценно раскрыть её - продакш-опыта с реакт-нейтив у меня нет. Спасибо за предложение, в любом случае!
@gregdmitriev2784
@gregdmitriev2784 Год назад
круто разложил, дякую 👍👍 вподобайка + подписулька )) касательно "key" - считается плохой практикой передавать id в key.
@pomazkovjs
@pomazkovjs Год назад
id - это, как правило, неменяющийся идентификатор, поэтому передавать его в качестве key - это лучшая практика 🙂 Плохой практикой считается передавать индекс в key, так как индекс элемента массива как раз может измениться, если мы удалим что-то из массива или добавим в начало
@user-jr9xk8zc8l
@user-jr9xk8zc8l Месяц назад
Вау :)
@farkhadkuramschin6962
@farkhadkuramschin6962 Год назад
Про Git систему версий было бы очень интересно послушать!
@pomazkovjs
@pomazkovjs Год назад
Есть в планах!
@theindustrialbehemothcente3823
@theindustrialbehemothcente3823 5 месяцев назад
Наконец-то нашел хороший курс Думал, что реакт это какая-то сложная чертовшина, но оказалось что с основами хтмл, жс, и питона(больше всего умею писать на C#, второе место С++) все понимаю! UPD : жаль, что это всеголишь вводное видео, хотелось бы курс от вас
@pomazkovjs
@pomazkovjs 5 месяцев назад
Спасибо! Собираюсь вернуться к нему и продолжить, подписывайтесь и следите 🙌🏼
@DimaMelom
@DimaMelom 9 месяцев назад
На windows не подгружаются папки public и crs. Node v (18.17.1 LTS)
@alexmakeev6024
@alexmakeev6024 5 месяцев назад
Thanks
@user-lm9ee1gn5p
@user-lm9ee1gn5p Год назад
Будет ли продолжение ?
@MrErl
@MrErl Год назад
Жду видео про промисы))
@pomazkovjs
@pomazkovjs Год назад
Будет)
@AntonioBenderas
@AntonioBenderas Год назад
А может тебе ещё prototype и [[proto]] насыпать?))
@diggerdog001
@diggerdog001 Год назад
Про Vite нужен гайд, спасибо!
@HyndoDristalix14
@HyndoDristalix14 Год назад
Согласен
@rav6732
@rav6732 4 месяца назад
Мир вам! Можете сделать урок по Вит как пользоваться его Реакте
@user-pm8dv5bw6g
@user-pm8dv5bw6g Год назад
голосую за vite)))
@triumphant5912
@triumphant5912 Год назад
Крутой контент, можешь сделать видео визуальное понимание года, очень было бы круто. Разобрать какой нибудь проект с нуля))
@pomazkovjs
@pomazkovjs Год назад
Спасибо! Не совсем понял про визуальное понимание, разверни немного подробнее мысль, пожалуйста)
@triumphant5912
@triumphant5912 Год назад
@@pomazkovjs не года а кода))) Просто я как начинающий разработчик сталкиваюсь с проблемой, что когда меня ставят на новый проект, бывает очень тяжело понимать его. Найдешь локализацию проблемы, не можешь понять синтаксис, поймешь синтаксис, проблема с пониманием логики. Да конечно опыт играет главную роль, но техническая шаги с этим очень бы помогали. В твоих видосах ты придаешь значения деталям, а это очень важно для начинающих
@pomazkovjs
@pomazkovjs Год назад
@@triumphant5912 отличная идея, на самом деле! Надо подумать, как это реализовать нескучно и эффективно, и сделать) Спасибо!
@triumphant5912
@triumphant5912 Год назад
@@pomazkovjs
@user-md3ko4sb4i
@user-md3ko4sb4i 6 месяцев назад
VirtualDOM сравнивается не с реальным DOM. Когда произошли изменения(изменилось состояние приложения), создается новый virtualDOM(легковесная копия реального DOM). Новая версия virtualDOM сравнивается со старой. Вычисляются "узлы", которые изменились. И на основе этих узлов изменяется части реального DOM, которые подверглись изменению.
@coolrash
@coolrash 8 месяцев назад
Спасибо! Пожалуйста ещё видеоуроков по реакту
@user-vf3zv8st1q
@user-vf3zv8st1q 5 месяцев назад
is defined but never used no-unused-vars вот такое высвечивается, не высвечивается Video List
Далее
React 01: Создание проекта
12:54
Просмотров 9 тыс.
Экосистема React.js 2023
12:45
Просмотров 43 тыс.
I Built 4 SECRET Rooms In ONE COLOR!
29:04
Просмотров 7 млн
She’s Giving Birth in Class…?
00:21
Просмотров 6 млн
Хочу стать Junior React
18:42
Просмотров 3,9 тыс.
Что нужно знать из JS перед React
32:50
I Built 4 SECRET Rooms In ONE COLOR!
29:04
Просмотров 7 млн