Разработай 6 проектов на ReactJS (для начинающих)

Поделиться
HTML-код
  • Опубликовано: 13 июн 2024
  • В этом видео я тебе покажу как разработать 6 разных ReactJS проектов уровня Junior.
    Данное видео подойдёт для тех, кто только недавно познакомился с ReactJS и хочет добавить к себе в портфолио проекты.
    Видео по деплою: • Деплой React-приложени...
    📚 GitHub-репо: t.me/archakov_im/534
    🔗 Следите за обновлениями и информацией в:
    - Telegram-канале: t.me/archakov_im
    - VK: archakov_im
    - Личном блоге: archakov.im
    - GitHub: github.com/Archakov06
    - Моё резюме: career.habr.com/archakovim
    ⏰ Таймкоды:
    00:00:00 Введение
    00:00:56 Подготовка перед разработкой
    00:04:09 Счётчик
    00:10:13 Модальное окно
    00:22:35 Quiz (опросник)
    00:37:22 Список пользователей
    01:07:36 Конвертер валют
    01:34:18 Коллекция фотографий
    #react #javascript #reactproject #quiz #modal #users #jsphotos #counter

Комментарии • 464

  • @trionixchannel2435
    @trionixchannel2435 Год назад +146

    мировой мужик.

    • @jetsker6388
      @jetsker6388 Год назад +8

      Я бы сказал - вселенский

    • @user-li2dh2ox8j
      @user-li2dh2ox8j Год назад +6

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

  • @user-tv6up9uz2w
    @user-tv6up9uz2w Год назад +69

    Мое почтение и уважение! Спасибо тебе, Денис! Щас изучаю React, и очень помогает твои уроки и твое объяснение.
    Подскажи , когда следующий ролик, по 10 проектов? а то уже далеко за 300 лайков, а то мы ждем с нетерпением

  • @TheAlexChannelClub
    @TheAlexChannelClub Год назад +7

    Спасибо за твою работу. Каждый раз с надеждой жду новое видео!

  • @user-hu4fy4ce1f
    @user-hu4fy4ce1f Год назад +6

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

  • @mishagarkach
    @mishagarkach Год назад +14

    Крутые уроки. После второй пиццы все реализуемо самостоятельно, но попадаются интересные моменты, например, асинхронность setState, которые полезно услышать. Вообще кайфово изучать на твоем канале реакт. Спасибо.

  • @Evgeny..
    @Evgeny.. Год назад +7

    Денис, ты молодец, что помогаешь новичкам, нашел бы я твои уроки года 2.5 назад...

  • @desyez6715
    @desyez6715 Год назад +4

    Лучший, я безразмерно рад рад что нашел твой канал. Твой контент лучше чем 99% курсов в интернете.

  • @viktoriamenting1604
    @viktoriamenting1604 Год назад +2

    Самый ахрененный блог о фронтенде! И как ты объясняешь- просто 🔥🔥🔥Ты супер! Спасибо тебе огромное 🙏🏼🙏🏼

  • @thecobaltriver
    @thecobaltriver Год назад +1

    Спасибо за видео и труды . Людей, которым эта информация как воздух нужна много, а видео таких гораздо меньше в интернете :)

  • @alexdev75
    @alexdev75 Год назад +1

    Как всегда великолепный урок. Отличная подача материала. Спасибо за Ваш труд и за науку.

  • @danafilatova5316
    @danafilatova5316 Год назад

    Здравствуй! Очень рада, что встретила тебя в ютубе. Большое спасибо за работу. С удовольствием покодила и жду продолжения =)

  • @Wo0zZ1
    @Wo0zZ1 Год назад +7

    Прекрасный материал! Это божественно!

  • @user-ls8nj9cf7k
    @user-ls8nj9cf7k Год назад +8

    Очень классный формат!!! Было бы круто посмотреть ещё проекты в связке с Redux.

  • @Snegurjan
    @Snegurjan Год назад

    Карл, да ты просто крутой. Такие вещи выкладывать и бесплатно. Спасибо тебе от чистого сердца!

  • @GBooksfree
    @GBooksfree Год назад +2

    Как же круто ты рассказываешь и объясняешь! Браво дядь!

  • @maksimdd2033
    @maksimdd2033 Год назад +7

    Очень душевные и понятные видео , если бы не ты тогда в рекомендациях неверно так бы и не начал учить react ,а так благодаря твоим видео понял основу и теперь сам много чего изучаю , спасибо тебе. Жду видик🤗

  • @tehnoblog6430
    @tehnoblog6430 Год назад +18

    Просил 300 лайков ,уже почти 4 тысячи, ждем 10 проектов на ReactJS
    Ты лучший препод по ReactJS

  • @ilgizilgiz
    @ilgizilgiz Год назад

    Уроки довольно таки неплохие и понятные. Спасибо огромное. После просмотра с 3 раза в голове всё встало на свои места

  • @haibova_irisha
    @haibova_irisha Год назад

    ура !!! спасибо за работу. еще не смотрела видео , но уверена что все доступно и понятно

  • @shokhrookhr3850
    @shokhrookhr3850 Год назад

    Огромное спасибо) Ждём продолжения🙂

  • @webminsk7884
    @webminsk7884 Год назад +1

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

  • @kamilabalabekova5700
    @kamilabalabekova5700 Год назад

    Спасибо вам большое за такой контент. Вы очень четко и простыми словами преподносите всю инфу. Ждем новых видосиков и интересных задач👍👍👍

  • @tgr6388
    @tgr6388 Год назад +3

    Очень крутой ролик! Все очень подробно и доступно. Но особенно сильно мне понравилость ,то что ты сделал изоляцию навыка react. То есть, не пришлось тратить время на верстку, а сразу концентрируешься только на реакте.

  • @petarthecodehunter3333
    @petarthecodehunter3333 Год назад +6

    Большое спасибо за уроки по вебу! Как по заказу - то, что надо)

  • @MrKu39
    @MrKu39 Год назад

    Отличный контент , хорошая подача ! Продолжай 💪 Очень жду следующую часть видео ! С наступающим новым годом

  • @mk3mk3mk
    @mk3mk3mk Год назад +1

    Вот по таким урокам можно изучать React! Ура! Спасибо!!!!!

  • @user-om1hh8oj6g
    @user-om1hh8oj6g 11 месяцев назад +2

    Это просто лучшее обучающее видео про React!
    Денис, огромнейшое спасибо за данный материал!!!
    У вас талант преподносить сложные на первый взгляд материал так, чтоб он будет понятен даже самым начинающим.
    Как жаль, что я его не встретил месяц назад.
    P.S.
    Для тех тоже учиться, на проекте "Конвертер валют" можете загуглить "курс валют API" и воспользоваться любым удобным для Вас ресурсом.

  • @lidijajezova2025
    @lidijajezova2025 Год назад +1

    Спасибо, Дэннис! Тебя приятно слушать, приятный голос

  • @nargizgasanova6222
    @nargizgasanova6222 Год назад +1

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

  • @user-vu7ky2md1q
    @user-vu7ky2md1q 25 дней назад

    Спасибо большое за ваш труд) супер понятно, даже для не очень опытных в данном вопросе, без воды, но показаны все мелкие нюансы, супер)

  • @JavaScriptcher
    @JavaScriptcher Год назад

    Спасибо автору за подробное объяснение материала!! Теперь на выходных есть чем заняться !!!

  • @abzalrashithodjaev6333
    @abzalrashithodjaev6333 Год назад

    Спасибоо!!!!!! всё крутяк !!!!! особенно понравилось что конент весь на "ТЫ" как будто лично для меня сделал видео!! )

  • @vitalygaraev8093
    @vitalygaraev8093 6 месяцев назад

    Эти ценные кусочки кода очень важны. В большом проекте начинаешь путаться, а тут прям по частям разобрано. Хорошо бы еще таких кусочков!
    Спасибо!

  • @ant3413
    @ant3413 Год назад +12

    Перед началом работы в терминале пишем "npm i"

    • @progi99
      @progi99 4 месяца назад

      thank you

  • @sviat4679
    @sviat4679 Год назад +1

    шикарное видео!
    все понятно, доходчиво и ничего лишнего.

  • @cyber-jackal
    @cyber-jackal Год назад

    Это лучший формат, продолжай в том же духе! Спасибо за контент)

  • @Mrflomaster2011
    @Mrflomaster2011 Год назад +1

    Автор данного видео, да я обращаюсь именно к тебе 👉🏻 ты настоящий мужчина 💪🏻 делай то что должен делать 😁👍🏻 всегда смотрю твои видео и пробую на практике , спасибо тебе.

  • @user-oc1wp8zh3u
    @user-oc1wp8zh3u Год назад

    Спасибо за твою помощь, приятная и четкая подача.

  • @sergey9784
    @sergey9784 9 месяцев назад +1

    Спасибо тебе огромное! Ты просто вывел меня из стопора Уважуха тебе и респект! Удачи тебе!!!

  • @user-mp7ty7kg9h
    @user-mp7ty7kg9h Год назад +1

    Мне тоже нравится как ты объясняешь! Детали имеют значения!

  • @grigorvardanyan7780
    @grigorvardanyan7780 4 месяца назад

    Ждем продолжения, Действительно, все ясно и доходчиво

  • @user-bl4te2kg8v
    @user-bl4te2kg8v Год назад

    Как всегда супер!!! Спасибо, что ты есть!!!

  • @iliukhaTV
    @iliukhaTV Год назад +1

    Спасибо большое! Читаю книгу по Реакту и закрепляю знания вашими уроками.
    Также кому не нравится синий отблеск при клике на кнопки указывайте следующее свойство в CSS
    -webkit-tap-highlight-color: transparent;

  • @blackjack472
    @blackjack472 3 месяца назад +1

    Ультрамощный видос, для тех кто учит React нужно включить в список обязательного просмотра.
    Отличная практика, спасибо автору.

  • @pigsel2509
    @pigsel2509 10 месяцев назад

    Это прекрасно! Очень хочется увидеть полноценное приложение, не только фронт, этого очень мало на ютубе

  • @romanklym5772
    @romanklym5772 Год назад +20

    возможно у кого-то с первых минут будет недоразумение - как же запустить это дело в браузере. Terminal->new Terminal -> 1. npm install 2. npm start

  • @min8132
    @min8132 Год назад

    Еще не досмотрел, но уже благодарен тебе за такой хороший урок. Очень понятно объясняешь.

  • @onehourbeforedeparture8739
    @onehourbeforedeparture8739 Год назад +13

    Ты лучший в связке реакт редакс на Ютубе, спасибо за то что делаешь!!!!!!

  • @itsokay4542
    @itsokay4542 Год назад +1

    Очень вовремя, благодарю, лайк

  • @ThePro_0001
    @ThePro_0001 Год назад

    Спасибо за уроки, спасибо, что делаешь уроки для начинающих!👍👍👍👍👍

  • @pahaivanov1611
    @pahaivanov1611 Год назад

    Оставлю комментарий, для мотивация автора! Спасибо за труды)

  • @vasilich4582
    @vasilich4582 Год назад

    Круто! Спасибо большое за контент побольше для новичков реакта.

  • @user-kn3ut1sh2o
    @user-kn3ut1sh2o Год назад

    Спасибо за твою работу! (6 разных ReactJS проектов уровня Junior)

  • @sichouli1914
    @sichouli1914 Год назад

    О новый урок! Пока не смотрела, но лайк обязательно

  • @ilyaVnukchinskiy
    @ilyaVnukchinskiy 10 месяцев назад

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

  • @user-xe7ck7xj6z
    @user-xe7ck7xj6z Год назад

    Спасибо за уроки, спасибо, что делаешь уроки для начинающих!

  • @user-li7of6vp8u
    @user-li7of6vp8u 9 месяцев назад

    Спасибо большое!) Вы очень круто объясняете!))))

  • @ruvick8956
    @ruvick8956 2 дня назад

    Отличная подача! Отличный материал!

  • @armanscription1428
    @armanscription1428 Год назад

    Спасибо большое, прекрасно показал и обьяснил как работать с React, много чего не понятно было, но если вернутся к этому ролику через месяц после обучения, всё будет намного проще(Так и собираюсь сделать)

  • @shizo380
    @shizo380 9 месяцев назад

    Огромное спасибо за твой труд!

  • @user-vu9qk3zs8v
    @user-vu9qk3zs8v 11 месяцев назад +2

    Рахмет саған Денис!!! Сен керемет ұстазсың!!!

  • @user-td3bz8st6v
    @user-td3bz8st6v Год назад

    Спасибо за уроки! Отлично получилось.

  • @DENDYTWOO
    @DENDYTWOO Год назад

    Респект Вам!! Для новичков в самый раз.

  • @shuverida
    @shuverida Год назад +1

    Аллах1о аьтто бойла хьан ваша. Ч1ог1а дика кхетош йу хьан видеош.

  • @Frezeee3D
    @Frezeee3D Год назад +1

    Спасибо большое за видео, кто бы что не говорил, но всё таки практика это основной пункт в изучении чего либо

  • @epic3386
    @epic3386 Год назад +2

    300 лайков превратились в 2300 лайков ) ждем 10+ проектов ) успехов!

  • @huzimuzi4885
    @huzimuzi4885 Год назад +4

    Спасибо за видео, крутые мини-проекты. Можно следующий выпуск что-нибудь по сложнее?

  • @insofess4062
    @insofess4062 Год назад +13

    Чтобы не прописывать постоянно React.useState(), можно изначально из реакта импортировать данный хук import { useState } from 'react', причём в скобки можно добавлять и другие хуки через запятую и после этого запись будет чуть короче - к примеру: const [step,setStep ] = useState()

    • @ArchakovBlog
      @ArchakovBlog  Год назад +7

      Минус такого подхода в том, что если тебе какой-то хук не потребуется больше, ты должен удалить импорты и из самого кода. А тут ты обращаешься к самой либе, без дополнительного импортироваания

    • @apexnuts9785
      @apexnuts9785 Год назад

      @@ArchakovBlog Всё не могу отвыкнуть от импорта. Хочу использовать React.useState, но рука сама пишет useState)))

  • @di_may988
    @di_may988 Год назад +5

    Большое спасибо за самые классные уроки по ReactJS !
    Хотелось бы видео про сериализацию данных и как работать с non-serializable данным в редаксе. Толковых уроков на ютубе на эту тему на данный момент нету

  • @user-ey5ke7ll8s
    @user-ey5ke7ll8s Год назад

    Спасибо , очень интересно, круто, доступно.

  • @dmaberlin
    @dmaberlin Год назад

    Красавчик !Продолжай в том же духе!!!

  • @Int_true
    @Int_true Год назад

    Просто невероятный человек, спасибо.

  • @AmericanDragon134
    @AmericanDragon134 Год назад +3

    Ого почти 500 лайков за час. Так держать. Ждём MERN (+TAILWIND)

  • @InSearchOfYourPlace
    @InSearchOfYourPlace 10 месяцев назад +1

    Перцентаге - самое лучшее объяснение)))

  • @bushenniy7865
    @bushenniy7865 Год назад +5

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

  • @eminaliyev1382
    @eminaliyev1382 Год назад +62

    Хочу поблагодарить тебя , спасибо тебе большое дружище , ты очень ясно и понятно все объясняешь, когда начал изучать реакт , наткнулся на твой свежий курс реакт пицца v2 , прям ты сделал все четко и ясно ,
    Спасибо что помогаешь новичкам , мне кажется уже нужно делать видео урок или проект какой нибудь посложнее чтобы был , react advance )
    Потому что думаю достаточно видео уроков на твоём канале для новичков
    Удачи тебе дружище , ждём новых видосикоа

    • @ArchakovBlog
      @ArchakovBlog  Год назад +42

      Скоро будут. Пока хочу для джунов запилить контента

    • @AmericanDragon134
      @AmericanDragon134 Год назад +2

      @@ArchakovBlog уважуха брат

    • @JokerVirus13
      @JokerVirus13 Год назад +2

      ​@@ArchakovBlog ​ Мое почтение :)

    • @lottyskound9395
      @lottyskound9395 Год назад +1

      @@ArchakovBlog спасибо за ваши труды.

    • @stasend
      @stasend Год назад

      @@ArchakovBlog Денис, какую альтернативу mockapi посоветуешь? Сейчас очень скудный бесплатный функционал, который предоставляет сервис

  • @ss.siberia
    @ss.siberia Год назад

    Как круто! Лайк, подписка, колокольцев)

  • @gregdmitriev2784
    @gregdmitriev2784 Год назад

    Легко и понятно, спасибо 👍👍кстати, проверку на пробелы ещё можно добавить в списке пользователей) и фильтр неправильно работает - при вводе первой буквы не фильтрует

  • @user-yu8ug7tf9f
    @user-yu8ug7tf9f 2 дня назад

    Ребята, добрый день. При клонировании и дальнейшем запуске npm start в VC будет выдавать ошибку. Что нужно сделать, когда Git Bashe here сделаете клонирование, вставив ссылку, не закрываем набираем следующей строчкой npm init -y, ниже в строчке пишем npm install, потом npm start - всё заработает. Всем удачи) Арчакову, спасибо за то, что он делает)))

  • @Pavel-er4hy
    @Pavel-er4hy Год назад

    Уроки хорошие. Благодарю автора.

  • @user-bl4dl9ke7b
    @user-bl4dl9ke7b Год назад

    Спасибо большое за контент он на высоком уровне!

  • @denysbarzynskyi2494
    @denysbarzynskyi2494 Год назад +1

    Спасибо 😉 вы супер !!

  • @kerenoz2010
    @kerenoz2010 Год назад

    спасибо большое !!! всё очень понятно !

  • @never.m1nd
    @never.m1nd 7 месяцев назад

    Очень много полезностей) 🤘

  • @r3dkin
    @r3dkin Год назад

    Дякую🙏 Чекаю тепер 10 проектів і по можливості якусь гру😌

  • @sergeygrebenshchikov3478
    @sergeygrebenshchikov3478 Год назад

    Круто, спасибо!👍

  • @PashaRomanovich
    @PashaRomanovich Год назад +1

    Огромное спасибо за такие видео! 300 лайков - небольшая планка, нужно бвыло еще 0 добавить, 3К лайков за такое!!!)

  • @user-uy9gp2st2g
    @user-uy9gp2st2g 5 месяцев назад

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

  • @itkazakhstan_03
    @itkazakhstan_03 Год назад +1

    Я здела 5 проектов из 6 и много нового узнал спасибо автору за труд

  • @timgtster2630
    @timgtster2630 8 месяцев назад

    Очень хороший ролик,скоро буду смотреть

  • @Nietzsche88888
    @Nietzsche88888 Год назад

    Спасибо за такой труд

  • @andrewsam224
    @andrewsam224 Год назад

    Крутой дядька! Давай ещё видосов.

  • @user-mh2gt1pp9d
    @user-mh2gt1pp9d Год назад +2

    Спасибо Мэн 💪💪

  • @lidiyamanatkina5072
    @lidiyamanatkina5072 Год назад

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

  • @sanfrancisco8426
    @sanfrancisco8426 3 месяца назад +1

    Дуже круто пояснюєш, дякую!

  • @bogdangets2715
    @bogdangets2715 Год назад +1

    Спасибо Мужик💪💪

  • @Native.u
    @Native.u Год назад +6

    спс что не показал как запускать реакт-апп, просто лучший

  • @ololol372
    @ololol372 Год назад

    Спасибо тебе, лучший!

  • @user-gf5xq6hv3f
    @user-gf5xq6hv3f Год назад +2

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

  • @benchik100
    @benchik100 9 месяцев назад

    просто пушка!💣