KZhead

Уроки React JS с нуля / #3 - Знакомство с JSX

Школа itProger / Программирование
2024 ж. 14 Мам.
90 226 Рет қаралды
Жүктеу

React JS обладает мощным инструментом, что называется JSX. За урок вы познакомитесь с этой технологией и научитесь с ней взаимодействовать. Вы разработаете несколько HTML блоков с обработкой действий от пользователя.
✅ Полезные ссылки:
- Урок на сайте itProger: itproger.com/course/react-js/3
- Node JS: nodejs.org/en/
- Создание проекта через npm: ru.reactjs.org/docs/create-a-...
⏰ Тайм-коды:
00:00 - Начало
00:18 - Что такое JSX?
01:30 - Пример кода без JSX
03:00 - События
06:00 - Используем JSX
07:40 - Обработка событий
11:07 - Переменные
13:00 - Условия
13:37 - Классы для тегов
14:30 - Подключение через «npm»
19:10 - Создание шаблонного проекта
25:50 - Описываем React JS
26:45 - Запуск проекта
29:40 - Исправление ошибки
31:20 - Заключительная часть
✔ Сообщество программистов: itproger.com/
✔ -------------
Вступай в группу Вк - vk.com/prog_life 🚀
Инстаграм itProger: / itproger_official
Группа FaceBook - goo.gl/XW0aaP
Instagram: / gosha_dudar
Telegram: t.me/itProger_official
Twitter - / goshadudar
- Уроки от #itProger 👨🏼‍💻
- Все уроки по хештегу #itprogerLessons

Пікірлер

  • Учил реакт по другим источникам, но только теперь в голове начало проясняться. Спасибо и ура!

    @user-wd4xp5qz7h@user-wd4xp5qz7h10 ай бұрын

  • Спасибо, всё разложил по полочкам, очень понятно!

    @user-fo2mq8jd2q@user-fo2mq8jd2q Жыл бұрын

  • Большое тебе спасибо. Разложил все по полочкам

    @nics51@nics51 Жыл бұрын

  • последний штрих когда удалил все в index.js просто убил. Но очень интересно и понятно. Спасибо!👍👍👍

    @zohidmustafoyev2448@zohidmustafoyev2448 Жыл бұрын

  • Всё элементарно. Спасибо.

    @Alon794@Alon794 Жыл бұрын

  • Спасибо вам, приятно вас слушать, очень сильно помогли

    @user-nl5xs5ju9q@user-nl5xs5ju9q Жыл бұрын

  • Спасибо Большое тебе за уроки man!

    @nike-555@nike-555 Жыл бұрын

  • Спасибо, за урок. По началу были ошибки в терминале, долго разбирался. Оказалось просто не сохранял данные в файлах index.js. В проводнике подсвечивалась подсказка, несохраненные данные.

    @user-dc9rv8df9k@user-dc9rv8df9k Жыл бұрын

  • спасибо тебе большое😉

    @mnats157@mnats157 Жыл бұрын

  • Спасибо Вам большое

    @user-lm9ee1gn5p@user-lm9ee1gn5p Жыл бұрын

  • thank you for react lessons

    @user-dd6iv5ex9b@user-dd6iv5ex9b Жыл бұрын

  • спасибо за урок

    @user85269@user8526911 ай бұрын

  • Становится все яснее)

    @vitaliySobakinson@vitaliySobakinson Жыл бұрын

  • Дуже дякую за такий детальний екскурс в реакт,. Дивився інших ютуберів, але вони не так чітко і по поличкам пояснювали структуру проєкта і що він з себе представляє. Класне відео, всім раджу.

    @dimalesko7478@dimalesko7478 Жыл бұрын

    • Згоден з вами повністю. Курс дуже гарний, а при тому ще й безплатний

      @tazorprod.934@tazorprod.934 Жыл бұрын

  • Спасибо!

    @TheYukos70@TheYukos704 ай бұрын

  • Спасибо за хорошие уроки! Все коротко и ясно! Вот если бы поменьше использовался такой оборот, как: "Такой объект, как ..., к такому тэгу, как ...". Можно просто сказать "Объект такой-то, к тэгу такому-то."😀

    @eugen333eee@eugen333eee Жыл бұрын

  • Лучший!

    @liliabekuzinaensosense8987@liliabekuzinaensosense89876 ай бұрын

  • Я учил по твоим видео JS теперь учу React

    @Community.RU.@Community.RU.4 ай бұрын

  • У меня одного выдает ошибку при подключении npm?

    @LAYKOV_GET_HIGH@LAYKOV_GET_HIGH4 ай бұрын

  • спасибо

    @IO-sf1lz@IO-sf1lz Жыл бұрын

  • Uncaught SyntaxError: Unexpected token '

    @user-rz3cw9yd9o@user-rz3cw9yd9o Жыл бұрын

  • Сложновато, пришлось пересматривать моменты, но в итоге всё получилось !

    @YuriLazutchenko@YuriLazutchenko3 ай бұрын

  • спасибо за урок! для тек у кого ругается консоль на реакт в начале урока, поменяйте версию реакт на 17, если вы копировали 18 с сайта

    @BogDemona@BogDemona Жыл бұрын

    • Привет..подскажи пожалуйста..я все сделал как он показывает ..но уменя не выводиться ничего на HTML файле..например через.ReactDOM render никакой реакции..а вот функции через documentById и тд все нормально что это может быить?

      @JanTalan@JanTalan Жыл бұрын

    • @@JanTalan почитайте офіційну документацію - дещо змінилось, тепер треба використовувати ReactDOM.createRoot

      @lagprincesse@lagprincesse Жыл бұрын

    • @@lagprincesse спасибо ..разобрался..ссылки не правильно вставил.

      @JanTalan@JanTalan Жыл бұрын

    • @@JanTalan А не правильно это как ты поставил я делаю все четко как показывает автор и все равно пусто

      @personal-trainer90@personal-trainer905 ай бұрын

    • @@personal-trainer90 я уже не помню..наверно JS скрипт на HTML странице подлючил не так.

      @JanTalan@JanTalan5 ай бұрын

  • Спасибо за уроки. У меня в W10 не цепляет внутренний терминал Visual Studio Code установщик npm и npx. Решил проблему через встроенный терминал W10. Не забудьте прописать системные пути PATH в винде.

    @andrewnagorny6952@andrewnagorny6952 Жыл бұрын

    • а можно подробнее😊

      @just4funlb113@just4funlb113 Жыл бұрын

  • ReactDOM.render(elements, document.getElementById("app")); React 18.2 still works this version and in my opinion it's clearer

    @hrayrashchyan5925@hrayrashchyan5925 Жыл бұрын

  • А можно поинтересоваться, что у тебя стоит за plugin для отображения папок ?

    @dimitrishat8659@dimitrishat8659 Жыл бұрын

    • А всё, я увидел в предыдущем видео в списке расширений название. Благодарю

      @dimitrishat8659@dimitrishat8659 Жыл бұрын

  • как же кайфово когда ты сначало изучил NodeJS и только потом перешел на React Лучше сначала ознакомьтесь с NodeJS потому что в дальнейшем изучении React нужно будет знать NodeJS

    @nowyd@nowyd Жыл бұрын

    • Приведи пример пожалуйста, где нужно будет использовать знания нода?

      @fl4mescare@fl4mescare Жыл бұрын

    • @@fl4mescare Серверная часть , запуск сервера, скачивание библиотек , привязка

      @nowyd@nowyd Жыл бұрын

    • @@nowyd так ReactJs для клиентской части, а не для серверной? Подправьте, я думал начать с клиентской, а после ознакомиться с Node.

      @YtArslan@YtArslan Жыл бұрын

  • Не видил видос но знаю что он топ

    @artik6614@artik6614 Жыл бұрын

  • В 18 версии react идёт другая система рендеринга, сначала присваиваешь константе элемент, который прогоняешь через createRoot, а потом уже в него добавляешь html код

    @nedodev@nedodev4 ай бұрын

    • Спасибо, было полезно

      @user-oj6fl3uq3f@user-oj6fl3uq3fАй бұрын

  • то есть для npx create-react-app нам не понадобится устанавливать babel?

    @mooren2225@mooren2225 Жыл бұрын

    • правилно, все необходимые пакеты установятся

      @user-mw4yh4je3y@user-mw4yh4je3y11 ай бұрын

    • @@user-mw4yh4je3y не подскажите как мне решить проблему с моей ошибкой не загружает ни какие файлы после команды в npm ошибка `npm fund`

      @oleg.j8863@oleg.j88639 ай бұрын

  • Какой же кайф не смотреть туториалы с индусами)

    @serikseidigalimov4638@serikseidigalimov46386 ай бұрын

  • ✅

    @mentalshifting.2382@mentalshifting.2382 Жыл бұрын

  • как называется плагин который облегчает писание кода на JSX как у вас в видео?

    @nics51@nics51 Жыл бұрын

    • Vs code

      @mikaTx@mikaTx Жыл бұрын

    • @@mikaTx не шаришь, чтобы легче писать код в реакте и чтобы emmet заработал в jsx компоненте нужно просто зайти в настройки, потом emmet ну а дальше нажать на добавить язык и вписать туда в первое поле: javascript во второе поле javascriptreact

      @nics51@nics51 Жыл бұрын

  • у меня ошибка на стадии построения связанной с package.json не понимаю что не так

    @justinjustin4061@justinjustin4061 Жыл бұрын

    • Как решили проблему? У меня тоже при построении ошибка: [eslint] Plugin "react" was conflicted between "package.json » eslint-config-react-app »

      @user-ns6uq6qn4x@user-ns6uq6qn4x Жыл бұрын

    • Ne znayu chto za problema, yab posmotrel file json. Tam budet bla bla. Bla. Vot etu stroku mojete menyat na nazvaniya fayla. Ne znayu poka predpologayu boble ili kak nazivaetsya biblioteka reakt

      @mikaTx@mikaTx Жыл бұрын

  • Проблемы с подключением npx. При написании команды npx create-react-app . выдает большую ошибку. Может знает кто-то, как это исправить?

    @user-fy9zm4eu2u@user-fy9zm4eu2uАй бұрын

    • какая у тебя ошибка? у меня была связана с тем, что путь к npmбыл неверным, причем вручную изменение пути в переменных среды эту проблему не решало, видимо это зашито в самой команде. короч помогло только копирование всего содержимого папки nodejs в папку, где он ожидает увидеть npm, в моей случае это в: C:\Users\%Username%\AppData\Roaming

      @semennikishin2809@semennikishin2809Ай бұрын

  • Странно, делаю все по видео, при запуске нет никаких ошибок, но при это при запуске приложения не отображается инпут

    @user-kv5ze5qc2b@user-kv5ze5qc2b Жыл бұрын

    • Live server mojet ne podkluchen ili disabled ili ne rabotaet. Ifi na file explorer naydi tot samiy index.html i najimay na nego napryamuyu. Otkroetsya na chrome esli default u tebya chrome. I budet rabotat. Live server delaet pochti toje samoe plyus obnovlyaet no glyuchit inogda

      @mikaTx@mikaTx Жыл бұрын

  • Сделай пожалуйста туториал по созданию социальной сети используя джанго, джанго рест фреймворк, и реакт пожайлуста.

    @PhillippApetenok@PhillippApetenok Жыл бұрын

    • а может тебе еще тутор на жизнь сделать ?

      @N__C__R@N__C__R Жыл бұрын

    • 😁😁😁

      @mikaTx@mikaTx Жыл бұрын

  • а почему click это "клык"?

    @tvhostcc@tvhostcc Жыл бұрын

  • reactdom не работает в webstorm хелпаните пж

    @sw3ptop@sw3ptop4 ай бұрын

  • Что делать если вписываю npm i react и пишет что npm : Имя "npm" не распознано как имя командлета, функции, файла сценария или выполняемой программы. Проверьте правильность написания имени, а также наличие и правильность пути, после чего повторите попытку. строка:1 знак:1 + npm i react + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [], CommandNotFoundException + FullyQualifiedErrorId : CommandNotFoundException

    @felonix_@felonix_11 ай бұрын

    • Судя по всему ты когда установил node js не выбрал там галочку где идёт добавление npm

      @user-lm6xn8jm4l@user-lm6xn8jm4l5 күн бұрын

  • надо писать а не (это синтаксис XHTML ныне считающийся устревшим как лет 10 а то и больше)

    @n.i..y9538@n.i..y95386 ай бұрын

  • если у которо будет проблема как у меня с ошибкой в виде `mpn fund`

    @oleg.j8863@oleg.j88639 ай бұрын

  • mouse over, плохо работает в chrome

    @user-od3rf5oz5o@user-od3rf5oz5o Жыл бұрын

  • почему-то не появлялась папка node_modules решилось так: создал package.json, прописал зависимости и затем только запульнул npm i react интересно почему у меня так, а не как на уроке? зы: может кому-то поможет

    @user-rz8fe6ij3n@user-rz8fe6ij3n Жыл бұрын

    • Спасибо! Тоже не появлялась, по вашей инструкции появилась!

      @RinatYouldashbaev@RinatYouldashbaev Жыл бұрын

    • Такая же проблема, спасибо помогло )

      @corvette1297@corvette1297 Жыл бұрын

    • можно было не вручную писать, а написать команду npm init, чтобы создался package.json со всеми значениями

      @goldhope8123@goldhope812311 ай бұрын

    • опа, спасибо, сильно помогло!

      @elezthemdev@elezthemdev7 ай бұрын

    • спасибо большое!

      @didikha@didikha2 ай бұрын

  • npm run build не работает у меня одной ?

    @shavasana.1178@shavasana.1178 Жыл бұрын

  • Почему у меня ноут греется ?? Когда запускаю реакт, температура поднимается 80 градусов, как будто я игру играю... Знает кто-нибудь?

    @user-rr2gh4ox9i@user-rr2gh4ox9i5 ай бұрын

  • Всем, привет. У меня неправильно устанавливается через npx😢😢😢. Кто-нибудь может помочь.

    @Polonium_official@Polonium_official Жыл бұрын

    • какая у тебя ошибка? у меня была связана с тем, что путь к npmбыл неверным, причем вручную изменение пути в переменных среды эту проблему не решало, видимо это зашито в самой команде. короч помогло только копирование всего содержимого папки nodejs в папку, где он ожидает увидеть npm, в моей случае это в: C:\Users\%Username%\AppData\Roaming

      @semennikishin2809@semennikishin2809Ай бұрын

  • гарне пояснення, шкода що не українською

    @user-zw4bx4iq4k@user-zw4bx4iq4k9 ай бұрын

  • У кого npm run build не работает, сохраните js, ctrl S, мне помогло

    @kubiklegioner7975@kubiklegioner79757 ай бұрын

  • Странно, что говорите не методом рендер, а его оставляете.

    @user-tg5kb4mn9p@user-tg5kb4mn9pАй бұрын

  • по хорошему урок перезаписать. много переделок и очень запутано

    @user-js8ns7sg2q@user-js8ns7sg2q Жыл бұрын

  • опять не актуально? ругается ReactDOM.render is no longer supported in React 18. Use createRoot instead. опять обновлять курс? )))

    @BadmaevAldar@BadmaevAldar10 ай бұрын

  • Очень интересно, жаль, что с первого раза нихрена не работает

    @hygoe3183@hygoe31836 ай бұрын

  • Блин начал смотреть, кодить, а в браузере ошибки, по типу устаревший синтаксис, а нет чего ни будь более свежого по реакт?

    @user-pv5qw6gj2f@user-pv5qw6gj2f7 ай бұрын

    • до конца хоть досмотри, там покажут новый синтаксис

      @naligdehh@naligdehh7 ай бұрын

  • слишком мало просмотров для такого видео.

    @kristv2873@kristv2873 Жыл бұрын

  • Пример кода без jsx выглядит опрятнее, так и не раскрыли преимуществ jsx

    @logvnv@logvnv Жыл бұрын

    • Согласен, и что мешает с имитировать работу jsx-а, при наличии опыта в алгоритмах? (Вопрос к седящим на jsx)

      @user-rk9nu1mx1c@user-rk9nu1mx1c Жыл бұрын

    • Можно писать html код в js файле. Вот вам и преимущество)

      @tazorprod.934@tazorprod.934 Жыл бұрын

  • Обидно, что всё в ошибках. Что-то удалось исправить, но в итоге всё равно не запустилось. Ну и система... неповоротливая, громоздкая. Ощущение, что всё это набор костылей, а не что-то рабочее. Штош... Видимо, только смотреть можно. И то с поправкой на то, что может встретиться что-то неактуальное.

    @ThomasBlack452@ThomasBlack45224 күн бұрын

  • 28:30

    @kokorinyan9776@kokorinyan97769 ай бұрын

  • Капец кучу времени убил решая проблемы, о которых автор даже не подумал. Что VS нужно перезапускать после установки Nodejs. Что перед созданием проекта должен быть установлен create-react-app. А то ошибки за ошибкой. Гуглишь, опять ошибки.

    @sokoltsov@sokoltsov2 ай бұрын

  • ОнКлык😂

    @evolutlut2587@evolutlut25874 ай бұрын

  • 7:31

    @lolo_to@lolo_to5 ай бұрын

  • ну и накой хрен мне Node.js, если сервер у меня может быть на php или допустим на python?

    @vater122@vater1225 ай бұрын

    • 😂 ну сервер у тебя может быть какой угодно, а нода тебе нужна для разработки :)

      @romanborysenko736@romanborysenko7364 ай бұрын

  • Это все ещё Гоша дударь?

    @pavelharelyshau6106@pavelharelyshau61068 ай бұрын

  • что-то мне не понравился реакт много ошибок и тд и тп

    @arithene@arithene Жыл бұрын

    • Ну дак это так везде) Чините)

      @ge1iy138@ge1iy138 Жыл бұрын

    • @@ge1iy138 да, не. Просто тупо распиаренная реклама

      @arithene@arithene Жыл бұрын

    • @@arithene Ага, только на эту рекламу примерно 70% вакансий на рынке

      @ge1iy138@ge1iy138 Жыл бұрын

    • @@ge1iy138 из воздуха цифры ясно

      @arithene@arithene Жыл бұрын

    • ​@@arithene дак зайдите на хед хантер , там даже навскидку сказать можно, что вакансий на реакт гораздо больше

      @ge1iy138@ge1iy138 Жыл бұрын

  • javascript xml - после такого я выключил

    @vadymvoloshchuk8379@vadymvoloshchuk8379 Жыл бұрын

  • 20:18

    @lolo_to@lolo_to3 ай бұрын
KZhead