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

Поділитися
Вставка
  • Опубліковано 31 тра 2024
  • - Что такое 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

КОМЕНТАРІ • 153

  • @antonvasyukov763
    @antonvasyukov763 11 місяців тому +10

    Супер доступное и понятно объяснение! Спасибо за проделанную работу!
    Очень жду продолжение видео по React

  • @tatigrape747
    @tatigrape747 7 місяців тому +1

    Спасибо огромное за видео, всё четко и не занудно, у меня наконец получилось сделать всё правильно 👍 с радостью продолжу смотреть все видео и тренироваться больше и больше!

  • @andreybaev3141
    @andreybaev3141 Рік тому +16

    Про Vite было бы очень интересно послушать!
    Спасибо за видео =)

  • @user-qt3lg3st8f
    @user-qt3lg3st8f Рік тому +6

    Спасибо большое! Лучшее объяснение что я видел и слушал. Просто Браво! Вы большой молодец что создаете качественный и полезный контент!

  • @annaevlanova6505
    @annaevlanova6505 4 місяці тому +4

    Хотим больше про реакт!) Проэкт первый создали, надо же и дальше что то делать)

  • @monitor-ym5ho
    @monitor-ym5ho 7 місяців тому

    Долго мучался - сздание проекта по другому старому видео, сдесь все получилось. Подписка.

  • @user-nn8bc1zi3p
    @user-nn8bc1zi3p 8 місяців тому

    Отличное видео! Пожалуйста продолжайте! Все четко, ничего лишнего и реально проснулась )))

  • @tetianatryhub505
    @tetianatryhub505 10 годин тому

    Как все последовательно, доходчиво! Просто восторг! Спасибо) Лучшее изложение информации!

    • @pomazkovjs
      @pomazkovjs  9 годин тому

      На канале вчера вышла обновленная версия этого видео - расширенная, с более современным инструментов. Советую посмотреть по горячим следам, будет видна разница как раз)

  • @user-ke5bp3cj8r
    @user-ke5bp3cj8r Рік тому

    Арсений, спасибо за видео. Очень круто и понятно объясняешь, очень приятно слушать! Ждём продолжения!

  • @user-oo9yx9jb6z
    @user-oo9yx9jb6z 6 місяців тому +5

    Отличное видео для быстрого старта. Приятный на слух голос и простая подача 👍

  • @AprilPictures
    @AprilPictures 5 місяців тому

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

  • @ccdeal
    @ccdeal 6 місяців тому

    Для старта как мне показалось отличное видео) Спасибо)

  • @vgshenshin
    @vgshenshin Рік тому

    Круто объясняешь! Хоть я и проходил уже эти темы, повторение не навредит. Очень наглядно показал про CRA 👍

  • @user-gi4qw8wf1u
    @user-gi4qw8wf1u 7 місяців тому

    Спасибо❤ Ждем еще видео по ReactJs-как принимать и отправлять данные из/в beckend

  • @user-bs3rp9cg9t
    @user-bs3rp9cg9t 22 дні тому

    Базара нет! От души родной как понятно и четко объяснил ❤

  • @mehman.jafari
    @mehman.jafari 26 днів тому

    Крутой видеоролик, жду ещё по React думаю очень скоро будет видео по React🔥🔥🔥

  • @aleksey_poplaukhin
    @aleksey_poplaukhin Місяць тому

    Лучше видео по введению в реакт в мире. Спасибо! Нужно больше видео о реакт)

  • @Stre_k0za
    @Stre_k0za 4 місяці тому

    Это самое толковое объяснение которое я смогла найти на русскоязычном YT за последние 3 дня поисков)) Спасибо и удачи тебе в развитии канала.

  • @KirillChayevskiy
    @KirillChayevskiy Рік тому +2

    Спасибо за видео. Очень хорошая форма подачи. Хотелось бы в такой же понятной форме разобрать вопрос про стейт менеджеры. Когда нужен Redux/MobX, когда ReactContext, а когда можно обойтись без них

  • @alexcherepanov6152
    @alexcherepanov6152 Рік тому +1

    бро, подписался на канал! все по делу, ждем след уроков

  • @user-kr1fw8bi5t
    @user-kr1fw8bi5t 6 місяців тому

    Спасибо за видео, подробно и содержательно!

  • @skymortem
    @skymortem Рік тому +1

    Посмотрел твой материал. Блин, парень, продолжай. Очень жаль, что так мало видео пока. Я занимаюсь профессиональной разработкой 15 лет, но совсем в другой области. И сейчас есть необходимость сделать сайт, ищу материалы по фронту. Такой мощной, лаконичной и понятной подачи еще не видел

  • @dealhubpro
    @dealhubpro Рік тому +1

    Спасибо за урок. А то начал было изучать nextjs, но понял что без знаний реакта там делать нечего. Урок подан отлично, обычно никто не объясняет что и для чего, а сразу начинают что то сложное городить.

  • @user-sr9bw8nm3z
    @user-sr9bw8nm3z Місяць тому

    Спасибо! все понятно!

  • @dimitrusmeleskausas2086
    @dimitrusmeleskausas2086 8 місяців тому

    спасибо!
    жду еще про реакт!

  • @sohodoll1235
    @sohodoll1235 Рік тому +2

    зашел чисто лайк поставить)
    а посмотрю попозже 8-)

  • @nargizagayfullina4062
    @nargizagayfullina4062 4 місяці тому

    Спасибо за понятное объяснение 🙏

  • @neobulk3761
    @neobulk3761 2 місяці тому

    Спасибо, очень доходчиво!

  • @svetlanaandreeva8762
    @svetlanaandreeva8762 6 днів тому

    Спасибо за урок очень помогает новичкам.

  • @alexandregorov3239
    @alexandregorov3239 11 місяців тому +2

    Я посмотрел 4 или 5 видео по типу "Реакт для новичков" и только с твоего объяснения понял, спасибо тебе большое!

    • @pomazkovjs
      @pomazkovjs  11 місяців тому +1

      Воу, огонь! Очень рад слышать) Спасибо!

  • @user-xo8bo9se5e
    @user-xo8bo9se5e Рік тому

    Спасибо! Крутой обзор!

  • @user-wt7rz2nj7e
    @user-wt7rz2nj7e 3 місяці тому

    Очень интересный контент делаешь, продолжай в том же духе !

  • @yokooomori2439
    @yokooomori2439 Місяць тому

    Ну , что тут сказать 140 коментов сами за себя говорят, это действительно лучшее видео на ютуб по реакту.
    У меня всё получилось, всё заработало, всё понятно.
    Можно же так объяснять, вот бы всегда всё шло так как в этом видео)
    Ну тут определённо лайк, подписка со всех аккаунтов , рассылка всем друзьям и огромный респект!
    СПАСИБО!!!!!!

  • @eugeneskrypnyk7396
    @eugeneskrypnyk7396 Рік тому

    Спасибо БОЛЬШОЕ)!

  • @ukrainianigor
    @ukrainianigor 10 місяців тому

    Очень круто инфу доносишь, чувак хорош!!!

  • @user-of1nn3kf5c
    @user-of1nn3kf5c Рік тому

    всё четко объяснил, спасибо

  • @rea-55
    @rea-55 5 місяців тому

    Спасибо, отлично объясняешь! Голосую за Vite!😄

  • @raiska.88
    @raiska.88 4 місяці тому

    Отличный урок!

  • @eugeneskrypnyk7396
    @eugeneskrypnyk7396 Рік тому

    ОЧЕНЬ жду следующий ролик по реакту.
    Надеюсь будет полный курс для джуна.
    На ютубе много курсов но они либо не самые свежие +4 года либо рассказывают как попало.

  • @MrXrey2020
    @MrXrey2020 2 місяці тому

    Вы очень круто объясняете жду не дождусь новых видео про реакт

  • @kell7505
    @kell7505 Рік тому

    Видео очень понятное и интересное! Легкая подача материала позволяэт лучше усвоит урок!
    Скажи пожалуйста, можем ли мы использовать в переменой значения PRIMARY KEY, AUTOINCREMENT?

  • @Kickmin
    @Kickmin 9 місяців тому

    Очень круто рассказал, низкий поклон тебе, теперь я понял! Лучшее объяснение на русско язычном ютубе!

  • @user-km3bz8pe9z
    @user-km3bz8pe9z 3 місяці тому

    Очень доступно😁

  • @yan_zaharov
    @yan_zaharov 8 місяців тому

    Шикарнейший гайд по Реакту

  • @leonidserafimovich4844
    @leonidserafimovich4844 9 місяців тому

    посмотрел 6 минут и уже узнал больше чем из всех видио на ютубе!! долби брат!!!

  • @moonsev
    @moonsev 9 місяців тому

    Приятно смотреть, 🎉

  • @user-ev8yn9dn6v
    @user-ev8yn9dn6v 7 місяців тому

    Не пишу комменты, но тут не смог удержаться - СПАСИБО!!!! лайк подписка. У тебя талант.
    Записался на платные курсы, ни бум бум. на них react-vite устанавливали, а тут что так и не понял.

  • @gloomly2759
    @gloomly2759 Рік тому +1

    Огромное спасибо рекомендациям Ютуба за такую находку, а также большое спасибо автору за контент

  • @spiderokjs
    @spiderokjs 2 місяці тому

    Чувак, ты лучший!

  • @exelione2229
    @exelione2229 6 місяців тому

    Доступно и понятно, спасибо. Продолжай, у тебя хорошо получается. Хочу много уроков от тебя по реакту и JS

    • @pomazkovjs
      @pomazkovjs  6 місяців тому +2

      Прямо сейчас готовится ролик по this и еще много контента 🙌🏼

  • @armminas3186
    @armminas3186 3 місяці тому

    интересно было земляк

  • @trimberg
    @trimberg Рік тому

    спасибо! лучший подход, когда новое видео?

  • @mishaudalov9845
    @mishaudalov9845 10 місяців тому

    мужик, как же ты хорош!

  • @VagonFactov
    @VagonFactov 9 місяців тому

    Дякую. Гарний відос для нульового старту реакт 🤙

  • @namalkin1981
    @namalkin1981 Місяць тому

    Красавец, спасибо

  • @ispeak9571
    @ispeak9571 10 місяців тому +7

    Засыпал под твой видос, после слов "мы не будем ничего удалять из стартового проекта как большинство ютуберов" проснулся, подписался, поставил лайк. Чел я слежу за тобой. Делай контент ❤

  • @user-pe7dz5xg7v
    @user-pe7dz5xg7v Рік тому

    В поддержку, хорошо объясняешь

  • @A_A_A182
    @A_A_A182 Рік тому

    Хорошее вводное видео, спасибо

  • @user-ci5fn7js4x
    @user-ci5fn7js4x Рік тому

    Хорошо объясняешь, спасибо

  • @vyacheslavm.9557
    @vyacheslavm.9557 Місяць тому

    Спасибо👍

  • @user-gh5dz4ue8n
    @user-gh5dz4ue8n 5 місяців тому +1

    Привет
    Походу самый понятный вводный урок по React на UA-cam
    Был рад пройти твой авторский курс по реакт
    Красава, так держать
    Подписался, поставил лайк, написал коммент

    • @pomazkovjs
      @pomazkovjs  5 місяців тому

      Огонь, спасибо!)

  • @Kumaradji
    @Kumaradji 7 місяців тому

    спасибо болльшое за видео!

  • @user-wx1cj9ln8v
    @user-wx1cj9ln8v Рік тому

    Хорошо обьясняешь. Я бы посмотрел от тебя разбор Event Loop

  • @andreivelento9327
    @andreivelento9327 8 місяців тому

    Супер!

  • @user-tq2lm6sn1t
    @user-tq2lm6sn1t 7 місяців тому

    Ты суппер крутой! Спасибо!

  • @daneelradaev1440
    @daneelradaev1440 Рік тому

    спасибо за интересное и полезное видео

  • @Igor_UA
    @Igor_UA 4 місяці тому

    Ай, молодец )))

  • @FF-gq3hm
    @FF-gq3hm Рік тому

    крутой контент!

  • @asaiku
    @asaiku 11 місяців тому

    Все круто! Давай теперь про vite

  • @namerrorone2890
    @namerrorone2890 Рік тому +1

    Очень понятно объяснил, для чайников, прошу продолжай)

  • @RamaRama-qv3jo
    @RamaRama-qv3jo Рік тому

    Было бы здорово, если ты выпустил видео про работу с многомерными ассоциативными массивами в React TS.

  • @ruru6778
    @ruru6778 5 місяців тому

    Очень хочется от вас все о реакте 🙏🙏🙏

  • @user-lm9ee1gn5p
    @user-lm9ee1gn5p Рік тому

    Спасибо большое очень понятное объяснение

    • @pomazkovjs
      @pomazkovjs  Рік тому

      Всегда пожалуйста!

  • @alexandrkiriluk5868
    @alexandrkiriluk5868 9 місяців тому

    Спасибо, что открыл дверь и простелил дорожку в мир реакт ))
    Есть курс свой ?

  • @johnnguyen5510
    @johnnguyen5510 10 місяців тому

    супер контент/ жаль что мало его пока что

  • @sergejchap62
    @sergejchap62 3 місяці тому

    Спасибо за видео. Про Vite также интересно.
    Так понимаю Node.Js - это сервер поддержки проекта. ReacJs работает лишь с этим сервером. А не Nginx или другими?
    Извините за наивный вопрос.

  • @ruru6778
    @ruru6778 5 місяців тому

    Вы очень крутой!!!!

  • @1oky
    @1oky Рік тому +1

    качество видео и подача супер! может что то про собесы запишешь или про первую работу?

    • @pomazkovjs
      @pomazkovjs  Рік тому

      Спасибо! Принято, подумаю над идеями)

  • @brendi3884
    @brendi3884 Рік тому

    продолжай, пожалуйста!

  • @Shah.livestream
    @Shah.livestream 10 місяців тому

    Спасибо

  • @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  Рік тому +1

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

  • @user-md3ko4sb4i
    @user-md3ko4sb4i 6 місяців тому

    VirtualDOM сравнивается не с реальным DOM.
    Когда произошли изменения(изменилось состояние приложения), создается новый virtualDOM(легковесная копия реального DOM). Новая версия virtualDOM сравнивается со старой. Вычисляются "узлы", которые изменились. И на основе этих узлов изменяется части реального DOM, которые подверглись изменению.

  • @farkhadkuramschin6962
    @farkhadkuramschin6962 Рік тому +1

    Про Git систему версий было бы очень интересно послушать!

  • @jlakamka
    @jlakamka 6 місяців тому

    Вот это тут конкурентов, конечно... :DD

  • @diggerdog001
    @diggerdog001 Рік тому +5

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

    • @pomazkovjs
      @pomazkovjs  Рік тому +2

      Планирую сделать продолжение, да)
      Спасибо!

    • @AntonioBenderas
      @AntonioBenderas Рік тому +1

      ​@@pomazkovjs 🔥

    • @xflyiwnl2537
      @xflyiwnl2537 8 місяців тому

      @@pomazkovjsесть новости?

  • @DimaMelom
    @DimaMelom 9 місяців тому

    На windows не подгружаются папки public и crs. Node v (18.17.1 LTS)

  • @coolrash
    @coolrash 8 місяців тому

    Спасибо! Пожалуйста ещё видеоуроков по реакту

  • @theindustrialbehemothcente3823
    @theindustrialbehemothcente3823 5 місяців тому

    Наконец-то нашел хороший курс
    Думал, что реакт это какая-то сложная чертовшина, но оказалось что с основами хтмл, жс, и питона(больше всего умею писать на C#, второе место С++) все понимаю!
    UPD : жаль, что это всеголишь вводное видео, хотелось бы курс от вас

    • @pomazkovjs
      @pomazkovjs  5 місяців тому

      Спасибо! Собираюсь вернуться к нему и продолжить, подписывайтесь и следите 🙌🏼

  • @MrErl
    @MrErl Рік тому

    Жду видео про промисы))

    • @pomazkovjs
      @pomazkovjs  Рік тому

      Будет)

    • @AntonioBenderas
      @AntonioBenderas Рік тому

      А может тебе ещё prototype и [[proto]] насыпать?))

  • @user-ro3qo7wd8h
    @user-ro3qo7wd8h 6 місяців тому

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

  • @diggerdog001
    @diggerdog001 Рік тому +2

    Про Vite нужен гайд, спасибо!

  • @triumphant5912
    @triumphant5912 Рік тому

    Крутой контент, можешь сделать видео визуальное понимание года, очень было бы круто. Разобрать какой нибудь проект с нуля))

    • @pomazkovjs
      @pomazkovjs  Рік тому

      Спасибо! Не совсем понял про визуальное понимание, разверни немного подробнее мысль, пожалуйста)

    • @triumphant5912
      @triumphant5912 Рік тому

      @@pomazkovjs не года а кода))) Просто я как начинающий разработчик сталкиваюсь с проблемой, что когда меня ставят на новый проект, бывает очень тяжело понимать его. Найдешь локализацию проблемы, не можешь понять синтаксис, поймешь синтаксис, проблема с пониманием логики. Да конечно опыт играет главную роль, но техническая шаги с этим очень бы помогали. В твоих видосах ты придаешь значения деталям, а это очень важно для начинающих

    • @pomazkovjs
      @pomazkovjs  Рік тому +3

      @@triumphant5912 отличная идея, на самом деле! Надо подумать, как это реализовать нескучно и эффективно, и сделать) Спасибо!

    • @triumphant5912
      @triumphant5912 Рік тому +1

      @@pomazkovjs

  • @alexmakeev6024
    @alexmakeev6024 5 місяців тому

    Thanks

  • @user-jr9xk8zc8l
    @user-jr9xk8zc8l Місяць тому

    Вау :)

  • @rav6732
    @rav6732 4 місяці тому

    Мир вам!
    Можете сделать урок по Вит как пользоваться его Реакте

  • @user-vf3zv8st1q
    @user-vf3zv8st1q 5 місяців тому

    is defined but never used no-unused-vars вот такое высвечивается, не высвечивается Video List

  • @user-lm9ee1gn5p
    @user-lm9ee1gn5p Рік тому

    Будет ли продолжение ?