Max Home IndustryЗастряли дома, где есть только Интернет для компании? Изучите основы React.js в этом бесплатном классе от инженера Skillshare Дэниела Настасе. Знания React не требуются, но необходимы базовые знания Javascript, HTML и CSS.
Класс состоит из 13-байтовых и практических видеороликов и разделен на две части. Первая часть, видеоролики 1-10, охватывают основы React, такие как компоненты, состояние, CSS, рендеринг и т. Д. Все уроки компактны и сосредоточены на одной теме. Это хорошая и последовательная организация, которая не утомляет зрителя. Во второй части, видео 11-13, вы объединяете все, что вы узнали, для создания примера приложения.
После вступления к видео 1 уроки начинаются в видео 2 с объяснения того, что представляют собой компоненты React и что каждый из них имеет функцию рендеринга для рендеринга фактического HTML. Это показано путем создания простого компонента, который добавляет заключенный текст
к корневой элемент DOM.
Третий видеоурок идет еще дальше, работая со сложными и вложенными компонентами. Хотя у меня не было опыта работы с React, к настоящему времени я понял, что компонент — это объект-оболочка над некоторым HTML.
Урок 4 дает больше информации о формате JSX, смеси JavaScript и HTML, который используется React. В уроке показан пример этого при интерполяции переменной JavaScript в HTML-код, который будет отображаться.
Урок 5 посвящен свойствам React, которые похожи на атрибуты HTML и отлично подходят для повторного использования!
Отличный материал, простой для понимания и практический!
Урок 6 посвящен обработке таких событий пользовательского интерфейса, как нажатие кнопки.
Урок 7 использует два экземпляра компонента кнопки, но каждый со своими собственными настраиваемыми свойствами. Сообщение урока — всегда использовать функцию стрелки при связывании событий, чтобы избежать того факта, что React не знает контекст, из которого мы вызываем наши обработчики событий.
Урок 8 обновляет состояние компонента, а также визуальные эффекты, в зависимости от этого состояния. Здесь также есть некоторые подводные камни, которых следует избегать. При продолжительности 5:35 это был один из самых длинных уроков!
Урок 9 посвящен стилизации ваших компонентов с помощью CSS.
Урок 10 показывает некоторые основные манипуляции с DOM с помощью React Children и завершает базовую часть класса.
В следующих трех видео вы примените то, что вы узнали, для создания игры «Камень-ножницы-бумага». Вам понадобится стартовый шаблон «Создать приложение React», с помощью которого вы будете создавать приложения React.
Подводя итог, этот класс — отличная отправная точка в вашем путешествии по React. Я уже упоминал, что у него тоже хорошая цена? Бесплатно!