Узнайте основные основы React за 10 минут

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

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

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

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

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

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

Разработанный Facebook в 2011 году, React быстро стал одним из наиболее широко используемых библиотек JavaScript. По словам HackeRrank 30% работодателей ищут разработчиков, которые знают реагирование, но только около половины заявителей на самом деле имеют необходимые знания.

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

Так что именно реагирует?

React – это эффективная и гибкая библиотека JavaScript для построения пользовательских интерфейсов (и в реакцию написана с помощью JavaScript). Он разбивает комплекс UIS в маленький изолированный код под названием «Компоненты». Используя эти компоненты, отреагируйте только только с тем, что вы видите на первой странице веб-сайта.

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

Вот пример функционального компонента, который делает

Элемент на страницу:

function Name() {
  return Hi, my name is Joe!;
}

И вот компонент класса, выполняющий то же оказание:

class Person extends React.Component {
  render() {
    return Hi again from Joe!;
  }
}

Использование компонента класса требует немного больше усилий в том, что вы должны продлить React.comPonent (часть библиотеки RACT), в то время как компонент функции является в основном простой JavaScript. Тем не менее, компоненты класса обеспечивают определенные критические функции, которые не хватает функциональных компонентов (см. Функциональные значения VS в React ).

Возможно, вы заметили, что внутри каждого компонента есть странная смесь HTML и JavaScript. Реагируйте на самом деле использует язык, называемый JSX, который позволяет смешивать HTML с JavaScript.

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

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

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

Обратите внимание на самозакрытие «/>» компонента.

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

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

Почему выбирайте реагировать на ванильный JavaScript?

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

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

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

Обычно это просто

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

Ванильные js, с другой стороны, определяет исходный интерфейс прямо в HTML.

Кроме того, Vanilla js заботится о функциональности, в то время как HTML ухаживает за отображением содержимого (разметки).

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

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

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

Обновление UI требует обновления модели DOM или объекта DOM (см. Манипулирование DOM, используя JavaScript ). Это где реагировать действительно сияет.

Если вы хотите получить доступ к DOM в ванили JS, вы должны сначала найти его, прежде чем он может быть использован. React хранит данные в обычных переменных JS и поддерживает свои собственные виртуальный Домо

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

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

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

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

Основные концепции реагирования

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

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

Состояние

Как упоминалось ранее, отреагируйте обновления UI на основе состояния приложения. Это состояние фактически хранится как свойство компонента класса RACT:

class Counter extends React.Component {
  state = {
    value: 0
  };
}

Предположим, у нас есть счетчик и 2 кнопки, которые либо увеличиваются, либо уменьшают. Значение счетчика отображается на страницу через JSX.

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

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

class Counter extends React.Component {
  state = {
    value: 0
  };
handleIncrement= () => {
  this.setState(state => {
     value: state.value + 1 
  });
};
handleDecrement= () => {
  this.setState(state => {
     value: state.value - 1 
  });
};
render() {
    return (
      
        {this.state.value}
        
        
      
    );
}
};

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

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

Реквизит

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

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

Вот как мы можем сделать это с реквизитом:

const Display = (props) => {
   let message;
   if(props.number>2){
	message = 'You're limited to purchasing 2 max!';
   }else{
	message = 'All's good.';
   }
   return(
	message
   );
};

class Timer extends React.Component {
   state = {
	quantity: 0
   }
   //...code for handling button clicking, updating state, etc.
    render(){
        return(
          
          //...code for other components
       );
    }
};

Мы создаем функциональный компонент под названием Дисплей и пройти реквизит как параметр. Когда мы визуализируем этот компонент, мы проходим к нему номер в качестве атрибута, установленного на количество продукта, который покупатель хочет приобрести. Это похоже на установку атрибута тега HTML. Мы называем это значение с ropps.Number в Дисплей Чтобы определить, какое сообщение для возврата.

Компонентный жизненный цикл

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

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

Чтобы увидеть методы жизненного цикла в действии, вы можете проверить это Pomodoro Clock Я сделал.

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

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

componentDidUpdate() {
    this.handleChange();
}

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

Что вы можете построить с реагированием?

Так что теперь у вас есть базовое понимание реагирования, что вы можете построить с ним?

Мы уже упоминали в начале этого сообщения, что Facebook разработал реагирование в 2011 году, поэтому, естественно, платформа Facebook основана на реакции. Другие известные приложения, которые либо полностью или частично используют реагирование, включают Instagram, Netflix и WhatsApp.

Но как начинающие реагируют, мы не хотим немедленно построить следующий Facebook, так что вот список 10 Идеи проекта RACH STARTER, чтобы получить кодировку Отказ

Если вы хотите узнать больше о веб-разработке и проверить несколько примеров ориентированных на новичком реагированных проектах, посетите мой блог на 1000 миль мила Отказ

Спасибо за чтение и счастливое кодирование!

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

Hi, my name is Joe!

Hi again from Joe!