Руководство по реагированию следует правило 80/20: учиться в 20% времени 80% темы.

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

Я надеюсь, что содержимое этой книги поможет вам достичь того, что вы хотите: Узнать основы реагирования Отказ

Вы можете получить эту электронную книгу в формате PDF, EPUB и MOBI в Reachandbook.com.

Книжный индекс

Jsx.
Компоненты
Состояние
Реквизит
Председатель VS Контейнерные компоненты
Государство против рек
Пропорция
Фрагмент реагирования
События
Срок службы жизненного цикла
Формы в реакции
Ссылка DOM-элемент
Сервер бокового рендеринга
Контекст API.
Компоненты высшего порядка
Рендеринг
Крючки
Расщепление кода

Раздел 4 : Практические примеры

Построить простой счетчик
Выберите и отобразить информацию пользователей GitHub через API

Раздел 5 : Стайлинг

CSS в реакции
Sass в реакции
Слифовые компоненты

Раздел 6 : Инструмент

Варить
WebPack

Раздел 7 : Тестирование

Шума
Тестирование объектов реагирования

Раздел 8 : Экосистема реагирования

Реагниальный маршрутизатор
Redux.
Next.js.
Гэтсби

Упаковка

Введение в библиотеку просмотра реагирования

Что реагирует?

РЕАКТ – это библиотека JavaScript, которая направлена на упрощение разработки визуальных интерфейсов.

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

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

Почему реагирует так популярнее?

Реагистрация взяла Worldend World Web Development на шторм. Почему?

Меньше сложный, чем другие альтернативы

В то время, когда было анонсировано реагирование, Ember.js и Angular 1.x были преобладающими вариантами в качестве рамки. Оба они накладывали так много конвенций в коде, что портирование существующего приложения было совсем не было удобным.

Реагирование сделало выбор, чтобы быть очень легко интегрироваться в существующий проект, потому что это то, что они должны были сделать это на Facebook, чтобы представить его на существующую кодовую базу. Кроме того, эти 2 рамки принесли слишком много для таблицы, в то время как реагировать только для реализации уровня просмотра вместо полного стека MVC.

Идеальное время

В то время угловой 2.x был объявлен Google, наряду с обратной несовместимостью и серьезными изменениями, которые он собирался принести. Переход от угловых 1-2 было похоже на переход к разным каркасам, поэтому это, наряду с улучшениями скорости исполнения, которые реагируют, что они пообещали, сделали его что-то разработчики, которые стремятся попробовать.

Поддерживается Facebook.

Быть поддержанным Facebook, конечно, собирается принести пользу проекту, если оно оказывается успешным.

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

Реагируют просто, чтобы учиться?

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

Реагируйте само по себе имеют очень маленький API, и вы в основном должны понимать 4 концепции, чтобы начать:

Компоненты
Jsx.
Состояние
Реквизит

Все эти (и больше) объяснены в этом руководстве.

Как установить реагирование на ваш компьютер разработки

Как вы устанавливаете реагировать?

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

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

Нагрузка реагирует прямо на веб-странице

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

В этом случае вы добавляете 2 теговых сценария до конца тело ярлык:


  ...
  
    ...

Здесь мы загрузили как реагировать и реагировать домо. Почему 2 библиотеки? Поскольку RECT на 100% не зависят от браузера и могут быть использованы вне его (например, на мобильных устройствах с реактивным встроенным). Следовательно, необходимость реагировать DOM, добавлять обертки для браузера.

После этих тегов вы можете загрузить файлы JavaScript, которые используют React, или даже встроенный JavaScript в A скрипт ярлык:

Чтобы использовать JSX, вам нужен дополнительный шаг: нагрузка Babel

и загрузить ваши сценарии специальными Текст/Вавил Тип MIME:

Модули ES являются одной из самых больших функций, представленных в современных браузерах. Они являются частью ES6, но путь к реализации их долго.

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

Вероятно, что WebPack, вероятно, по-прежнему будет огромным игроком, даже если модули ES приземляются в браузере, но имея такую функцию, непосредственно построенную на языке, огромна для объединения того, как модули работают на стороне клиента и на Node.js.

Раздел 2: React Concepts

Одиночные приложения

Приложения React также называются приложениями для одной страницы. Что это значит?

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

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

Сегодня популяризированы Modern Frontend JavaScript Frameworks, такие как React, приложение обычно создается в качестве приложения одной страницы: вы загружаете только код приложения (HTML, CSS , JavaScript ) один раз, и когда вы взаимодействуете с Приложение, как обычно происходит, состоит в том, что JavaScript перехватывает события браузера и вместо того, чтобы сделать новый запрос на сервер, который затем возвращает новый документ, клиент запрашивает некоторую JSON или выполняет действие на сервере, но страница, которую пользователь видит, что пользователь видит Никогда не полностью вытер, и больше ведет себя как настольное приложение.

Одиночные приложения встроены в JavaScript (или, по крайней мере, скомпилированы в JavaScript) и работают в браузере.

Технология всегда одинакова, но философия и некоторые ключевые компоненты того, как работает приложение.

Примеры приложений одной страницы

Некоторые заметные примеры:

Гад
Карты Гугл
Facebook
Твиттер
Гугл драйв

Плюсы и минусы спа

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

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

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

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

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

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

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

СПА отлично работает при работе в командах. Разработчики Backend могут просто сосредоточиться на API, и разработчики Frontend могут сосредоточиться на создании наилучшего пользовательского опыта, используя API, построенный на бэкэнде.

Как Con, Onow Page Apps сильно зависят от JavaScript. Это может сделать использование приложения, работающего на устройствах с низким энергопотреблением плохой опыт с точки зрения скорости. Кроме того, некоторые из ваших посетителей могут просто отключить JavaScript, и вам также нужно учитывать доступность для всего, что вы создаете.

Переопределение навигации

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

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

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

Эта проблема теперь может быть решена с помощью История API Предлагается браузерами, но большую часть времени вы будете использовать библиотеку, которая внутренне использует эту API, как React Router Отказ

Декларативный

Что это значит, когда вы читаете, что реагирование является декларативным? Вы будете проходить через статьи, описывающие реагирование как Декларативный подход к строительству УИС Отказ

Реагистрируйте свой «декларативный подход» довольно популярным и авансом, поэтому он пронизывал мир Frestend наряду с реагированием.

Это действительно не новая концепция, но отреагировать здание UIS намного более декларативно, чем с шаблонами HTML:

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

Противоположность декларативного является Императив Отказ Общим примером императивного подхода является поиск элементов в DOM, используя события JQuery или DOM. Вы говорите браузеру точно, что делать, вместо того, чтобы сказать ему, что вам нужно.

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

Неподумность

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

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

В программировании переменная неизменяется, когда его значение не может измениться после его создания.

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

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

То же самое относится и к объектам и массивам.

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

Объект никогда не обновляется, но скопирован перед изменением его.

Это относится к реакции во многих местах.

Например, вы никогда не должны мутировать Государство Свойство компонента напрямую, но только через setState () метод.

В Redux вы никогда не мутируете состояние напрямую, но только через редукторы, которые являются функциями.

Вопрос в том, почему?

Есть различные причины, наиболее важными из которых являются:

Мутации могут быть централизованы, как в случае redux, что улучшает ваши возможности отладки и уменьшает источники ошибок.
Код выглядит чище и проще понять. Вы никогда не ожидаете функции, чтобы изменить некоторую ценность без вы знания, что дает вам предсказуемость Отказ Когда функция не мутирует объекты, но просто возвращает новый объект, он называется чистой функцией.
Библиотека может оптимизировать код, потому что, например, JavaScript быстрее при попадании на старую ссылку на объект для совершенно нового объекта, а не мутировать существующий объект. Это дает вам Производительность Отказ

Чистота

В JavaScript, когда функция не мутирует объекты, но просто возвращает новый объект, он называется чистой функцией.

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

Чистая функция принимает вход и возвращает вывод без изменения ввода и ничего другого.

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

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

Все функциональные компоненты являются чистыми компонентами:

const Button = props => {
  return 
}

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

class Button extends React.Component {
  render() {
    return 
  }
}

Состав

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

Например, подумайте об использовании карта () Чтобы создать новый массив из начального набора, а затем фильтровать результат, используя Фильтр () :

const list = ['Apple', 'Orange', 'Egg']
list.map(item => item[0]).filter(item => item === 'A') //'A'

В реакции композиция позволяет иметь несколько довольно прохладных преимуществ.

Вы создаете небольшие и худые компоненты и используете их в составить Больше функциональности поверх них. Как?

Создать специализированную версию компонента

Используйте внешний компонент для расширения и специализации более общего компонента:

const Button = props => {
  return 
}

const SubmitButton = () => {
  return 
}

const LoginButton = () => {
  return 
}

Пропускать методы как реквизиты

Например, компонент может сосредоточиться на отслеживании события Click, и что на самом деле происходит, когда событие Click происходит до компонента контейнера:

const Button = props => {
  return 
}

const LoginButton = props => {
  return 
}

const Container = () => {
  const onClickHandler = () => {
    alert('clicked')
  }
  
  return 
}

Используя детей

ropps.bildren Свойство позволяет вводить компоненты внутри других компонентов.

Компонент должен выводить ropps.bildren В своем jsx:

const Sidebar = props => {
  return {props.children}
}

И вы встроили больше компонентов в него прозрачным способом:

Компоненты высшего порядка

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

Мы увидим их немного.

Виртуальный домос

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

Во-первых, что такое дом?

Дом ( Объектная модель документа ) - это представление дерева страницы, начиная с < HT ML> Тег, спускаясь в каждый ребенок, который называются узлами.

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

API - это знакомый синтаксис, который вы, вероятно, видели много раз, если вы не использовали абстрактные API, предоставляемые jQuery и друзьями:

document.getElementById(id)
document.getElementsByTagName(name)
document.createElement(name)
parentNode.appendChild(node)
element.innerHTML
element.style.left
element.setAttribute()
element.getAttribute()
element.addEventListener()
window.content
window.onload
window.dump()
window.scrollTo()

Реакция поддерживает копию представления DOM, для чего касается рендеринга RACT: Виртуальный домос

Виртуальный дом объяснил

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

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

Когда вы звоните setState () На компоненте, указав состояние, отличное от предыдущего, реагирование отмечает, что компонент как грязный . Это ключ: реагировать только обновлениями, когда компонент явно меняет состояние.

Что происходит дальше:

Реагируйте обновления виртуального дома относительно компонентов, помеченных как загрязненные (с некоторыми дополнительными проверками, как инициирование SOCCOMPONENTUPDATE () )
Управляет непрерывным алгоритмом для согласования изменений
Обновления настоящего Дома

Почему виртуальный домом полезно: дозирование

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

Неидирекционные данные потока

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

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

В реакции это означает, что:

Состояние передается на просмотр и дочерних компонентов
Действия срабатывают по мнению
Действия могут обновить состояние
Изменение состояния передается на просмотр и дочерних компонентов

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

Благодаря односторонним привязанию данные не могут потоковаться противоположным способом (как бы произошло с двусторонним привязками, например), и это имеет некоторые ключевые преимущества:

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

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

Изменение состояния на компонент никогда не повлияет на его родитель или его братьев и сестер или любой другой компонент в приложении: только его дети.

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

Раздел 3: углубленный реагировать

Jsx.

JSX - это технология, которая была введена реагированными.

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

Сначала вы можете подумать, что использование JSX похоже на смешивание HTML и JavaScript (и как вы увидите CSS).

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

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

JSX Primer.

Вот как вы определяете тег H1, содержащий строку:

const element = Hello, world!

Он выглядит как странная смесь JavaScript и HTML, но на самом деле это все JavaScript.

Что похоже на HTML, на самом деле синтаксический сахар для определения компонентов и их позиционирования внутри разметки.

Внутри экспрессии JSX атрибуты могут быть вставлены очень легко:

const myId = 'test'
const element = Hello, world!

Вам просто нужно обратить внимание, когда атрибут имеет dash ( - ), который преобразуется в синтаксис CAMELCASE, а эти 2 особых случаях:

класс становится классное значение
для становится HTMLFOR.

Потому что они зарезервированы слова в JavaScript.

Вот фрагмент JSX, который вотят два компонента в девочка ярлык:

Тег всегда должен быть закрыт, потому что это больше XML, чем HTML (если вы помните дни XHTML, это будет знакомо, но с тех пор завоевано завоеванное синтаксис HTML5). В этом случае используется самозакрывающий тег.

Обратите внимание, как я завернул 2 компонента в Div Отказ Почему? Потому что Функция Render () может вернуть только один узел Таким образом, если вы хотите вернуть 2 братьев и сестер, просто добавьте родителя. Это может быть любой тег, а не только Div Отказ

Транспилинг JSX.

Браузер не может выполнять файлы JavaScript, содержащие код JSX. Они должны быть впервые преобразованы в обычные JS.

Как? Делая процесс под названием транспилинг Отказ

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

Например, следующие две конструкции эквивалентны:

ReactDOM.render(
  React.DOM.div(
    { id: 'test' },
    React.DOM.h1(null, 'A title'),
    React.DOM.p(null, 'A paragraph')
  ),
  document.getElementById('myapp')
)

ReactDOM.render(
  
    A title
    A paragraph
  ,
  document.getElementById('myapp')
)

Этот очень основной пример - это только начальная точка, но вы уже можете увидеть, насколько сложнее простое синтаксис JS сравнивается с использованием JSX.

На момент написания самого популярного способа выполнить транспиляция это использовать Бабел Какой вариант по умолчанию при запуске Create-React-App Так что, если вы используете его, вам не нужно беспокоиться, все происходит под капотом для вас.

Если вы не используете Create-React-App Вам нужно настроить Babel сами.

JS в JSX.

JSX принимает любой вид JavaScript, смешанный в него.

Всякий раз, когда вам нужно добавить несколько JS, просто положите его внутри фигурных скобок {} Отказ Например, вот как использовать постоянное значение, определенное в другом месте:

const paragraph = 'A paragraph'
ReactDOM.render(
  
    A title
    {paragraph}
  ,
  document.getElementById('myapp')
)

Это основной пример. Фигурные брекеты принимают любой Код JS:

const paragraph = 'A paragraph'
ReactDOM.render(
  
    {rows.map((row, i) => {
      return {row.text}
    })}
  ,
  document.getElementById('myapp')
)

Как вы можете увидеть Мы вложенный JavaScript внутри JSX, определенного внутри JavaScript вложенном в JSX . Вы можете пойти так же глубоко, как вам нужно.

HTML в JSX.

Jsx очень напоминает HTML, но это на самом деле синтаксис XML.

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

Вам нужно закрыть все теги

Как и в xhtml, если вы когда-либо использовали его, вам нужно закрыть все теги: NO больше Но вместо этого используйте метка самозакрытия: (То же самое касается других тегов)

CamelCase является новым стандартом

В HTML вы найдете атрибуты без какого-либо случая (например, Onchange ). В JSX они переименованы в их эквивалентную камеру:

Onchange => по изменению
onclick => по щелчку
OnsUbmit => onsUbmit.

класс становится классом

Из-за того, что JSX является JavaScript, а класс Зарезервированное слово, Вы не можете записать

Но вам нужно использовать

То же самое относится и к для который переводится на HTMLFOR Отказ

CSS в реакции

JSX предоставляет крутой способ определить CSS.

Если у вас есть небольшой опыт работы с встроенным HTML-стилями HTML, на первый взгляд, вы обнаружите, что оттолкнулись к 10 или 15 годам, в мир, где встроенные CSS были полностью нормальными (в настоящее время он демонизирован и обычно просто «быстрое исправление» решение).

Стиль JSX не то же самое: прежде всего, вместо того, чтобы принимать строку, содержащие свойства CSS, JSX Стиль Атрибут принимает только объект. Это означает, что вы определяете свойства в объекте:

var divStyle = {
  color: 'white'
}

ReactDOM.render(Hello World!
, mountNode)

или

ReactDOM.render(Hello World!
, mountNode)

Значения CSS, которые вы пишете в JSX, немного отличаются от обычных CSS:

Имена недвижимости ключами являются CamelCased
Значения просто строки
Вы разделяете каждый кортеж со запятой

Почему это предпочтительно на простых CSS/SASS/меньше?

CSS - это Нерешенная проблема Отказ С момента его создания десятки инструментов вокруг нее поднялись, а затем упали. Основная проблема с JS состоит в том, что нет навеса, и легко писать CSS, которые не соблюдаются, таким образом, «быстрое исправление» может ударить элементы, которые не должны касаться.

JSX позволяет получать компоненты (определенные в реакции, например), чтобы полностью инкапсулировать их стиль.

Это решение в решении?

Встроенные стили в JSX хороши, пока вам не нужно к

Пишите медиа-запросы
Анимация стиля
Справочные псевдо-классы (например, : hover )
Справочные псевдоэлементы (например, :: Первое письмо )

Короче говоря, они покрывают основы, но это не окончательное решение.

Формы в JSX.

JSX добавляет некоторые изменения в то, как работает HTML-формы, с целью облегчения вещей для разработчика.

Значение и defaultvalue.

ценность Атрибут всегда содержит текущее значение поля.

DefaultValue Атрибут содержит значение по умолчанию, которое было установлено при создании поля.

Это помогает решить некоторое странное поведение регулярных Домос взаимодействие при проверке input.value.value.value. а также ввод .getAttribute («значение») Возвращая одно текущее значение и одно исходное значение по умолчанию.

Это также относится к Textarea поле, например

Some text

но вместо того, чтобы

Для Выберите поля, а не используют

использовать

Более последовательный Onchange

Прохождение функции для Onchange Атрибут Вы можете подписаться на события на полях формы.

Это работает последовательно по полям, даже радио , Выберите и флажок Поля ввода огонь A Onchange мероприятие.

Onchange Также пожали при набрании персонажа в вход или Textarea поле.

Jsx auto issapes

Чтобы смягчить когда-либо присутствующий риск использования эксплуатации XSS, заставляет AGLE AUTOR AUTOR USCAPING в выражениях.

Это означает, что вы можете столкнуться с проблемами при использовании HTML-объекта в строковом выражении.

{'© 2017'}

Чтобы исправить это, вы можете либо перемещать объекты за пределами выражения:

Или, используя константу, которая печатает представление Unicode, соответствующее объекту HTML, вам необходимо распечатать:

{'\u00A9 2017'}

Белое пространство в jsx

Чтобы добавить белое пространство в JSX, есть 2 правила:

Правило 1: Горизонтальное белое пространство обрезано до 1

Если у вас есть белое пространство между элементами в той же линии, все обрезано до 1 белого пространства.

Something becomes this

становится

Something becomes this

Правило 2: Вертикальное белое пространство устраняется

Something becomes this

становится

Somethingbecomesthis

Чтобы исправить эту проблему, вам нужно явно добавить белое пространство, добавив пространство выражения, как это:


  Something
  {' '}becomes
  {' '}this

или путем встраивания строки в пространственном выражении:


  Something
  {' becomes '}
  this

Добавление комментариев в jsx

Вы можете добавить комментарии к JSX, используя нормальные комментарии JavaScript внутри выражения:


  {/* a comment */}
  {
    //another comment
  }

Распространение атрибутов

В JSX общая операция назначает значения для атрибутов.

Вместо того, чтобы делать это вручную, например

Вы можете пройти

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

Как петлю в jsx

Если у вас есть набор элементов, необходимых для цикла, чтобы сгенерировать частичную jsx, вы можете создать цикл, а затем добавить JSX в массив:

const elements = [] //..some array

const items = []

for (const [index, value] of elements.entries()) {
  items.push()
}

Теперь при рендеринге JSX вы можете встроить предметы Массив просто путем упаковки его в фигурных скобках:

const elements = ['one', 'two', 'three'];

const items = []

for (const [index, value] of elements.entries()) {
  items.push({value})
}

return (
  
    {items}
  
)

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

const elements = ['one', 'two', 'three'];
return (
  
    {elements.map((value, index) => {
      return {value}
    })}
  
)

Компоненты

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

Реагировать очень просто: все является компонентом.

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

Следующие 2 строки эквивалентны, они делают то же самое. Один с Jsx. , один без, инъекция

`Hello World!`

в элемент с ID приложение .

import React from 'react'
import ReactDOM from 'react-dom'

ReactDOM.render(Hello World!, document.getElementById('app'))

ReactDOM.render(
  React.DOM.h1(null, 'Hello World!'),
  document.getElementById('app')
)

Смотрите, Реагировать. Дом выставил нас H1 составная часть. Какие другие теги HTML доступны? Все они! Вы можете проверить, что Реагировать. Дом Предложения, набрав его в консоли браузера:

(список длиннее)

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

Пользовательские компоненты

Существует 2 способа определить компонент в реакции.

Функциональный компонент:

const BlogPostExcerpt = () => {
  return (
    
      Title
      Description
    
  )
}

Компонент класса:

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      
        Title
        Description
      
    )
  }
}

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

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

Существует также третий синтаксис, который использует ES5 Синтаксис, без классов:

import React from 'react'

React.createClass({
  render() {
    return (
      
        Title
        Description
      
    )
  }
})

Вы редко видите это в современном, > ES6 кодовые базы.

Состояние

Установка состояния по умолчанию компонент

В компонент конструктор инициализируйте Это Отказ Например, компонент Blogpostexcerpt может иметь нажал штат:

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
  
  render() {
    return (
      
        Title
        Description
      
    )
  }
}

Доступ к состоянию

нажал Состояние можно получить по ссылке this.state.Clicked :

class BlogPostExcerpt extends Component {
  constructor(props) {
    super(props)
    this.state = { clicked: false }
  }
  
  render() {
    return (
      
        Title
        Description
        Clicked: {this.state.clicked}
      
    )
  }
}

Мутируя состояние

Государство никогда не должно быть мутировано с использованием

this.state.clicked = true

Вместо этого вы всегда должны использовать setState () Вместо этого, передавая его объектом:

this.setState({ clicked: true })

Объект может содержать подмножество или суперсета состояния. Только свойства, которые вы проходите, будут мутированы, те, которые опущены в их текущем состоянии.

Почему вы всегда должны использовать setState ()

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

Неидирекционные данные потока

Это причина, по которой состояние часто перемещается в вал.

Перемещение штата в дереве

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

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

Состояние передается к компонентам, которые нуждаются в этой ценности через реквизиты:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
  
  render() {
    return (
      
        
        
      
    )
  }
}

Состояние может быть мутировано дочерним компонентом, передавая мутационную функцию в виде опоры:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.state = { currency: '€' }
  }
  
  handleChangeCurrency = event => {
    this.setState({ currency: this.state.currency === '€' ? '$' : '€' })
  }
  
  render() {
    return (
      
        
        
      
    )
  }
}

const CurrencySwitcher = props => {
  return (
    
  )
}

const Display = props => {
  return Current currency is {props.currency}.
}

Реквизит

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

const BlogPostExcerpt = props => {
  return (
    
      {props.title}
      {props.description}
    
  )
}

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

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      
        {this.props.title}
        {this.props.description}
      
    )
  }
}

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

Это сложно, когда:

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

Значения по умолчанию для реквизиты

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

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

BlogPostExcerpt.defaultProps = {
  title: '',
  description: ''
}

Некоторые инструменты, как Eslint Имейте возможность обеспечить определение определения defaultproops для компонента с некоторыми пропидтами, которые не требуются явно.

Как пропущены реквизиты

При инициализации компонента пройдите реквизиты таким образом, аналогичным атрибутам HTML:

const desc = 'A description'
//...

Мы прошли название как простой строку (что-то, что мы можем только сделать с строками!), И описание как переменная.

Дети

Специальный опора дети Отказ Который содержит значение чего-либо, которое передается в Тело из компонента, например:


  Something

В этом случае внутри Blogpostexcerpt Мы могли бы получить доступ к «что-то», глядя вверх This.proops.Children. .

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

Председатель VS Контейнерные компоненты

В реакции компоненты часто делятся на 2 больших ведра: презентационные компоненты и Контейнерные компоненты Отказ

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

Презентационные компоненты в основном обеспокоены созданием некоторой разметки для вывода.

Они не управляют каким-либо государством, за исключением государства, связанного с презентацией

Компоненты контейнеров в основном связаны с операциями «Backend».

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

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

Например, это презентационный компонент. Он получает данные из своих реквизитов и просто фокусируется на показании элемента:

const Users = props => (
  
    {props.users.map(user => (
      {user}
    ))}
  
)

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

class UsersContainer extends React.Component {
  constructor() {
    this.state = {
      users: []
    }
  }
  
  componentDidMount() {
    axios.get('/users').then(users =>
      this.setState({ users: users }))
    )
  }
  
  render() {
    return 
  }
}

Государство против рек

В реактивный компонент, реквизит Переданы ли переменные по его родительскому компоненту. Государство С другой стороны, все еще переменные, но непосредственно инициализированные и управляемые компонентом.

Государство может быть инициализировано реквизитами.

Например, родительский компонент может включать в себя дочерний компонент, позвонив

Родитель может передавать опоры, используя этот синтаксис:

Внутри конструктора ChildComponent мы могли бы получить доступ к опор:

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    console.log(props.color)
  }
}

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

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

class ChildComponent extends React.Component {
  constructor(props) {
    super(props)
    this.state.colorName = props.color
  }
}

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

В этом случае не происходит ничего полезного, но представьте себе, что делайте что-то другое на основе значения SP, вероятно, наверное, устанавливая значение состояния лучше всего.

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

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

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

Пропорция

Поскольку JavaScript - это динамически напечатанный язык, у нас на самом деле у нас есть способ обеспечить применение типа переменной в компиляционном времени, и если мы пройдем неверные типы, они будут терпят неудачу во время выполнения или предоставлять странные результаты, если типы совместимы, но не Что мы ожидаем.

Flow и TypectScript много помогите много, но реагирование имеет способ непосредственно помочь с типовыми видами реквизитов, и даже перед запуском кода наши инструменты (редакторы, линтары) могут обнаруживать, когда мы передаем неправильные значения:

import PropTypes from 'prop-types'
import React from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      
        {this.props.title}
        {this.props.description}
      
    )
  }
}

BlogPostExcerpt.propTypes = {
  title: PropTypes.string,
  description: PropTypes.string
}

export default BlogPostExcerpt

Какие типы мы можем использовать

Это фундаментальные типы, которые мы можем принять:

Пропорциональные
Пропорциональные
Proptypes.func.
Пропорциональные
Пропорциональные .Object.
Пропорциональные
Пропорциональные

Мы можем принять один из двух типов:

PropTypes.oneOfType([
  PropTypes.string,
  PropTypes.number
]),

Мы можем принять одно из многих ценностей:

PropTypes.oneOf(['Test1', 'Test2']),

Мы можем принять экземпляр класса:

PropTypes.instanceOf(Something)

Мы можем принять любой реактивный узел:

PropTypes.node

Или даже любой тип вообще:

PropTypes.any

Массивы имеют специальный синтаксис, который мы можем использовать для приема массива определенного типа:

PropTypes.arrayOf(PropTypes.string)

Мы можем составить свойства объекта, используя

PropTypes.shape({
  color: PropTypes.string,
  fontSize: PropTypes.number
})

Требующие свойств

Приобретая isrequireded Для любых опций пропорций приведет к тому, что реагировать на возврат ошибки, если это свойство отсутствует:

PropTypes.arrayOf(PropTypes.string).isRequired,
PropTypes.string.isRequired,

Фрагмент реагирования

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

Это, однако, вызывает ненужное Div на выходе. Вы можете избежать этого, используя Реагировать. Фрагмент :

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      
        {this.props.title}
        {this.props.description}
      
    )
  }
}

который также имеет очень хороший синтаксис сокращения <> это поддерживается только в последние релизы (и Бабел 7+):

import React, { Component } from 'react'

class BlogPostExcerpt extends Component {
  render() {
    return (
      <>
        {this.props.title}
        {this.props.description}
      
    )
  }
}

События

Реагирование обеспечивает простой способ управления событиями. Подготовьтесь прощаться с addeventListener Отказ

В предыдущей статье о государстве вы видели этот пример:

const CurrencySwitcher = props => {
  return (
    
  )
}

Если вы использовали JavaScript некоторое время, это просто как простые старые JavaScript события обработчики За исключением того, что на этот раз вы определяете все в JavaScript, а не в вашем HTML, и вы передаете функцию, а не строку.

Фактические имена событий немного отличаются, потому что в реакции вы используете камеру для всего, поэтому onclick становится onclick , OnsUbmit становится OnsUbmit Отказ

Для справки это старая школа HTML с событиями JavaScript, смешанным в:

Обработчики событий

Это конвенция, чтобы иметь обработчики событий, определенные как методы на классе компонентов:

class Converter extends React.Component {
  handleChangeCurrency = event => {
    this.setState({ currency: this.state.currency === '€' ? '$' : '€' })
  }
}

Все обработчики получают объект событий, который придерживается, кросс-браузер к W3C UI События Спецификация .

Связать это в методах

Если вы используете компоненты класса, не забудьте связывать методы. Методы классов ES6 по умолчанию не связаны. Что это значит, что Это не определяется, если вы не определяете методы как функции стрелки:

class Converter extends React.Component {
  handleClick = e => {
    /* ... */
  }
  //...
}

При использовании синтаксиса инициализатора свойства с Babel (по умолчанию включено в Create-ractment-App ), в противном случае вам нужно связать его вручную в конструкторе:

class Converter extends React.Component {
  constructor(props) {
    super(props)
    this.handleClick = this.handleClick.bind(this)
  }
  handleClick(e) {}
}

Ссылка событий

Существует множество событий, которые поддерживаются, вот сводный список.

Буфер обмена

oncopy
овсянка
нанесение

Состав

oncompositionend.
oncompositionStart.
oncompositionUpdate.

Клавиатура

lekeydown.
onkeypress.
lekeyup.

Фокус

onfocus.
вузы

Форма

по изменению
Oninput.
onsUbmit.

Мышь

по щелчку
OnContextMenu.
ondoubleclick.
ondrag
ondragend.
ondragenter
OnDragexit.
Оргаглеаве
ondragover.
ondragstart.
ondrop.
OnMousedown
OnMessEnter.
OnMouseLeave.
onmousehove.
onmouseout.
при наведении курсора на
onmouseup

Выбор

овладеть

Трогать

OnTouchcancel.
ontouchend.
ontouchmove.
OnTouchStart.

Ui

onscroll.

Колесико мыши

ощущать

СМИ

оноборт
oncanplay
OncanPlaythrough
находки
выпусковый
Oncrected
пожелание
onerror.
onloadeddata.
onloadedmetadata
onloadstart.
оно
onplay
OnPlaying
в процессе
onratechange
onseeked.
onseeking.
расширенный
onsuspend.
onimeUpdate
onvolumeChange
охватывание

Изображение

в процессе
onerror.

Анимация

OnAnimationStart.
оноанимация
Онанимация

Переход

ontransitionend.

Срок службы жизненного цикла

Компоненты Racc Class могут иметь крючки для нескольких событий жизненного цикла.

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

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

Во-первых, есть 3 фаза в жизненном цикле реагирования:

Монтаж
Обновление
Размонтирование

Давайте посмотрим эти 3 фазы подробно и методы, которые вызываются для каждого.

Монтаж

При монтаже у вас есть 4 метода жизненного цикла до того, как компонент установлен в DOM: Конструктор , getderedstatefromprops. , оказывать и ComponentDidmount Отказ

Конструктор

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

Вы обычно используете конструктор, чтобы настроить начальное состояние, используя this.state = ... .

getderedstatefromprops ()

Когда состояние зависит от реквизитов, getderedstatefromprops Может использоваться для обновления состояния на основе значения реквизита.

Он был добавлен в React 16.3, стремясь заменить ComponentWillReceiveProps устаревший метод.

В этом методе вы не доступа к Это Как это статический метод.

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

Возвращает объект с обновленными элементами состояния (или NULL, если состояние не меняется)

оказывать()

Из метода Render () вы возвращаете JSX, который создает интерфейс компонента.

componentdidmount ()

Этот метод заключается в том, что вы будете использовать для выполнения вызовов API или операции процесса на DOM.

Обновление

При обновлении у вас есть 5 методов жизненного цикла до того, как компонент установлен в DOM: getderedstatefromprops. , должен быть необходим , оказывать , getsnapshotbeforeupdate. и ComponentDidupdate Отказ

getderedstatefromprops ()

См. Приведенное выше описание для этого метода.

необходимо ()

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

оказывать()

См. Приведенное выше описание для этого метода.

getsnapshotbeforeupdate ()

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

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

ComponentDidupdate ()

Этот метод называется, когда компонент был обновлен в DOM. Используйте это для запуска любых 3-го Party DOM API или API вызовов, которые должны быть обновлены при изменении DOM.

Это соответствует ComponentDidMount () Метод от фазы монтажа.

Размонтирование

На этом этапе у нас есть только один метод, ComponentWillunmount Отказ

ComponentWillunmount ()

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

Наследие

Если вы работаете над приложением, которое использует ComponentWillmount , ComponentWillReceiveProps или ComponentWillUpdate , те, у кого были устарены в React 16.3, и вы должны мигрировать в другие методы жизненного цикла.

Формы в реакции

Формы являются одним из немногих элементов HTML, которые являются интерактивными по умолчанию.

Они были разработаны, чтобы позволить пользователю взаимодействовать со страницей.

Общие виды использования форм?

Поиск
Контактные формы
Квартиры для покупок
Войти и оформление
и более!

Использование реагирования мы можем сделать наши формы гораздо более интерактивными и менее статичными.

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

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

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

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

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
  }
  
  handleChange(event) {}
  
  render() {
    return (
      
        Username:
        
      
    )
  }
}

Для того, чтобы установить новое состояние, мы должны связать Это к HandleChange Метод, в противном случае Это не доступен из этого метода:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
  }
  
  handleChange(event) {
    this.setState({ value: event.target.value })
  }
  
  render() {
    return (
      
        
      
    )
  }
}

Точно так же мы используем OnsUbmit атрибут в форме, чтобы позвонить Handlesubmit Метод, когда форма представлена:

class Form extends React.Component {
  constructor(props) {
    super(props)
    this.state = { username: '' }
    this.handleChange = this.handleChange.bind(this)
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  
  handleChange(event) {
    this.setState({ value: event.target.value })
  }
  
  handleSubmit(event) {
    alert(this.state.username)
    event.preventDefault()
  }
  
  render() {
    return (
      
        
        
      
    )
  }
}

Валидация в форме может быть обработана в HandleChange Способ: у вас есть доступ к старому значению состояния, а новый. Вы можете проверить новое значение и если недействительно отклонить обновленное значение (и передайте его каким-либо образом пользователю).

HTML-формы несовместимы. У них длинная история, и это показывает. Реагировать Однако делает вещи более последовательными для нас, и вы можете получить (и обновлять) поля, используя его ценить атрибут.

Вот a Textarea , Например:

То же самое касается Выберите ярлык:

Ранее мы упоминали поле. Это работает немного по-другому.

В этом случае вам необходимо получить ссылку на поле, назначая Ref Атрибут свойству, определенному в конструкторе с Rect.Createref () И используйте это, чтобы получить значение его в обработчике «Отправить»:

class FileInput extends React.Component {
  constructor(props) {
    super(props)
    this.curriculum = React.createRef()
    this.handleSubmit = this.handleSubmit.bind(this)
  }
  
  handleSubmit(event) {
    alert(this.curriculum.current.files[0].name)
    event.preventDefault()
  }
  
  render() {
    return (
      
        
        
      
    )
  }
}

Это неконтролируемые компоненты способ. Состояние хранится в доме, а не в состоянии компонента (обратите внимание, которое мы использовали This.Curriculum Чтобы получить доступ к загруженному файлу и не коснулся штат .

Я знаю, что вы думаете - за пределы этих основ, должна быть библиотека, которая упрощает всю эту обработку формы и автоматизирует проверку, обработку ошибок и многое другое, верно? Есть отличный, Formik Отказ

Ссылка DOM-элемент

Реагировать отлично подходит для отсрочки от вас DOM при строительстве приложений.

Но что, если вы хотите получить доступ к элементу DOM, представляет компонент React?

Может быть, вам нужно добавить библиотеку, которая взаимодействует напрямую с DOM, как библиотека диаграммы, может быть, вам нужно позвонить в несколько API DOM, или добавить фокус на элементе.

В JSX вашего компонента вы можете назначить ссылку на элемент DOM в свойство компонента, используя этот атрибут:

ref={el => this.someProperty = el}

Поместите это в контекст, например, с кнопка элемент:

кнопка Относится к свойству компонента, которое затем может использоваться методами жизненного цикла компонента (или другими методами) для взаимодействия с DOM:

class SomeComponent extends Component {
  render() {
    return

В функциональном компоненте механизм такой же, вы просто избегаете использовать Это (Поскольку он не указывает на экземпляр компонента) и вместо этого используйте свойство:

function SomeComponent() {
  let button
  return

Сервер бокового рендеринга

Сервер бокового рендеринга , Также называется SSR , это способность приложения JavaScript для рендеринга на сервере, а не в браузере.

Почему мы когда-нибудь хотели сделать это?

Это позволяет вашему сайту иметь более быструю первую страницу время загрузки, которое является ключом к хорошему пользователю.
Это важно для SEO: поисковые системы не могут (пока?) Эффективно и правильно индексируют приложения, которые исключительно рендерируют на стороне клиента. Несмотря на новейшие улучшения для индексации в Google, также есть другие поисковые системы, и Google не идеально подходит в любом случае. Кроме того, Google поддерживает сайты с быстрыми временами нагрузки, и нагрузка на стороне клиента не хороша для скорости
Здорово, когда люди разделяют страницу вашего сайта в социальных сетях, так как они могут легко собрать метаданные, необходимые для красиво делиться ссылкой (изображения, название, описание ..)

Без рендеринга на боковом сервере все ваши серверные корабли - это HTML-страница без тела, просто некоторые теги скрипта, которые затем используются браузером для рендеринга приложения.

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

Однако боковой рендеринг сервера тоже имеет свой недостаток:

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

Очень упрощенный пример того, что нужно для сервера рендеринга APC

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

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

Для реализации основных SSR мы собираемся использовать Express.

Предупреждение: сложность SSR может расти со сложностью вашего применения. Это голая минимальная настройка для визуализации основного приложения RACT. Для более сложных потребностей вам может потребоваться сделать немного больше работы или также проверить библиотеки SSR для реагирования.

Я полагаю, вы начали приложение React с Create-React-App . Если вы просто пытаетесь, установите один сейчас, используя NPX Create-React-App SSR .

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

npm install express

У вас есть набор папок в вашем каталоге приложений. Создать новую папку под названием Сервер Затем входите в него и создайте файл с именем Server.js Отказ

После Create-raction-app Конвенции, приложение живет в SRC/App.js файл. Мы собираемся загрузить этот компонент и сделать его в строку, используя ReactomServer.rendertoString () , который предоставляется React-Dom Отказ

Вы получаете содержание ./build/index.html Файл и заменить

Заполнитель, который является тегом, где приложение по умолчанию, с помощью ` \ $ {restdomserver.rendertoString ()} Отказ

Весь контент внутри построить Папка будет послужина как есть, статически с помощью Express.

import path from 'path'
import fs from 'fs'

import express from 'express'
import React from 'react'
import ReactDOMServer from 'react-dom/server'

import App from '../src/App'

const PORT = 8080
const app = express()

const router = express.Router()

const serverRenderer = (req, res, next) => {
  fs.readFile(path.resolve('./build/index.html'), 'utf8', (err, data) => {
    if (err) {
      console.error(err)
      return res.status(500).send('An error occurred')
    }
    return res.send(
      data.replace(
        '',
        `${ReactDOMServer.renderToString()}`
      )
    )
  })
}
router.use('^/$', serverRenderer)

router.use(
  express.static(path.resolve(__dirname, '..', 'build'), { maxAge: '30d' })
)

// tell the app to use the above rules
app.use(router)

// app.use(express.static('./build'))
app.listen(PORT, () => {
  console.log(`SSR running on port ${PORT}`)
})

Теперь в приложении клиента в вашем SRC/index.js вместо того, чтобы звонить Reactom.runder () :

ReactDOM.render(, document.getElementById('root'))

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

ReactDOM.hydrate(, document.getElementById('root'))

Все код Node.js необходимо транспортировать Babel, поскольку сервер-код Node.js ничего не знает о JSX, ни модулях ES (которые мы используем для включить заявления).

Установите эти 3 пакета:

npm install @babel/register @babel/preset-env @babel/preset-react ignore-styles express

игнорировать стили это утилита Babel, которая скажет, что он игнорирует файлы CSS, импортированные с помощью Импорт синтаксис.

Давайте создадим точку входа в Сервер/index.js :

require('ignore-styles')

require('@babel/register')({
  ignore: [/(node_modules)/],
  presets: ['@babel/preset-env', '@babel/preset-react']
})

require('./server')

Создайте приложение React Application, чтобы заполнить сборку/папку:

npm run build

И давайте запустим это:

node server/index.js

Я сказал, что это упрощенный подход, и это:

Он не обрабатывает рендеринг изображений правильно при использовании импорта, которые нуждается в WebPack для работы (и что усложняет процесс)
Он не обрабатывает метаданные заголовка страницы, что важно для целей SEO и социальных целей (среди прочего)

Так что хотя это хороший пример использования ReactomServer.rendertoString () и Reactom.hydrate Чтобы получить этот базовый рендеринг на стороне сервера, это недостаточно для использования реального мира.

Сервер бокового рендеринга с использованием библиотек

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

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

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

В частности, я предлагаю Next.js и GATSBY два проекта мы увидим позже.

Контекст API.

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

Команда Ract предлагает придерживаться реквизитов, если у вас есть всего несколько уровней детей, потому что это все еще намного менее сложное API, чем контекстное API.

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

Как это работает?

Вы создаете контекст, используя Ract.createContext () , который возвращает объект контекста:

const { Provider, Consumer } = React.createContext()

Затем вы создаете компонент обертки, который возвращает Провайдер Компонент, и вы добавляете в виде детей все компоненты, из которых вы хотите получить доступ к контексту:

class Container extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      something: 'hey'
    }
  }
  
  render() {
    return (
      {this.props.children}
    )
  }
}

class HelloWorld extends React.Component {
  render() {
    return (
      
        
      
    )
  }
}

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

Внутри компонента, который завернут поставщику, вы используете Потребитель Компонент для использования контекста:

class Button extends React.Component {
  render() {
    return (
      
        {context => }
      
    )
  }
}

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

 this.setState({something: 'ho!'})
  {this.props.children}


/* ... */

  {(context) => (
    
  )}

Вы можете увидеть это в действии В этом глюке Отказ

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

При использовании нескольких файлов вы создаете содержимое в одном файле и импортируйте его во все места, которые вы используете его:

//context.js
import React from 'react'
export default React.createContext()

//component1.js
import Context from './context'
//... use Context.Provider

//component2.js
import Context from './context'
//... use Context.Consumer

Компоненты высшего порядка

Вы можете быть знакомы с функциями более высокого порядка в JavaScript. Это функции, которые принимают функции как аргументы, а также/или функции возврата.

Два примера этих функций являются Array.map () или Array.filter () Отказ

В реакции мы расширяем эту концепцию компонентам, и поэтому у нас есть Компонент более высокого порядка (HOC) Когда компонент принимает компонент в качестве ввода и возвращает компонент в качестве его вывода.

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

Мы можем использовать HOC для добавления методов или свойств в состояние компонента или магазина Redux.

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

Существует конвенция о приготовлении компонента более высокого порядка с с строка (это конвенция, поэтому не обязательно), так что если у вас есть Кнопка Компонент, его аналог HOC должен быть назван withbutton Отказ

Давайте создадим один.

Самым простым примером когда-либо HOC является то, что просто возвращает компонент неизменен:

const withElement = Element => () =>

Давайте сделаем это немного более полезным и добавить свойство на эту кнопку, в дополнение к всем реквизиту, с которым она уже пришла, цвет:

const withColor = Element => props =>

Мы используем этот HOC в компоненте JSX:

const Button = () => {
  return 
}

const ColoredButton = withColor(Button)

И мы, наконец, можем сделать компонент цветныхbutton в нашем приложении jsx:

function App() {
  return (
    
      Hello
      
    
  )
}

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

Рендеринг

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

Внутри компонента JSX вы можете рендер {this.props.children} который автоматически вводит любой JSX в родительском компоненте как дети:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      /*...*/
    }
  }
  
  render() {
    return {this.props.children}
  }
}

const Children1 = () => {}

const Children2 = () => {}

const App = () => (
  
    
    
  
)

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

Чтобы иметь возможность поделиться государством, вам нужно использовать компонент Render SPOP, а вместо того, чтобы проходить компоненты в качестве детей родительского компонента, вы передаете функцию, которую вы выполняете в {this.props.children ()} Отказ Функция может принимать аргументы:

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio' }
  }
  
  render() {
    return {this.props.children(this.state.name)}
  }
}

const Children1 = props => {
  return {props.name}
}

const App = () => {name => }

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

class Parent extends React.Component {
  constructor(props) {
    super(props)
    this.state = { name: 'Flavio', age: 35 }
  }
  
  render() {
    return (
      
        Test
        {this.props.someprop1(this.state.name)}
        {this.props.someprop2(this.state.age)}
      
    )
  }
}

const Children1 = props => {
  return {props.name}
}

const Children2 = props => {
  return {props.age}
}

const App = () => (
   }
    someprop2={age => }
  />
)

ReactDOM.render(, document.getElementById('app'))

Крючки

Крючки - это функция, которая будет введена в Rection 16.7, и собирается изменить, как мы пишем реагированные приложения в будущем.

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

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

Состояние доступа

Используя Usestate () API, вы можете создать новую переменную состояния и иметь способ изменить его. Usestate () Принимает начальное значение элемента состояния и возвращает массив, содержащий переменную состояния, и функция, которую вы вызываете, чтобы изменить состояние. Так как он возвращает массив, который мы используем Разрушение массива Чтобы получить доступ к каждому отдельному элементу, как это: Const [Count, (0)

Вот практический пример:

import { useState } from 'react'

const Counter = () => {
  const [count, setCount] = useState(0)
  
  return (
    
      You clicked {count} times
      
    
  )
}

ReactDOM.render(, document.getElementById('app'))

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

Пример на кодепене

Доступ к крючкам жизненного цикла

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

Используя компоненты класса, вы можете зарегистрировать функцию на ComponentDidmount С ComponentWillunmount и ComponentDidupdate События, и те случаи послужит многим случаям использования, от переменных инициализации для вызовов API для очистки.

Крючки предоставляют Useffect () API. Вызов принимает функцию как аргумент.

Функция работает, когда компонент сначала отображается, и на каждом последующем перезарядке/обновлении. Реагируйте первые обновления DOM, затем вызывает любую функцию, переданную на Useffect () Отказ Все не блокируя рендеринг пользовательского интерфейса даже в блокировке кода, в отличие от старого ComponentDidmount и ComponentDidupdate , что заставляет наши приложения чувствовать себя быстрее.

Пример:

const { useEffect, useState } = React

const CounterWithNameAndSideEffect = () => {
  const [count, setCount] = useState(0)
  const [name, setName] = useState('Flavio')
  
  useEffect(() => {
    console.log(`Hi ${name} you clicked ${count} times`)
  })
  
  return (
    
      
        Hi {name} you clicked {count} times
      
      
      
    
  )
}

ReactDOM.render(
  ,
  document.getElementById('app')
)

То же самое ComponentWillunmount Работа может быть достигнута путем необязательно Возвращение Функция от нашего Useffect () Параметр:

useEffect(() => {
  console.log(`Hi ${name} you clicked ${count} times`)
  return () => {
    console.log(`Unmounted`)
  }
})

Useffect () Можно назвать несколько раз, что приятно отделить несвязанную логику (что-то, что давает события жизненного цикла класса компонентов).

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

useEffect(
  () => {
    console.log(`Hi ${name} you clicked ${count} times`)
  },
  [name, count]
)

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

useEffect(() => {
  console.log(`Component mounted`)
}, [])

Useffect () Отлично подходит для добавления журналов, доступа к третьим сторонам API и гораздо больше.

Пример на кодепене

Обрабатывать события в функциональных компонентах

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

Теперь мы можем использовать UseCallback () Встроенный API:

const Button = () => {
  const handleClick = useCallback(() => {
    //...do something
  })
  return 
}

Любой параметр, используемый внутри функции, должен быть передан через второй параметр на UseCallback () , в массиве:

const Button = () => {
  let name = '' //... add logic
  const handleClick = useCallback(
    () => {
      //...do something
    },
    [name]
  )
  return 
}

Включить перекрестную коммуникацию с использованием пользовательских крючков

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

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

Как вы создаете пользовательский крючок?

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

Примеры:

const useGetData() {
  //...
  return data
}

или

const useGetUser(username) {
  //...const user = fetch(...)
  //...const userData = ...
  return [user, userData]
}

В ваших собственных компонентах вы можете использовать такой крючок:

const MyComponent = () => {
  const data = useGetData()
  const [user, userData] = useGetUser('flavio')
  //...
}

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

Расщепление кода

Современные приложения JavaScript могут быть довольно огромными с точки зрения размера пакета. Вы не хотите, чтобы ваши пользователи должны были загрузить пакет JavaScript 1 МБ (ваш код и библиотеки, которые вы используете), просто загружать первую страницу, верно? Но это то, что происходит по умолчанию, когда вы отправляете современное веб-приложение, построенное с пакетом WebPack.

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

Разделение кода - это практика только загрузки JavaScript, который вам нужен момент, когда вам это нужно.

Это улучшает:

Выполнение вашего приложения
воздействие на память и поэтому использование аккумулятора на мобильных устройствах
Размер загруженных килобайт (или мегабайт)

React 16.6.0, выпущенные в октябре 2018 года, представили способ выполнения кода, который должен занять место каждого ранее использованного инструмента или библиотеки: Отреагировать и Suspense Отказ

Реагировать .Lazy и Suspense Сформируйте идеальный способ лежит нагрузки зависимости и только нагружать его при необходимости.

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

import React from 'react'

const TodoList = React.lazy(() => import('./TodoList'))

export default () => {
  return (
    
      
    
  )
}

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

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

import React from 'react'

const TodoList = React.lazy(() => import('./TodoList'))

export default () => {
  return (
    
      
        
      
    
  )
}

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

Использовать его Запас опоры для вывода некоторого jsx или вывод компонента:

...
      Please wait}>
        
      
...

Все это хорошо играет с React Router:

import React from 'react'
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

const TodoList = React.lazy(() => import('./routes/TodoList'))
const NewTodo = React.lazy(() => import('./routes/NewTodo'))

const App = () => (
  
    Please wait}>
      
        
        
      
    
  
)

Раздел 4: Практические примеры

2 Очень простые приложения, чтобы объяснить некоторые понятия, представленные до сих пор.

Очень простой пример построения счетчика в реакции

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

Давайте будем использовать кодепен для этого. Начнем с подделки Реакция шаблона ручки .

Мы показываем количество в Div, и мы добавляем несколько кнопок, чтобы увеличить этот счет:

const Button = ({ increment }) => {
  return 
}

const App = () => {
  let count = 0
  
  return (
    
      
      
      
      
      {count}
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Давайте добавим функциональность, которая позволяет нам изменять количество, нажав кнопки, добавив OnClickFunction проп

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return 
}

const App = () => {
  let count = 0
  
  const incrementCount = increment => {
    //TODO
  }
  
  return (
    
      
      
      
      
      {count}
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Здесь каждый элемент кнопки имеет 2 реквизита: увеличение и Функция OnClick . Мы создаем 4 разных кнопки, причем 4 значения приращения: 1, 10, 100, 1000.

Когда кнопка в компоненте кнопки нажата, incrementcount Функция называется.

Эта функция должна увеличивать локальный счет. Как мы можем сделать это? Мы можем использовать крючки:

const { useState } = React

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return 
}

const App = () => {
  const [count, setCount] = useState(0)
  
  const incrementCount = increment => {
    setCount(count + increment)
  }
  
  return (
    
      
      
      
      
      {count}
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Usestate () Инициализирует переменную подсчет в 0 и дает нам setcount () Способ обновления его значения.

Мы используем как в incrementcount () Реализация метода, которая звонит setcount () Обновление стоимости к существующему значению Считать плюс приращение, пройденное каждым компонентом кнопки.

Полный пример код можно увидеть в https://codepen.io/flaviocopes/pen/qzeqpr.

Выберите и отобразить информацию пользователей GitHub через API

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

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

Когда Добавить карту Нажата, входная форма очищена путем очистки Имя пользователя Состояние Форма составная часть.

Пример использует, в дополнение к реакции, Axios библиотека. Это хорошая полезная и легкая библиотека для обработки сетевых запросов. Добавьте его в настройки пера в кодепене, или установите его на месте, используя NPM Install Axios Отказ

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

Props.avatar_url пользователь аватар
props.name Имя пользователя
ropps.blog URL-адрес сайта пользователя

const Card = props => {
  return (
    
      
      
        {props.name}
        {props.blog}
      
    
  )
}

Мы создаем список этих компонентов, которые будут переданы родительским компонентом в карты опоры Карточный список , который просто итерат на это, используя карта () и выводит список карт:

const CardList = props => (
  
    {props.cards.map(card => (
      
    ))}
  
)

Родительский компонент - это приложение, которое хранит карты Массив в своем собственном состоянии, удалось использовать Usestate () Крюк:

const App = () => {
  const [cards, setCards] = useState([])
  
  return (
    
      
    
  )
}

Прохладный! Мы должны иметь путь сейчас, чтобы спросить GitHub для деталей одного имени пользователя. Мы сделаем это, используя Форма Компонент, где мы управляем нашим собственным состоянием ( username ), и мы просим GitHub для получения информации о пользователе, используя их публичные API, через Axios:

const Form = props => {
  const [username, setUsername] = useState('')
  
  handleSubmit = event => {
    event.preventDefault()
    
    axios.get(`https://api.github.com/users/${username}`).then(resp => {
      props.onSubmit(resp.data)
      setUsername('')
    })
  }
  
  return (
    
       setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      
    
  )
}

Когда форма отправляется, мы называем Handlesubmit событие, а после сетевого звонка мы называем ropps.onsubmit Передача родитель ( приложение ) Данные, которые мы получили от GitHub.

Мы добавляем его в Приложение Прохождение метода добавить новую карту в список карт, addnewcard как его OnsUbmit проп

const App = () => {
  const [cards, setCards] = useState([])
  
  addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo))
  }
  
  return (
    
      
      
    
  )
}

Наконец мы оказываем приложение:

ReactDOM.render(, document.getElementById('app'))

Вот полный исходный код нашего небольшого приложения RACT:

const { useState } = React

const Card = props => {
  return (
    
      
      
        {props.name}
        {props.blog}
      
    
  )
}

const CardList = props => {props.cards.map(card => )}

const Form = props => {
  const [username, setUsername] = useState('')
  
  handleSubmit = event => {
    event.preventDefault()
    
    axios
      .get(`https://api.github.com/users/${username}`)
      .then(resp => {
        props.onSubmit(resp.data)
        setUsername('')
      })
  }
  
  return (
    
       setUsername(event.target.value)}
        placeholder="GitHub username"
        required
      />
      
    
  )
}

const App = () => {
  const [cards, setCards] = useState([])
  
  addNewCard = cardInfo => {
    setCards(cards.concat(cardInfo))
  }
  
  return (
    
      
      
    
  )
}

ReactDOM.render(, document.getElementById('app'))

Это последний результат:

Проверьте это на кодепене в https://codepen.io/flavioCopes/pen/ojlyey

Раздел 5: стиль

CSS в реакции

Использование React У вас есть различные способы добавления укладки на ваши компоненты.

Использование классов и CSS

Первый и самый простой - использовать классы и использовать обычный файл CSS для нацеления этих классов:

const Button = () => {
  return 
}

.button {
  background-color: yellow;
}

Вы можете импортировать таблицу стилей, используя оператор импорта, как это:

import './style.css'

и WebPack Позаботится о добавлении свойства CSS в комплект.

Использование атрибута стиля

Второй метод - использовать Стиль Атрибут, прикрепленный к элементу JSX. Используя этот подход, вам не нужен отдельный файл CSS.

const Button = () => {
  return 
}

CSS определяется немного по-другому. Во-первых, обратите внимание на двойные вьющиеся кронштейны: это потому, что Стиль принимает объект. Проходим в объекте JavaScript, который определяется в фигурных скобках. Мы также могли сделать это:

const buttonStyle = { backgroundColor: 'yellow' }
const Button = () => {
  return 
}

При использовании Create-raction-app Эти стили по умолчанию являются AutoPrefixed, благодаря его использованию Autoprefixer Отказ

Также стиль сейчас Camelcased вместо использования тире. Каждый раз, когда свойство CSS имеет тире, удалите его и начните следующее слово Captized.

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

Использование модулей CSS

CSS модули Кажется, представляют собой идеальное место в середине: вы используете классы, но CSS имеет значение для компонента, что означает, что любой добавленный вами стиль не может быть применен к другим компонентам без вашего разрешения. И все же ваши стили определяются в отдельном файле CSS, который легче поддерживать, чем CSS в JavaScript (и вы можете использовать свои хорошие имена свойств CSS).

Начните с создания файла CSS, который заканчивается .module.css. , Например Button.module.css Отказ Отличный выбор - дать ему то же имя, что и компонент, который вы собираетесь стильно

Добавьте свои CSS здесь, затем импортируйте его в файл компонента, который вы хотите стиль:

import style from './Button.module.css'

Теперь вы можете использовать его в своем JSX:

const Button = () => {
  return 
}

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

Sass в реакции

Когда вы создаете приложение React, используя Create-React-App У вас есть много вариантов в вашем распоряжении, когда речь идет о стиле.

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

SASS/SCSS - очень популярный вариант, очень любимый человек у многих разработчиков.

Вы можете использовать его без какой-либо конфигурации вообще, начиная с Create-raction-app 2

Все, что вам нужно, это .sass.ass. или .scsss Файл, и вы просто импортируете его в компонент:

import './styles.scss'

Вы можете увидеть пример этого, работая на https://codesandox.io/s/18qq31rp3 Отказ

Слифовые компоненты

Стильные компоненты являются одним из новых способов использования CSS в современном JavaScript. Именно подразумевается преемником модулей CSS, способ написания CSS, которые выделяются на один компонент, а не утечка к любому другому элементу на странице

Краткая история

Давным временем Web был действительно простым, а CSS даже не существует. Мы выложили страницы, используя Столы и рамки. Хорошие времена.

Тогда CSS Доступен в жизнь, и через некоторое время стало ясно, что рамки могут значительно помочь, особенно в строительстве сетки и макета, Bootstrap и Foundation, играя большую часть в этом.

Препроцессоры, как Sass И другие помогли многому замедлить принятие рамок, и лучше организовать код, конвенции, такие как Бем и Smacss Вырос в использовании, особенно в командах.

Конвенции не являются решением всего, и они сложны, чтобы помнить, поэтому за последние несколько лет с увеличением принятия JavaScript И строить процессы в каждом проекте Frontend, CSS нашел свой путь в JavaScript ( CSS-in-js ).

Новые инструменты изучали новые способы выполнения CSS-In-JS, а несколько удалось увеличить популярность:

Стиль реагирования
jsxstyle.
Радий

и более.

Представляя в стиле компонентов

Одним из самых популярных из этих инструментов является Слифовые компоненты Отказ

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

(больше на модулях CSS здесь и здесь Несомненно

Стильные компоненты позволяют писать обычные CSS в ваших компонентах, не беспокоясь о столкновениях имени класса.

Установка

Просто установите стиль компоненты, используя NPM или пряжа :

npm install styled-components
yarn add styled-components

Вот и все! Теперь все, что вам нужно сделать, это добавить этот импорт:

import styled from 'styled-components'

Ваш первый стилизованный компонент

С в стиле Объект Imported, теперь вы можете начать создавать созданные компоненты. Вот первый:

const Button = styled.button`
  font-size: 1.5em;
  background-color: black;
  color: white;
`

Кнопка теперь является реагированным компонентом во всех его величии.

Мы создали его, используя функцию в стиле объекта, называемого кнопка В этом случае и прохождение некоторых свойств CSS в Шаблон литерал Отказ

Теперь этот компонент может быть отображен в нашем контейнере с использованием обычного реагистрационного синтаксиса:

render()

Компоненты в стиле предлагают другие функции, которые вы можете использовать для создания других компонентов, а не только кнопка , как Раздел , H1 , вход и многие другие.

Используемый синтаксис с обратным изолированием может быть странным сначала, но это называется Помеченные шаблоны Это простой JavaScript, и это способ пройти аргумент к функции.

Использование реквизитов для настройки компонентов

Когда вы проходите некоторые реквизиты в стилизованный компонент, он передаст их на Дом Узел установлен.

Например, вот как мы передаем заполнитель и Тип реквизит к вход составная часть:

const Input = styled.input`
  //...
`

render(
  
    
  
)

Это сделает только то, что вы думаете, вставляя эти опоры в виде атрибутов HTML.

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

const Button = styled.button`
  background: ${props => (props.primary ? 'black' : 'white')};
  color: ${props => (props.primary ? 'white' : 'black')};
`

render(
  
    
    
    
  
)

Установка Первичный Опирая меняет цвет кнопки.

Расширение существующего стилизованного компонента

Если у вас есть один компонент, и вы хотите создать аналогичный, просто стилизован немного по-разному, вы можете использовать простираться :

const Button = styled.button`
  color: black;
  //...
`

const WhiteButton = Button.extend`
  color: white;
`

render(
  
    
    A white button
  
)

Это обычные CSS

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

Вы можете использовать медиапроситы, Вложенность И все, что вам может понадобиться.

Использование префиксов поставщиков

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

Раздел 6: инструмент

Варить

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

Задача которого?

Проблема, которую у каждого веб-разработчика наверняка имел: функция JavaScript доступна в последнем выпуске браузера, но не в старых версиях. Или, может быть, Chrome или Firefox внедряют его, но Safari iOS и Edge не делают.

Например, ES6 представил Функция стрелки :

[1, 2, 3].map((n) => n + 1)

Который сейчас поддерживается всеми современными браузерами. IE11 не поддерживает его, ни Opera Mini (как я знаю? Проверяя TS6 Совместимость Таблица ).

Так как вы должны иметь дело с этой проблемой? Если вы переходите и оставьте этих клиентов со старшими/несовместимыми браузерами позади, или вы должны написать более старый код JavaScript, чтобы все ваши пользователи были счастливы?

Введите Бабел. Бабел это компилятор : Он принимает код, написанный в одном стандарте, и он транкирует его для записи в другой стандарт.

Вы можете настроить Babel, чтобы транпилировать Modern ES2017 JavaScript в синтаксис JavaScript ES5:

[1, 2, 3].map(function(n) {
  return n + 1
})

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

(P.S. Если все это es вещь звучит с толку с толку, см. Подробнее о версиях ES в Руководстве Ecmascript )

Установка Вавила

Babel легко устанавливается с помощью NPM , локально в проекте:

npm install --save-dev @babel/core @babel/cli

Так как NPM сейчас поставляется с NPX , Локально установленные пакеты CLI могут работать, набрав команду в папке проекта:

Итак, мы можем запустить Вавила, просто бега

npx babel script.js

Пример конфигурации байла

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

Чтобы решить проблему, о которой мы говорили во введении (используя функции стрелки в каждом браузере), мы можем запустить

npm install --save-dev \
    @babel/plugin-transform-es2015-arrow-functions

Для загрузки пакета в Node_Modules папка нашего приложения, то нам нужно добавить

{
  "plugins": ["transform-es2015-arrow-functions"]
}

к .babelrc Файл, представленный в корневой папке приложения. Если у вас уже нет этого файла, вы просто создаете пустой файл и поместите это контент в него.

Теперь, если у нас есть Script.js Файл с этим контентом:

var a = () => {};
var a = (b) => b;

const double = [1,2,3].map((num) => num * 2);
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends() {
    this._friends.forEach(f =>
      console.log(this._name + " knows " + f));
  }
};
console.log(bob.printFriends());

Бег Babel Script.js выводят следующий код:

var a = function () {};var a = function (b) {
  return b;
};

const double = [1, 2, 3].map(function (num) {
  return num * 2;
});
console.log(double); // [2,4,6]

var bob = {
  _name: "Bob",
  _friends: ["Sally", "Tom"],
  printFriends() {
    var _this = this;
    
    this._friends.forEach(function (f) {
      return console.log(_this._name + " knows " + f);
    });
  }
};
console.log(bob.printFriends());

Как вы можете видеть функции стрелки, все были преобразованы в функции JavaScript ES5.

Вавиловые пресеты

Мы только что видели в предыдущей статье, как Babel можно настроить на транспортные функции Special JavaScript.

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

Вот почему Babel предлагает пресеты Отказ

Самые популярные пресеты - env и реагировать Отказ

env preset.

env Preset очень приятно: вы говорите, какую среду вы хотите поддержать, и это делает все для вас, Поддерживая все современные функции JavaScript Отказ

Например. «Поддержите последние 2 версии каждого браузера, но для Safari давайте поддержим все версии, поскольку Safari 7»

{
  "presets": [
    ["env", {
      "targets": {
        "browsers": ["last 2 versions", "safari >= 7"]
      }
    }]
  ]
}

Или «Мне не нужен поддержка браузера, просто позвольте мне работать с Node.js 6.10»

{
  "presets": [
    ["env", {
      "targets": {
        "node": "6.10"
      }
    }]
  ]
}

реагировать заранее

реагировать Preset очень удобно при написании Apps Apps: добавление Предустановленный поток , Syntax-JSX , Transform-React-jsx , Имя преобразования-реакции - имя Отказ

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

Больше информации о предустановках

https://babeljs.io/docs/plugins/

Используя Babel с WebPack

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

Современные JS нуждается в двух разных этапах: стадия компиляции и этап времени выполнения. Это связано с тем, что некоторые функции ES6 + нуждаются в полификле или помощника промедления.

Чтобы установить функциональность RABEL Polyfill Runtime, запустите

npm install @babel/polyfill \
            @babel/runtime \
            @babel/plugin-transform-runtime

Теперь в вашем webpack.config.js Файл Добавить:

entry: [
  'babel-polyfill',
  // your app scripts should be here
],

module: {
  loaders: [
    // Babel loader compiles ES2015 into ES5 for
    // complete cross-browser support
    {
      loader: 'babel-loader',
      test: /\.js$/,
      // only include files present in the `src` subdirectory
      include: [path.resolve(__dirname, "src")],
      // exclude node_modules, equivalent to the above line
      exclude: /node_modules/,
      query: {
        // Use the default ES2015 preset
        // to include all ES2015 features
        presets: ['es2015'],
        plugins: ['transform-runtime']
      }
    }
  ]
}

Удерживая предустановки и плагины информацию внутри webpack.config.js Файл, мы можем избежать иметь .babelrc файл.

WebPack.

WebPack - это инструмент, который позволяет компилировать модули JavaScript, также известный как Модуль Bundler Отказ Учитывая большое количество файлов, он генерирует один файл (или несколько файлов), которые запускают ваше приложение.

Это может выполнить много операций:

помогает вам объединить ваши ресурсы.
Часы для изменений и перенаправляют задачи.
Может управлять трансимацией Babel до ES5, позволяя вам использовать последние функции JavaScript, не беспокоясь о поддержке браузера.
может транпиливать CoffeeScript на JavaScript
Может преобразовать встроенные изображения в URI данных.
Позволяет использовать требуемые () для файлов CSS.
может запустить разработку веб-сервера.
Может обрабатывать замену горячей модуля.
Можно разделить выходные файлы в несколько файлов, чтобы избежать огромного файла JS для загрузки на первой странице.
может выполнить Встряхивание дерева Отказ

WebPack не ограничивается использованием на Frontend, это также полезно в разработке Backend Node.js.

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

Ворчание
Брокколи
Глоток

Есть много сходства в том, что могут сделать те, которые могут сделать тех, и WebPack, но главное отличие состоит в том, что те, которые известны как Задача , в то время как WebPack родился как модуль Bundler.

Это более целенаправленный инструмент: вы указываете точку входа в ваше приложение (он может даже быть файлом HTML с тегами сценариев), и WebPack анализирует файлы и связки, все, что вам нужно для запуска приложения в одном файле вывода JavaScript (или в более Файлы, если вы используете разделение кода).

Установка WebPack

WebPack может быть установлен по всему миру или локально для каждого проекта.

Глобальная установка

Вот как установить его по всему миру с Пряжа :

yarn global add webpack webpack-cli

с NPM :

npm i -g webpack webpack-cli

Как только это сделано, вы должны быть в состоянии запустить

webpack-cli

Локальная установка

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

С Пряжа :

yarn add webpack webpack-cli -D

с NPM :

npm i webpack webpack-cli --save-dev

Как только это сделано, добавьте это на ваш package.json файл:

{
  //...
  "scripts": {
    "build": "webpack"
  }
}

Как только это сделано, вы можете запустить WebPack, набрав

yarn build

в корне проекта.

Конфигурация WebPack

По умолчанию WebPack (начиная с версии 4) не требует конфигурации, если вы уважаете эти конвенции:

Точка входа вашего приложения ./src/index.js.
Вывод помещен в ./dist/main.js Отказ
WebPack работает в режиме производства

Вы можете настроить каждый маленький бит WebPack конечно, когда вам нужно. Конфигурация WebPack хранится в webpack.config.js Файл в корневой папке проекта.

Точка входа

По умолчанию точка входа - ./src/index.js Этот простой пример использует ./index.js Файл в качестве отправной точки:

module.exports = {
  /*...*/
  entry: './index.js'
  /*...*/
}

Выход

По умолчанию вывод генерируется в ./dist/main.js Отказ Этот пример ставит выходной пакет в app.js :

module.exports = {
  /*...*/
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
  /*...*/
}

Погрузчики

Использование WebPack позволяет использовать Импорт или требуется Заявления в вашем коде JavaScript, чтобы не просто включать другой JavaScript, но любой тип файла, например CSS.

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

Например, в вашем коде вы можете использовать:

import 'style.css'

Используя эту конфигурацию погрузчика:

module.exports = {
  /*...*/
  module: {
    rules: [
      { test: /\.css$/, use: 'css-loader' },
    }]
  }
  /*...*/
}

Регулярное выражение Нацеливается на любой файл CSS.

Погрузчик может иметь варианты:

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [
          {
            loader: 'css-loader',
            options: {
              modules: true
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

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

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.css$/,
        use:
          [
            'style-loader',
            'css-loader',
          ]
      }
    ]
  }
  /*...*/
}

В этом примере CSS-погрузчик Интерпретает Импорт «Стиль.css» Директива в CSS. Стиль-погрузчик Затем несет ответственность за инъекцию, что CSS в DOM, используя <СТИЛЬ> ярлык.

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

Какие там погрузчики есть? Много! Вы можете найти полный список здесь Отказ

Обычно используемый загрузчик является Babel, который используется для транситирования современного JavaScript в код ES5:

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
  /*...*/
}

Этот пример делает Babel Preprocess все наши наши файлы React/JSX:

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader'
      }
    ]
  },
  resolve: {
    extensions: [
      '.js',
      '.jsx'
    ]
  }
  /*...*/
}

Смотрите Babel-Loader Варианты здесь Отказ

Плагины

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

Возьми этот пример:

module.exports = {
  /*...*/
  plugins: [
    new HTMLWebpackPlugin()
  ]
  /*...*/
}

Htmlwebpackplugin Плагин имеет работу автоматически создания HTML-файла, добавляя выходной путь JS Bundle, поэтому JavaScript готов к обслуживанию.

Есть Много плагинов доступны Отказ

Один полезный плагин, Cleanwebpackplugin , можно использовать для очистки Dist/ Папка перед созданием любого выхода, поэтому вы не оставляете файлы, когда вы меняете имя выходного файла:

module.exports = {
  /*...*/
  plugins: [
    new CleanWebpackPlugin(['dist']),
  ]
  /*...*/
}

Режим WebPack

Этот режим (введенный в WebPack 4) устанавливает среду, на которой работает WebPack. Может быть установлено на Развитие или Производство (По умолчанию для производства, поэтому вы устанавливаете только при переходе в развитие)

module.exports = {
  entry: './index.js',
  mode: 'development',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'app.js'
  }
}

Режим разработки:

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

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

Я сделал приложение приложения, который только что печатает console.log утверждение.

Вот производственный пакет:

Вот раскладка развития:

Бегущий веб-папак

WebPack можно запустить из командной строки вручную, если установлен глобально, но вообще вы пишете скрипт внутри package.json Файл, который затем работает с помощью NPM или пряжа Отказ

Например Это package.json Определение сценариев Мы использовали ранее:

"scripts": {
  "build": "webpack"
}

позволяет нам работать WebPack бежать

npm run build

или

yarn run build

или просто

yarn build

Смотреть изменения

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

Просто добавьте этот скрипт:

"scripts": {
  "watch": "webpack --watch"
}

а также запустить

npm run watch

или

yarn run watch

или просто

yarn watch

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

Обработка изображений

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

Эта простая конфигурация:

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: [
          'file-loader'
        ]
      }
    ]
  }
  /*...*/
}

Позволяет импортировать изображения в вашем JavaScript:

import Icon from './icon.png'

const img = new Image()
img.src = Icon
element.appendChild(img)

( IMG - это htmmageElement. Проверьте Image Docs Несомненно

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

Еще один хороший инструмент для работы с изображениями - URL-погрузчик погрузчик.

Этот пример загружает любой файл PNG меньше, чем 8 КБ как URL-адрес данных Отказ

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.png$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192
            }
          }
        ]
      }
    ]
  }
  /*...*/
}

Обработайте свой код SASS и преобразуйте его в CSS

Использование Sass-Loader , CSS-погрузчик и Стиль-погрузчик :

module.exports = {
  /*...*/
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [
          'style-loader',
          'css-loader',
          'sass-loader'
        ]
      }
    ]
  }
  /*...*/
}

Создать исходные карты

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

Вы говорите WebPack для генерации исходных карт, используя devtool Свойство конфигурации:

module.exports = {
  /*...*/
  devtool: 'inline-source-map',
  /*...*/
}

devtool есть много возможных ценностей Самые использоваемые, вероятно, являются:

Нет : добавляет никаких исходных карт
Исходная карта : Идеально подходит для производства, обеспечивает отдельную исходную карту, которая может быть минимизирована, и добавляет ссылку в комплект, поэтому инструменты разработки знают, что исходная карта доступна. Конечно, вы должны настроить сервер, чтобы избежать доставки этого, и просто используйте его для целей отладки
Inline-Source-map : Идеально подходит для разработки, вставляет исходную карту как URL-адрес данных

Раздел 7: Тестирование

Шума

Jest - это библиотека для тестирования кода JavaScript.

Это проект с открытым исходным кодом, поддерживаемым Facebook, и он особенно хорошо подходит для тестирования в реактивный код, хотя и не ограничиваясь этим: он может проверить любой код JavaScript. Его сильные стороны:

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

Jest - это инструмент, очень похожий на моча, хотя у них различия:

Мокка меньше самоуверенности, в то время как шума имеет определенный набор конвенций
Mocha требует большего конфигурации, в то время как шутки обычно не работает из коробки, благодаря тем, чтобы быть самоуверенным
Мокка старше и более установлена, с большим количеством интеграции инструментов

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

Установка

Quest автоматически устанавливается в Create-raction-app Так что, если вы используете это, вам не нужно устанавливать шутку.

Quest можно установить в любом другом проекте, используя Пряжа :

yarn add --dev jest

или NPM :

npm install --save-dev jest

Обратите внимание, как мы проинструктивы оба ставить шутки в devdependons. Часть package.json Файл, так что он будет установлен только в среде разработки, а не в производстве.

Добавьте эту строку в сценарии часть вашего package.json файл:

{
  "scripts": {
    "test": "jest"
  }
}

Так что тесты могут быть запущены с помощью Тест пряжи или NPM запустить тест Отказ

В качестве альтернативы вы можете установить шутки глобально:

yarn global add jest

и запустить все ваши тесты, используя jest инструмент командной строки.

Создайте первый шут

Проекты, созданные с Create-raction-app Установлены и предварительно настроены из коробки, но добавление шума на любой проект так же просто, как набрать

yarn add --dev jest

Добавить в свой package.json Эта линия:

{
  "scripts": {
    "test": "jest"
  }
}

и запустить свои тесты, выполняя Тест пряжи в вашей оболочке.

Теперь у вас нет тестов здесь, поэтому ничего не будет выполнено:

Давайте создадим первый тест. Открыть math.js Файл и введите пару функции, которые мы позже тестируем:

const sum = (a, b) => a + b
const mul = (a, b) => a * b
const sub = (a, b) => a - b
const div = (a, b) => a / b

export default { sum, mul, sub, div }

Теперь создайте math.test.js Файл, в той же папке, и там мы будем использовать шутку для проверки функций, определенных в math.js :

const { sum, mul, sub, div } = require('./math')

test('Adding 1 + 1 equals 2', () => {
  expect(sum(1, 1)).toBe(2)
})
test('Multiplying 1 * 1 equals 1', () => {
  expect(mul(1, 1)).toBe(1)
})
test('Subtracting 1 - 1 equals 0', () => {
  expect(sub(1, 1)).toBe(0)
})
test('Dividing 1 / 1 equals 1', () => {
  expect(div(1, 1)).toBe(1)
})

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

Запустить шутку с VS-кодом

Визуальный студийный код - отличный редактор для разработки JavaScript. Whest Extension предлагает лучшую интеграцию Notch для наших испытаний.

Как только вы устанавливаете его, он автоматически определит, если вы установили Jest в своих devdependonds и запустите тесты. Вы также можете вызвать тесты вручную, выбрав Jest: запустить бегун команда. Он будет запустить тесты и оставаться в режиме наблюдения, чтобы повторно запустить их всякий раз, когда вы меняете один из файлов, которые имеют тест (или тестовый файл):

Совокупность

В предыдущей статье я использовал Тобе () Как единственный Соответствующий :

test('Adding 1 + 1 equals 2', () => {
  expect(sum(1, 1)).toBe(2)
})

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

Наиболее часто используемые подписчики, сравнивая стоимость результата Ожидайте () С стоимостью, передаваемым в качестве аргумента:

Тобе сравнивает строгое равенство, используя ===.
Товарищ сравнивает значения двух переменных. Если это объект или массив, он проверяет равенство всех свойств или элементов
Тобенулл верно при прохождении нулевого значения
надевание верно при прохождении определенного значения (напротив выше)
Сохранить верно при прохождении неопределенного значения
Тобеколосето используется для сравнения плавающих значений, избегая ошибок округления
Tobetrouthy правда, если значение считается верным (например, если есть)
Tobefalsy Правда, если значение считается ложным (например, если делает)
Tobegeraterthan правда, если результат ожидания () выше, чем аргумент
Тобегрегреэттанореквал истина, если результат ожидания () равен аргументу или выше, чем аргумент
Без теста правда, если результат ожидания () ниже аргумента
без темытанореквала правда Если результат ожидания () равен аргументу или ниже, чем аргумент
Tomatch используется для сравнения строк с регулярное выражение сопоставление картины
tocontain используется в массивах, правда, если ожидаемый массив содержит аргумент в его элементах
Тоохимия (число) : Проверяет длину массива
Тооловпроперти (ключ, ценность) : Проверяет, есть ли объект свойством и необязательно проверяет его значение
Тотрот Проверяет, если вы проходите функцию, выбрасывая исключение (в целом) или конкретное исключение
ТобойInstanceof () : проверяет Если объект является экземпляром класса

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

test('Adding 1 + 1 does not equal 3', () => {
  expect(sum(1, 1)).not.toBe(3)
})

Для использования с обещаниями вы можете использовать .Resolves и .rejects :

expect(Promise.resolve('lemon')).resolves.toBe('lemon')

expect(Promise.reject(new Error('octopus'))).rejects.toThrow('octopus')

Настраивать

Перед запуском ваших тестов вы захотите выполнить некоторую инициализацию.

Сделать что-то один раз перед всеми тестами, используйте BeForalLL () Функция:

beforeAll(() => {
  //do something
})

Чтобы выполнить что-то перед каждым тестом, используйте Rebedeach () :

beforeEach(() => {
  //do something
})

Срывать

Так же, как вы можете сделать с настройкой, вы также можете выполнить что-то после каждого теста:

afterEach(() => {
  //do something
})

И после всех испытаний конец:

afterAll(() => {
  //do something
})

Групповые тесты с использованием описания ()

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

describe('first set', () => {
  beforeEach(() => {
    //do something
  })
  afterAll(() => {
    //do something
  })
  test(/*...*/)
  test(/*...*/)
})

describe('second set', () => {
  beforeEach(() => {
    //do something
  })
  beforeAll(() => {
    //do something
  })
  test(/*...*/)
  test(/*...*/)
})

Тестирование асинхронного кода

Асинхронный код в современном JavaScript может иметь в основном 2 формы: обратные вызовы и обещания. На вершине обещаний мы можем использовать Async/ждут.

Обратные вызовы

Вы не можете иметь тест в обратном вызове, потому что jest не будет выполнять его - выполнение тестового файла заканчивается до вызова обратного вызова. Чтобы исправить это, пропустите параметр к функции тестирования, которую вы можете удобно звонить сделано Отказ Шутка будет ждать, пока вы не позвоните сделано () прежде чем закончить этот тест:

//uppercase.js
function uppercase(str, callback) {
  callback(str.toUpperCase())
}
module.exports = uppercase

//uppercase.test.js
const uppercase = require('./src/uppercase')

test(`uppercase 'test' to equal 'TEST'`, (done) => {
  uppercase('test', (str) => {
    expect(str).toBe('TEST')
    done()
  }
})

Обещания

С функциями, которые возвращают обещания, мы просто вернуть обещание от теста:

//uppercase.js
const uppercase = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject('Empty string')
      return
    }
    resolve(str.toUpperCase())
  })
}
module.exports = uppercase

//uppercase.test.js
const uppercase = require('./uppercase')
test(`uppercase 'test' to equal 'TEST'`, () => {
  return uppercase('test').then(str => {
    expect(str).toBe('TEST')
  })
})

Обещания, которые отклонены, могут быть проверены с использованием .ловить () :

//uppercase.js
const uppercase = str => {
  return new Promise((resolve, reject) => {
    if (!str) {
      reject('Empty string')
      return
    }
    resolve(str.toUpperCase())
  })
}

module.exports = uppercase

//uppercase.test.js
const uppercase = require('./uppercase')

test(`uppercase 'test' to equal 'TEST'`, () => {
  return uppercase('').catch(e => {
    expect(e).toMatch('Empty string')
  })
})

Async/a ждать

Чтобы проверить функции, которые возвращают обещания, мы также можем использовать Async/a enae, что делает синтаксис очень простым и простым:

//uppercase.test.js
const uppercase = require('./uppercase')
test(`uppercase 'test' to equal 'TEST'`, async () => {
  const str = await uppercase('test')
  expect(str).toBe('TEST')
})

Издеваться

В тестировании, насмешливый Позволяет проверить функциональность, которая зависит от:

База данных
Сеть Запросы
Доступ к Файлы
любой Внешний система

так что:

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

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

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

Используя издевательства, вы можете проверить, была ли функция модуля вызывается и какие параметры использовались, с:

Ожидайте (). Tohavebeencalled () : проверить Если была названа скрытая функция
Ожидайте (). Тойвеенценциледтимы () : считать Сколько раз залпущенная функция была вызвана
ожидать (). Тоовенценцилендвитвит () : Проверьте, названа ли функция с определенным набором параметров
Ожидайте (). Тоовебенласткаллеэдрит () : Проверьте параметры в последний раз Функция была вызвана

Шпионские пакеты, не влияющие на код функций

Когда вы импортируете пакет, вы можете сказать «шпион» на выполнение определенной функции, используя Spyon () , не влияя на то, как этот метод работает.

Пример:

const mathjs = require('mathjs')

test(`The mathjs log function`, () => {
  const spy = jest.spyOn(mathjs, 'log')
  const result = mathjs.log(10000, 10)
  
  expect(mathjs.log).toHaveBeenCalled()
  expect(mathjs.log).toHaveBeenCalledWith(10000, 10)
})

Издеваться над целым пакетом

Quest предоставляет удобный способ издеваться за весь пакет. Создать __mocks__ Папка в корне проекта, а в этой папке создайте один файл JavaScript для каждого из ваших пакетов.

Скажем, вы импортируете Матьес Отказ Создать __mocks __/mathjs.js Файл в вашем корне проекта и добавьте этот контент:

module.exports = {
  log: jest.fn(() => 'test')
}

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

const mathjs = require('mathjs')

test(`The mathjs log function`, () => {
  const result = mathjs.log(10000, 10)
  expect(result).toBe('test')
  expect(mathjs.log).toHaveBeenCalled()
  expect(mathjs.log).toHaveBeenCalledWith(10000, 10)
})

Издеваться над одной функцией

Проще говоря, вы можете издеваться над одной функцией, используя jest.fn () :

const mathjs = require('mathjs')

mathjs.log = jest.fn(() => 'test')
test(`The mathjs log function`, () => {
  const result = mathjs.log(10000, 10)
  expect(result).toBe('test')
  expect(mathjs.log).toHaveBeenCalled()
  expect(mathjs.log).toHaveBeenCalledWith(10000, 10)
})

Вы также можете использовать jest.fn (). Mockreturnvalue («тест») Чтобы создать простое издевание, которое ничего не делает, кроме возвращения значения.

Предварительные издевательства

Вы можете найти заранее сделанные издевательства для популярных библиотек. Например, этот пакет https://github.com/jefflau/jest-fetch-mock позволяет насдеть fetch () Вызовы и предоставляют образец возвратных значений без взаимодействия с фактическим сервером в ваших тестах.

Тестирование снимков

Тестирование снимков - это довольно классная функция, предлагаемая шумами. Он может запомнить, как отображаются ваши компоненты UI, и сравните его с текущим тестом, поднимая ошибку, если есть несоответствие.

Это простой тест на компонента приложения простого Create-raction-app Приложение (убедитесь, что вы устанавливаете React-Test-Renderer ):

import React from 'react'
import App from './App'
import renderer from 'react-test-renderer'

it('renders correctly', () => {
  const tree = renderer.create().toJSON()
  expect(tree).toMatchSnapshot()
})

Первый раз, когда вы запустите этот тест, шутят, шутят снимка на __snapshots__ папка. Вот что содержит App.test.js.snap:

// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`renders correctly 1`] = `

  
    
    
      Welcome to React
    
  
  
    To get started, edit
    
      src/App.js
    
     and save to reload.
  

`

Как вы видите, это код, который компонент приложений оказывает больше ничего.

В следующий раз тест сравнивает вывод <Приложение /> к этому. Если приложение меняется, вы получите ошибку:

При использовании Тест пряжи в Create-raction-app Вы находитесь в Смотреть режим и оттуда вы можете нажать W и показать больше вариантов:

Watch Usage
 › Press u to update failing snapshots.
 › Press p to filter by a filename regex pattern.
 › Press t to filter by a test name regex pattern.
 › Press q to quit watch mode.
 › Press Enter to trigger a test run.

Если ваше изменение предназначено, нажав U Обновите неспособные снимки и сделайте тестовый проход.

Вы также можете обновить снимка, запустив jest -u (или jest --updatesnapshot ) вне режима часов.

Тестирование объектов реагирования

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

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

Я предполагаю, что вы создали приложение React с Create-raction-app , который уже приходит с Jest Установлен, пакет тестирования нам понадобится.

Давайте начнем с простого теста. CodeSandbox - это отличная среда, чтобы попробовать это. Начните с A RACH Sandbox и создайте App.js Компонент в Компоненты папка и добавить App.test.js файл.

import React from 'react'

export default function App() {
  return (
    
      Hello CodeSandbox
      Start editing to see some magic happen!
    
  )
}

Наш первый тест глуп:

test('First test', () => {
  expect(true).toBeTruthy()
})

Когда CodeSandbox обнаруживает тестовые файлы, он автоматически запускает их для вас, и вы можете нажать кнопку тестов в нижней части представления, чтобы показать результаты теста:

Тестовый файл может содержать несколько тестов:

Давайте сделаем что-то более полезное сейчас, чтобы на самом деле тестировать комментарий реагирования. У нас сейчас есть только приложение, которое не делает ничего особенного полезного, поэтому давайте сначала настроим среду с небольшим приложением с большим количеством функциональности: приложение Counter, которое мы построили ранее. Если вы пропустили его, вы можете вернуться назад и прочитать, как мы его построили, но для облегчения ссылки я добавляю его здесь.

Это всего лишь 2 компонента: приложение и кнопка. Создать App.js файл:

import React, { useState } from 'react'
import Button from './Button'

const App = () => {
  const [count, setCount] = useState(0)
  
  const incrementCount = increment => {
    setCount(count + increment)
  }
  
  return (
    
      
      
      
      
      {count}
    
  )
}

export default App

и Button.js файл:

import React from 'react'

const Button = ({ increment, onClickFunction }) => {
  const handleClick = () => {
    onClickFunction(increment)
  }
  return 
}

export default Button

Мы собираемся использовать Реагистрационная тестирование-библиотека , что является отличной помощью, поскольку это позволяет нам осмотреть вывод каждого компонента и применить на них события. Вы можете прочитать больше об этом на https://github.com/kentcdodds/react-testing-library или смотреть Это видео Отказ

Давайте сначала проверим компонент кнопки.

Начнем с импорта оказывать и Fireevent от Реагистрационная тестирование-библиотека два помощника. Первый позволяет нам сделать JSX. Второе позволяет нам излучать события на компонент.

Создать Button.test.js и положить его в ту же папку, что и Button.js Отказ

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import Button from './Button'

Кнопки используются в приложении, чтобы принять событие клики, а затем они называют функцией, передаваемой на OnClickFunction пропры Мы добавляем Считать Переменная и создаем функцию, которая увеличивает ее:

let count

const incrementCount = increment => {
  count += increment
}

Теперь до фактических испытаний. Сначала мы инициализируем счет до 0, и мы видим +1 Кнопка Компонент, проходящий 1 к приращение и наше incrementcount Функция на Функция OnClick .

Затем мы получаем содержание первого ребенка компонента, и мы проверяем его выходы +1 .

Затем мы придерживаемся нажатием кнопки, и мы проверяем, что подсчет получил от 0 до 1:

test('+1 Button works', () => {
  count = 0
  const { container } = render(
    
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+1')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(1)
})

Точно так же мы тестируем кнопку +100, на этот раз проверяя вывод +100. и кнопка щелчка увеличивает количество 100.

test('+100 Button works', () => {
  count = 0
  const { container } = render(
    
  )
  const button = container.firstChild
  expect(button.textContent).toBe('+100')
  expect(count).toBe(0)
  fireEvent.click(button)
  expect(count).toBe(100)
})

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

import React from 'react'
import { render, fireEvent } from 'react-testing-library'
import App from './App'

test('App works', () => {
  const { container } = render()
  console.log(container)
  const buttons = container.querySelectorAll('button')
  
  expect(buttons[0].textContent).toBe('+1')
  expect(buttons[1].textContent).toBe('+10')
  expect(buttons[2].textContent).toBe('+100')
  expect(buttons[3].textContent).toBe('+1000')
  
  const result = container.querySelector('span')
  expect(result.textContent).toBe('0')
  fireEvent.click(buttons[0])
  expect(result.textContent).toBe('1')
  fireEvent.click(buttons[1])
  expect(result.textContent).toBe('11')
  fireEvent.click(buttons[2])
  expect(result.textContent).toBe('111')
  fireEvent.click(buttons[3])
  expect(result.textContent).toBe('1111')
  fireEvent.click(buttons[2])
  expect(result.textContent).toBe('1211')
  fireEvent.click(buttons[1])
  expect(result.textContent).toBe('1221')
  fireEvent.click(buttons[0])
  expect(result.textContent).toBe('1222')
})

Проверьте код, работающий над этим CodeSandbox: https://codesandbox.io/s/pprl4y0wq

Раздел 8: экосистема реагирования

Экосистема вокруг реакции огромна. Здесь я представляю вас до 4 самых популярных проектов, основанных на реакции: React Router, Redux, Next.js, GATSBY.

Реагниальный маршрутизатор

React Router - это библиотека маршрутизации RACT RACT, и это один из самых популярных проектов, построенных на вершине реагирования.

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

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

Браузер должен изменить URL Когда вы перейдите на другой экран
Глубокое связывание Следует работать: если вы указываете браузер к URL-адресу, приложение должно восстанавливать тот же представление, которое было представлено, когда был сгенерирован URL.
Браузер назад (и вперед) кнопка должен работать как ожидаемый.

Маршрутизация Ссылки вместе Ваша навигация приложения с функциями навигации, предлагаемой браузером : Адрес бар и кнопки навигации Отказ

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

Установка

С NPM :

npm install react-router-dom

С Пряжа :

yarn add react-router-dom

Типы маршрутов

Реагниальный маршрутизатор обеспечивает два разных маршрута:

Userbouter.
Hasthrooter.

Один строит классические URL-адреса, другие строят URL-адреса с хэшем:

https://application.com/dashboard   /* BrowserRouter */
https://application.com/#/dashboard /* HashRouter    */

Какой из них использовать в основном продиктован браузерами, которые вам нужно поддерживать. Бросастрофер использует История API , который относительно недавнее и не поддерживается в IE9 и ниже. Если вам не нужно беспокоиться о старших браузерах, это рекомендуемый выбор.

Компоненты

3 компонента, которые вы будете взаимодействовать больше всего при работе с React Router:

Бросастрофер , обычно псевдонимый как Маршрутизатор
Ссылка
Маршрут

Бросастрофер Обертывает все ваши компоненты маршрута.

Ссылка Компоненты - как вы можете себе представить - используется для генерации ссылок на ваши маршруты

Маршрут Компоненты несут ответственность за отображение - или скрытие - компоненты, которые они содержат.

Userbouter.

Вот простой пример компонента Brouberterter. Вы импортируете его из React-Router-DOM, и вы используете его, чтобы обернуть все ваше приложение:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router } from 'react-router-dom'

ReactDOM.render(
  
      
        
      
  ,
  document.getElementById('app')
)

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

Ссылка

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

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link } from 'react-router-dom'

ReactDOM.render(
  
      
        
          Dashboard
          About
        
        
      
  ,
  document.getElementById('app')
)

Маршрут

Теперь давайте добавим компонент маршрута в приведенном выше фрагменте, чтобы все на самом деле работать, как мы хотим:

import React from 'react'
import ReactDOM from 'react-dom'
import { BrowserRouter as Router, Link, Route } from 'react-router-dom'

const Dashboard = () => (
  
    Dashboard
    ...
  
)

const About = () => (
  
    About
    ...
  
)

ReactDOM.render(
  
    
      
        Dashboard
        About
      
      
      
        
        
      
    
  ,
  document.getElementById('app')
)

Проверьте этот пример на Glitch: https://flaviocopes-react-router-v4.glitch.me/

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

Когда маршрут изменен, нажав ссылку «О» на /о Компонент приборной панели удален и О Компонент вставляется в DOM.

Обратите внимание на точный атрибут. Без этого, Путь = "/" также будет соответствовать /о С / содержится в маршруте.

Сопоставьте несколько путей

Вы можете получить маршрут, отвечаю на несколько путей, просто используя Regex, потому что путь Может быть регулярные выражения строки:

Встроенный рендеринг

Вместо указания Компонент Недвижимость на Маршрут Вы можете установить оказывать проп

 (
    
      About
      ...
    
  )}
/>

Соответствовать динамическому параметру маршрута

Вы уже видели, как использовать статические маршруты, как

const Posts = () => (
  
    Posts
    ...
  
)

//...

Вот как обрабатывать динамические маршруты:

const Post = ({match}) => (
  
    Post #{match.params.id}
    ...
  
)

//...

В вашем компоненте маршрута вы можете найти динамические параметры в Match.params Отказ

Матч Также доступен в встроенных представленных маршрутах, и это особенно полезно в этом случае, потому что мы можем использовать ID Параметр Чтобы найти данные пост в нашем источнике данных перед рендерингом поста:

const posts = [
  { id: 1, title: 'First', content: 'Hello world!' },
  { id: 2, title: 'Second', content: 'Hello again!' }
]

const Post = ({post}) => (
  
    {post.title}
    {post.content}
  
)

//...

 (
   p.id === match.params.id)} />
)} />

Redux.

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

Redux - это способ управлять состоянием приложения и переместить его в Внешний глобальный магазин Отказ

Есть несколько концепций, чтобы понять, но, как только вы сделаете, Redux - очень простой подход к проблеме.

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

Когда вы должны использовать Redux?

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

Простые приложения не должны понадобиться вообще (и нет ничего плохого в простых приложениях).

Неизменное состояние дерева

В Redux все состояние заявления представлено один JavaScript Объект, называемый Государство или Государственное дерево Отказ

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

Это может быть изменено только путем отправки Действие Отказ

Действия

Действие это объект JavaScript, который описывает изменение минимальным способом (С только необходимой информацией):

{
  type: 'CLICKED_SIDEBAR'
}

// e.g. with more data
{
  type: 'SELECTED_USER',
  userId: 232
}

Единственное требование объекта действия имеет Тип Свойство, чья ценность обычно является строкой.

Типы действий должны быть константы

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

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

const ADD_ITEM = 'ADD_ITEM'
const action = { type: ADD_ITEM, title: 'Third item' }

а также разделить действия в своих собственных файлах и импортировать их

import { ADD_ITEM, REMOVE_ITEM } from './actions'

Действия Создатели

Действия Создатели функции, которые создают действия.

function addItem(t) {
  return {
    type: ADD_ITEM,
    title: t
  }
}

Вы обычно управляете создателями действия в сочетании с запуском диспетчера:

dispatch(addItem('Milk'))

или путем определения функции диспетчера действий:

const dispatchAddItem = i => dispatch(addItem(i))
dispatchAddItem('Milk')

Редукторы

Когда действие уволено, что-то должно произойти, состояние приложения должно меняться.

Это работа Редукторы Отказ

А Редуктор это чистая функция Это рассчитывает следующее дерево штата на основе предыдущего дерева штата, а действие отправлено.

;(currentState, action) => newState

Чистая функция принимает вход и возвращает вывод без изменения ввода или чего-либо еще. Таким образом, редуктор возвращает совершенно новый объект дерева состояния, который заменяет предыдущий.

Какой редуктор не должен делать

Редуктор должен быть чистой функцией, поэтому она должна:

Никогда не мутируйте свои аргументы
Никогда не мутируйте состояние, но вместо этого создайте новый с Object.Assign ({}, ...)
Никогда не генерируйте побочные эффекты (без вызовов API ничего не меняется)
Никогда не называйте не чистые функции, функции, которые изменяют свой вывод на основе факторов, кроме их ввода (например, Date.now. wnow () или math.random () )

Нет армирования, но вы должны придерживаться правил.

Несколько редукторов

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

Моделирование редуктора

На его ядре Redux можно упростить с помощью этой простой модели:

Штат

{
  list: [
    { title: "First item" },
    { title: "Second item" },
  ],
  title: 'Groceries list'
}

Список действий

{ type: 'ADD_ITEM', title: 'Third item' }
{ type: 'REMOVE_ITEM', index: 1 }
{ type: 'CHANGE_LIST_TITLE', title: 'Road trip list' }

Редуктор для каждой части государства

const title = (state = '', action) => {
    if (action.type === 'CHANGE_LIST_TITLE') {
      return action.title
    } else {
      return state
    }
}

const list = (state = [], action) => {
  switch (action.type) {
    case 'ADD_ITEM':
      return state.concat([{ title: action.title }])
    case 'REMOVE_ITEM':
      return state.map((item, index) =>
        action.index === index
          ? { title: item.title }
          : item
    default:
      return state
  }
}

Редуктор для всего состояния

const listManager = (state = {}, action) => {
  return {
    title: title(state.title, action),
    list: list(state.list, action)
  }
}

Магазин

Магазин это объект, который:

Держит государство приложения
подвергает государство через getstate ()
позволяет нам Обновите состояние через отправлять()
Позволяет нам (ООН) регистрировать Состояние Изменение слушателя Использование подписываться()

Магазин Уникальный в приложении.

Вот как создан магазин приложения listManager:

import { createStore } from 'redux'
import listManager from './reducers'
let store = createStore(listManager)

Могу ли я инициализировать магазин с серверными данными?

Конечно, Просто пройдите начальное состояние :

let store = createStore(listManager, preexistingState)

Получить состояние

store.getState()

Обновить состояние

store.dispatch(addItem('Something'))

Слушать государственные изменения

const unsubscribe = store.subscribe(() =>
  const newState = store.getState()
)

unsubscribe()

Поток данных

Поток данных в Redux всегда однонаправленные Отказ

Вы звоните Отправка () в магазине, передавая действие.

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

Магазин обновляет состояние и предупреждает всех слушателей.

Next.js.

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

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

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

Решение оба этих проблем является Рендеринг сервера , Также называется Статический предварительный рендеринг Отказ

Next.js - это одна операция RACT, чтобы сделать все это очень просто, но это не ограничено этим. Он рекламируется своими создателями как Ноль-конфигурация, Single-Command Toolchain для ADCED APPS Отказ

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

Вот неиспользующий список основных функций Next.js:

Горячий код перезагрузки : Next.js перезагружает страницу, когда она обнаруживает любые изменения, сохраненные на диске.
Автоматическая маршрутизация : Любой URL отображается на файловую систему, к файлам, установленным в страницы Папка, и вам не нужна конфигурация (у вас есть параметры настройки).
Одно файловые компоненты : Использование Стиль-JSX , полностью интегрирован как построенный одной и той же командой, он тривиален для добавления стилей, находящихся на состав.
Рендеринг сервера : Вы можете (необязательно) рендеринговые компоненты React на стороне сервера, прежде чем отправлять HTML клиенту.
Совместимость экосистем : Next.js хорошо играет с остальной частью JavaScript, узел и экосистемой реагирования.
Автоматическое расщепление кода : Страницы оказываются только с библиотеками и JavaScript, которые им нужны, не более.
Предварительная выборка : Ссылка Компонент, используемый для соединения разных страниц, поддерживает Предварительная выборка опоры, который автоматически предусматривает ресурсы страницы (включая код отсутствуют из-за разделения кода) на заднем плане.
Динамические компоненты : Вы можете динамически импортировать модули JavaScript и динамически реагируют компоненты ( https://github.com/zeit/next.js#dynamic-import ).
Статический экспорт : Использование Следующий экспорт Команда Next.js позволяет экспортировать полностью статический сайт из вашего приложения.

Установка

Next.js поддерживает все основные платформы: Linux, MacOS, Windows.

Проект Next.js начинается легко с NPM:

npm install next react react-dom

или с Пряжа :

yarn add next react react-dom

Начиная

Создать package.json Файл с этим контентом:

{
  "scripts": {
    "dev": "next"
  }
}

Если вы запустите эту команду сейчас:

npm run dev

Сценарий повысит ошибку, жалующуюся на то, что не найти страницы папка. Это единственное, что Next.js требует запуска.

Создать пустой страницы Папка и запустить команду еще раз, а next.js запустит сервер на localhost: 3000 Отказ

Если вы идете к этому URL сейчас, вы будете встретить дружелюбную страницу 404, с хорошим чистым дизайном.

Next.js также обрабатывает другие типы ошибок, например, 500 ошибок.

Создать страницу

В страницы Папка создать index.js Файл с простым функциональным компонентом RACT:

export default () => (
  
    Hello World!
  
)

Если вы посетите localhost: 3000 Этот компонент будет автоматически отображаться.

Почему это так просто?

Next.js использует декларативную структуру страниц, которая основана на структуре файловой системы.

Проще говоря, страницы внутри страницы Папка, и URL страницы определяется именем файла страницы. Файловая система - это страницы API.

Серверный рендеринг

Откройте источник страницы, Вид -> Разработчик -> Просмотреть Источник с хром.

Как видите, HTML, генерируемый компонентом, отправляется непосредственно в источнике страницы. Это не отображается клиент-сторона, но вместо этого она отображается на сервере.

The Next.js Team хотела создать опыт разработчика для страниц, представленных на серверах, аналогичных тому, которое вы получаете при создании основного проекта PHP, где вы просто бросите PHP-файлы, и вы их называете страницами. Внутренне, конечно, все это совсем другое, но очевидная простота использования ясна.

Добавить вторую страницу

Давайте создадим другую страницу, в Страницы/Contact.js.

export default () => (
  
    
      Contact us!
    
  
)

Если вы укажите браузер на localhost: 3000/контакт Эта страница будет оказана. Как вы можете видеть, также эта страница представлена сервер.

Горячая перезагрузка

Обратите внимание, как вам не пришлось перезапустить NPM процесс для загрузки второй страницы. Next.js делает это для вас под капотом.

Рендеринг клиента

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

Next.js предоставляет Ссылка Компонент, который вы можете использовать для создания ссылок. Попробуйте связать две страницы выше.

Изменить index.js К настоящему коду:

import Link from 'next/link'

export default () => (
  
    Hello World!
    
      Contact me!
    
  
)

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

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

Если вы сейчас cmd-Щелкните Ссылка, та же страница контакта откроется на новой вкладке, теперь визуализируется сервером.

Динамические страницы

Хороший вариант использования для Next.js - это блог, так как это то, что все разработчики знают, как это работает, и это хорошо подходит для простого примера способа обработки динамических страниц.

Динамическая страница - это страница, которая не имеет фиксированного содержимого, но вместо этого отображать некоторые данные на основе некоторых параметров.

Изменить index.js к

import Link from 'next/link'

const Post = props => (
  
    
      {props.title}
    
  
)

export default () => (
  
    My blog
    
      
        
        
        
      
    
  
)

Это создаст серию постов и заполнит параметр запроса на заголовок с названием поста:

Теперь создайте post.js Файл в страницы Папка и Добавить:

export default props => {props.url.query.title}

Теперь нажатие на один пост окажут заголовок поста в H1 ярлык:

Вы можете использовать чистые URL без параметров запроса. Компонент Next.js Link помогает нам, принимая как Атрибут, который вы можете использовать для пропускания слизняка:

import Link from 'next/link'

const Post = props => (
  
    
      {props.title}
    
  
)

export default () => (
  
    My blog
    
      
        
        
        
      
    
  
)

CSS-in-js

Next.js по умолчанию предоставляет поддержку Стиль-JSX , который является решением CSS-In-JS, предоставляемое той же командой разработки, но вы можете использовать любую личную библиотеку, которую вы предпочитаете, например, в стиле компонентов.

Пример:

export default () => (
  
    
      Contact us!
    
    
  
)

Стили составляют составляющую, но вы также можете редактировать глобальные стили, добавляющие глобальный к Стиль элемент:

export default () => (
  
    
      Contact us!
    
    
  
)

Экспорт статического сайта

Приложение Next.js может быть легко экспортировано как статический сайт, который можно развернуть на одном из супер быстрых статических хостов сайта, например NetLify или Хостинг Firebase Без необходимости настроить среду узла.

Процесс требует, чтобы вы объявили URL-адреса, которые составляют сайт, но это Простой процесс Отказ

Развертывание

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

В начале этого учебника вы создали package.json Файл с этим контентом:

{
  "scripts": {
    "dev": "next"
  }
}

Что было способом запустить сервер развития, используя NPM запустить dev. .

Теперь просто добавьте следующий контент в package.json вместо:

{
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start"
  }
}

и подготовить ваше приложение бежать NPM запустить сборку и NPM запустить начало .

Теперь

Компания позади Next.js предоставляет удивительный хостинг-сервис для Node.js приложений, называемых Сейчас Отказ

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

За кулисами теперь устанавливают сервер для вас, и вам не нужно ничего беспокоиться, просто подождите, пока ваш URL-адрес приложения будет готов.

Зоны

Вы можете настроить несколько экземпляров Next.js, чтобы прослушать разные URL, но приложение к внешнему пользователю просто будет выглядеть так, как будильник на одном сервере: https://github.com/zeit/next.js/#multi-zones.

Плагины

Next.js имеет список плагинов в https://github.com/zeit/next-Plugins.

Стартовый комплект на глюк

Если вы хотите экспериментировать, я рекомендую глючить. Проверьте мой Next.js Glitch Starter Kit Отказ

Гэтсби

GATSBY - это платформа для строительства приложений и веб-сайтов, использующих реагирование.

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

GATSBY - один из прохладных детей в пространстве разработки Frontend прямо сейчас. Почему? Я думаю, что причины:

Взрыв подхода JamStack к созданию веб-приложений и веб-сайтов
Быстрое принятие Прогрессивные веб-приложения Технология в отрасли, которая является одной из ключевых особенностей GATSBY
Он построен в реакции и График , которые два очень популярны и растут Технологии
Это действительно мощный
это быстро
Документация отличная
Сетевой эффект (люди используют его, создают сайты, делают учебники, люди знают об этом больше, создавая цикл)
Все JavaScript (не нужнонять новый язык шаблонов)
Он скрывает сложность в начале, но позволяет нам получить доступ к каждому шагу для настройки

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

Как это работает?

С GATSBY ваши приложения построены с использованием компонентов реагирования.

Содержание, которое вы оказываете на сайте, обычно записывается с использованием Markdown, но вы можете использовать любой вид источника данных, например, безголовый CMS или веб-сервис, как Containful.

GATSBY создает сайт, и он компилируется к статическому HTML, который можно развернуть на любом веб-сервере, который вы хотите, например, NetLify, AWS S3, страницы GitHub, обычные хостинг-провайдеры, PAAS и многое другое. Все, что вам нужно, это место, где обслуживают простые HTTP-страницы и ваши активы клиенту.

Я упомянул прогрессивные веб-приложения в списке. GATSBY автоматически генерирует ваш сайт как PWA, с обслуживающим работником, который ускоряет загрузку страницы и кэширования ресурсов.

Вы можете улучшить функциональность GATSBY через плагины.

Установка

Вы можете установить GATSBY, просто запустив это в свой терминал:

npm install -g gatsby-cli

Это устанавливает GATSBY Утилита CLI.

(Когда новая версия вышла, обновите ее, позвонив этой команде снова)

Вы создаете новый сайт «Hello World», запустив

gatsby new mysite https://github.com/gatsbyjs/gatsby-starter-hello-world

Эта команда создает новый сайт GATSBY в MySite папка, используя Стартер Доступно в https://github.com/gatsbyjs/gatsby-starter-hello-world Отказ

А Стартер это выборка сайта, на который вы можете создать. Еще один распространенный стартер - по умолчанию , доступно в https://github.com/gatsbyjs/gatsby-starter-default Отказ

Запуск сайта GATSBY

После завершения терминала установка стартера вы можете запустить веб-сайт, позвонив

cd mysite
gatsby develop

Что запускают новый веб-сервер и обслуживают сайт на порту 8000 на localhost.

И вот наш Hello World Starter в действии:

Осмотрите сайт

Если вы открываете сайт, который вы создали с вашим любимым редактором кода (я использую VS Code ), вы найдете 3 папки:

.cache С Скрытая папка, в которой содержится внутренние органы GATSBY, ничего не следует изменить прямо сейчас
публичный , который содержит полученный веб-сайт, как только вы построите его
SRC Содержит компоненты реагирования, в данном случае только индекс составная часть
статический который будет содержать статические ресурсы, такие как CSS и изображения

Теперь, сделав простое изменение на страницу по умолчанию, просто, просто открыть SRC/Pages/index.js И изменить "Hello World!" к чему-то еще и сохранить. Браузер должен мгновенно Горячая перезагрузка Компонент (что означает, что страница на самом деле не обновляется, а изменения содержания - трюк, ставший возможным благодаря базовым технологиям).

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

Например, я создал Second.js Файл с этим контентом:

import React from 'react'

export default () => Second page!

И я открыл браузер к http://localhost: 8000/Второй :

Связывание страниц

Вы можете связать эти страницы, импортируя PATATSBY, предоставленный Adtact Component под названием Ссылка :

import { Link } from "gatsby"

и используя его в вашем компоненте Jsx. :

Second

Добавление CSS.

Вы можете импортировать любой файл CSS с помощью Import JavaScript:

import './index.css'

Вы можете использовать raction styling:

Hello world

Используя плагины

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

Есть 3 вида плагинов:

Источник плагинов Получите данные из источника. Создание узлов, которые могут затем фильтровать трансформатором плагины
трансформаторные плагины преобразовать данные, предоставленные исходными плагинами во что-то GATSBY может использовать
Функциональные плагины реализовать какую-то функциональность, например, добавление поддержки сайта или более

Некоторые обычно используемые плагины:

GATSBY-Plugin-React-Helmet который позволяет редактировать голова Содержание тега
GATSBY-Plugin-Catch-Links который использует История API Чтобы предотвратить перезагрузку страницы браузера, когда ссылка нажата, загрузка нового контента, используя AJAX вместо

Плагин GATSBY устанавливается в 2 шага. Сначала вы устанавливаете его, используя NPM Затем вы добавляете его в конфигурацию GATSBY в gatsby-config.js Отказ

Например, вы можете установить плагин Catch Sings:

npm install gatsby-plugin-catch-links

В gatsby-config.js (Создайте его, если у вас его нет, в корневой папке веб-сайта) добавьте плагин к плагины Экспортированный массив:

module.exports = {
  plugins: ['gatsby-plugin-catch-links']
}

Вот и все, плагин теперь сделает свою работу.

Создание статического сайта

Как только вы закончите настраивать сайт, и вы хотите создать статический сайт производства, Вы позвоните

gatsby build

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

gatsby serve

Что сделает сайт как можно ближе к тому, как вы увидите его в производстве.

Развертывание

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

В зависимости от решения вы выбираете, вам понадобятся разные шаги здесь, но, как правило, вы нажимаете в репозиторий GIT и позвольте крюками Git Post-Candy выполнять работу по развертыванию. Вот несколько великолепных гидов для некоторых популярных платформ хостинга Где вы можете развернуть GATSBY.

Упаковка

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

Оригинал: "https://www.freecodecamp.org/news/the-react-handbook-b71c27b0a795/"

Книжный индекс

Оглавление

Введение в библиотеку просмотра реагирования

Что реагирует?

Почему реагирует так популярнее?

Меньше сложный, чем другие альтернативы

Идеальное время

Поддерживается Facebook.

Реагируют просто, чтобы учиться?

Как установить реагирование на ваш компьютер разработки

Нагрузка реагирует прямо на веб-странице

Раздел 2: React Concepts

Одиночные приложения

Примеры приложений одной страницы

Плюсы и минусы спа

Переопределение навигации

Декларативный

Неподумность

Чистота

Состав

Создать специализированную версию компонента

Пропускать методы как реквизиты

Используя детей

Компоненты высшего порядка

Виртуальный домос

Виртуальный дом объяснил

Почему виртуальный домом полезно: дозирование

Неидирекционные данные потока

Раздел 3: углубленный реагировать

Jsx.

JSX Primer.

Hello, world!

Hello, world!

Транспилинг JSX.

A title

JS в JSX.

A title

HTML в JSX.

Вам нужно закрыть все теги

CamelCase является новым стандартом

класс становится классом

CSS в реакции

Почему это предпочтительно на простых CSS/SASS/меньше?

Это решение в решении?

Формы в JSX.

Значение и defaultvalue.

Более последовательный Onchange

Jsx auto issapes

Белое пространство в jsx

Добавление комментариев в jsx

Распространение атрибутов

Как петлю в jsx

Компоненты

Hello World!

Hello World!

Пользовательские компоненты

Title

Title

Title

Состояние

Установка состояния по умолчанию компонент

Title

Доступ к состоянию

Title

Мутируя состояние

Почему вы всегда должны использовать setState ()

Неидирекционные данные потока

Перемещение штата в дереве

Реквизит

{props.title}

{this.props.title}

Значения по умолчанию для реквизиты

Как пропущены реквизиты

Дети

Председатель VS Контейнерные компоненты

Государство против рек

Пропорция

{this.props.title}

Какие типы мы можем использовать

Требующие свойств

`Hello World!`