8 бесплатных обучалок фреймворку React.js | GeekBrains

И Redux для увеличения кругозора.

https://d2xzmw6cctk25h.cloudfront.net/post/1076/og_cover_image/8e7c3877b8f543f785d3b3d7dd6da6f9

React.js практически с самого своего появления в 2013 году стал привлекать внимание массовой аудитории разработчиков. В 2017 году это официально один из двух наиболее популярных JavaScript-фреймворков (библиотек), а по некоторым данным и вовсе абсолютный лидер. В общем, если вы веб-разработчик, то вам строго рекомендуется хотя бы ознакомиться с React и его возможностями. И вам в помощь 8 абсолютно бесплатных туториалов.

GitBook по React на русском

Начнём с русскоязычного учебника, ведь многие начинающие гики в нашей стране просто игнорируют потребность в изучении английского языка на профессиональном уровне. Впрочем, с таким учебником он не особо-то и нужен.

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

Курсы по React от Tyler McGinnis

От русского языка переходим к хардкорно-английскому, а именно видеокурсам, направленным на базовое знакомство с библиотекой React. 48 занятий (не переживайте, в сумме это 287 минут), посвящённых базовым принципам работы с библиотекой, рассмотрению шаблонных примеров и решению типовых задач. Можете использовать вместе с русским учебником для подтягивания знаний английского.

Hacking with React

Электронная бесплатная книга по React, которая поможет вам практически с нулевыми знаниями погрузиться в мир веб-разработки. Начинается она с настройки библиотеки, знакомит с JSX, а далее с помощью Hacking with React вы создадите свой первый проект. Но не надейтесь найти здесь всю интересующую вас информацию по React и уж тем более по разработке веба. Данная книга только для поверхностного ознакомления. Кстати, если вы любитель почитать книги вне дома и работы, можете за нескромные 10$ скачать автономную версию учебника.

Официальный туториал по React

Если вам нужна исчерпывающая информация, единственный способ найти её — обратиться к первоисточнику, то есть к официальной странице библиотеки. Почему данный туториал не на первом месте в данном списке? Всё просто. Дело в том, что, на мой личный взгляд, он несколько избыточен для новичка. Если у вас есть опыт работы с каким-либо ещё JS-фреймворком, то официальное представление удобно и понятно. Если вы только вчера постигли основы программирования, лучше загляните сюда попозже.

Фундаментальные курсы от Egghead

Платформа Egghead предлагает видеоуроки, среди которых есть как общий вводный курс по JavaScript, так и занятия по отдельным фреймворкам, будь то Angular или React. Последний курс является третьим по объему материала, и он включает в себя 5 бесплатных разделов.

Два из них посвящено общим вопросам создания мобильных веб-приложений, два — знакомству с Redux, и ещё один раздел поведает о вопросах роутинга в React. Так как платформа выпускает бесплатные материалы исключительно для «затравки», то на полноценные знания можете рассчитывать только при оплате подписки категории Pro. Однако для получения представления о React и Redux хватит и этих коротких занятий.

GtiBook по Redux на русском

Раз уж речь зашла о Redux, который хоть и не является частью React, но определённо обитает где-то в этой же экосистеме, то вашему вниманию представлен русскоязычный учебник по этой дисциплине. Автор тот же, но материал здесь рассчитан на более искушённую публику. Здесь вы прочитаете и про webpack, и про hot module replacement, чего не было в первой части. А в результате вы вместе с автором создадите приложение для сборки фотографий из сети Вконтакте по заданным параметрам.

React и Redux с Cabin

Это минимальный туториал по созданию приложения с нуля. Начинаете с установки React, его настройки, подключаете Redux, работаете с фильтрами и получаете готовый продукт. Информация очень схожа с русскоязычной версией, но здесь больший акцент делается на гибкость и функциональность. А ещё работать здесь будете с фотографиями из Instagram.

The React Convention

Перед вами онлайн-журнал по разработке приложений с React. В силу специфики новичкам сюда лучше не соваться. Зато опытные, а точнее, «промежуточные» разработчики найдут здесь много полезного как по шаблонным проектным решениям, так и интересным вариантам применения библиотеки. В общем, всем тем, кто уже не новичок в React и Redux, но всё ещё много сомневается, обязательно периодически заходить, читать и не забывать периодически проверять обновления.

Курс React JS для начинающих + Redux — Онлайн уроки по ReactJS разработке с нуля

React — это библиотека на основе языка программирования JavaScript, которая была разработана компанией Facebook для того, чтобы упростить создание пользовательских интерфейсов.
Библиотека React служит для того, чтобы создавать веб-приложения, которые будут работать в браузере очень быстро. React JS является самой популярной из всех JS-технологий и большинство вакансий включает умение работать с этой библиотекой. React заметно «упрощает жизнь» веб-разработчику и делает процесс создания сайта в несколько раз быстрее, проще, и легким для дальнейшей доработки и развития.

В курсе Вы получите и теорию, как работает библиотека, и практику. Напишем, как минимум 3-4 приложения с использованием React.js + Redux.

Изучив компоненты React вы откроете для себя новые горизонты web-разработки!

Чему вы научитесь

• Познакомимся и настроим плагин ESLint
• Вспомним основные фичи ES6. Стандарты ES6-8. Классы в ES6 стандарте
• Синтаксис React. Модульные структуры
• Что такое препроцессор JSX, как правильно его использовать
• Свойства и состояния компонентов. События в React
• Рассмотрим различные подходы к стилизации приложений. Как улучшить приложение при помощи стилей, препроцессоров, готовых компонентов и др. полезных технологий
• Научимся работать с формами в React JS
• Серверная сторона приложения. Узнаем что такое API, познакомимся с Fetch API
• Как работают React-компоненты в реальных приложениях, жизненный цикл
• Изучим паттерны в React
• Познакомимся с понятием маршрутизации и поработаем с библиотекой React Router
• Познакомимся с хуками в React
• Узнаем что такое Redux. Соединим вместе React и Redux
• Познакомимся с технологией React Context
• Освоим применение React + Redux на реальных приложениях
• Поговорим про Json-server
• Освоим тестирование и отладку кода в React. UI тесты

В курсе очень много практики и примеров. Много домашних заданий практического характера. Тренироваться будем на приложениях и шаг за шагом будем создавать реальные приложения. К концу курса вы создадите, как минимум, 3-4 приложения на основе React.

• Начнем изучение React JS с абсолютного нуля (по Реакт). Посмотрим, что такое библиотека, из чего она состоит, как она собирается и т.д.
• Изучим всё, что необходимо для сборки полноценных web-приложений, которые работают с сервером и без сервера, с маршрутизацией и т.п.
• И добавим дополнительные технологии, в частности, Redux — очень часто встречается, как в дополнительных проектах, так и в требованиях к вакансиям.

Требования для прохождения курса

• Базовые знания веб-разработки и HTML/CSS
• Знания языка программирования JavaScript

Прежде чем углубляться в изучение библиотеки React, лучше сначала разобраться как следует с базовыми технологиями — рекомендуем изучить наши курсы:
ВЕБ-разработчик 2020 — с нуля до результата!
Верстальщик 2020 — HTML 5, CSS 3, Bootstrap 4, JavaScript
JavaScript — полный курс с нуля до результата!

Программа обучения включает видео уроки по изучению React JS для начинающих. Благодаря практическим заданиям и примерам, Вы сможете закрепить полученные знания по использованию ReactJS + Redux на практике.

Мы собрали отзывы учеников, прошедших онлайн курс. Оставьте свой отзыв после прохождения Курса React JS для начинающих + Redux.

12 бесплатных ресурсов для изучения React

Как вы уже наверняка знаете, React — это JavaScript-библиотека для создания пользовательских интерфейсов, которая разрабатывается и поддерживается Facebook, Instagram и сообществом отдельных разработчиков и корпораций.

Русскоязычная версия официального сайта React

Предсказуемо, но самым актуальным и надежным
источником информации для изучения библиотеки является официальный хелп. Он очень удобен и у него есть переводная версия. Помимо справочника по API, сайт предлагает руководство по быстрому старту, подробное учебное
пособие и дополнительные мануалы для более продвинутых функций.

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

Руководство для
начинающих

Руководство для новичков в React

Руководство для начинающих egghead.io – обширный курс из 30 уроков по React, который научит всему, что следует знать для использования библиотеки в развертывании веб-приложений.

Learn React

Learn React

Learn React – еще один отличный курс из 58 уроков, более углубленно охватывающих широкий спектр тем по React. На сайте разработана
крутая платформа со встроенным редактором, который позволяет играться с кодом во время просмотра видео.

FreeCodeCamp

FreeCodeCamp

Список учебных ресурсов
не был бы полным без FreeCodeCamp – одной из крупнейших платформ для изучения
кода с тысячами статей, руководств и учебных пособий. По приведенной ссылке курс по фронтенду с React.

В нашей подборке 70 YouTube-каналов для фронтенд-разработчика есть много материалов по React:

Шпаргалка по React

React.js Cheatsheet

React.js Cheatsheet – сборник
готового кода по множеству тем: компонентам, свойствам, хукам, работе с узлами DOM и т. д.

React Cheat
Sheet

React Cheat Sheet

Если вам не пришелся по душе первый вариант, посмотрите на React Cheat Sheet – это шпаргалка с фильтром по имени, примерами и ссылками на документацию.

Шпаргалка по паттернам React

Фрагмент страницы React Patterns

React Patterns – упорядоченный список ясных кратких шаблонов. Можно оформить подписку и получать новые описания шаблонов React и советов на почту.

React Podcast

React подкасты

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

Пятиминутка React

Пятиминутка React

Подкаст 5minreact.ru посвящен не только React, но и различным смежным технологиям и конференциям. Но на странице легко найти темы, посвященные только React. Подкаст ведется с ноября 2016 г., выпущено 65 записей. Кроме видео автор иногда записывает и скринксты.

Dev.to

Блог dev.to

Dev.to – место с
дружественной атмосферой, куда заходят разработчики для обсуждения новинок и
общения. Погружаясь в тему, используйте тег #react. Там уже есть тонна статей, туториалов
и обсуждений, которые каждый день пополняются новыми материалами.

Overreacted.io

Личный блог Дэна Абрамова

Overreacted.io – личный блог Дэна
Абрамова, одного из главных разработчиков React и соавтора Redux. Отличный блог для тех, кто уже в теме. Здесь вы найдете массу интересного о React и его
внутренней структуре.

React
Resources

React Resources

React Resources – портал,
занимающийся сбором информации о React из разных источников со
всего веба. Материал может быть не особо современным и качественным, но вы
можете быть уверены, что найдете здесь практически всё, что было когда-либо опубликовано о React.

Надеемся, подборка поможет вам выбрать самый эффективный способ освоения этой замечательной библиотеки. Вот ещё несколько наших статей о React:

о некоторых особенностях курса, JSX и JavaScript / Блог компании RUVDS.com / Хабр

Сегодня мы публикуем продолжение учебного курса по React. Здесь речь пойдёт о некоторых особенностях курса, касающихся, в частности, стиля кода. Тут же мы подробнее поговорим о взаимоотношениях между JSX и JavaScript.

→ Часть 1: обзор курса, причины популярности React, ReactDOM и JSX

→ Часть 2: функциональные компоненты

→ Часть 3: файлы компонентов, структура проектов

→ Часть 4: родительские и дочерние компоненты

→ Часть 5: начало работы над TODO-приложением, основы стилизации

→ Часть 6: о некоторых особенностях курса, JSX и JavaScript

→ Часть 7: встроенные стили

→ Часть 8: продолжение работы над TODO-приложением, знакомство со свойствами компонентов

→ Часть 9: свойства компонентов

→ Часть 10: практикум по работе со свойствами компонентов и стилизации

→ Часть 11: динамическое формирование разметки и метод массивов map

→ Часть 12: практикум, третий этап работы над TODO-приложением

→ Часть 13: компоненты, основанные на классах

→ Часть 14: практикум по компонентам, основанным на классах, состояние компонентов

→ Часть 15: практикумы по работе с состоянием компонентов

→ Часть 16: четвёртый этап работы над TODO-приложением, обработка событий

→ Часть 17: пятый этап работы над TODO-приложением, модификация состояния компонентов

→ Часть 18: шестой этап работы над TODO-приложением

→ Часть 19: методы жизненного цикла компонентов

→ Часть 20: первое занятие по условному рендерингу

→ Часть 21: второе занятие и практикум по условному рендерингу

→ Часть 22: седьмой этап работы над TODO-приложением, загрузка данных из внешних источников

→ Часть 23: первое занятие по работе с формами

→ Часть 24: второе занятие по работе с формами

→ Часть 25: практикум по работе с формами

→ Часть 26: архитектура приложений, паттерн Container/Component

→ Часть 27: курсовой проект

Занятие 13. О некоторых особенностях курса

→ Оригинал

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

import React from "react"
import ReactDOM from "react-dom"

function App() {
    return (
       <h2>Hello world!</h2>
    )
}

ReactDOM.render(<App />, document.getElementById("root"))

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

import React from "react";
import ReactDOM from "react-dom";

Я же недавно решил, что буду обходиться без них, в результате у меня и получается такой код, который вы видите в примерах. Конечно, в JavaScript есть конструкции, в которых без точек с запятой не обойтись. Скажем, при описании цикла for, синтаксис которого выглядит так:

for ([инициализация]; [условие]; [финальное выражение])выражение

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

Ещё одна особенность кода, который я пишу, заключается в том, что хотя ES6 технически позволяет использовать стрелочные функции в тех случаях, когда функции объявляют с использованием ключевого слова function, я этим не пользуюсь.

Например, код, приведённый выше, можно переписать так:

import React from "react"
import ReactDOM from "react-dom"

const App = () => <h2>Hello world!</h2>

ReactDOM.render(<App />, document.getElementById("root"))

Но я к подобному не привык. Полагаю, что стрелочные функции чрезвычайно полезны в определённых случаях, в которых особенности этих функций не мешают правильной работе кода. Например, тогда, когда обычно пользуются анонимными функциями, или когда пишут методы классов. Но я предпочитаю пользоваться традиционными функциями. Многие, при описании функциональных компонентов, пользуются стрелочными функциями. Я согласен с тем, что у такого подхода есть преимущества перед использованием традиционных конструкций. При этом я не стремлюсь навязывать какой-то определённый способ объявления функциональных компонентов.

Занятие 14. JSX и JavaScript

→ Оригинал

На следующих занятиях мы будем говорить о встроенных стилях. Прежде чем перейти к этим темам, нам нужно уточнить некоторые особенности взаимодействия JavaScript и JSX. Вы уже знаете, что, пользуясь возможностями React, мы можем, из обычного JavaScript-кода, возвращать конструкции, напоминающие обычную HTML-разметку, но являющиеся JSX-кодом. Такое происходит, например, в коде функциональных компонентов.

Что если имеется некая переменная, значение которой нужно подставить в возвращаемый функциональным компонентом JSX-код?

Предположим, у нас есть такой код:

import React from "react"
import ReactDOM from "react-dom"

function App() {
  return (
    <h2>Hello world!</h2>
  )
}

ReactDOM.render(<App />, document.getElementById("root"))

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

function App() {
  const firstName = "Bob"
  const lastName = "Ziroll"
  
  return (
    <h2>Hello world!</h2>
  )
}

Теперь мы хотим, чтобы то, что возвращает функциональный компонент, оказалось бы не заголовком первого уровня с текстом Hello world!, а заголовком, содержащим приветствие вида Hello Bob Ziroll!, которое сформировано с использованием имеющихся в компоненте переменных.

Попробуем переписать то, что возвращает компонент, так:

<h2>Hello firstName + " " + lastName!</h2>

Если взглянуть на то, что появится на странице после обработки подобного кода, то окажется, что выглядит это не так, как нам нужно. А именно, на страницу попадёт текст Hello firstName + " " + lastName!. При этом, если для запуска примера используется стандартный проект, созданный средствами create-react-app, нас предупредят о том, что константам firstName и lastName назначены значения, которые нигде не используются. Правда, это не помешает появлению на странице текста, который представляет собой в точности то, что было возвращено функциональным компонентом, без подстановки вместо того, что нам казалось именами переменных, их значений. Имена переменных в таком виде система считает обычным текстом.

Зададимся вопросом о том, как воспользоваться возможностями JavaScript в JSX-коде. На самом деле, сделать это довольно просто. В нашем случае достаточно лишь заключить то, что должно быть интерпретировано как JavaScript-код, в фигурные скобки. В результате то, что возвращает компонент, будет выглядеть так:

<h2>Hello {firstName + " " + lastName}!</h2>

При этом на страницу попадёт текст Hello Bob Ziroll!. В этих фрагментах JSX-кода, выделенных фигурными скобками, можно использовать обычные JavaScript-конструкции. Вот как выглядит в браузере то, что выведет этот код:
Страница, разметка которой сформирована средствами JSX и JavaScript

Так как при работе со строками в современных условиях, в основном, применяются возможности ES6, перепишем код с их использованием. А именно, речь идёт о шаблонных литералах, оформляемых с помощью обратных кавычек (` `). Такие строки могут содержать конструкции вида ${выражение}. Стандартное поведение шаблонных литералов предусматривает вычисление содержащихся в фигурных скобках выражений и преобразование того, что получится, в строку. В нашем случае это будет выглядеть так:

<h2>Hello {`${firstName} ${lastName}`}!</h2>

Обратите внимание на то, что имя и фамилия разделены пробелом, который интерпретируется здесь как обычный символ. Результат выполнения этого кода будет таким же, как было показано выше. В общем-то, самое главное, что вы должны сейчас понять, заключается, в том, что то, что заключено в фигурные скобки, находящиеся в JSX-коде — это обычный JS.

Рассмотрим ещё один пример. А именно, перепишем наш код так, чтобы, если его вызывают утром, он выводил бы текст Good morning, если днём — Good afternoon, а если вечером — Good night. Для начала напишем программу, которая сообщает о том, который сейчас час. Вот код функционального компонента App, который решает эту задачу:

function App() {
  const date = new Date()
  
  return (
    <h2>It is currently about {date.getHours() % 12} o'clock!</h2>
  )
}

Тут создан новый экземпляр объекта Date. В JSX используется JavaScript-код, благодаря которому мы узнаём, вызвав метод date.getHours(), который сейчас час, после чего, вычисляя остаток от деления этого числа на 12, приводим время к 12-часовому формату. Похожим образом можно, проверив время, сформировать нужную нам строку. Например, это может выглядеть так:

function App() {
  const date = new Date()
  const hours = date.getHours()
  let timeOfDay
  
  if (hours < 12) {
    timeOfDay = "morning"
  } else if (hours >= 12 && hours < 17) {
    timeOfDay = "afternoon"
  } else {
    timeOfDay = "night"
  }
  
  return (
    <h2>Good {timeOfDay}!</h2>
  )
}

Тут имеется переменная timeOfDay, а анализируя текущее время с помощью конструкции if, мы узнаём время дня и записываем его в эту переменную. После этого мы используем переменную в возвращаемом компонентом JSX-коде.

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

Итоги

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

Уважаемые читатели! Пользуетесь ли вы точками с запятой в своём JavaScript-коде?

React.js разработчик | OTUS

Окончил Волгоградский государственный технический университет по специальности «Автоматизированные системы обработки информации и управления». Увлёкся программированием ещё в студенческие годы (в 2010 году) и остановиться так и не смог. В коммерческой разработке с 2012 года.

Работал с проектами разного масштаба, прошёл путь от Junior до Senior. С 2016 года — старший инженер-программист в EPAM Systems, с 2018 по май 2019 — технический руководитель по разработке софта в Skywind Group.

Участвовал в международном проекте компании Ericsson, занимался web-программированием и собственными проектами.

Является специалистом по архитектуре веб-приложений, хорошо знает JS, React, Node, Mongo, MySQL, фреймворки Express, Koa2, AngularJS. Уверен, что в программировании всё приходит с практикой.

Руководитель программы

Опытный JavaScript-разработчик. Принимал участие в реализации самых разных проектов: разрабатывал сервисные приложения, интерфейсы для банковского софта, системы для каталогизации и учета. Есть опыт серверной разработки с Node.js.

Начинал более 10 лет назад в качестве PHP-разработчика, в 2013 году переключился на JavaScript-разработку. В настоящее время занимается развитием мобильного направления сервиса Food Delivery.

Активно участвует в жизни JS-сообщества: митапы, конференции, преподавание — это всё является неотъемлемой частью жизни уже много лет. В свободное время помогает другим и учится сам.

Преподаватель

В IT с 17 лет. В основном .NET и JS, по жизни TypeScript-самурай и фанат ReasonML. Спикер, член программного комитета HolyJS и организатор CyprusJS.

Интересы: open source, теория типов и компиляторов, DX

Окончил МГТУ им.Н.Э.Баумана в 2016 году со степенью магистра. Прошел обратный путь от менеджера IT-проектов до разработчика) Принимал участие в разработке главного сайта крупного банка, интернет-банкинга для юридических лиц, внутреннего сервиса для менеджеров в магазинах крупной торговой сети, travel-проекта. React-lover. Начинал изучать frontend-разработку с онлайн-курсов.

Компании: Банк «Открытие», Альфа-банк, Leroy Merlin, Wildberries

Живёт и работает в Германии, возглавляет команду Frontend-разработчиков в компании Medici Living Group.

Участвовал в создании различных приложений на React Native, Swift, Java и Xamarin.Forms с нуля и до production. Периодически делал contribution в различных open-source-библиотеках для React Native, примеры можно посмотреть по ссылкам на GitHub: Google Fit, Apple Healthkit.

Занимается программированием ещё со школьных лет: сначала это была лишь олимпиадная сфера, затем, на втором курсе университета, перешёл в научную среду и начал работать в Институте системного программирования. На 4-м курсе увлёкся мобильной разработкой и открыл для себя мир React Native. В течение 3 лет занимался аутсорсингом в составе небольшой интернациональной команды, создавая приложения на заказ.

Образование:
— Высшая школа экономики, «Инженер программного обеспечения»;
— University of Kaiserslautern, Germany, Computer Science.

Преподаватель

Базовый React

Освоите самую популярную js-библиотеку на примере практического проекта и сделаете одну работу в портфолио

Курс для тех, кто уже хорошо знает нативный JavaScript и может выполнять настоящие проекты. Без знаний JS на курсе будет очень тяжело и непонятно. React подойдёт тем, кто хочет вырасти из позиции джуниора, работать над более серьёзными проектами и зарабатывать больше.

Практический курс

Популярность поисковых запросов на тему React, Vue и Angular за последний год. Google Trends

Программа курса из четырнадцати уроков с теорией и кучей практики. Учимся на реальном проекте

19 августа — 9 сентября

Кому подойдёт курс

О курсе за 4 минуты

На React пишут и в маленьких студиях, и на фрилансе, и в корпорациях — от Фейсбука, который поддерживает развитие этой библиотеки, до фрилансеров на FL.ru. Работодатели ищут фронтендеров со знанием React на постоянку в студию и на отдельные проекты на фрилансе.

React — самая популярная
js-библиотека во всём мире.
Её используют разработчики Европы и СНГ

Со знаниями React проще устроиться в компанию и продвинуться по карьере. Если освоить React, учить другие фреймворки и библиотеки вроде Vue будет в разы легче.

0 урок. Настройка рабочего пространства
Настройка редактора кода
ESlint

1 урок. EcmaScript 2015
Вспоминаем современный стандарт JS

2 урок. Основы React
Знакомство с React
JSX
Компоненты
Пропсы
Состояние

3 урок. Фнукциональный компонента
Подготовим проект к старту
Установим node js
Создадим проект react — create react app
Подключим styled components, google fonts 4 урок. Props
Создадим новый компонент меню
в нашем проекте
Научимся передавать свойства (props) из одного компонента в другой
Для этого добавим еще компонент
со списком продуктов

5 урок. React Hooks
Начнем работу с React Hooks
Реализуем Модальное Окно
Познакомимся с хуками в реакт для работы с состоянием компонента
Реализуем модальное окно для подробного описания продукта
Научимся передавать хуки через props,
для изменения состояние одного компонента из другого

6 урок. Закрепляем пройденное Реализуем корзину, блок заказа
В этом уроке у нас будет только реакт верстка компонентов блока заказов

7 урок. Hooks Component
Хуки отдельным компонентом
Реализуем хук по добавлению товара
в корзину

8 урок. React Hooks
Добавим хук, для смены количества товара в корзине

9 урок. React Hooks
Добавим хук и верстку для добавления топпингов к заказу и выбор типа

10 урок. React Hooks Effect
Продолжаем изучать возможности хуков и как писать «грязный функционал» — побочные эффекты
Осталось научится удалять товар
из корзины
Реализуем фавиконку

11 Урок. FireBase auth
Подключим firebase и реализуем авторизацию
Знакомство с firebase, где мы будем хранить данные пользователей, заказов, простой backend

12 Урок. FireBase DB
Настроим базу данных Firebase

13 Урок. Firebase Gmail Nodemailer
Отправка заказа на gmail с помощью Nodemailer

Курс построен так, чтобы разобраться в основах библиотеки React и сразу работать над реальным проектом. А в работе над проектом уже разбираться в более сложных вещах вроде React Hooks.

Модуль. Основы

Модуль. React Hooks

Курс по React.JS — Видеоуроки

Курс по React.JS — Видеоуроки

Продолжительность

14:00:40

Количество уроков

9 Видео

Дата добавления

23/07/2017

Дата обновления

14/11/2017

В этом курсе мы рассмотрим React js из самого малого и начала, до всех тех вещей, которые помогут вам строить высокотехнологические SPA-приложения, используя всю мощь фреймворка, а также вспомогательнных библиотек.

В курсе вы узнатете о особенностях React.js, его сильных и слабых сторонах, его инфраструктуре, научитесь строить приложения с Redux а также разберетесь со SPA — react-router и продвинутым API Реакта.

• Урок 1.
  01:35:23

  Курс по React.JS

• Урок 2.
  01:34:08

  Курс по React.JS

• Урок 3.
  01:34:01

  Курс по React.JS

• Урок 4.
  01:33:36

  Курс по React.JS

• Урок 5.
  01:36:31

  Курс по React.JS

• Урок 6.
  01:40:27

  Курс по React.JS

• Урок 7.
  01:35:30

  Курс по React.JS

• Урок 8.
  01:36:14

  Курс по React.JS

• Урок 9.
  01:14:50

  Курс по React.JS

Этот курс находится в платной подписке. Оформи премиум подписку и смотри
Курс по React.JS,
а также все другие курсы, прямо сейчас!

Премиум

Комментарии

Только зарегистрированные пользователи могут комментировать️

Похожие курсы

Курс по React.JS (набор 2018)

Курс по React.JS

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

12:50:00

9 уроков

Русский

Премиум

Курс по React.JS (набор 2018)

Голосов:

79 | 59/20

Дата добавления:

05/11/2018

Дата выхода:

05/11/2018

Курс Библиотека React: построй свою любовь к интерактивным веб-интерфейсам

Курс Библиотека React: построй свою любовь к интерактивным веб-интерфейсам

В этом курсе вы научитесь работать с React.js и сможете делать красивые, быстрые и мощные одностраничные приложения. Вы откроете для себя самую перспективную библиотеку для построения интерфейсов, и мы это закрепим на практике построив более 20 вариантов интерактивных интерфейсов.

11:48:33

12 уроков

Русский

Премиум

Курс Библиотека React: построй свою любовь к интерактивным веб-интерфейсам

Голосов:

19 | 6/13

Дата добавления:

25/04/2018

Дата выхода:

10/04/2018

Продвинутый React.js — Полный курс

Advanced React.js Full Course

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

04:04:01

28 уроков

English

Премиум

Продвинутый React.js — Полный курс

Голосов:

56 | 56/0

Дата добавления:

13/03/2018

Дата выхода:

24/02/2018

Продвинутый курс по React.JS

Продвинутый курс по React.JS

Продвинутый курс по React.JS предполагает что вы уже имеете достаточный опыт в работе с реактом и готовы перейти на более серьезный левел разработки. Этот курс включает в себя React Native, Redux, MobX. Вы будете решать ряд задач, таких как тестирование, drag-n-drop, ленивая загрузка, гриды с помощью экосистемы React. Также вы будете работать с Redux-saga попутно строя мобильное-приложения на React Native, используя MobX , которое включает в…

13:47:22

9 уроков

Русский

Премиум

Продвинутый курс по React.JS

Голосов:

89 | 79/10

Дата добавления:

29/11/2017

Дата выхода:

25/11/2017

Курс ReactJS от Front-end Science

8-недельный онлайн-курс «ReactJS»

Все, хватит jquery и просто верстки. Пора тебе повышать свой скилл в фреймворках, таких как React.js — введь в нем сейчас все самое интересное от мира веб-разработки. Добро пожаловать на один из самых актуальных курсов по реакт в русском интернете, в котором реакт раскладывается  по полочкам. 

63:07:46

146 уроков

Русский

Премиум

Курс ReactJS от Front-end Science

Голосов:

148 | 131/17

Дата добавления:

27/11/2017

Дата выхода:

27/11/2017

10+ лучших бесплатных руководств и курсов по React.js на 2019 год — DesignRevision

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

Введение

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

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

В этом обзоре мы рассмотрим некоторые из лучших бесплатных руководств и курсов по React, которые помогут вам в вашем учебном приключении. Давайте нырнем!

🔥 Ознакомьтесь с лучшими бесплатными учебниками и курсами по React на 2019 год! #react #tutorials Нажмите, чтобы твитнуть

1. [Официально] Введение в React (Учебное пособие)

Само собой разумеется, что лучшее место для начала изучения React — это официальная документация.Вводное руководство нацелено на то, чтобы вы как можно быстрее начали работу.

Вы ненавидите пространные теоретические введения? Большой! Официальное руководство основано на практическом подходе и перенесет вас прямо к самой интересной части вашего учебного процесса.

Следуя ему, вы создадите игру в крестики-нолики и узнаете почти все основные части React и то, как они работают. Когда вы закончите с этим, у вас будут все знания, необходимые для перехода к более сложным приложениям.

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

Проверить

2. [Умник] Начать изучение реакции (курс)

Start Learning React — это бесплатный видеокурс, созданный Джо Мэддалоном для Egghead, который вы можете просмотреть за один час. Он разбит на небольшие части, охватывающие основные элементы React и постепенно углубляющиеся в более сложные темы.

Start Learning React — это действительно отличный короткий курс, которому вы можете следовать, чтобы укрепить свои знания, полученные из официального руководства. Кроме того, он очень короткий и управляемый, поэтому вы можете пройти его как можно быстрее. Обязательно проверьте это!

Проверьте это!

3. [Scrimba] Learn React бесплатно (курс)

Курс

Scrimba по React использует совершенно другой подход к обучению. Они представляют собой интерактивную систему, которая позволяет вам изменять код инструктора на лету во время объяснения и экспериментировать с объясненной темой.

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

Проверьте это!

4. [Умник] Руководство по React для начинающих (курс)

Еще один отличный курс от Egghead — «Руководство по реакции для начинающих» Кента С. Доддса. Этот курс представляет собой сочетание теории и практики и познакомит вас практически со всем важным, что может предложить React.

Курс немного ускорен и разбит на небольшие фрагменты от 2 до 8 минут, и вы также можете запросто посмотреть его почти за час. Обязательно проверьте это!

Проверить

5. Дорога к реакции (Книга)

The Road to React — это бесплатная книга от Робина Веруха, которая познакомит вас от основ React с созданием приложения-клона Hacker News с нуля. В нем рассказывается, как использовать React как с ES5, так и с ES6, как реализовать нумерацию страниц на стороне клиента, кеширование и такие взаимодействия, как сортировка и поиск.

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

Проверить

6. [LearnCode.academy] Учебник по React.js (курс)

Учебное пособие по React.js от LearnCode.academy представляет собой серию из 23 частей, предназначенных для перехода от основных основ к продвинутым методам работы с компонентами, управлению состоянием с помощью Flux, Redux, а также MobX.

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

Проверить

7. Изучите React и Redux с помощью Cabin (Учебник)

Серия Learn React и Redux with Cabin — это коллекция из 7 руководств, предназначенных для опытных разработчиков, которые научат вас создавать многофункциональные приложения для социальных сетей с использованием React и Redux.

Он создан GetStream, и они также рассказали, как интегрировать свой собственный сервис в приложение, а также как интегрировать ImgIX, Keen Analytics, Mapbox, Algolia Search и как разместить его в DigitalOcean.

Несмотря на то, что в нем довольно краткие объяснения, руководство также охватывает некоторые передовые практики React и Redux и способы избежать определенных ошибок.

Проверить

8. Ускоренный курс React (Учебник)

The React Crash Course от Mosh — это одно вступительное видео продолжительностью 2:30 часа, в котором рассматриваются основы React. Если вы проявите терпение, вы, вероятно, сможете сразу посмотреть его и еще раз взглянуть на то, как работает React.

Курс довольно подробный и хорошо объясненный, и он, безусловно, расширит ваши существующие знания, если это не ваше первое знакомство с React.

Проверить

9. Бесплатный учебный курс по React (курс)

Free React Bootcamp от Тайлера МакГинниса — это комплексный курс из 4 частей, который также начинается с нуля и включает управление состоянием и обработку маршрутизации на стороне клиента с помощью React Router.

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

Проверить

10.[CodeCademy] React 101 (Учебник)

Введение в React

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

Проверить

Другие примечательные учебные ресурсы React

🔥 Ознакомьтесь с лучшими бесплатными учебниками и курсами по React на 2019 год! #react #tutorials Нажмите, чтобы твитнуть

Заключение

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

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

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

Также, дайте мне знать в комментариях ниже, какой ваш любимый курс? 😄

,

7 лучших курсов и сертификатов React JS для изучения онлайн в 2020 г. [ОбновленоToday]

React Js — самый популярный JavaScript в 2019 году. Это библиотека с открытым исходным кодом. Он предназначен для создания пользовательских интерфейсов. Его поддерживали facebook и отдельные разработчики. Сначала это написано Джорданом Уолком. Он был выпущен 6 лет назад. React позволяет создавать повторно используемые компоненты. Он разработан для одностраничных и мобильных приложений. React js — лучший вариант для изучения в 2019 году.

Вот тенденции работы для reactJS.

Вот список 5 лучших курсов React js, сертификатов для изучения онлайн

1. Базовое обучение React.js от linkedin Learning

2. Реагируйте для начинающих: создайте приложение и изучите основы (SkillShare)

3. Modern React с Redux [Обновление 2019]

4. Веб-разработка полного стека со специализацией на React (Courseera)

5.Станьте разработчиком React — Udacity

6. React — Полное руководство (включая хуки, React Router, Redux) — Udemy

7. Полный курс разработчика React (с хуками и Redux) — Udemy

1. Базовое обучение React.js от linkedin Learning

Введение:

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

Основные характеристики:

• Курс нацелен на обучение основополагающим принципам react.js, распространение популярных функций библиотеки JavaScript.
• Компоненты, элементы, состояния и использование расширения синтаксиса JSX изучаются вместе с вложением элементов в этом онлайн-курсе.
• Инструктор профессионально обучает обработке событий в приложении.
• По окончании курса студенты могут создавать свои собственные проекты на основе браузера.
• В этом MOOC вы сможете изучить JavaScript и React-js.

Инструктор:

Ева Порчелло — инструктор курса.

Она инженер-программист. Ева также является экспертом в мобильных приложениях, электронной коммерции и CMS. Она опытный разработчик из Северной Калифорнии.

2. Реагируйте для начинающих: создайте приложение и изучите основы (SkillShare)

React — это мощный фреймворк для веб-разработки, который важен как для опытных, так и для начинающих веб-разработчиков.Этот курс прояснит все ваши заблуждения и сложности в отношении среды веб-разработки React.

Основные характеристики:

• Вы научитесь создавать свое первое приложение для реагирования после завершения этого курса.
• Некоторые темы курса включают элементы, компоненты, состояния и жизненный цикл, работу с формами, создание компонентов без состояния и тупики. Эти фундаментальные темы будут рассмотрены в этой теме.

Рендеринг и обновления

• React также были рассмотрены в этом онлайн-курсе.
• В конце проекта вы сможете создать песочницу из оригинальных анекдотов веб-пап.

Инструктор:

Райан Джонсон — преподаватель курса, он также является разработчиком полного стека, имеющим опыт работы с JavaScript с упором на Node.js и React.

3. Modern React с Redux [Обновление 2019]

Udemy — лучший источник лучших курсов по самой низкой цене.Этот курс был создан Стивеном Грайдером. Он имеет колоссальные оценки 4,6 (49 646 оценок), в нем обучается 162 485 студентов.

Это лучший курс React js с React v16.6.3 и Redux с React Router, Webpack и Create-React-App. Включает крючки!

Основные характеристики:

• Вы узнаете, как создавать потрясающие одностраничные приложения с помощью reactjs и redux
• Вы освоите фундаментальные концепции, лежащие в основе структурирования сокращенных приложений.
• Вы поймете силу многоразовых компонентов
• Вы узнаете больше о Redux
• Вы станете экспертом в React, включая NPM, Webpack, Babel и синтаксис Javascript ES6 / ES2015
• Имеет 47.5 часов видео по запросу
• 18 артикулов
• 1 загружаемый ресурс
• 6 упражнений по кодированию
• Полный пожизненный доступ
• Доступ на мобильном телефоне и ТВ
• Свидетельство об окончании работ

Для кого это.

Программисты, желающие изучить React

Разработчики, которые хотят вырасти за счет простого использования jQuery

Инженеры, которые исследовали React, но не смогли освоить некоторые концепции

Отзывы студентов:

Марсио Родригес: Лучшие объяснения Redux.Но ни развертывания, ни значимых проектов. Формат «POC» упрощает понимание различных базовых концепций React-Redux. Повторение заставляет ваш мозг привыкнуть к лекционной тематике, потому что вы пройдете весь путь через базовые концепции более одного раза, что действительно хорошо. Нужно больше упражнений и проблем. Раздел QA бесполезен, никакой поддержки не предоставляется, несмотря на то, что ТА крадется вокруг.

Начало работы

4. Веб-разработка полного стека со специализацией на React (Courseera)

Этот курс создан Гонконгским университетом науки и технологий.Он поставляется с полным пакетом веб-разработки с полным стеком и React JS. Вы можете изучить препроцессор Bootstracp, css, sass, css и node js в качестве бэкэнда. Это 100% онлайн-курс, он рассчитан на 6 месяцев. На этот курс уже зачислено 13205 студентов. Это было разработано Йогешем К. Маппала — доцентом (Департамент компьютерных наук и инженерии)

Предварительные требования:

Знание HTML, css, javascript

Почему лучше:

• Предлагается нет.1 институт в Азии — Гонконгский университет науки и технологий
• По завершении этого курса вы получите сертификат.
• После этого курса вы станете разработчиком полного цикла.
• Вы изучите интерфейсную и гибридную мобильную разработку с поддержкой на стороне сервера для реализации многоплатформенного решения.

Это бесплатно, вы также можете записаться на

Начало работы

Отзывы студентов:

Натали- H

На самом деле я люблю учиться — я всегда ищу новые возможности учиться.Качество контента на Coursera всегда превосходит мои ожидания.

5. Станьте разработчиком React — Udacity

Udacity запустил нано-степень для разработчиков react js. Этот курс поможет вам стать экспертом в React Js. У этого курса 459 отзывов с рейтингом 4,6. React полностью меняет Front-End разработку. Освойте эту мощную библиотеку пользовательского интерфейса от Facebook с помощью Udacity. Его будут преподавать Эндрю Вонг, Тайлер МакГиннис, Ричард Калехофф.У вас был предыдущий опыт работы с html, css и javascript, чтобы пройти этот курс. Из этого курса вы получите полное представление о React Fundamentals, Redux и нативном реагировании.

Основные характеристики:

• Реальные проекты от отраслевых экспертов
• Индивидуальный технический наставник
• Персональный карьерный коуч и карьерные услуги
• Гибкая программа обучения
• Поддержка вакансий: резюме доступно более 100 работодателям

Отзыв студента:

Отличная программа с отличными инструкторами.Рецензенты кода стоили цены курса. Настоятельно рекомендуется!

Начало работы

6. React — Полное руководство (включая хуки, React Router, Redux) — Udemy

Если вы хотите стать экспертом по реакции 16.8 с нуля с помощью Hooks, Redux, React Routing, Animations, Next.js и многого другого, это лучший курс. Его преподавал известный педагог Максимилиан Шварцмюллер. В нем обучались 162 533 студента, из них 4.7 рейтинг.

Основные характеристики:

• Этот курс поможет вам создавать мощные, быстрые, удобные и реактивные веб-приложения.
• Обеспечьте потрясающий пользовательский опыт, с легкостью используя возможности JavaScript
• Вы изучите перехватчики React и компоненты на основе классов
• 44,5 часа видео по запросу
• 56 статей
• 255 загружаемых ресурсов
• Полный пожизненный доступ
• Доступ на мобильном телефоне и ТВ
• Задания
• Свидетельство об окончании работ

Предварительные требования: HTML, CSS и JS, ES6

Отзыв студента: Иван Мачук

Определенно лучший курс по React (и множеству связанных технологий), который вы можете найти в Интернете.Невозможно не обратить внимание на то, сколько усилий было вложено в лекции. Отличный преподаватель, готовый объяснить любые сложные аспекты. Для не носителя языка большое преимущество этого курса — также понятный и доступный английский язык, на котором он преподается. Спасибо, Макс, за эту отличную работу. С вашей помощью я нашел свою первую работу фронтенд-разработчика.

Узнать цену и начать работу

7. Полный курс разработчика React (с хуками и Redux) — Udemy

Этот курс поможет вам изучить и создать веб-приложения React с использованием React, Redux, Webpack, React-Router и других!Этот курс был создан Эндрю Мидом. На этот курс было зачислено 45 208 студентов со средней оценкой 4,7 из 12 942 студентов.

Основные характеристики:

• Вы будете создавать, тестировать и запускать приложения на React
• Вы будете знать, как использовать передовой JavaScript ES6 / ES7.
• Вы можете настроить аутентификацию и учетные записи пользователей
• Вы можете легко развернуть свои приложения React в Интернете
• Вы можете изучить новейшие библиотеки и инструменты React.
• Вы будете Master React, Redux, React-Router и др.
• В этом курсе 39 часов видео по запросу.
• 165 загружаемых ресурсов
• Полный пожизненный доступ
• Доступ на мобильном телефоне и ТВ
• Свидетельство об окончании работ

Предварительные требования: Вы должны знать JavaScript (функции, объекты, массивы, функции обратного вызова)

Обзор курса:

Моника Солтер:

Ого, что за курс! Я рассмотрел несколько различных вариантов классов React и рад, что выбрал этот, он намного более всеобъемлющий, чем другие.Пару раз курс проходил для меня слишком быстро, но обычно мне удавалось пересматривать предыдущие уроки, читать вопросы и ответы и искать в Интернете, чтобы разобраться. Мне очень понравились все упражнения, которые включил Эндрю, они помогли мне понять материал больше всего на свете. И они были достаточно сложными.

Цена: 9,99 долларов США

Начать

,