Введение в реагирование в 2019 году (для людей, которые знают достаточно JQuery, чтобы получить)

у julien benchetrit.

Вернувшись в 2015 году, @chibicode ” rect.js Введение для людей, которые знают достаточно jQuery Чтобы получить «Был ли мой первый контакт с реагированием и учебником, который демистифицировал все это для меня.

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

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

Так с @chibicode Разрешение, я переписал свою статью с последними версиями Reaction и JavaScript и расширился на некоторых объяснениях.

Обратите внимание, что подавляющее большинство этого учебника – его работа. Я надеюсь, что это будет полезно для вас, как это было для меня.

Без дальнейшего ADO давайте узнаем нас некоторые реагирующие!

Целевая аудитория: люди, которые знают достаточно JQuery, чтобы получить

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

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

Я не хочу делать подобную ошибку здесь. Из людей, которые никогда не пробовали реагировать, некоторые удобны с Frontend JS Frameworks, как Позвоночник , Эмбер или Угловой Отказ Некоторые знают JavaScript довольно хорошо. Некоторые знают достаточно JQuery, чтобы получить. Учебник, который эффективен для одной группы, может быть не оптимальным для других групп.

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

Дизайнеры, которые могут сделать базовое кодирование в HTML/CSS/jQuery.
Разработчики WordPress, которые знают, как использовать плагины jQuery.
Начальные разработчики, которые завершили основные учебные пособия HTML/CSS/JS онлайн.
Backend Developers, которые полагаются на Bootstrap и Basic jQuery для своих потребностей в Интернете.
Любой, кто делает больше копирования, чем архитектуру, когда дело доходит до JavaScript.

Если вам удобно с JavaScript или любой из Frameend Frameworks, таких как Backbone/Ember/Angular, этот учебник не для вас , и вы будете очень разочарованы моим стилем письма. Есть тонны великих учебников, у которых вы можете узнать, включая Официальное руководство по реагированию Отказ

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

В любом случае , Давайте начнем!

Оценка времени: 1 ~ 2 часа

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

Если вы застряли

Если вы застряли или у вас есть вопросы, вы можете твитнуть оригинал автора @chibicode. или я @julienbenc. .

Обзор: мы собираемся построить «Tweet Box»

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

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

Пользовательский интерфейс, который мы построим, будем напоминать ящик Tweet, на котором вы находите на Twitter Отказ Это не будет точно так же, как настоящий твит, но это будет довольно похоже. Надеюсь, вы найдете этот пример быть практичным.

Шаг 1: Введение в кодепен (5-10 минут)

Мы будем использовать Кодепен , онлайн-редактор кода, который поддерживает как jQuery и React Code. Вы можете быть знакомы с аналогичными услугами, такими как Jsbin. или Jsfiddle – они все довольно похожие Но я пошел с кодепеном для облегчения встраивания.

Вот пример ручки:

Нажмите «Выполнить ручку», чтобы увидеть, что произойдет, когда код работает, а также сам код (нажав кнопку HTML ).

Затем нажмите «Изменить на кодепене», чтобы открыть ручку в новом окне. Теперь вы можете изменить HTML в левом верхнем углу – I.e. Измените текст кнопки. Вы увидите, что изменения появляются в нижней половине окна. Вот как работает кодепен.

Создать учетную запись CodePen

Если у вас уже есть учетная запись CodePen, Гель до https://codepen.io/ к Создать учетную запись Отказ Нажмите Зарегистрироваться создать свою учетную запись.

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

Давай попробуем. Откройте эту следующую ручку на новой вкладке и нажмите «Вилка» в верхнем правом меню.

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

Попробуйте сделать следующее в своей разделской ручке:

Добавьте последний загрузчик с вкладки CSS (имя будет «Twitter-bootstrap»)
Добавить BTN BTN-Primary классы на <кнопка> ярлык

И выход становится немного красивее:

Создать Tweet Box

Вам, кажется, довольно комфортно с кодом. Хорошо, давайте построим коробку Tweet. Все еще на одной ручке, что и раньше, Измените HTML внутри Как это:

Мы используем классы Bootstrap, такие как Форма-контроль , карта , Карточное тело , так далее. Но это только для внешности и не имеет значения для учебника. Вот результат:

Это для первого шага! Не так уж плохо, а?

Шаг 2: внедрить первую функцию – кнопка Tweet Первоначально должен быть отключен (5 минут)

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

Особенность 1: Кнопка «Tweet» должна быть изначально отключена. Когда в поле текста есть хотя бы один символ, кнопка «Tweet» должна быть включена.

Вот демонстрация. Как видите, кнопка изначально отключена. Если вы введете что-то в текстовое поле, кнопка включена.

Чтобы сделать это на работу, вам сначала нужно добавить jQuery в ручку. Сделайте это внутри вкладки JavaScript в настройках вашей пера. (Если у вас возникли проблемы с этим шагом, ознакомьтесь с официальными инструкциями CodePen . Как только это сделано, перейдите в небольшое окно JavaScript и добавьте следующий код jQuery.

// Initially disable the button
$("button").prop("disabled", true);
// When the value of the text area changes...
$("textarea").on("input", function() {
  // If there's at least one character...
  if ($(this).val().length > 0) {
    // Enable the button.
    $("button").prop("disabled", false);
  } else {
    // Else, disable the button.
    $("button").prop("disabled", true);
  }
});

Объяснение

Я использовал имена тегов кнопка и Textarea В качестве селекторов – не нужно добавлять идентификаторы или классы для этого примера.
Чтобы включить/отключить кнопку, используйте $ (...) .prop («отключено», ...) .
Чтобы слушать изменения в Textarea Используйте вход Событие, которое работает на современных браузерах.

Попробуйте это Набирая некоторые текст в Tweet Box и просмотр включенного/отключенного состояния кнопки.

Не действуйте, если этот пример запутал вас – вам может потребоваться узнать еще немного jQuery, прежде чем двигаться на реагирование. Есть много отличных учебных ресурсов, таких как Кодекадемия С Treehouse , Кодовая школа , и другие.

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

Шаг 3: коробка Tweet, используя RECT (5-10 минут)

Одна из первых вещей, которые вы заметите в реакции, состоит в том, что Вы будете писать разметки в JS, а не в HTML Отказ

Позвольте мне показать вам, что я имею в виду. Вот код RACT, который отображает тот же в Tweet Box.

ПРЕДУПРЕЖДЕНИЕ! Вам еще не нужно следить, просто прочитайте код.

Некоторые наблюдения:

Внутри Вернуться (...) это HTML-код, а не JavaScript. В реакции вы напишите в специальном синтаксисе под названием JSX, который позволяет размещать HTML-код в JavaScript.
Я говорю HTML- «Мне нравится», потому что он не идентичен HTML. Обратите внимание, что он использует классное значение вместо класс – Но это довольно похоже, поэтому вы узнаете это быстро.
Ваш браузер не понимает JSX, поэтому, до того, как код может быть запущен, он автоматически преобразуется в совместимый браузер JavaScript с помощью компилятора JS (называемый Babel).
HTML-код внутри Вернуться (...) в значительной степени идентичен HTML-код с шага 1.
Посмотрите на оставшийся HTML-код на нашей ручке, и вы увидите, что нет разметки, кроме & lt;/div> . Это то, что я имел в виду, когда я сказал, что в реагировании вы будете писать разметку в JavaScrip T (JSX), а не в HTML.

Часто задаваемые вопросы и ответы

Вопрос: Что делать класс TweetBox проходит реагировать. Компонент и Reactom.runder делать? Нужно ли мне понять их сейчас? Ответ: Не беспокойтесь об этом сейчас. В основном, первое объявляет комментарий реагирования с именем (в этом случае, TweetBox ). Это затем оказывается в доме через Reactom.runder (, Document.GETELEMPYBYID («CONTAI NER»)) – значение Этот компонент добавлен Insid e

тег. Это все, что вам нужно знать сейчас.

Вопрос: Нужно ли сделать что-нибудь особенное, чтобы написать JSX на моей местной машине? Отвечать: Да, но это за пределами объема этого учебника – короче говоря, вам нужно позволить что-то под названием Cabel Compilation. Все, что вам нужно сделать, чтобы написать JSX на кодепене, – это (1) Добавить библиотеки реагирования и взаимодействия и (2) Выберите «Babel» из списка предварительнопроцессоров JavaScript в окне настроек JS.

Вопрос: Разве не плохая практика для записи разметки (HTML) и поведения (JS) в том же месте? Отвечать: Это может быть плохие практики для простых веб-страниц, но не обязательно для больших веб-приложений. В больших веб-приложениях будут сотни частей UI, каждый из которых содержит свою собственную разметку и поведение. Код будет более управляемым, если разметка и поведение хранятся вместе для каждого куска UI, а не поддержанием «все разметки» вместе и «все поведения» вместе. И реагировать предназначен для разработки больших веб-приложений. Фактически, React разработан и используется Facebook, один из крупнейших веб-приложений там.

Далее я покажу вам, как написать вышеупомянутый код React Code.

Шаг 4: Написание вашего первого React Code (5-10 минут)

Вот стартовая ручка. В нем я импортировал Bootstrap (CSS-часть) и реагировать. Я также установил Preprocessor JavaScript для Babel, чтобы мы могли написать классы и JSX.

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

Теперь вы готовы написать некоторые реагировать. Попробуйте следить и ввести следующие фрагменты кода JS в вашу ручку.

class TweetBox extends React.Component {
  render() {
    return null;
  }
};

Это шаблон для создания кусочка пользовательского интерфейса, используя реакцию (в этом случае, в Tweet Box). Так же важно, как $ (селектор) .append («Ваш HTML код или элемент») в jQuery.

На самом деле построить пользовательский интерфейс, мы должны написать Визуализация () метод. На данный момент, давайте удержим это простым только с одним Div ярлык.

class TweetBox extends React.Component {
  render() {
    return (
      
        Hello World!
      
    );
  }
};

Как в примере выше, Положите пару скобок после вернуть И напишите разметку внутри.

Jsx gotchas.

Есть одна вещь, которую вы должны помнить с JSX – в Визуализация () Вы должны вернуться только один Внешний тег (или все, что можно считать действительным узлом DOM, такого как строка или строку).

Это будет работать, потому что это строка:

return 'Hello World!';

Но следующее не будет работать, потому что нет котировок или внешнего тега вокруг текста:

return (
  Hello World!
);

Это также не работает, потому что есть два внешних ( Span ) Теги внутри Вернуться (...) :

return (
  
    Hello
  
  
    World
  
);

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

return (
  
    
      Hello
    
    
      World
    
  
);

Мы использовали Div здесь Но в самых последних версиях реагирования вы можете использовать функцию фрагмента для рендеринга нескольких внешних тегов. Нравится:

return (
  
    
      Hello
    
    
      World
    
  
);

Прикрепление UI к DOM

Теперь нам нужно «прикрепить» этот интерфейс до DOM, чтобы увидеть Привет, мир . Сделать это, Добавить Reactom.runder () Под кодом мы только что писали:

class TweetBox extends React.Component {
  ...
};
ReactDOM.render(
  ,
  document.getElementById("container")
);

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

Reactom.runder берет два аргумента. Первый аргумент – это компонент React, который является />. Второй аргумент - это элемент DOM, где мы хотим рендер (в этом случай, документ. GTELEMPYBYID («CONTA iner»)). Собрать, вышеуказанный код рендеринга S TW Eetbox Ui I NDIDE

.

Теперь вы должны увидеть Здравствуйте, мир появляются на ручке. Поздравляем, вы писали и сделали свой первый реактивный компонент!

Напишите фактический HTML для коробки Tweet

Теперь вместо Привет, мир Мы реализуем HTML для коробки Tweet. Поменять код внутри Визуализация () с этим:

Есть две вещи, которые вам нужно смотреть на:

Не используйте класс . Вместо этого используйте Классическое имя Отказ Это потому, что jsx переводится в js и класс Зарезервировано ключевое слово в JS.
Если вы используете < BR> Inste AD , вы будете G et ошибка. Обязательно закрывайте все теги. То же самое w i-х изображения: = "..." alt = "..."/>

Все остальное должно быть таким же, как пример jQuery от ранее.

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

Вот это за этот шаг! Вот ручка до этой части:

Шаг 5: повторно реализовать первую функцию – кнопка Tweet должна быть изначально отключена – в реакции (5-10 минут)

Мы собираемся повторно реализовать с помощью первой функции, которую мы реализовали с помощью jQuery:

Вот код jQuery, который мы писали:

Давайте посмотрим, как мы можем сделать это в реакции.

Начните с вашей ручки с предыдущего шага. ( Совет: Так как вы не будете касаться HTML в реакции, Вы можете минимизировать вкладку HTML на кодепене получить больше места на экране. То же самое с вкладкой CSS.)

Во-первых, давайте отключаем кнопку, добавив отключен как атрибут.

render() {
  return (
    ...
    
    ...
  );
}

В JSX это эквивалентно написать Отключено = {True} Отказ

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

$("button").prop("disabled", true);

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

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

Сердце изменять событие

Во-первых, нам нужно слушать пользователь, набрав в Textarea Отказ В нашей реализации JQuery мы писали:

$("textarea").on("input", function() {
  ...
}

В реактивный мир мы пишем обработчик событий как Метод класса Отказ Давайте назовем это HandleChange :

class TweetBox extends React.Component {
  handleChange = () => {
  };
  render() {
    ...
  }
}

Далее мы называем этот обработчик, когда введен текст. Сделать это, Изменить Textarea Теги в Визуализация () нравится:

Мы использовали вход Мероприятие для jQuery, но в реакции мы используем Onchange – Вы узнаете о том, как события отличаются в jsx jsx raction от официальной документации по реагированию, поэтому сейчас не волнуйтесь слишком много.
Что еще более важно Мы использовали вьющиеся кронштейны, чтобы включить код JavaScript внутри синтаксиса HTML-синтаксиса JSX. В этом случае мы передали обработчик HandleChange И мы префиксировали его с Это Потому что это метод класса.
Если вы привыкли к jQuery, это может показаться плохой практикой, но не волнуйтесь. Опять же, в больших приложениях код будет более управляемым, если разметка и поведение хранятся вместе для каждого куска UI.

Чтобы убедиться, что обработчик действительно называется, Давайте добавим console.log внутри HandleChange :

handleChange = (e) => {
  console.log(e.target.value);
};

событие Объект (прозвищ e ) содержит цель который является текстура . Мы получаем ценность Для вывода текущего содержания Textarea Отказ

На ручке, откройте консоль Вкладка (с кнопкой в нижней левой части экрана), чтобы проверить вывод. Затем введите что-нибудь в коробке Tweet.

Вы также можете попробовать здесь здесь (вам нужно будет открыть ручку на новой вкладке, чтобы увидеть кнопку Console ):

Вот это за этот шаг! Мы закончим эту функцию на следующем шаге.

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

Шаг 6: Реализация состояния (10-15 минут)

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

В jQuery, когда какое-то событие произойдет, вы обычно изменяете DOM напрямую (вроде бы, чтобы мы делали ранее с $ (кнопка «кнопки»). Опора («отключено», правда) ):

В реакции, Вы никогда не модифицируете DOM напрямую. Вместо этого в обработчике событий вы измените что-то называемое «Составное состояние» Отказ И это делается, позвонив Это .SetState .

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

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

Написание обработчика событий

Начните с вашей ручки с предыдущего шага. Во-первых, нам нужно Инициализировать государственный объект. Мы можем сделать это внутри класса Конструктор Отказ

Что идет в объекте? Давайте создадим один ключ под названием текст И у него хранит все, что находится внутри коробки Tweet.

class TweetBox extends React.Component {
  constructor(props) {
    super(props);
 
    this.state = {
      text: '',
    };
  }
  
  handleChange = (e) => {...};
  render() {...}
};

Далее мы изменим обработчик событий установить государство текст поле к тому, что в данный момент в Textarea Отказ Сделать это, Мы используем специальный метод под названием SetState и пройти обновленное значение ключа.

handleChange = (e) => {
  this.setState({ text: e.target.value });
};

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

Сделать это, Просто добавьте this.state.text ближе к концу Визуализация () и использовать курчавые скобки Чтобы использовать код JS внутри синтаксисной части HTML JSX.

render() {
  return (
    
      ...
      {this.state.text}
    
  );
}

Теперь попробуйте ввести текст в коробке Tweet. Тот же текст должен появиться под кнопкой.

Вы можете попробовать его на ручке ниже:

Теперь предыдущая диаграмма может иметь больше смысла к вам:

Удалить код отладки

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

{this.state.text}

Включение/отключение кнопки

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

Используя Государство мы можем использовать эту логику:

Если this.state.text.length кнопка должна быть отключена.

Сделать это в реакции, Добавьте Отключено атрибут и установите его значение в качестве вывода this.state.text.length . Поскольку это код JS, вам нужно обернуть его с помощью {} Отказ

Если вы пишете Отключено = "True" или Отключено = "false" В RAW HTML это не будет работать – в RAW HTML вам нужно добавить/удалить Отключено атрибут, чтобы включить кнопка . Но отреагировать не RAW HTML – это делает следующее за кулисами:

Если вы пишете Отключено = {True} В JSX он превращается в просто <кнопка отключена> в HTML. Если вы пишете
Отключено = {false} в JSX, Отключено Атрибут удален из кнопка Тег в HTML.

Это работает с другими логическими атрибутами, такими как проверено Отказ (Вы можете прочитать больше об этом аспекте JSX здесь .)

Полученная ручка ниже:

Отражения

Опять же, сохраняйте эту разницу между jQuery и реагируйте, прежде чем перейти к следующему шагу:

В jQuery вы пишете обработчики событий, которые Изменить DOM Отказ
В реакции вы пишете обработчики событий, которые Изменить состояние Отказ А ты пишешь Визуализация () отражать текущее состояние.

Шаг 7: Оставшийся счетчик символов в jQuery (5 минут)

Следующая функция, которую мы реализуем, – оставшийся счетчик символов.

Вот спецификация:

Количество символов будет отображаться 280 - длина текста Отказ

Сначала мы сделаем это в jQuery, затем в реакции.

Мы начнем с нашей предыдущей реализации jQuery и нанести наш код React on Code. Сдвиньте вперед, я дам вам новый код, чтобы начать с начала каждой главы Как мы чередуемся между jQuery и реагировать. Это означает, что после того, как вы закончите с каждым шагом, вы можете играть с кодом перед переходом на следующий шаг.

✔ Вилка ручка ниже для начала.

Во-первых, Добавьте количество символов в HTML. Давайте установим его внутри охватывать :

И Внутри обработчика ввода в JS добавьте этот код, чтобы обновить счетчик символов:

$("textarea").on("input", function() {
  $("span").text(280 - $(this).val().length);
  ...
});

Вот и все! Попробуйте печатать в коробке Tweet И вы увидите, что счетчик персонажа обновляется в виде вашего типа. Вот ручка:

Шаг 8: Оставшийся счетчик символов в реакции (5 минут)

Как насчет реагирования? Вы должны попробовать делать это самостоятельно. Начните с нашей предыдущей реакции реагирования.

✔ Вилка ручка ниже для начала.

( Совет: Так как вы не будете касаться HTML в реакции, Вы можете минимизировать вкладку HTML на кодепене Чтобы получить больше экрана.)

Подсказки:

Не нужно менять Конструктор () или HandleChange () методы.
Использовать this.state.text.length в Визуализация () Отказ

Отвечать:

Добавьте этот код после R/> в Ваш реки Напряжение ():

{280 - this.state.text.length}

Вот ручка:

Слишком легко? Не уверен, почему строительство UIS с реагированием намного лучше, чем jQuery? Ну, следующий шаг имеет более сложность, и это место, где реакция действительно начинает сиять.

Шаг 9: Кнопка «Добавить фотографию» (5 минут)

Для нашей следующей функции мы добавим кнопку «Добавить фотографию» в коробку Tweet. Вот где все начинают становиться сложно.

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

Когда вы загружаете фото в Twitter, он считается против предела символов. По моей попытке он уменьшил количество оставшихся персонажей от 280 до 257.

Вот спецификация:

Создайте кнопку «Добавить фотографию».
Нажав на эту кнопку переключает Штат вкл/выкл.
Если кнопка включена, это скажет ✓ Добавлена фотография И количество доступных символов уменьшается на 23.
Кроме того, если кнопка включена, Даже если нет введенного текста, кнопка «Tweet» остается включенной.

Вот демо-кодепен. Попробуйте щелкнуть кнопку «Добавить фотографию» И посмотрите, что происходит с счетчиком символов и кнопкой Tweet.

Давайте сначала реализовать это с jQuery.

Шаг 10: Кнопка «Добавить фото» в jQuery (15-20 минут)

Начните с последней версии нашей реализации jQuery.

✔ Вилка ручка ниже для начала.

Ранее мы прикрепили обработчик до $ ("Кнопка") Но это больше не будет работать, если у нас есть две кнопки. Итак, давайте изменим HTML, как это:

...


...

Вот изменения:

Добавлена вторая кнопка Что говорит «Добавить фотографию».
Добавлены классы JS-Tweet-кнопка и js-add-photo-кнопка к каждой кнопке. Имена классов префиксированы JS- Чтобы помнить, что они используются только в JS, а не в CSS.
Добавлен начальный Отключено атрибут кнопке Tweet Поэтому нам не нужно делать это в JS.

Далее перепишите весь файл JS, как это:

$("textarea").on("input", function() {
  $("span").text(280 - $(this).val().length);
  if ($(this).val().length > 0) {
    $(".js-tweet-button").prop("disabled", false);
  } else {
    $(".js-tweet-button").prop("disabled", true);
  }
});

Вот изменения:

(Важно) Удалено $ (кнопка «кнопка»). опоры («отключено», правда); С первой линии Потому что мы добавили Отключено атрибут непосредственно к кнопке Tweet.
Заменил $ ("Кнопка") с $ (". JS-Tweet-кнопка") Так что его можно отличить от .js-add-photo-кнопка Отказ

Добавление кнопки

Далее мы реализуем одну из функций:

Нажатие кнопки «Добавить фотографию» переключает состояние включения/выключения. Если это включено, кнопка скажет ✓ Добавлена фотография Отказ

Сделать это, Добавим этот кусок кода:

$("textarea").on("input", function() {
  ...
});

$(".js-add-photo-button").on("click", function() {
  if ($(this).hasClass("is-on")) {
    $(this)
      .removeClass("is-on")
      .text("Add Photo");
  } else {
    $(this)
      .addClass("is-on")
      .text("✓ Photo Added");
  }
});

Мы используем класс это на отслеживать государство. Проверьте, чтобы это работает Нажав кнопку «Добавить фотографию» несколько раз и увидеть текстовый альтернативный.

Снижение подсчета символов

Далее мы реализуем эту функцию:

Если кнопка «Добавить фото» включена, Количество доступных символов уменьшается на 23.

Сделать это, Измените обработчик щелчка, мы только что добавили это.

if ($(this).hasClass("is-on")) {
  $(this)
    .removeClass("is-on")
    .text("Add Photo");
  $("span").text(280 - $("textarea").val().length);
} else {
  $(this)
    .addClass("is-on")
    .text("✓ Photo Added");
  $("span").text(280 - 23 - $("textarea").val().length);
}

Мы меняем Промежуток Содержание на каждом клике. Если кнопка включен, нам нужно вычесть длину текста от 257 (I.e. 280 - 23 ). Мы используем 280 - 23 для ясности прямо сейчас Но, если бы мы создали производственное приложение, мы должны вместо этого использовать константы.

Проверьте, чтобы это работает Нажав кнопку «Добавить фотографию».

Исправление обработчика ввода

Это не завершено, однако – Если у вас есть кнопка «Добавить фотографию» и начните печатать в текстура Оставшийся счетчик характера выходит из синхронизации.

Это происходит потому, что обработчик для Textarea Не учитывает состояние кнопки «Добавить фотографию».

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

$("textarea").on("input", function() {
  if ($(".js-add-photo-button").hasClass("is-on")) {
    $("span").text(280 - 23 - $(this).val().length);
  } else {
    $("span").text(280 - $(this).val().length);
  }

  if (...) {
    ...
  }
});

Убедитесь, что это работает Включая кнопку «Добавить фотографию», а затем ввести текст.

Я знаю, что это занимает некоторое время …

Но придерживайтесь этого! Код jQuery здесь Предполагается Чтобы запутать, так что не волнуйтесь!

Внедрить последнюю функцию

Последняя функция, которую нам нужно для реализации, так это:

Если кнопка «Добавить фото» включена, Даже если нет введенного текста, кнопка «Tweet» остается включенной.

Сделать это, Нам нужно изменить обработчик кликов кнопки «Добавить фотографию»:

$(".js-add-photo-button").on("click", function() {
  if ($(this).hasClass("is-on")) {
    ...
    if ($("textarea").val().length === 0) {
      $(".js-tweet-button").prop("disabled", true);
    }
  } else {
    ...
    $(".js-tweet-button").prop("disabled", false);
  }
});

Вот объяснение:

Если кнопка «Add Photo» переходит от ON OFF ( IF PROTE), нам нужно проверить, нет введенного текста и, если это так, отключите кнопку «Tweet».
Если кнопка «ADD Photo» отключается на ON ( else Prose), мы всегда включаем кнопку «Tweet».

Но опять же, это сломано

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

Включите кнопку «Добавить фотографию».
Введите текст.
Удалить весь текст.
Кнопка «Tweet» все еще должна быть включена, потому что кнопка «Добавить фото» включена, но это не так.

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

$("textarea").on("input", function() {
  ...
  if ($(this).val().length > 0 || $(".js-add-photo-button").hasClass("is-on")) {
    ...
  } else {
    ...
  }
});

Это объяснение этого дополнительного условия:

Когда текстовые изменения, Если текст не пустое или если кнопка «Добавить фото» на Не отключайте кнопку «Tweet».

Попробуйте снова выше шаги И на этот раз он будет работать, как ожидалось.

Шаг 11: Отражение в коде jQuery – почему так запутается? (5 минут)

Вот последний код HTML и JS с предыдущего шага:

Посмотрите на код jQuery еще раз. Это очень запутанно. Если вы держите код как есть, вам, вероятно, понадобятся комментарии везде, чтобы помнить, как это работает. Есть также четкие признаки дублирования кода, но вам придется немного подумать до рефакторинга.

Вопрос в том: Почему это так быстро было так быстро?

Ответ должен сделать с “jQuery Style” кода мы говорили о ранее. Напомним эту диаграмму:

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

Это пример того, что люди значат, когда говорят «код спагетти».

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

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

Теперь давайте посмотрим, что это нравится делать то же самое с реагированием.

Осторожно, спойлеры: Это будет намного проще.

Шаг 12: Кнопка «Добавить фото» в реакции (10-20 минут)

Начнем с нашей предыдущей реакции реагирования.

✔ Вилка ручка ниже для начала.

Добавление кнопки

Сначала давайте добавим кнопку «Добавить фотографию». Изменить JSX:

Теперь давайте добавим обработчик щелчка к этой кнопке, чтобы текстовые изменения из Добавить фото к ✓ Добавлена фотография Отказ Напомним режим React Private Code Code:

Мы будем:

Создайте структуру состояния который отслеживает, включена ли кнопка «Добавить фотографию».
Использовать состояние в Визуализация () решить, стоит ли показать Добавить фото или ✓ Добавлена фотография Отказ
Обновите состояние в обработчике клика.

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

constructor(props) {
  super(props);
 
  this.state = {
    text: '',
    photoAdded: false,
  };
}

Для (2), Мы изменим Markup JSX Для кнопки «Добавить фотографию». У нас будет кнопка сказать, что «Добавлена фотография», если this.state.photoaddakded правда. Мы можем просто использовать Темнарный оператор здесь:

Наконец, для (3), Мы приложим обработчик событий на JSX Как мы сделали для Textarea :

Обратите внимание, что мы используем OnClick вместо Onchange Отказ Это потому, что мы имеем дело с кнопка а не Textarea или вход Отказ

Мы также Добавьте метод обработчика, который переключает значение this.state.photoaddddeddded :

togglePhoto = () => {
  this.setState((prevState) => ({ photoAdded: !prevState.photoAdded }));
}

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

Теперь нажав на добавление фото должен переключить текст кнопки. Попробуй себя.

Снижение подсчета символов

Теперь мы реализуем следующую функцию:

Если кнопка «Добавить фото» включена, Количество доступных символов уменьшается на 23.

В настоящее время количество доступных символов отображается следующим образом в Визуализация () :

{280 - this.state.text.length}

Это значение теперь также будет зависеть от this.state.photoaddaded. Поэтому нам нужен Если и еще здесь.

Тем не менее, В JSX вы не можете написать Если или еще внутри {...} Отказ Вы можете использовать тройное выражение ( a? B: C ) как мы сделали ранее Но было бы довольно долго и трудно прочитать в этом случае.

Часто самое простое решение в этой ситуации является рефактором условным способом. Давай попробуем.

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

{this.getRemainingChars()}

И определить метод, как это:

getRemainingChars = () => {
  let chars = 280 - this.state.text.length;
  if (this.state.photoAdded) chars = chars - 23;
  return chars;
}

Теперь оставшийся счетчик символов должен обновляться, как ожидается, когда кнопка «Добавить фото» переключается.

Вопрос:|: В Визуализация () Почему делает {it.getremeningchars ()} есть () Но {Это. HandleChange} и {this.togglephoto} Не

Хороший вопрос. Давайте посмотрим на Визуализация () опять таки:

render() {
  return (
    ...
      
    ...
    
    {this.getRemainingChars()}
    ...    
          
    
    ...
    );
  }

Ответ :

Мы написали GetRemainingChars () Метод вернуть номер Отказ Нам нужно получить этот номер и положить его внутри & lt;/span>, так Мы и EED Называть Гетрема Iningchars () мет ОД используя (). Это смягчать у мы есть () в Getrema Iningchars ().
С другой стороны, HandleChange и Togglephoto являются обработчики событий . Мы хотим, чтобы эти методы были вызваны только тогда, когда пользователь взаимодействует с интерфейсом пользовательского интерфейса (набрав в Textarea или нажав кнопку ). Для этого нам нужно написать их без () в Визуализация () и назначьте их атрибутам, как Onchange и OnClick Отказ Реагирование позаботится о присоединении методов к соответствующим слушателям событий для нас.

Статус кнопки «Tweet»

У нас есть еще одна функция для реализации:

Если кнопка «Добавить фото» включена, Даже если нет введенного текста, кнопка «Tweet» остается включенной.

Это действительно очень просто, благодаря реагированию. Ранее, кнопка Tweet Отключено Опция была установлена как:

Другими словами, ранее кнопка «Tweet» была отключена, если длина текста была 0. Теперь кнопка «Tweet» отключена, если :

Длина текста 0
А ТАКЖЕ
Кнопка «Добавить фото» выключена.

Так что логика выглядит так:

Один из способов уточнить вышеуказанный код, используя GetRemainingChars () Отказ Если осталось 280 символов, это означает, что Textarea Пуст и кнопка «Добавить фото» выключена, поэтому кнопка «Tweet» должна быть отключена.

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

render() {
    const isTweetButtonDisabled = this.state.text.length === 0 && !this.state.photoAdded;
  
    return (
      ...
        
      ...
    );
  }

Вот и все! Попробуйте переключить кнопку «Добавить фото» и убедитесь, что кнопка «Tweet» включена/отключена правильно.

Были сделаны!

Вот полученная ручка:

Шаг 13: Отражение в React Code – почему так просто? (5 минут)

Изменения для размещения кнопки «Добавить фото» были минимальными при использовании реагирования. Рефактор не требуется. Почему это так?

Опять же, это связано с стилем React Action ui Code. В реакции, обработчики событий изменяют Государство , и всякий раз, когда состояние модифицировано, Реагируйте автоматически звонить Визуализация () снова, чтобы обновить пользовательский интерфейс.

В этом конкретном примере диаграмма теперь выглядит так:

Государство становится посредником, которая находится между обработчиками событий и Визуализация () :

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

Сравнить с jQuery

Вы можете себе представить, что произойдет, так как пользовательский интерфейс получает больше функций. Без промежуточного состояния у нас было трудное время управлять сложностью. Вот почему вы хотите использовать React Over jQuery для сложного УИИ.

Опять же, Это возможно Чтобы написать Clean JQuery код, который не похоже на код спагетти. Но вы должны придумать структуру кода себя И подумайте, как реформировать каждый раз, когда вы добавляете новую функцию. Реагирование предоставляет вам эту структуру и уменьшает вашу когнитивную нагрузку.

Шаг 14: Окончательная функция – выделение переполшенных персонажей (5 минут)

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

К сожалению, Мы не собираемся выделить фактический текст внутри коробки Tweet потому что это потребует от нас изменить EA & GT;

E = "TR ue"> и con TentediTable слишком сложен для иллюстративных целей.

Вместо этого Мы будем отображать оповещение о Bootstrap сверху и укажите, какие символы должны быть удалены, как это:

Чтобы попробовать его, скопируйте следующую цитату из официальной документации по реагированию:

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

Если бы мы должны были реализовать это в jQuery, наш код станет многим Мессиером. Уведомление на диаграмме, которую мы будем добавлять еще две стрелки для одной новой функции.

Поэтому мы не собираемся реализовать это в jQuery Отказ Мы просто сделаем это с реагированием и называем это в день. Это будет довольно просто сделать с реагированием – только одна дополнительная стрелка на диаграмме:

Шаг 15: Выделение переполнения символов с реагированием (10-15 минут)

Начнем с нашей предыдущей реакции реагирования.

✔ Вилка ручка ниже для начала.

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

Поскольку это потребует условного, давайте напишем в отдельном методе. Добавить {this.renderverflowalert ()} выше Textarea :

{this.renderOverflowAlert()}

Теперь этот метод должен вернуться:

Метка div Для оповещения о предупреждении, если больше не осталось персонажей.
Ничего (то есть пустая строка или нуль) в противном случае.

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

someMethod = () => {
  return (
    Hello World
  );
}
anotherMethod = () => {
  return (
    
      {this.someMethod()}
    
  );
}

В RenderOverFlowalert мы можем вернуть (

...

) В одном случае и ничего в другой. Итак, наш RenderOverFlowalert Метод будет лома k Как это:

renderOverflowAlert = () => {
  if (this.getRemainingChars() < 0) {
    return (
      
        Oops! Too Long:
      
    );
  }
  return '';
};

Обратите внимание, что мы проверяем Is.getRemainingChars () Чтобы увидеть, нужно ли нам показать предупреждение или нет.

Попробуйте это, набрав 280+ символов (или 257+ символов с кнопкой «Добавить фото» на). Оповещение должно появиться так же, как ограничение символов достигает -1.

Отображение переполшенных персонажей

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

Между «упс! Слишком долго: «И фактический текст, есть пустое одноместное пространство, а затем три точки. Я использовал Вот потому что при написании разметки в JSX, белые пробелы между тегами удаляются. (Вы можете добавить их вручную, используя {''} .)
Тогда есть 271-й ~ 280-й (всего 10) символов this.state.text Отказ
Тогда есть остальные персонажи, подчеркиваемые красным.

Давайте напишем это в JSX. Внутри если оговорка переполненный , мы создадим две переменные: deedoverflowtext. а также OverflowText. . Мы будем использовать метод подстроки на this.state.text.text. .

renderOverflowAlert = () => {
  if (this.getRemainingChars() < 0) {
    const beforeOverflowText = this.state.text.substring(280 - 10, 280);
    const overflowText = this.state.text.substring(280);
    return (
      
        Oops! Too Long:
          …
        {beforeOverflowText}
        {overflowText}
      
    );
  }
  return '';
};

Если вы делаете .субринг (а, б) , это вернет (A + 1) -Nth до тех пор, пока B-TH символы из строки.
Если вы делаете .БРИНГ (а) , это вернет (A + 1) -Nth до последних символов из строки.
Мы используем Bootstrap’s BG-опасность класс, чтобы выделить текст в красном и Текстовый свет Чтобы сделать текст, читаемый на темном фоне сейчас.

Скопируйте снова вставьте следующий текст и убедитесь, что часть текста после первых 280 символов выделена. Мы почти закончили!

Что если кнопка «Добавить фотографию» включена?

Если кнопка «Добавить фото» включается, то ограничение символов уменьшается на 23. Итак, наш deedoverflowtext. и OverflowText нужно принять это во внимание:

renderOverflowAlert = () => {
    if (this.getRemainingChars() < 0) {
      const imageLength = this.state.photoAdded ? 23 : 0;
      const beforeOverflowText = this.state.text.substring(
        280 - imageLength - 10,
        280 - imageLength,
      );
      const overflowText = this.state.text.substring(280 - imageLength);
      return (
        
          Oops! Too Long:
            …
          {beforeOverflowText}
          {overflowText}
        
      );
    }
    return '';
  };

Теперь попробуйте переключить кнопку «Добавить фото» при вводе в любой текст, который длиннее пределов. Это должно работать, как ожидалось. Вот ручка:

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

Шаг 16: Что дальше? (5 минут)

Это завершает руководство. Надеюсь, вы:

Понял преимущества структуры компонентов Ract React VS вручную модифицировать DOM с jQuery и
Узнал, как писать простые реактивные компоненты с помощью JavaScript и JSX.

Что дальше?

Есть много способов пойти отсюда.

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

Я также настоятельно рекомендую прочитать следующие части Официальная документация по реагированию:

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

Прежде чем уйти, у меня есть Дополнительный вызов для тебя!

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

Не стесняйтесь публиковать результат как ручку в комментариях, и я буду очень рад проверить это!

Спасибо

Большое спасибо для чтения этого далеко! И прежде всего благодаря @chibicode За огромное количество работы он вложил в первую версию этого урока! Я надеюсь, что эта обновленная версия делает это справедливости.

Я Джульен. Я работаю инженерным инженером в Healthy.io И я помогаю поддерживать React – Boilerplate на github. Если вы поймаете ошибку, хотите, чтобы любые разъяснения или думаю, что я пропустил что-то важное, пожалуйста, дайте мне знать, и я обязательно исправить это.

Оригинал: “https://www.freecodecamp.org/news/react-introduction-for-people-who-know-just-enough-jquery-to-get-by-2019-version-28a4b4316d1a/”

Целевая аудитория: люди, которые знают достаточно JQuery, чтобы получить

Оценка времени: 1 ~ 2 часа

Если вы застряли

Обзор: мы собираемся построить «Tweet Box»

Шаг 1: Введение в кодепен (5-10 минут)

Создать учетную запись CodePen

Создать Tweet Box

Шаг 2: внедрить первую функцию – кнопка Tweet Первоначально должен быть отключен (5 минут)

Объяснение

Шаг 3: коробка Tweet, используя RECT (5-10 минут)

ПРЕДУПРЕЖДЕНИЕ! Вам еще не нужно следить, просто прочитайте код.

Часто задаваемые вопросы и ответы

Шаг 4: Написание вашего первого React Code (5-10 минут)

Jsx gotchas.

Прикрепление UI к DOM

Напишите фактический HTML для коробки Tweet

Шаг 5: повторно реализовать первую функцию – кнопка Tweet должна быть изначально отключена – в реакции (5-10 минут)

Сердце изменять событие

Шаг 6: Реализация состояния (10-15 минут)

Написание обработчика событий

Удалить код отладки

Включение/отключение кнопки

Отражения

Шаг 7: Оставшийся счетчик символов в jQuery (5 минут)

Шаг 8: Оставшийся счетчик символов в реакции (5 минут)

Отвечать:

Шаг 9: Кнопка «Добавить фотографию» (5 минут)

Шаг 10: Кнопка «Добавить фото» в jQuery (15-20 минут)

Добавление кнопки

Снижение подсчета символов

Исправление обработчика ввода

Я знаю, что это занимает некоторое время …

Внедрить последнюю функцию

Но опять же, это сломано

Шаг 11: Отражение в коде jQuery – почему так запутается? (5 минут)

Шаг 12: Кнопка «Добавить фото» в реакции (10-20 минут)

Добавление кнопки

Снижение подсчета символов

Статус кнопки «Tweet»

Были сделаны!

Шаг 13: Отражение в React Code – почему так просто? (5 минут)

Сравнить с jQuery

Шаг 14: Окончательная функция – выделение переполшенных персонажей (5 минут)

Шаг 15: Выделение переполнения символов с реагированием (10-15 минут)

{this.someMethod()}

Отображение переполшенных персонажей

Что если кнопка «Добавить фотографию» включена?

Шаг 16: Что дальше? (5 минут)

Что дальше?

Спасибо

Читайте ещё по теме: