Публикации по теме 'react'
Список дел в React
Здравствуйте, дорогие разработчики, в этом блоге мы создадим простое приложение для списка дел в React. Начнем с создания реактивного проекта.
npx create-react-app to-do-list
Позвольте мне сначала показать структуру папок.
//todolist.js
import './ToDoList.css'
import { useState } from 'react'
const ToDoList = () => {
const [task, setTask] = useState();
const [taskArray, setTaskArray] = useState([]);
const addItem = () => {
if (!task) {..
Преимущества создания пользовательских контекстных перехватчиков для потребления
Почему вам следует создать крючок для использования контекста
В React у нас есть потрясающий способ передавать реквизиты и функции установки глубоко вложенным дочерним компонентам, не передавая их по отдельности в последующих компонентах. Мы делаем это, используя концепцию Provider-Context.
Вот как это работает:
Так в чем же проблема?
Предположим, нам нужно использовать один и тот же контекст в нескольких компонентах. Вот как будут выглядеть наши компоненты.
Вы..
Основы React Simplified: введение для профессионалов, не работающих с фронтендом
Введение: React быстро стал одним из самых популярных фреймворков для создания динамических веб-приложений. Однако профессионалам, не работающим с фронтендом, которые плохо знакомы с веб-разработкой, концепции и терминология, связанные с React, могут показаться ошеломляющими. Не бойся! В этой статье мы упростим основы React и объясним его основные концепции доступным и понятным способом, независимо от вашего опыта. К концу у вас будет прочная основа в React, и вы будете готовы начать свой..
Ускоренный курс React — Развертывание в Netlify
Часть 12. Подготовка приложения React к развертыванию на Netlify
Прямые заметки разработчиков, сделанные на протяжении следующего урока Денниса Айви — Ускоренный курс React JS
В заключительной части этой серии ускоренных курсов мы рассмотрим создание нашего приложения React, чтобы оно было готово к развертыванию. В процессе мы рассмотрим тестирование сборки, а также способы развертывания в Netlify и обработку ошибок, которые могут возникнуть.
Создание нашего React-приложения..
Создание бесконечных списков виртуальной прокрутки | Угловая прокрутка CDK | Угловая производительность
Лучший и динамический способ отрисовки длинных списков элементов в DOM
Когда мы работаем с большим списком данных, обработка этих данных в DOM всегда является проблемой с точки зрения эффективности и производительности. Когда мы пытаемся загрузить эти данные в DOM, он создает узлы в DOM с размером данных и начинает раздувать нашу DOM и страницу с длинным списком данных.
Пример-
if data is an array [] with length 100
<div class="example-viewport">
<div *ngFor="let..
Как научиться React # 10: раскрыть всю мощь компонентных свойств
Здравствуйте и добро пожаловать в еще одну историю, которая поможет вам понять, что такое React и как вы можете использовать его для создания красивых веб-приложений. В предыдущей главе мы провели некоторый рефакторинг и описали, что такое компонент props . В этом разделе мы воспользуемся ими, чтобы добавить в приложение функцию удаления.
Пока наше приложение предоставляет пользователю возможность добавлять блюда в список, но он не может их удалить. Представьте, что наш..
Пользовательский хук React: useStorage
В этой серии статей мы отправляемся в путешествие по сфере пользовательских хуков React, открывая их огромный потенциал для улучшения ваших проектов разработки. Сегодня мы сосредоточимся на хуке «useStorage», одном из многих тщательно созданных хуков, доступных в коллекции пользовательских хуков React.
Github: https://github.com/sergeyleschev/react-custom-hooks
import { useCallback, useState, useEffect } from "react"
export function useLocalStorage(key, defaultValue) {..
