Условный рендеринг в React

год назад·2 мин. на чтение

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

Что такое условный рендеринг?

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

Условные выражения if/else

Давайте рассмотрим условные выражения if/else в JavaScript.
let num = 2

if (num === 2) {
    console.log('the given number is 2')
} else {
    console.log('the give number is not 2')
}
В приведенном выше коде мы инициализировали переменную значением 2, а затем использовали условие if/else для логирования сообщения на основе предоставленного числа. Давайте реализуем условие if/else в ReactJs.
function App(props) {
   if (props.num === 2) {
       return <p>The given number is 2</p>
   } else {
       return <p>The given number is not  2</p>
   }
}

<App  num={2} />
В компонент App мы передали 2 в проп num.

Тернарный оператор

Мы можем сделать код компонента приложения короче с помощью тернарного оператора.
function App(props){
  return  (
    {props.num === 2
      ? <p>The given number is 2</p>
      : <p>The given number is not 2</p>
    }
  )
}

<App num={2} />
Здесь мы обернули наш код фигурными скобками, потому что в JSX нам нужно использовать фигурные скобки для выражений JavaScript.

Логический оператор && (и)

В JavaScript логический оператор && используется для вычисления выражения, если данное условие истинно.
true && expression // => expression

false && expression // => false
Использование логического оператора “и” (&&) в React.
function Search(props) {
  return (
    <div>
      <h1>Search</h1>
      <button>Search</button>

      {props.searchResults > 0 && <ul>search results</ul>}
    </div>
  )
}
В компоненте Search мы использовали оператор && для рендеринга элемента ul только в том случае, если props.results больше 0.

Полное руководство по React

год назад·3 мин. на чтение

Это руководство поможет плавно войти в Реакт разработку и понять как использовать react.

Мы начнем с самых базовых концепций. Рассмотрим различные варианты добавления ReactJS на сайт и создания React проекта. Создадим первые компоненты и шаг за шагом будем подробно рассматривать все части компонента - JSX, события, стили, хуки и т.д. Данный react туториал на русском разделен на удобные части, каждая из которых включает подробное объяснение и простые примеры. Этот гайд подойдет и для начинающих react разработчиков. Также весь API собран в удобный справочник, в котором можно найти подробное объяснение конкретных функций React.

Установка

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

Интерфейс пользователя

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

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

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

Управление состоянием

Данная часть react js руководства включает подробное объяснение работы с состоянием. По мере роста вашего React приложения полезно более внимательно относиться к тому, как организовано состояние и как данные передаются между вашими компонентами. Избыточное или повторяющееся состояние является распространенным источником ошибок. В этой части вы узнаете, как правильно структурировать состояние, как поддерживать логику обновления состояния и как обмениваться состоянием между компонентами.

Продвинутые темы

Некоторым из ваших компонентов может потребоваться управление и синхронизация с системами вне React. Например, вам может потребоваться сфокусировать ввод с помощью API браузера, воспроизвести и приостановить видеопроигрыватель, реализованный без React, или подключиться и прослушать сообщения с удаленного сервера. В этой части курса по Реакт вы узнаете о лозейках, позволяющих «выйти за пределы» React и подключиться к внешним системам. Большая часть логики вашего приложения и потока данных не должны полагаться на эти функции.
  • Доступ к данным через рефы
  • Управление DOM с помощью рефов
  • Синхронизация с помощью эффектов
  • Вам может не понадобиться эффект
  • Жизненный цикл реактивных эффектов
  • Отделение событий от эффектов
  • Удаление лишних зависимостей эффектов
  • Переиспользование логики с кастомными хуками