Sacha Greif реагирует пять пальцев смерти. Оставьте эти пять концепций, затем Master React.shies., эффекты реагирования на обучение включают светящиеся красные руки и быть плохим задницей (с фоторедам) несколько лет назад, мой друг Шон начал рассказывать мне, как эта совершенно новая предельная библиотека под названием React

Автор оригинала: FreeCodeCamp Community Member.

Sacha Greif.

Несколько лет назад мой друг Шон начал рассказывать мне, как эта новая предельная библиотека под названием Реагировать собирался взять через Интернет. Сначала я уволил его как просто еще один рамочный FAD. Но тогда я начал слышать об реагировании все больше и больше, до такой степени, что я чувствовал, что игнорирует, что это просто не было вариантом.

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

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

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

Пять ключевых концепций:

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

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

О, и мой друг Шрень? С тех пор он переехал на гораздо более резкие вещи. В конце концов, отреагировать Итак, 2015.

Концепция # 1: Как работают комментарии Ract

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

Но какой компонент, вы спрашиваете? Идеальный пример компонента – это общий CT> HTML-элемент. Он не только поставляется со своим собственным визуальным выходом (серая коробка, текстовая метка и стрелка вниз, составляющая сама элемент) - он также обрабатывает свою собственную логику открытия и закрытия.

Теперь представьте себе возможность построить свой собственный автономный пользовательский CT>, со своим собственным стилем и поведением:

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

На практике наиболее распространенным способом написания компонентов React является как Класс ES6 содержащий оказывать Способ, который возвращает HTML. (Есть также супер-секрет функционал путь, но вам придется ждать до концепции № 4, чтобы узнать об этом):

class MyComponent extends React.Component {

  render() {    return Hello World!
;  }

Концепция № 2: Как работает JSX

Как видите, компонентный подход означает, что и код HTML, так и JavaScript в том же файле. Реактивное секретное оружие для достижения этого нечестивого альянса является Язык JSX (где «X» означает «XML»).

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

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

Например, поскольку у вас сейчас есть полная мощность JavaScript в вашем распоряжении, вот как вы можете отобразить текущую дату, вставив фрагмент JavaScript в своем HTML, используя {...} :

class MyComponent extends React.Component {

  render() {    return Today is: {new Date()}
;  }

Это также означает, что вы будете использовать простой JavaScript для Если заявления или петли, а не какой-то тип синтаксиса, специфичного шаблона. JavaScript’s Тернарный оператор Приходит особенно удобно здесь:

class MyComponent extends React.Component {

  render() {    return Hello {this.props.someVar ?  'World' : 'Kitty'}
;  }

И кстати, если вам нужно освежить новейшие точки синтаксиса JavaScript, я рекомендую ES6 для всех WES BOS (если вам нравятся видео) или Практический ES6 Николас Бевакку (если вы предпочитаете чтение).

Концепция № 3: Как реквизит и государственная работа

Может быть, вам было интересно, где This.props.somevar Переменная выше исходит.

Если вы когда-либо написали строку HTML, вы, вероятно, знакомы с атрибутами HTML, такие как < ; a> тег ' S HREF. В реакции атрибуты – это Kno WN как реквизит (короткие для «свойств»). Реквисы – это то, как компоненты разговаривают друг с другом.

class ParentComponent extends React.Component {

  render() {    return ;  }

class ChildComponent extends React.Component {

  render() {    return And then I said, "{this.props.message}"
;  }

Из-за этого поток данных Rection – однонаправленные : Данные могут отправляться только от родительских компонентов к своим детям, а не наоборот.

Иногда, хотя компонент должен реагировать на данные, которые не исходить из родительского компонента (например, ввод пользователей). И это где Государство приходит в.

Хорошая метафора, чтобы понять разницу между реквизитами и государством, будет настроенным эскизом. В отличие от таких вещей, как цвет тела и положения циферблата таблетки Etch-A-эскиз ( реквизит ), сам рисунок ( State ) не является неотъемлемым свойством Etch-A-эскиза. Это просто временный результат ввода пользователя.

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

Внутри компонента состояния управляется, используя SetState Функция, которая часто называется внутри Обработчик событий :

class MyComponent extends React.Component {

  handleClick = (e) => {    this.setState({clicked: true});  }

  render() {    return Click me;  }

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

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

Концепция # 4: Как работает компонент API

Мы уже упоминали оказывать и SetState , которые являются частью небольшого набора методов API компонентов. Еще один полезный – это Конструктор , который вы можете использовать для инициализации вашего состояния и Методы связывания Отказ

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

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

Концепция № 5: Как работают типы компонентов

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

class MyComponent extends React.Component {

  render() {    return Hello World!
;  }

И мы также говорили о методах компонентов, поддерживаемых этими классами. Теперь забудь все о них! Все больше и больше люди пишут комментарии реагирования как Функциональные компоненты Отказ

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

const myComponent = props => {

  return Hello {props.name}! Today is {new Date()}.

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

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

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

Обратите внимание, что есть также третий, устаревший синтаксис, использующий CreateClass Функция Отказ Но кто-нибудь, использующий его, должны быть занесены и называются именами для осмеливания, чтобы все еще использовать узоры кодирования от 18 месяцев назад:

var Greeting = React.createClass({     render: function() {         return Hello, {this.props.name}
;     }

});

Концепция № 6: Как работают компонентные роли

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

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

После некоторого времени использование реагирования люди начали видеть два разных «ароматов» кода в их компонентах: один аромат был обеспокоен Ui логика, такая как показывая и скрывая вещь. А другой был о данные Логика, такая как загрузка данных с вашего сервера.

Это привело к различию между Контейнер и презентационный Компоненты (также иногда известны как « Smart » и « тупые » компоненты). Компоненты контейнеров должны обрабатывать ваши данные, но – и это важная часть – не твой интерфейс. Предметы презентационные компоненты просто наоборот.

Другими словами, в приведенном в классическом разделе «Список дел» один компонент загрузит данные, а затем пропустите эти данные на разные Компонент, который будет отвечать за вывод фактической разметки HTML и обработки местных изменений состояния.

Это очень похоже на шаблон представления/контроллера, с которым вы можете быть знакомы с вашими дни разработчиков. ( ‘Rails Член Django? )

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

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

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

HOC – это компонент, который вы можете обернуться вокруг Другой компонент, чтобы пройти специальные реквизиты, и он обычно создан с использованием Функция компонентов более высокого порядка Отказ Обратите внимание, что люди обычно относятся к Функция Сама как « HOC », что может быть не на 100% правильно, но не имеет большого значения на практике.

В качестве примера, вызывая React Router Возможность Функция завода на NT> Обернут его в Новый ponent)/> Компонент, который Passe s Маршрутизатор опоры добывающей Электронный и

Вы можете подумать о функции HOC, как гольф Caddy, который следует за своим гольфином вокруг и вручает им клуб, который им нужен. Сами по себе, Caddy не может на самом деле сделать что-нибудь с гольф-клубами. Они просто там, чтобы дать игровой доступ к большему количеству инструментов.

HOCS – очень мощная концепция. Например, Пересчитать Библиотека даже позволяет обрабатывать государственные изменения через HOCS. Другими словами, теперь вы можете управлять состоянием без необходимости вовлечения всех компонентов на основе классовых ES6.

С помощью композиции HOC становятся настолько распространенными, кажется, что реагирование может отходить от синтаксиса класса ES6 и более для чисто функционального подхода. Интересные времена!

Реконструировать

Итак, давайте повторимся, что мы только что узнали:

A RACT CodeBase состоит из компонентов.
Эти компоненты написаны с использованием JSX.
Данные потоки от родителей к детям, за исключением случаев, когда дело доходит до Государство , который возникает внутри компонента.
Компоненты обладают небольшим набором методов жизненного цикла и утилиты.
Компоненты также могут быть написаны как чистые функции.
Вы должны сохранить логику данных и логику пользовательского интерфейса в отдельных компонентах.
Компоненты более высокого порядка являются общим рисунком для предоставления компонента доступа к новым инструментам.

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

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

“PFFF! React – это Итак, 2015!”

Идти дальше

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

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

И если вам нужно поставить все это недавно приобретенные знания на практике, способствуя прохладному реагированию проекта с открытым исходным кодом, проверить Телескоп Нова Отказ Это самый простой способ быстро создать полный аппарат ATV + GraphQL, в комплекте с учетными записями пользователей, форм и загрузкой данных из коробки. И я упомянул, что мы ищем участников?

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