Условный рендеринг в React: if, тернарный оператор, && и баг с нулем (Эпизод 6)

Условный рендеринг в React для начинающих, как это необходимо в эпоху ИИ. Список пуст, код говорит: «Показывать только если есть уроки», и страница выводит одинокий 0, который никто не писал, без каких-либо ошибок. В этом эпизоде ​​мы изучим три способа отображения или скрытия элементов в React, выясним, откуда именно берется этот ноль, исправим его тремя способами, а затем попросим Клода написать тот же код и проверить, попадает ли он в эту ловушку. Это 6-й эпизод курса «React в эпоху ИИ», полный курс по React с нуля. В этом эпизоде: ✅ Что означает условный рендеринг (знак «распродано» в меню) ✅ Почему нельзя писать if внутри JSX: «Неожиданный токен» ✅ Ранний возврат и возврат null для отображения пустого значения ✅ Тернарный оператор: if и else в одной строке и для имен классов ✅ Почему вложенные тернарные операторы вредны и как назвать ваше условие ✅ Оператор && и почему он выводит 0 на страницу ✅ Что React на самом деле отображает для true, false, null, undefined, пустого текста, 0 и NaN ✅ Три реальных решения проблемы с нулевым значением и почему каждому списку необходимо пустое состояние ✅ Спрашивай, читай, проверяй: реальный ответ Клода, который избегает ловушки, протестирован с пустыми списками и нулевым значением, и единственный способ его копирования — сломать вашу страницу Все ошибки и ответы ИИ в этом видео реальны: Node.js 24.22.1, Vite 8.3.5, React 19.3.1. Вам нужны только эпизоды с 1 по 5. ⏱️ Главы 0:00 Начало: одинокий ноль 0:54 Добро пожаловать обратно 1:56 Что означает условный рендеринг 3:03 Условия повсюду в коде ИИ 3:57 Почему if не работает внутри JSX 5:18 if перед return 6:29 return null: вообще ничего не показывать 7:14 Тернарный оператор: if и else в одной строке 8:32 Тернарный оператор для имени класса 9:18 Тернарные операторы внутри тернарных операторов 9:58 Дайте условию имя 10:44 Оператор AND 11:52 Появляется ноль 12:40 Почему React выводит ноль 13:25 Что React показывает для каждого значения 14:42 Где ноль скрывается в реальных приложениях 15:27 Исправление первое: сравнение с нулем 16:13 Исправление второе: тернарный оператор с сообщением 16:58 Исправление третье: an досрочное возвращение 17:32 Выбор правильного инструмента 18:17 Всегда проверяйте пустой случай 19:03 Условные правила на одной карточке 19:41 Спросите: реальная подсказка 20:38 Прочитайте: уроки 21:03 Прочитайте: новая строка тем 21:56 Прочитайте: часть для просмотра 22:38 Проверка 1: работает ли это? 22:56 Проверка 2: пустые уроки 23:08 Проверка 3: один, два и ноль 23:38 Проверка 4: скопируйте и вставьте точно 24:28 Что мы узнали от ИИ 24:54 Ваше мини-задание 25:23 Следующий эпизод ▶️ Предыдущий эпизод: Списки и ключи ▶️ Следующий эпизод: События 🧩 Ваше задание Откройте Reviews.jsx, тот, который вы превратили в массив в прошлом задании. Когда массив отзывов пуст, вместо пустой сетки отобразите сообщение «Отзывов пока нет». Над отзывами отобразите небольшую строку с количеством отзывов, например, «3 отзыва», но только если их хотя бы один. Проверьте это с пустым массивом и убедитесь, что на странице нет нуля. Опубликуйте свой файл Reviews.jsx в комментариях 👇 #react #reactjs #reacttutorial