Как написать свой первый компонент React.js

Эта статья является написанием части моего курса множества- React.js: Начало работы Анкет Я освещаю аналогичный контент в видео формате.

Самая важная концепция, которую нужно понять в React.js, – это компонент. Компонент React может быть одним из двух типов. Это может быть либо функция компонент или класс составная часть. Иногда вы услышите разные термины, чтобы описать эти два типа, такие как без гражданства и Stateful Анкет Функциональные компоненты также часто связаны с презентация концепция. Я буду называть их в этой статье как компоненты функции и компоненты класса.

Функциональный компонент является самой простой формой компонента React. Это простая функция с простого контракта:

Снимок экрана запечатлен с моего курса множества – React.js: Начиная

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

A класс компонент это более широкий способ определить компонент React. Он также действует как функция, которая получает реквизит, но эта функция также рассматривает частное внутреннее состояние как дополнительный вход, который контролирует возвращенный JSX.

Снимок экрана запечатлен с моего курса множества – React.js: Начиная

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

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

Давайте посмотрим на фактический пример компонента. Очень простой, без какого -либо ввода и с простым H1 в div выход.

Снимок экрана запечатлен с моего курса множества – React.js: Начиная

С левой стороны компонент написан в специальном синтаксисе JSX.

JSX позволяет нам описать наши пользовательские интерфейсы (UI) в синтаксисе, очень близком к HTML, к которому мы привыкли. Это, однако, необязательно. React можно использовать без JSX, как вы можете видеть справа На самом деле, React просто компилирует JSX, который вы видите слева до чистого JavaScript, который вы видите справа. Затем он работает с составленным JavaScript в браузере.

React.createElement Вызов на правой стороне является представлением JavaScript объекта документа ( dom ). Реактивно реагировать на операции DOM, которые он выполняет в браузере.

Давайте напишем компонент React.

Я буду использовать jscomplete’s React Playground Для примеров в этой статье. Это инструмент, где вы можете проверить свой JavaScript и реагировать код прямо в браузере. Нет необходимости устанавливать или настраивать что -либо.

Инструмент имеет простой интерфейс с двумя панелями. Левая панель – это редактор, в котором вы пишете свой JavaScript и React Code. Последняя версия React и Reactdom уже предварительно загружена. Редактор также понимает расширение JSX и все современные функции в JavaScript. Это позволит нам сосредоточиться на самой API React, а не настройке и составлении приложения React.

Правая панель – это панель предварительного просмотра. У вас предварительно определен MOUNTNODE Элемент в редакторе. Когда вы выполняете свой код JavaScript, все, что вы вкладываете в MOUNTNODE Элемент отображается на панели предварительного просмотра. Панель предварительного просмотра также покажет любые ошибки, с которыми вы сталкиваетесь при выполнении вашего кода. Игровая площадка также простой JavaScript Repl (Запустите, Eval, Print, Loop), где вы можете проверить быстрые функции и выражения JavaScript. Чтобы выполнить код в любое время нажмите Ctrl+Enter Анкет

Попробуйте следующее, например:

mountNode.innerHTML = 'Hello!!';

Или же Простой режим реплики

3 == '3'

Чтобы создать компонент React, определите новую функцию. Давайте сделаем эту функцию вернуть элемент кнопки HTML:

function Button() { 
  return ( 
    Go 
  );
}

То, что мы вернули здесь, выглядит как HTML, но помните, что это не так. Он будет составлен в JavaScript. Фактический JavaScript, который браузер видит, когда мы используем этот элемент кнопки в JSX, является вызовом React.createElement Функция:

function Button() { 
  return ( 
    React.createElement("button", null, "Go") 
  );
}

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

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

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

• Первый – это компонент для визуализации, в нашем случае это Кнопка Анкет
• Второй аргумент – это элемент, в котором этот компонент должен быть представлен. В среде реплики мы можем использовать специальное MOUNTNODE переменная.

ReactDOM.render(, mountNode);

Все примеры кода в этой статье имеют ссылку в подписи экрана, где вы можете редактировать пример на JSComplete Repl.

Компонент функции React получает в качестве первого аргумента реквизит объект. Этот аргумент позволяет нам сделать компонент повторным использованием. Например, вместо жесткого кодирования метки «Go» кнопки выше, мы можем передать Кнопка компонент a ярлык Атрибут, как мы делаем с регулярными элементами HTML:

ReactDOM.render(, mountNode);

Затем мы можем получить доступ к этому атрибуту внутри компонента с вьющимися кронштейном для props.label Анкет

function Button(props) { 
  return ( 
    {props.label} 
  );
}

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

Сделать компонент интерактивным

У нас есть элемент кнопки, и он отображается через компонент React.

Давайте теперь добавим некоторую интерактивность к этому скучному примеру. Давайте сделаем этот элемент кнопки увеличением значения счетчика на каждом нажатии и отобразим это значение как саму кнопку метку. Таким образом, метка этой кнопки начнется с номера 1, и когда пользователь нажимает кнопку, его метка изменится на 2, 3, 4 и так далее.

Поскольку это то, что нужно отражать в компоненте, отображаемом выводом, он принадлежит состоянию компонента. Нам нужен компонент для повторного рендеринга каждый раз, когда счетчик меняется. Мы не можем использовать свойство здесь, потому что реквизит компонентов не может быть изменен. Используя специальный объект состояния React, мы будем использовать React’s реактивный природа И нам не нужно будет беспокоиться о Как взять изменения в браузер. React сделает это для нас.

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

Это очень просто. Сначала мы определяем класс, который расширяется Реагировать. Составная часть

class Button extends React.Component { }

В этом классе мы определяем рендер функция, которая возвращает JSX компонента; кнопка HTML в нашем случае.

render() { 
  return ( 
    1 
  );
}

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

Чтобы использовать объект состояния, нам сначала нужно его инициализировать его. Объект состояния – это простое свойство экземпляра, поэтому мы можем инициализировать его внутри функции конструктора Кнопка учебный класс. Мы просто определяем нормальную функцию конструктора (которая получает объект супер Метод в честь наследства компонента.

constructor(props) { 
  super(props); 
  this.state = { counter: 1 };
 }

После этого мы инициализируем this.state к тому, что мы хотим. Ключи этого объекта состояния являются различные элементы государства. Для нашего случая нам нужен счетчик состояние, которое начинается с 1.

Внутри функции рендеринга, поскольку мы можем написать любое выражение JavaScript в кудрявых скобках, мы можем прочитать значение нового счетчик Установите элемент, который мы инициализировали в состоянии, используя this.state.counter Анкет

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

Ключевое слово « это » относится к экземпляру компонента, который мы передаем Reactdom Анкет

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

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

class Button extends React.Component { 
  state = { counter: 1 }; 
  render() { 
    return ( 
      {this.state.counter} 
    ); 
  }
}

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

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

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

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

function F() {}

В отличие от обработчиков событий DOM, которые используют строку, обработчики событий React используют фактическую функцию JavaScript. Эта функция может быть глобальной (например, f выше) или встроенная функция:

 {}} />

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

class Button extends React.Component { 
  state = { counter: 1 }; 

  handleClick = () => { 
    console.log('Button is clicked!!'); 
  }; 

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

Мы используем синтаксис современного поля класса, который позволяет нам использовать функции стрелки, которые связаны с экземпляром компонента. Handleclick Теперь будет действовать как прототип функция в этом классе. Внутри Handleclick Ключевое слово « Это » относится к экземпляру компонента, который мы устанавливаем в DOM.

Handleclick Работа проста: прочитайте текущее значение счетчика из объекта состояния, используя this.state.counter Анкет Затем увеличьте это значение и обновите состояние компонента с новым увеличенным значением.

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

Кнопка теперь увеличит свою метку на каждом клике.

Это было просто и мощно! Мы определили обработчик событий для Onclick метод Каждый раз, когда пользователь нажимает кнопку Handleclick функция будет выполнена. Функция считывает текущее состояние значения счетчика, увеличивает его, а затем устанавливает состояние на новое увеличенное значение. React позаботится обо всем, что необходимо, после этих изменений, поэтому вам не нужно беспокоиться об этом.

Обратите внимание, что мы не обновляли объект состояния напрямую. Мы должны использовать React’s Setstate Метод, когда мы хотим обновить любой элемент в состоянии. Вы не можете, например, сделать это:

// WRONG:
this.state.counter = this.state.counter + 1;

React’s SetState Метод является асинхронным, который планирует обновление. Несколько SetState Звонки потенциально могут быть отложены для производительности. Поскольку мы оба читаем и пишем в государственный объект внутри Handleclick Функция, мы могли бы достичь условия гонки. Общее правило, когда вам нужно обновить состояние, используя значение из текущего состояния, используйте другой договор SetState метод Это получает ссылку на функцию вместо объекта в качестве своего первого аргумента:

this.setState((prevState) => {});

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

this.setState((prevState) => ({
  counter: prevState.counter + 1 
}));

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

Вот последний код:

class Button extends React.Component {
  state = { counter: 1 };

  handleClick = () => {
    this.setState((prevState) => ({
      counter: prevState.counter + 1 
    }));
  };

  render() {
    return (
      
        {thi
        s.state.counter}
      
    );
  }
}

ReactDOM.render(, mountNode);

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

Обучение реагирует или узел? Оформить мои книги:

• Узнайте React.js, создавая игры
• Node.js за пределами оснований

Эта статья была первоначально опубликована здесь

Оригинал: “https://dev.to/samerbuna/how-to-write-your-first-reactjs-component-191i”