React курс: обзор курса, причины популярности React, ReactDOM и JSX / Блог компании RUVDS.com / Хабр

Содержание

обзор курса, причины популярности React, ReactDOM и JSX / Блог компании RUVDS.com / Хабр

Представляем вашему вниманию первые 5 занятий учебного курса по React для начинающих. Оригинал курса на английском, состоящий из 48 уроков, опубликован на платформе Scrimba.com. Возможности этой платформы позволяют, слушая ведущего, иногда ставить воспроизведение на паузу и самостоятельно, в том же окне, в котором ведётся демонстрация, экспериментировать с кодом. Курс показался нам интересным, мы решили перевести его на русский и преобразовать в формат традиционных публикаций.

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

Занятие 1. Обзор курса и рекомендации по его освоению

→ Оригинал

Добро пожаловать на курс «Основы React». Меня зовут Боб Зиролл, я расскажу вам о том, как создавать фронтенд-проекты, используя один из самых популярных в мире веб-фреймворков. Я работаю в области компьютерного образования уже много лет, в частности, сейчас руковожу организацией учебного процесса в V School.

▍О процессе освоения курса

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

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

Обычно, когда я ввожу в курс дела учащихся V School, я привожу им следующий пример из собственной жизни. Недавно меня потянуло на работу с деревом. Я читал книги, смотрел бесчисленные видео на YouTube, мне дарили инструменты. Но я не мог сделать ничего достойного до тех пор, пока не взял инструменты в руки. Только многие часы, потраченные на работу пилой и наждачной бумагой, на склеивание и свинчивание деталей, позволили мне приблизиться к цели. Собственно говоря, по такому же принципу устроено и освоение всего, чего угодно. Хотите изучить React? Пишите код.

Большинство занятий этого курса содержат упражнения. Ожидается, что вы постараетесь выполнять их самостоятельно. Если же вы, ознакомившись с заданием для самостоятельной работы, тут же перейдёте к описанию его решения, то вы, на самом деле, выберете самый сложный способ изучения React. Кроме того, не ждите, пока вам предложат попрактиковаться — берите инициативу на себя и пробуйте всё, о чём узнаёте. Старайтесь как можно больше самостоятельно работать с кодом. В частности, когда вы уже немного освоите React — создавайте нечто такое, что вам интересно, испытывайте всё, что вам любопытно испытать. Это позволит вам избежать такой неприятности, как «tutorial hell».

Ещё один важный момент моего подхода заключается в интервальном обучении и в повторении пройденного материала. Это — важнейшие вещи, которые позволяют по-настоящему запомнить то, чему вы учитесь. Не рекомендуется с головой бросаться в изучение курса. Это — путь в тот самый «tutorial hell». При таком подходе возникает ощущение, как будто вы и правда что-то узнали, а в реальности же вы просто не в состоянии запомнить то, что «изучили».

Поэтому, продвигаясь по материалам, делайте частые перерывы. Речь идёт не о периодических перерывах в 5-10 минут, а кое о чём более масштабном. Изучите пару принципов, попрактикуйтесь в их использовании, а затем денёк передохните. Когда вы вернётесь к курсу, будет очень полезно повторить уже изученные материалы. Конечно, при таком подходе на то, чтобы освоить курс, уйдёт больше времени, но это чрезвычайно благотворно скажется на вашем обучении.

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

▍Состав курса и предварительные требования

Вот перечень основных тем курса:

  • Компоненты. Говоря о React, нельзя избежать обсуждения концепции компонентов. Компоненты в React — это основной строительный блок для создания фрагментов HTML-кода, подходящих для повторного использования. И практически всё остальное, о чём мы будем говорить, имеет отношение к тому, как использовать эти компоненты для построения веб-приложений.
  • JSX. Это — синтаксическое расширение JavaScript, которое позволяет создавать компоненты, используя возможности HTML и JavaScript.
  • Стилизация компонентов. Стилизация позволяет придать компонентам привлекательный внешний вид.
  • Свойства и обмен данными в приложении. Свойства используются для передачи данных между компонентами.
  • Состояние. Механизмы состояния компонентов используются для хранения данных в приложении и для управления ими.
  • Обработка событий. События позволяют наладить интерактивные взаимоотношения с пользователями приложений.
  • Методы жизненного цикла компонентов. Эти методы позволяют программисту влиять на различные события, происходящие с компонентами.
  • Загрузка данных из внешних API с использованием протокола HTTP.
  • Работа с формами.

Для того чтобы продуктивно заниматься по этому курсу, вам нужно знать HTML, CSS и JavaScript (ES6).

Занятие 2. Учебные проекты

→ Оригинал

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

Нашей первой разработкой будет стандартное TODO-приложение.

TODO-приложение

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

Отмеченные дела в TODO-приложении

А вот — наш курсовой проект — генератор мемов.

Генератор мемов

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

Готовый мем

Занятие 3. Зачем нужен React и почему его стоит изучать?

→ Оригинал

Зачем использовать React, если можно разработать веб-проект на чистом JavaScript? Если вы интересуетесь веб-разработкой, то, возможно, слышали о том, что React позволяет создавать очень быстрые приложения, производительность которых превышает то, что достижимо с использованием лишь JavaScript. Это достигается за счёт использования в React технологии, называемой Virtual DOM. Мы не будем вдаваться в подробности о Virtual DOM, если вы хотите познакомиться с этой технологией поближе, можете посмотреть это видео.

Сейчас нам достаточно знать о том, что Virtual DOM помогает веб-приложениям работать гораздо быстрее, чем если бы при их разработки использовался обычный JS. Ещё одно по-настоящему замечательное преимущество, которое даёт нам React — это возможность создавать веб-компоненты, подходящие для повторного использования. Рассмотрим пример.

У нас имеется стандартный элемент navbar (навигационная панель) из библиотеки Bootstrap.

Навигационная панель

Если вы раньше не пользовались Bootstrap, то знайте, что это просто CSS-библиотека, которая даёт веб-разработчику красиво оформленные элементы. Тут примерно четыре десятка строк кода, всё это выглядит довольно громоздко, ориентироваться в таком коде непросто. Если включить всё это в состав HTML-страницы, на которой и так имеется много всего, код такой страницы окажется попросту перегруженным различными конструкциями.

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

Компонентный подход к формированию веб-страниц

Назвать такой компонент можно как угодно. Как видно, разметку страницы, основанную на компонентах, гораздо легче читать. Разработчик сразу видит общую структуру такой страницы. В данном случае, как можно понять из содержимого тега <body>, в верхней части страницы находится навигационная панель (MySweetNavbar), в середине размещено основное содержимое (MainContent), а в нижней части страницы имеется подвал (MySweetFooter).

Кроме того, компоненты не только улучшают структуру кода HTML-страниц. Они ещё и подходят для повторного использования. Как быть, если на нескольких страницах нужна одна и та же навигационная панель? Как быть, если такие панели на разных страницах немного отличаются друг от друга? Что делать, если всё та же панель используется на множестве страниц, а в неё нужно внести некое изменение? Без использования компонентного подхода трудно дать достойные ответы на эти и на многие другие вопросы.

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

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

Занятие 4. Среда разработки, ReactDOM и JSX

→ Оригинал

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

▍Среда разработки

Для того чтобы экспериментировать с React-кодом, пожалуй, лучше всего будет развернуть полноценную локальную среду разработки. Для того чтобы это сделать, вы можете обратиться к недавно опубликованному нами материалу React.js: понятное руководство для начинающих, в частности, к его разделу Практика разработки React-приложений. А именно, для того чтобы приступить к экспериментам, нужно, с помощью create-react-app, создать новое приложение, после чего запустить локальный сервер разработки и приступить к редактированию кода. Если речь идёт о простейших примерах, то их код можно вводить прямо в стандартный файл index.js, убрав из него имеющийся в нём код или закомментировав его.

Содержимое файла index.html в проекте, создаваемом create-react-app, соответствует его содержимому в примерах, которые будут приводиться в данном курсе. В частности, речь идёт о наличии на странице элемента <div> с идентификатором root.

Ещё один вариант, который обычно подходит для каких-то совсем простых экспериментов, заключается в использовании онлайн-платформ наподобие codepen.io. Например, вот демонстрационный проект React-приложения Дэна Абрамова. Суть подготовки Codepen-проекта к экспериментам с React заключается в подключении к нему библиотек react и react-dom (это можно сделать, щёлкнув по кнопке Settings в верхней части страницы, перейдя в появившемся окне в раздел JavaScript и подключив к проекту, предварительно найдя их с помощью встроенной системы поиска, нужные библиотеки).

Вполне возможно, что вам, для экспериментов, будет удобно пользоваться возможностями Scrimba. Для этого можете просто открыть страницу соответствующего занятия. Ссылки на эти страницы можно найти ниже заголовков с номерами и названиями занятий.

▍Первая программа

Надо отметить, что в наших примерах будут использоваться возможности ES6 (ES2015), поэтому вам весьма желательно в них ориентироваться. В частности, для того чтобы импортировать в проект библиотеку react, служит такая конструкция:

import React from "react"

А так можно импортировать библиотеку react-dom:

import ReactDOM from "react-dom"

Теперь воспользуемся методом render() ReactDOM для того чтобы вывести что-то на экран:

ReactDOM.render()

Если вы решите использовать для экспериментов проект, созданный средствами create-react-app, то сейчас его файл index.js (открытый в VSCode), будет выглядеть так, как показано на следующем рисунке.
Ввод кода в index.js

Если у вас запущен сервер разработки и в браузере открыта страница http://localhost:3000/, то вы, сохранив такой index.js, вы увидите там сообщения об ошибках. Это, на данном этапе работы, совершенно нормально, так как мы пока не сообщили системе о том, что и куда мы хотим вывести командой render().

На самом деле, сейчас пришло время разобраться с тем кодом, который мы только что написали. А именно, здесь мы импортировали в проект React, потом — ReactDOM — для того, чтобы возможностями этой библиотеки можно было бы воспользоваться для вывода чего-то на экран.

Метод render() принимает два аргумента. Первый будет тем, что мы хотим вывести, а второй — будет тем местом, куда мы хотим что-то вывести. Если это записать в виде псевдокода, то получится следующее:

ReactDOM.render(ЧТО ВЫВОДИТЬ, КУДА ВЫВОДИТЬ)

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

Вот как эта страница может выглядеть.

<html>
    <head>
        <link rel="stylesheet" href="style.css">
    </head>
    <body>
        <div></div>
        <script src="index.js"></script>
    </body>
</html>

Тут имеются все базовые элементы HTML-страницы, включая тег <link> и тег <script>.

Если вы пользуетесь create-react-app, то страница index.html будет выглядеть немного иначе. В частности, в её коде нет команды импорта index.js. Дело в том, что при сборке проекта связь index.html и index.js осуществляется автоматически.

Обратите внимание на элемент <div> с идентификатором root. Между открывающим и закрывающим тегами этого элемента React разместит всё, что мы создадим. Этот элемент можно считать контейнером для всего нашего приложения.

Если теперь вернуться к файлу index.js и к методу render() ReactDOM, его вторым аргументом, местом, куда надо выводить данные, будет указание на элемент <div> с идентификатором root. Тут мы воспользуемся обычным JavaScript, после чего второй аргумент метода Render будет выглядеть так:

ReactDOM.render(ЧТО ВЫВОДИТЬ, document.getElementById("root"))

При таком подходе метод render() берёт первый аргумент и выводит то, что он описывает, в указанное место. Теперь займёмся этим первым аргументом. Начнём с простого элемента <h2>. И, как это обычно бывает при написании первой программы, добавим в него текст Hello world!:

ReactDOM.render(<h2>Hello world!</h2>, document.getElementById("root"))

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

Тут у вас может возникнуть вопрос о том, почему это мы помещаем описание HTML-элемента в то место, где ожидается аргумент JavaScript-метода. Ведь JavaScript, столкнувшись с чем-то вроде <h2>Hello world!</h2>, вероятно, решит, что первый символ этого выражения представляет собой оператор «меньше», дальше, очевидно, идёт имя переменной, потом — оператор сравнения «больше». JavaScript не распознает в этой последовательности символов HTML-элемент, да он и не должен этого делать.

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

Мы ввели довольно простую и короткую инструкцию, но в недрах React при её выполнении происходит много всего интересного. Так, эта инструкция преобразуется в её версию на JavaScript, осуществляется формирование HTML-кода, хотя в детали этого процесса мы тут не вдаёмся. Именно поэтому нам надо импортировать в проект не только react-dom, но и react, так как библиотека React — это именно то, что позволяет нам пользоваться JSX и сделать так, чтобы JSX-конструкции работали так, как ожидается. Если из нашего примера убрать строку import React from "react", сохранить файл скрипта и обновить страницу, будет выведено сообщение об ошибке. В частности, create-react-app сообщит нам о том, что без доступа к React пользоваться JSX нельзя ('React' must be in scope when using JSX  react/react-in-jsx-scope).

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

Ещё кое-что, касающееся работы с JSX, на что я хочу обратить ваше внимание, заключается в том, что нельзя рендерить JSX-элементы, следующие друг за другом. Предположим, что после элемента <h2> нужно вывести элемент <p>. Попробуем воспользоваться такой конструкцией:

ReactDOM.render(<h2>Hello world!</h2><p>This is a paragraph</p>, document.getElementById("root")) //неправильно

Если после этого обновить страницу — будет выведено сообщение об ошибке (в create-react-app это выглядит как Parsing error: Adjacent JSX elements must be wrapped in an enclosing tag). Суть этой ошибки заключается в том, что такие элементы должны быть обёрнуты в какой-то другой элемент. То, что получится в итоге, должно выглядеть как один элемент с двумя вложенными в него элементами.

Для того чтобы наш пример заработал, обернём код <h2>Hello world!</h2><p>This is a paragraph</p> в элемент <div>:

ReactDOM.render(<div><h2>Hello world!</h2><p>This is a paragraph</p></div>, document.getElementById("root"))

Если теперь обновить страницу, то всё будет выглядеть так, как ожидается.
Два HTML-элемента на странице

Для того чтобы привыкнуть к JSX, потребуется некоторое время, но после этого его использование окажется гораздо легче и удобнее, чем работа с HTML-элементами с использованием стандартных средств JavaScript. Например, для того чтобы стандартными средствами описать элемент <p> и настроить его содержимое, понадобится примерно следующее:

var myNewP = document.createElement("p")
myNewP.innerHTML = "This is a paragraph."

Потом нужно подключить его к элементу, который уже есть на странице. Это — образец императивного программирования, а то же самое, благодаря JSX, можно делать в декларативном стиле.

Занятие 5. Практикум. ReactDOM и JSX

→ Оригинал

На прошлом занятии вы познакомились с ReactDOM и JSX, а теперь пришло время применить полученные знания на практике.

Все практические задания мы будем оформлять следующим образом. Сначала, в разделе с заголовком Задание, будет дано само задание, и, возможно, в разделе Подсказки, будут даны краткие рекомендации по его выполнению. Затем будет следовать раздел Решение. Рекомендуется приложить все усилия к тому, чтобы выполнить задание самостоятельно, а потом уже разбираться с приведённым решением.

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

▍Задание

Напишите React-приложение, которое выводит на страницу маркированный список (тег <ul>). Этот список должен содержать три элемента (<li>) с любым текстом.

▍Подсказки

Сначала надо импортировать в проект необходимые библиотеки, а потом воспользоваться одной из них для вывода элементов, сформированных с помощью некоего JSX-кода, на страницу.РешениеДля начала нужно импортировать в файл необходимые библиотеки. А именно — речь идёт о библиотеке react, и, так как мы собираемся выводить что-то на страницу, о библиотеке react-dom.

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

После этого надо воспользоваться методом render() объекта ReactDOM, передав ему описание элемента, который мы хотим вывести на страницу и указав место на странице, куда должен быть выведен этот элемент.

ReactDOM.render(
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>,
  document.getElementById("root")
)

Первый аргумент — это описание маркированного списка, второй — элемент страницы, в который он должен попасть — тег <div> с идентификатором root. HTML-код можно записать и в одну строку, но лучше оформить его так, как в нашем варианте решения.

Вот полный код решения:

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

ReactDOM.render(
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>,
  document.getElementById("root")
)

Со временем мы поговорим о том, как, используя аккуратные конструкции, выводить с помощью метода render() большие объёмы HTML-разметки.

Итоги

Сейчас, после того, как вы ознакомились с первыми занятиями курса по React, просим вас принять участие в опросе.

Спасибо за внимание!

→ Часть 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: курсовой проект

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, но всё ещё много сомневается, обязательно периодически заходить, читать и не забывать периодически проверять обновления.

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:

Курс 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.

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

Данный учебник не предполагает каких-либо знаний React.

Перед тем как начнём

В данном разделе мы создадим небольшую игру. У вас может возникнуть
соблазн пропустить его, так как вы не пишете игры — не делайте такое поспешное решение.

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

Подсказка

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

Учебник состоит из нескольких разделов:

  • Установка. Даст вам отправную точку, чтобы следовать учебнику.

  • Обзор. Познакомит вас с основами React: компонентами, свойствами и состоянием.

  • Завершение игры. Научит вас наиболее распространенным методам разработки в React.

  • Добавление Time Travel. Даст вам более глубокое понимание уникальных преимуществ React.

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

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

Что мы разрабатываем?

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

Вы можете увидеть, что именно мы будем разрабатывать здесь: Окончательный
результат
. Если код для вас непонятен, или если вы не знакомы с синтаксисом,
не беспокойтесь! Цель учебника — помочь вам понять React и его синтаксис.

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

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

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

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

Если вам нужно повторить JavaScript, можно использовать данное
руководство
(хотя лично я предпочитаю это руководство). Обратите внимание,
что в данном учебнике мы используем некоторые функции
ES6 — недавней версии JavaScript: функции-стрелки,
классы, операторы let и
const. Вы можете использовать Babel REPL, чтобы проверить,
во что компилируется код ES6.

Установка

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

1-й вариант установки

Это самый быстрый способ начать работу!

Сначала откройте этот стартовый код в новой вкладке. Новая вкладка
должна отображать пустую игровую доску в крестики-нолики и код React.
В этом учебнике мы будем редактировать код React.

Теперь вы можете пропустить второй вариант установки и
перейти к разделу «Обзор», чтобы приступить к обзору React.

2-й вариант: локальная среда разработки

Это исключительно по желанию и совершенно не обязательно для данного учебника!


Необязательно: инструкции для разработки локально с помощью предпочитаемого вами текстового редактора.

Данная установка потребует больше времени и сил, но позволяет вам освоить учебник,
используя предпочитаемый вами редактор (например WebStorm). Выполните следующие шаги:

  1. Убедитесь, что у вас установлена последняя версия Node.js.

  2. Следуйте инструкциям по установке Create React App, чтобы создать новый проект.

        
     npx create-react-app my-app
        
    

о некоторых особенностях курса, 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-коде?

7 лучших онлайн-курсов React для веб-разработчиков и фрилансеров в 2020 году

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

Я изучил множество онлайн-курсов, чтобы узнать, как реагировать на ведущих образовательных платформах, таких как udemy, lynda, которые помогли мне реализовать этот блог (reactgo.com) с нуля, число читателей которого выросло более чем на 100000 в месяц.

Прежде чем попасть в список лучших онлайн-курсов по реакции , давайте сначала узнаем кое-что о реакции.

Что такое React?

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

Что такое одностраничное приложение?

В одностраничных приложениях есть только одна HTML-страница, которая повторно используется в нашем приложении вместо создания новых HTML-страниц.

Кто использует React?

  • Facebook (более 10000 реагирующих компонентов).
  • Instagram.
  • Netflix.
  • Airbnb.

Их гораздо больше компаний использует в производстве.

7 лучших онлайн-курсов по реакции

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

react

Инструктор : Максимилиан Шварцмюллер

React — The Complete Guide (включая Hooks, React Router, Redux) — один из моих любимых онлайн-курсов Максимилиана Шварцмюллера.Если вы хотите научиться реагировать, но не знаете, с чего начать — это курс для вас, потому что он начинается с объяснения основ реагирования, когда учащиеся хорошо разбираются в основах, инструктор преподает нам базовую версию проекта по созданию бургеров, а затем мы переходим на расширенный уровень реакции, такой как HTTP-запросы, сокращение, маршрутизатор, хуки и аутентификация.

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

modern-react

Инструктор : Стивен Грайдер

В этом онлайн-курсе реагирования Modern React с Redux Стивен Грайдер учит вас всем концепциям реагирования медленно, используя диаграммы , чтобы вы могли легко понять сложные концепции, такие как , как интегрировать приложений реагирования с библиотекой реагирующего маршрутизатора, redux (состояние библиотека управления) и др.

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

the-complete-react

Инструктор : Эндрю Мид

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

Полный курс разработчика React (с хуками и Redux)
содержит два реальных проекта (приложение «Нерешительность», «Бюджет»), которые помогут вам понять, какие типы приложений мы можем создавать с помощью React.

4. Bootcamp Modern React (хуки, контекст, NextJS, маршрутизатор)

modern-react-colt

Инструктор : Кольт Стил

Кольт Стил (Colt Steele) — разработчик и ведущий инструктор учебного лагеря. В этом курсе Modern React Bootcamp автор преподает ту же программу, что и в своем личном учебном лагере в Сан-Франциско .

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

Modern React Bootcamp — это масштабный курс, который работает с множеством библиотек и инструментов.

5. Завершите разработку React Developer в 2020 году (с Redux, Hooks, GraphQL)

complete-react-graphql

Инструкторы : Андрей Neagoie, Yihua Zhang

В онлайн-курсе Complete React Developer 2019 инструктор Андрей Нэагои охватывает все концепции реакции, включая (Apollo, GraphQL, Context API, Firebase, Redux-Saga, Stripe, Persistance + Session Storage).Используя все эти концепции, вы создадите полнофункциональное приложение для электронной коммерции , в котором firebase используется в качестве серверной части.

Примечание. Если вы хотите изучить React + GraphQL, тогда этот курс Complete React Developer 2019 для вас.

6. Реагировать спереди назад

react-front-back

Инструктор : Брэд Трэверси

Брэд Трэверси — самый продаваемый инструктор по удеми, более 100000 платящих студентов учатся программировать.Этот онлайн-курс по реагированию научит вас создавать приложение с полным стеком , в котором в качестве серверной части используются Nodejs и MongoDB.

Курс React Front To Back предназначен для людей, которые уже знакомы с концепциями React и хотят узнать, как интегрировать React с nodejs и MongoDB.

7. Узел с React: веб-разработка полного стека

node-react

В этом онлайн-курсе Node with React: Fullstack Web Development Стивен Грайдер научит вас создавать расширенных шаблонов реагирования с помощью node, express, MongoDB и аутентификации).Затем вы изучите некоторые общие шаблоны проектирования для подключения вашего приложения React к nodejs.

Этот курс охватывает множество сложных концепций, таких как обработка аутентификации (Google OAuth) и оплата кредитной картой с помощью Stripe.

Узел с React: Fullstack Web Development предназначен для разработчиков среднего уровня, которые хотят изучить концепции полного стека.

Бонусные курсы Advanced React

Advanced React с GraphQL

Вес Бос запустил курс обучения премиум-класса, который научит вас создавать интернет-магазин с помощью React и GraphQL.

В этом курсе вы выучите:

  • Next.js
  • Стилизованные компоненты
  • React apollo клиент
  • Зарядка кредитных карт с полосой.
  • Отправка писем.
  • Аутентификация JWT.
  • Тестирование и многое другое.

Advanced React и Redux: выпуск 2019 года

В этом курсе вы познакомитесь с расширенными концепциями реагирования, такими как компоненты высшего порядка (hoc), промежуточное ПО, аутентификация (с Express / Mongo), тестирование и рендеринг на стороне сервера.

.

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, но и подготовить вас к такому мышлению, которое можно применить в реальных, готовых к производству проектах.

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

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

,

Отправить ответ

avatar
  Подписаться  
Уведомление о