React

Как импортировать CSV-файл с помощью React

В этом руководстве мы узнаем, как импортировать любой CSV-файл, полученный от пользователя, с помощью React. Наше приложение будет состоять из двух частей. Мы создадим форму, чтобы пользователь мог выбрать файл. Затем мы выполним несколько операций с Javascript, чтобы иметь возможность просматривать этот CSV-файл. Давайте начнем с нашего примера. Пример Сначала создадим форму в React, чтобы …

Как импортировать CSV-файл с помощью React Читать полностью »

Готовый к производству React

Прагматичное руководство по созданию поддерживаемых компонентов React на базе GraphQL. Написание производительных, тестируемых и читаемых компонентов React можно считать искусством, но я надеюсь убедить вас, что этого можно достичь с помощью простого набора инструментов 🔧 , нескольких рецептов 🧾 , и нескольких примеров 🧪 . Начало работы с GraphQL Один из распространенных подходов и подводных …

Готовый к производству React Читать полностью »

Развертывание проектов React на AWS Elastic Beanstalk с помощью CI/CD AWS CodePipeline (часть 1)

Введение AWS предлагает широкий спектр облачных услуг по требованию. Это может быть очень пугающим для новичков, которые впервые сталкиваются с облачными сервисами развертывания, и для тех, кто не знаком с инфраструктурой AWS. Именно здесь на помощь приходит AWS Elastic Beanstalk. AWS Elastic Beanstalk — это сервис, позволяющий быстро развертывать приложения в облаке AWS, не заботясь …

Развертывание проектов React на AWS Elastic Beanstalk с помощью CI/CD AWS CodePipeline (часть 1) Читать полностью »

React — Не обновляйте состояние родителя на этапе рендеринга дочернего элемента

TLDR;Не обновляйте состояние родительского компонента на этапе рендеринга дочернего компонента Длинная история Мысленно представьте себе абстрактное дерево React: <WebSite> <LoadingSpinner /> <PageContent> <A> <ASub> <ASubSub> <LoadingTriggerA /> </ASubSub> </ASub> </A> <B> <BSub> <BSubSub> <LoadingTriggerB /> </BSubSub> </BSub> </B> </PageContent> </WebSite> Вход в полноэкранный режим Выход из полноэкранного режима Цель состоит в том, чтобы рендерить один …

React — Не обновляйте состояние родителя на этапе рендеринга дочернего элемента Читать полностью »

Развертывание проектов React на AWS Elastic Beanstalk с помощью CI/CD AWS CodePipeline (часть 2)

Введение В первой части мы создали приложение React и загрузили его в GitHub Repo. Мы также создали приложение Elastic Beanstalk. Теперь мы продолжим начатое и создадим конвейер непрерывной интеграции/непрерывного развертывания с помощью CodePipeline. Создайте конвейер Введите ‘codepipeline’ в строке поиска. Выберите CodePipeline: Затем нажмите кнопку Создать конвейер: Введите имя для вашего трубопровода. Оставьте все остальное …

Развертывание проектов React на AWS Elastic Beanstalk с помощью CI/CD AWS CodePipeline (часть 2) Читать полностью »

Краткое руководство по использованию или контекста (глобального состояния) в react

Прежде чем использовать глобальное состояние, убедитесь, что это состояние будет использоваться большей частью вашего приложения. Например, если это всего лишь 2 компонента, вы захотите использовать состояние на уровне родительского компонента. Затем передайте его дочернему компоненту в качестве реквизита. Если вы обнаружите, что создаете избыточные состояния, это хороший знак, что вам следует использовать глобальное состояние. Первое, …

Краткое руководство по использованию или контекста (глобального состояния) в react Читать полностью »

Создание легких аккордеонов React

Я создал очень простой компонент аккордеонов под названием accordionify для react, который можно использовать для создания складных секций. Вы можете посмотреть демонстрацию здесь Установите Accordionify — легкий компонент аккордеонов React Если вы используете npm, просто запустите: npm i accordionify Войти в полноэкранный режим Выйти из полноэкранного режима а если вы используете yarn, запустите: yarn add …

Создание легких аккордеонов React Читать полностью »

Как выполнить запрос на удаление в react

Перед началом работы убедитесь, что ваш бэкенд настроен правильно. То есть в ваших маршрутах есть маршрут destroy, а в контроллере — метод. Создайте функцию, которая каждый раз при запуске получает и удаляет объект, который вы хотите удалить. В моем случае я назвал ее deletePost с параметрами postId. Таким образом, она будет соответствовать любому маршруту, который …

Как выполнить запрос на удаление в react Читать полностью »

Как сделать самоуправляемую кнопку в react

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

Как сделать самоуправляемую кнопку в react Читать полностью »

Обработчики onClick с помощью Currying (React)

Как передать функцию с аргументом в событие onClick в React? Вы, наверное, все знакомы с тем, что при передаче функции, принимающей аргумент, в событие onClick (или любое другое событие), необходимо обернуть ее анонимной функцией обратного вызова. Например: <button onClick = { () => myFunction(argument) } /> Вход в полноэкранный режим Выход из полноэкранного режима Мы …

Обработчики onClick с помощью Currying (React) Читать полностью »

ReactJS с Redux Thunk

Установка и настройка Сначала создайте проект React с помощью create-react-app: npx create-react-app react-with-redux-thunk Войдите в полноэкранный режим Выйдите из полноэкранного режима Если create-react-app версии < 5.0.0: npx create-react-app@latest react-with-redux-thunk Войдите в полноэкранный режим Выход из полноэкранного режима Или npx create-react-app@5.0.0 react-with-redux-thunk Войти в полноэкранный режим Выйти из полноэкранного режима Если вы используете базовый API Redux …

ReactJS с Redux Thunk Читать полностью »

React Context для начинающих

React context — это важный инструмент, который должен знать каждый разработчик React. С его помощью мы легко обмениваемся состоянием в наших приложениях. В этом исчерпывающем руководстве я расскажу, что такое контекст React, как его использовать, когда и когда не стоит использовать контекст, и многое другое. Здесь вы узнаете все, что вам нужно знать, на простых, …

React Context для начинающих Читать полностью »

Основы React!

💭 Что такое React? Библиотека пользовательского интерфейса, разработанная компанией Facebook создает интерактивные компоненты с возможностью изменения состояния и многократного использования использует виртуальный DOM пример: Instagram .com полностью написан на React ✨ Особенности React? он создает быстрые и отзывчивые приложения использует виртуальный DOM Выполняет рендеринг на стороне сервера Односторонний поток данных*Открытый источник 😌 Почему стоит использовать …

Основы React! Читать полностью »

Пользовательский хук для валидации полей в React.js

Мы собираемся создать проект с нуля в react, где мы создадим наш пользовательский хук. Вот исходный код: В нашем файле app.js у нас будет следующий код. import «./styles.css»; export default function App() { const submit = () => { console.log(«sending») }; return ( <div className=»App»> <h1>Custom hook</h1> <div> <input type=»text» name=»name» id=»name» /> </div> <button …

Пользовательский хук для валидации полей в React.js Читать полностью »

Основные концепции React.js

React.js и его плюсы и минусы React — это декларативная, основанная на компонентах библиотека JavaScript для построения пользовательских интерфейсов.Плюсы: Использование виртуального DOM для эффективного рендеринга пользовательских интерфейсов. Поддерживает компонентный дизайн, который является многоразовым и простым в управлении. Одностраничное приложение означает эффективное отображение различных компонентов на одной странице без перезагрузки. Это улучшает пользовательский опыт. HTML-подобный синтаксис …

Основные концепции React.js Читать полностью »

Решение проблем с React: Когда использовать UseMemo

Я всегда вижу этот вопрос, и по некоторым причинам бывает трудно найти на него вескую причину. Я могу себе представить, что если вы работаете с фреймворком Angular, то найти похожую концепцию или пример может быть проблематично. Хотя, если вы из Vue.js, может быть проще понять, если вы сравните userMemo с вычисляемым значением. React.js и Vue.js …

Решение проблем с React: Когда использовать UseMemo Читать полностью »