Изучение основ React js в одном видео уроке за 20 минут

В этом видео я покажу уроки react js с нуля и расскажу все основы react js за 20 минут. Все что необходимо изучить начинающему javascript разработчику, все основыне моменты библиотеки react js на простых примерах. Компоненты react, рендеринг react dom, классы компонентов, jsx, обработка событий, состояния(state) и свойства(props). Если вы начинали учить react js но не смогли его понять это видео идеально вам подойдет. Я покажу как легко начать работу на React js новичку, сделать первые шаги в сфере разработки react приложений, позволяющие приступить к выполнению собственных проектов.

[@SuprunAlexey]

[@vilka_v_ass]

Web Developer Blog почему не npx new-react-app?

[@SuprunAlexey]

Потому что новичек увидит что можно изначально в самом html юзать и попробует, а не его отпугнут какие то команды, ещё и npx какой то create react, та вы что. Я спрашивал у людей почему они не могут выучить фреймы, получил интересный ответ, изначально непонятно что куда и где вводить какие команды, далее всякие зависимости и тд. Это сложно для понимания самых начинающих.

[@353_YK_RF]

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

[@МихаилСендега]

Урок супер. Посмотрел и пошёл на собес. С понедельника выхожу на работу

[@ДенисД-и7н]

Бедлам, а не основы react, одно из худших объяснений основ. Ничего не понятно что, откуда и зачем....

[@Александр-т8э7г]

Это не изучение основ, а ты используешь/демоснтрируешь основы не обучая предварительно тому что ты пишешь. Это разные вещи.

[@SuprunAlexey]

не вижу проблемы

[@MultiGeho]

@@SuprunAlexey А я вижу

[@RuslanMavlyanov]

@@MultiGeho А я не вижу

[@maksatbekburkanov4522]

Я не могу понять откуда берётся и зачем нужно писать именно это, это видео для людей которые почти в идеале владеют плейн ванила Джаваскрипт

[@edwardfreedom]

Если знаешь джава скрипт, то вопросы не должны возникнуть

[@duoduoo6732]

спасибо. идеальный способ обучения для новичков. Но как babel в итоге использвался в этом видео? просто подключили и оно само все делает? т.е. благодаря ему браузер понимает jsx синтаксис внутри React.Compoonent класса? или реакт компонент класс использует Бабел для превращения jsx синтаксиса в Js для понимания браузером? а в случае nodejs там вроде как есть папка для выходных файлов. получается там файлы каждый раз билдить надо в отличии от этого способа? и при билдинге получается происходит конвертация jsx в js каким то способом на стороне Nodejs? наверное Nodejs имеет свой babel?

[@kh3833]

Супер. Общее представление с минимумом настроек и минимумом загрузок библиотек. Очень хорошо.

[@АлексейСергеевич-л9у]

Шикарно дядя, я реакт 7дней учил + видос твой глянул. И сразу дошло)))Спасибо

[@alephzero7808]

дядя😂

[@MiqayelPetrosyan]

в changeName() можно и так, чтоб при каждом нажатие имя менялось this.state.name == 'Ivan' ? this.setState ({name:'Alexey'}): this.setState ({name:'Ivan'});

[@dixydo]

Отличное видео - сам backend пишу, с js не работаю, но понял абсолютно всё. И кажется, что это лучшее, что может быть для меня.

[@tdm036]

Node - backend на js)

[@dmytroholoborodko8361]

Дмитрий Терентьев backend может быть на чем угодно, например, php, python и тд

[@kavisan90]

Сделай пожалуйста больше видео по React, было бы не плохо несколько уроков.

[@ДанилПономаренко-я3о]

Запиши, пожалуйста серию уроков по React js на реальном проекте. Очень интересно будет посмотреть.

[@SuprunAlexey]

Когда то обязательно запишу

[@alexey6329]

Можешь показать какой нибудь пример где реакт действительно нужен? Например с реакт код пишется в 5 строк, а на чистом JS в 55 строк. Спасибо.

[@SuprunAlexey]

Будем делать проект

[@Ooshka]

Alexey Zavodko если ты задаешься вопросами зачем нужны js фреймы и библиотеки, то ты еще просто в силу опыта не сталкивался с проблемами, которые решают данные вещи) грубый и простой пример: js/jq

[@M-Daeva]

Я тоже не понимаю, какие возможности дает реакт, хотя уже оценил плюшки jq и пишу свою библиотеку js. В то же время реакт с его jsx выглядит громоздким и запутанным.

[@borismor9182]

@@M-Daeva Когда интерфейс будет больше чем из 2 инпутов и кнопки то ваш jQ станет лапшой. React позволяет структурировать проект и использовать повторяющиеся блоки.

[@kanekabal416]

Очень доступный и достойный урок!

[@srt2046]

Спасибо бро!

[@SuprunAlexey]

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

[@annaelez786]

У меня такая ошибка в консоли. Не могли бы вы помочь ее решить? Access to XMLHttpRequest at 'file:........' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

[@gullarbilan]

Привет я новичок на фронд-енд разработки. Я с другом поставили себе цель создать сайт галерея как behance.com Сайт имеет тот же функциональность behance-a , несколько видов конструктора проектов для дизайнеров, лайки репосты комментарии , публикации проектов сверху вниз по дате, и тд тп. Да цель слишком жирная для новичка, но нам это сайт данный момент потолок развития первого этажа. Подскажите пожалуйста какие технологии изучить? Можно ли использовать реакт для многостраничного сайта. Какую библиотеку или фреймворк использовать для взаимодействия с клиентом на сайте (конструктор для проектов)? Какой фреймворк для back-end использовать? Не ругайте меня что я новичок и не понимаю многие вещи. Спасибо

[@Artist-pi8ek]

Есть чат в телеге - t.me/front_end_developer . Там тебе помогут с направлением движения

[@russells1425]

Ваууу, вот это у тебя голос изменился! Если смотреть ролики месячной давности и сегодняшние, то разница довольно ощутимая))))

[@SuprunAlexey]

Приболел чутка

[@LuckyStilet1]

нашаманил

[@alephzero7808]

Тогда ещё Ноды не было,чтоли?Все через Npm же можно загрузить

[@JaratMan]

а че у меня не подсвечивается когда начинаю писать "class App extends" или это нормально?)) подскажите пж))

[@lostcodder]

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

[@SuprunAlexey]

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

[@SirusStarTV]

👍

[@olegsubik]

Пишу на PyCharm и первые строки(*) он уже не воспринимает? Может нужно что-то установить до того, как использовать React, для того, что б PyCharm нормально их читал? Я, относительно, новичек в этом деле, так что не судите строго. * calss App extends React.Component{ render() { return Hello World! } } ReactDOM.render(, document.getElementById('root'))

[@olegsubik]

ну js читает нормально. react не хочет. Я могу и на другой проге от jatbrains писать, но если есть намного более удобный текстовый редактор, то подскажи плз

[@diasabishev857]

calss App extends React.Component{ - у тебя сразу "class" не правильно написано

[@sashkoification]

phpstorm

[@MiqayelPetrosyan]

есть уже видео про react dev tools ?

[@alexey6329]

Подскажи пож порог вхождения в реакт, что уже надо знать для изучения? JS? Блин я вообще не понял зачем это нужно, в чем изюм?

[@SuprunAlexey]

Js? Его нужно знать ещё до того как думать учить реакт

[@alexey6329]

Ок, спасибо!

[@vladick143]

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

[@СергейДрузь-ь3ж]

И опять с листочка читает 😃

[@SuprunAlexey]

Конечно информацию подготовил

[@alergeo1]

Жаль что ты хотя бы Create React App не использовал. Так почти никто не пишет. Хотя наверное ты не хотел, совсем новичков отпугивать))) Ну и стэйт с конструктором не обязательно писать. Хотя я думаю ты это и сам знаешь.

[@SuprunAlexey]

Видео исключительно для начинающих

[@alergeo1]

Тут можно поспорить, тот же Create React App был сделан для новичков. С другой стороны тогда бы пришлось объяснять что такое webpack, yarn, npm. А это ещё минут пять. Потом бы было ещё неплохо объяснить, а для чего реакт нужен? Рассказать про фпс, про движок fiber, про производительность. Зачем нужен typescript, тесты и редакс с сагами. И получился бы неплохой ролик, часа на три. Полезный до жути, но нахрен никому ненужный(из новичков). Вообщем сорян что докопался)))

[@3D_Infinity]

Для того чтобы создать пустой темплейт через Create React App вообще не обязательно знать, что такое webpack, npm и yarn. Всё, что нужно - установленный nodejs (который у современного веб-разработчика просто по умолчанию обязан быть) и прочитать страницу в документации, где написано какие команды нужно использовать. Даже полный новичок с этим разберётся за 5 минут.

[@SuprunAlexey]

Не факт

[@6ajkermexx591]

Давайте то..давайте сё..а почему? Понятно, что автор вкурсе Реакта, а нам пояснить?

[@eugenemorani2240]

А почему ты не эммигрируешь в США ,Канаду или Австралию ? Или задумываешься об этом ?

[@SuprunAlexey]

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

[@eugenemorani2240]

Web Developer Blog Ааа а то я смотрю , что ты подписан на Портного , Блок Толстяка и т.д так и понял, что либо задумываешься либо задумывался ))))

[@ПИОНЕРТВ-о8х]

Друзья ! Товарищи !!! Есть книга какая-нибудь по react ?!!! Я из этого видео не понял ничего

[@SuprunAlexey]

Книг по реакту вроде еще нет, но документация доступная на официальном сайте

[@olegplahotniy7307]

Есть учебник "Реакт для начинающих", автор некто Пацианский, мне понравилось, четко и конкретно все расписал.

[@НінаГерасимова]

React быстро, автор Азат Мардан

[@yevheniiborisevich6935]

Практику по React можна сделать? Ещё бы пару по Redux)))

[@SuprunAlexey]

Сделаем

[@6ajkermexx591]

Такая куча рекламы на среднем контенте. Народ надеется за 20 минут научиться тому, за что получают 50-150к рублей?)))

[@SuprunAlexey]

Нет кучи рекламы(

[@6ajkermexx591]

@@SuprunAlexey я говорю не про Вашу рекламу, а про ту, которая прерывает видео и рекламирует что-то левое. Я понимаю, что заработок, но не 6-8шт за 20 минут ))

[@SuprunAlexey]

@@6ajkermexx591 так их всего пару на видео выскакиевает. 6-8 я никогда не ставил

[@6ajkermexx591]

@@SuprunAlexey я же не просто так написал. Либо там есть "мелким шрифтом ОТ 2-х", либо я не умею считать . И их там по 2шт идет. Написал свое мнение, а дальше Вам решать как его воспринимать.

[@muchachoevumoralex]

Зачем 23 минуты рассказывать то, что можно написать на html? Не разглядел преимуществ и каких-либо компонентов Реакта.

[@toplorry]

Может методы, а не функции? Внутри класса пишешь все таки, можешь запутать новичков!

[@SuprunAlexey]

Оки, буду впредь сильнее обращать на это внимание, может заговорился

[@VedmedykBruno]

Очень мало из этого понял.

[@p_levin]

Во, ну хоть капля дельного)

[@SuprunAlexey]

А было не дельное?

[@Hrachik333]

Это конечно хорошо, но пока не вижу смысла использовать если есть тот же php и js(jqery). В чем преимущество Реакт от php?

[@SuprunAlexey]

Реакт и php несравнимые вещи)

[@Hrachik333]

@@SuprunAlexey ok, тогда жду дополнительные уроки, так как я понимаю в простом примере не возможно представить мощность этого Реакта.

[@ЭрмекСултанов-к9ь]

А когда примерно начнется курс верстки на Bootstrap ?

[@SuprunAlexey]

Как только так сразу

[@darkman9412]

Я тоже хочу научиться верстать на bootstrap. скорее бы )

[@SuprunAlexey]

Учту

[@south_central]

Что значит Сложные Вэб- Интерфейсы? Вот например Фэйсбук или Вк - это сложные интерфейсы? Понятно что для лендинга это не надо. Напишите мне примеры сложных иньерфэйсов.

[@SuprunAlexey]

SPA

[@3D_Infinity]

Выше тут уже приводил в пример доски из Trello. Фейсбук тоже хороший пример, потому что они сами свой реакт используют.

[@jusupmunanbekov7477]

Не смотрю твой канал тупо из-за твоего голоса!!! А в этом видео уже лучше смотреть стало приятно используй вот такой голос в др видео

[@ea5970]

Кажется нативный js проще)

[@jenyaspace]

судя по видео я так понял что функциональные компоненты лучше не использовать, а только на основе классов

[@Дендрай]

ну хоть убей, не понимаю зачем нужен реакт. Все это можно написать на js за строк 10-15

[@SuprunAlexey]

Для построения сложных интерфейсов

[@Дендрай]

Web Developer Blog а на jquery + bootstrap?

[@SuprunAlexey]

прошлый век

[@romansavich7226]

​@@Nikita-hr6ss Для удобства,потому что тот же джс и jquery в них нет такой стуктуризации и огранизованости кода в реакте у тебя есть доступ к отдельным компонентам,это позволяет быстрее менять что-то в програме,также в реакте отличо реализуется принципы SOLID ,это сильно упрощает жизнь фронтендерам , так как и с вю джс и ангуляром

[@chesovnik]

Реклама каждые 2 минуты 👎

[@tigranovakyan4913]

Это же не изучение_просто рассказ как ты под диктовку что то там пишешь -зато рекламы насмотрелся я)) Жаль что не смог у тебя чему-нибудь научится...

[@Viktor-fi9ms]

Не столько рассказал сколько накормил рекламой

[@SuprunAlexey]

Какой рекламой

[@Viktor-fi9ms]

Которая каждую минуту вылазит, только и успевай пропускать

[@SuprunAlexey]

Ну не каждую. А вы бесплатно смотрите обучающее видео? Не платите деньги за курсы?

[@Viktor-fi9ms]

Советую сходить на работу и заработать себе денег

[@SuprunAlexey]

Это к чему?

[@ВиталийСлободянюк-х8м]

ссылки не рабочие Вот какие у меня воркаут

[@arkman1292]

[@vana__f7570]

объясняешь очень плохо. Твои видео - полная фигня!!!

[@zhivich7868]

побыстрее бы php)

[@SuprunAlexey]

А как же реакт

[@zhivich7868]

так все по порядку, сначала пхп потом уже посложнее)

[@SuprunAlexey]

реакт сложнее пхп?

[@zhivich7868]

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

[@misteranderson6058]

сахар какой то.

[@SuprunAlexey]

весьма

[@Ooshka]

Angular и Vue как то интереснее... чет реакт вообще каша

[@SuprunAlexey]

Кому как

[@3D_Infinity]

Реакт каша? Ты наверное ещё ExtJS не видел :)

[@NikK0lay]

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

[@ДаниилМедведников-р6ч]

Скорее всего, вы просто не строили сложных веб-интерфейсов

[@3D_Infinity]

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

[@NikK0lay]

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

[@NikK0lay]

Andrey работаю с очень сложными сайтами. И вот эта библиотека неоправданно сложна и не имеет какого то большего функционала чем даже. JQ

[@3D_Infinity]

Ant Sot, "очень сложными" - это какими, конкретные примеры или референсы можно привести? "не имеет какого то большего функционала чем даже. JQ" - и вот эта фраза говорит только о том, что с реактом вы даже на базовом уровне не разобрались. jQuery - библиотека, которая позволяет упростить и сделать более читаемым обычный JS-код, это её главное применение. React - позволяет сразу "из коробки" начать применять компонентный подход к интерфейсу, отслеживая и управляя состоянием всех его компонентов, чего сама по себе jQuery и близко не умеет. При желании можно реализовать подобный функционал на jQuery, но это: а) потраченное время, б) потенциальные баги. Сложного в самом реакте нет ничего, просто в этом видео нет какого-то яркого и наглядного примера его применения. Попробуйте самостоятельно реализовать интерфейс наподобие досок с карточками в Trello сначала на чистом jQuery, а потом на React. Сами всё поймёте, когда начнёте отлаживать и тестировать свой код.