Category: Frontend

18
Сен
2020

При запуске проекта HOC не видится как функция

Прохожу обучение по react и столкнулся с проблемой уже перечитал вдоль и поперек документацию видос пересмотрел 5 раз не могу найти ошибку
Вот как выглядит HOC
function withAuthRedirect(Component) {
return class extends React.Component…

16
Сен
2020

22 сентября, онлайн: вебинар «Разработка библиотеки компонентов на React»

Бесплатный вебинар, на котором участники научатся разработке презентационных компонентов на React используя Storybook.
— Читать дальше «Вебинар «Разработка библиотеки компонентов на React + Storybook»»

15
Сен
2020

🌐 Кто такой Web Developer: гайд по профессии

Веб-разработка – популярная, но отнюдь не простая область IT. В этой статье детально рассмотрим профессию веб-разработчика и опишем путь от новичка до востребованного специалиста.

Для построения новостного сайта, браузерной игры или сервиса видеоконференций требуются разные компетенции, однако базовые технологии одни и те же. Данный материал подготовлен при поддержке факультета веб-разработки онлайн-университета GeekBrains, где происходит освоение соответствующих компетенций.

Базовые технологии

Веб-разработку разделяют на frontend и backend. Frontend отвечает за работу на стороне клиента, корректное отображение веб-страниц на разных типах устройств. Backend всё, что происходит на стороне сервера: вычисления, работа с базами данных, взаимодействие с другими сервисами.

Под Web Developer обычно понимают программиста, который умеет работать и на стороне клиента, и на стороне сервера. Универсального программиста, который может сделать проект с нуля, разбирается в базах данных, конфигурировании сервера, безопасности, называют Full Stack Web Developer. Более узких специалистов – Backend Web Developer и Frontend Web Developer.

Базовые технологии Frontend

HTML – язык разметки страниц, костяк веб-страницы. С помощью HTML мы подключаем JS-скрипты и CSS-стили и определяем элементы страницы: текст, заголовки, поля ввода информации, переключатели и кнопки.

CSS – язык описания стилей элементов, с помощью которого добиваются качественного отображения страницы.

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

Базовые технологии Backend

На стороне сервера может использоваться множество технологий и различных языков программирования. Рассмотрим самые востребованные из них.

PHP. 4500 вакансий по России. Самый популярный язык программирования на стороне сервера: 80% сайтов и сервисов в Интернете написаны на PHP. Язык обладает большим сообществом, огромным количеством готовых библиотек, фреймворков, учебных материалов и руководств. Если вы делаете первые шаги в профессии веб-разработчика, рекомендуем начать с PHP. Язык легок в освоении, используется не только в любительских, но и больших профессиональных проектах: Facebook, VK, Wikipedia, BlaBlaCar. Средняя зарплата 200 000 руб. (здесь и далее зарплаты указаны до вычета НДФЛ).

Java. 2200 вакансий по России. Популярный язык программирования, но с высоким порогом входа. Применяется в средних и крупных проектах. С помощью Java-фреймворка Spring создаются высокопроизводительные, масштабируемые и безопасные приложения. Средняя зарплата 250 000 руб.

Python. 1800 вакансий по России. Язык с низким порогом входа. Дружелюбное комьюнити и развитая документация, пошаговые руководства и видеоуроки позволят быстро прояснить любой вопрос. Наиболее зрелая и популярная технология – фреймворк Django. Python применяют в проектах любого размера, на нем частично написаны такие сервисы, как YouTube, Google Search, Instagram и Spotify. Средняя зарплата 160 000 руб.

Node.js. 1500 вакансий по России. Технология Node.js позволяет строить высоконагруженные, легко масштабируемые решения при помощи языка JavaScript. Если вы уже имеете опыт во фронтенд-разработке, то сможете быстро начать программировать на Node.js. Технологию применяют в проектах, где важна одновременная обработка большого количества запросов. Активно используется компаниями Paypal, Yahoo! и eBay. Средняя зарплата 205 000 руб.

ASP.NET. 1300 вакансий по России. Если вы уже знаете язык C#, то вам подойдет фреймворк ASP.NET. Свои преимущества фреймворк полностью раскрывает только при работе в инфраструктуре Microsoft. Технологию используют Starbucks и StackOverflow. Средняя зарплата 160 000 руб.

Язык/технология Зарплата, тыс. руб Количество вакансий (на 15.09.20) Популярность на GitHub (среди перечисленных технологий) Популярность на StackOverflow, %
PHP 200 4500 3 26.2
Java 250 2200 2 40.2
Python 160 1808 1 44.1
Node.JS 205 1456 4 24.5
ASP.NET 160 1314 5 18.7

Источник статистики по StackOverflow, источник статистики GitHub, статистика по вакансиям взята с hh.ru, статистика по зарплатам предоставлена компанией Hays

Общие технологии продвинутого уровня

Развертывание инфраструктуры

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

  • веб-сервер (например, Nginx или Apache);
  • серверная операционная система: веб-приложения редко работают на Windows или MacOS, отраслевым стандартом является Linux;
  • интерпретатор языка нужной версии – в зависимости от того, какие новые функции языка необходимо использовать или какую версию требует фреймворк;
  • база данных (например, MySQL или PostgreSQL).

Книги по теме:

Тестирование

В любой сколько-нибудь сложной системе появляются ошибки. Изменение в конфигурации и обновление ПО на сервере также может вызвать проблемы. Найти их и устранить помогает тестирование. Рекомендуем начать разбираться с юнит-тестирования, в котором для каждого нетривиального метода или функции пишется свой тест.

Книги по теме:

Наши статьи по теме:

Системы контроля версий

Сложное веб-приложение невозможно за приемлемое время написать одному человеку: для этого необходима команда специалистов, которые разделяют между собой обязанности и ведут распределенную кодовую базу. Для этого используются системы контроля версий, самой распространенной из которых является Git. Знание GIt гарантированно потребуется при трудоустройстве веб-девелопером.

Наши статьи по теме:

Пакетные менеджеры

Вокруг каждого языка программирования и фреймворка сформировалась инфраструктура: библиотеки, расширения, пакеты. Зачем писать собственный http-клиент, если существует хорошо отлаженный пакет с нужным функционалом? Так, в PHP используется composer, в Java – Gradle, в JavaScript и Node.Js – npm, в Python – pip.

Продвинутый Frontend

Представим, что вы изучили синтаксис выбранного языка и его основные концепции. Теперь нужно выбрать фреймворк – каркас приложения, который задает архитектурные правила и содержит основные части веб-приложения.

Frontend-фреймворки развиваются очень быстро, каждый месяц появляются новые фреймворки и библиотеки. Не нужно пытаться узнать все, достаточно выбрать одну из наиболее популярных технологий, например, React, Vue или Angular.

Фреймворк Количество вакансий Репозиториев на GitHub Популярность StackOverflow, % Уровень сложности Зависимостей в npm
React 4 280 73 458 35.9 ⭐⭐ 48 718
Angular 2 364 20 142 25.1 ⭐⭐⭐ 13 579
Vue 2 021 21 776 17.3 21 575

Источник статистики по StackOverflow, источник статистики GitHub, статистика по вакансиям взята с hh.ru

Продвинутый Backend

Backend-фреймворки менее разнообразны – обычно есть 1-2 лидера, которые занимают существенную часть рынка, а остальные либо узко специализированы, либо технологически отстают от лидеров. Для PHP такими фреймворками являются Symfony и Laravel, для Java – Spring и JSF, для Python – Django, Pyramid и Flask, для Node.JS – Express.JS, Meteor.JS и Koa.JS.

Ниже представлена сравнительная таблица оценки популярности PHP-фреймворков.

Фреймворк Установок через composer Зависимых проектов Популярность на GitHub Количество вакансий
Laravel 104 726 623 9 548 22 048 1 085
Symfony 52 561 771 3 971 23 880 819
Phalcon 29 504 2 10 232 47
CodeIgniter 773 857 65 18 071 52
Yii 10 393 997 11 540 217 890
CakePHP 6 027 870 1 649 8 234 10
Slim Framework 13 410 045 1 329 10 723 19
Lumen 535 795 53 6 900 45

Данные по количеству вакансий указаны по данным сервиса hh.ru, остальные данные взяты с сервиса packagist.org.

Продвинутый Web Developer: паттерны проектирования

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

Книги по паттернам:

Наши публикации о паттернах:

Практическое освоение технологий

Книги, документация и курсы дадут теорию, закрепить которую можно только с помощью практики. Приобрести навыки можно различными способами.

Домашние проекты

Самые простой способ получить реальный опыт – придумать и развить нужный самому себе проект. Отличным началом может стать собственный редактор заметок или список дел. Примеры идей и практическую пользу от их реализации мы рассматривали в статье о проектах выходного дня.

Ресурсы с задачами для программистов

Опыта проектной разработки от решения задачей вы не получите, однако глубже узнаете выбранный язык программирования и специфические алгоритмы, которые понадобятся в работе.

Присоединяйтесь к проектам на GitHub

Выберите интересный проект и вносите в него полезные правки, исправляйте ошибки, пишите дополнения к интересующим вас библиотекам или фреймворкам. Это поможет не только развить технические навыки, но и даст понимание практики командной разработки и знакомств в сфере IT. Активный аккаунт на GitHub выгодно выделит вас среди других кандидатов на роль веб-программиста. Вы всегда можете показать, в какие проекты вы отправляли код, и сами примеры кода.

Заключение

Веб-программирование – сложная, но интересная область. Безусловно, можно стать веб-разработчиком и своими силами, но есть и более легкие решения. Например, вы можете пройти курс факультета веб-разработки онлайн-университета GeekBrains. Информация в курсе хорошо структурирована, с вами будет работать личный наставник, а портфолио пополнится 4 актуальными проектами.

Вы узнаете, как профессионально верстать, используя HTML и CSS, научитесь программировать на JavaScript (в том числе используя React). На стороне сервера вы освоите PHP (Laravel) и Node.js (фреймворк Express). Не будут обойдены вниманием базы данных (MySQL) и операционная система Linux. Всё сразу в одном месте. Отличный вариант, чтобы стать настоящим веб-разработчиком за приемлемое время.

14
Сен
2020

17 сентября, онлайн: вебиран «Вебинар «Путь JS-разработчика»

Расскажут про задачи JS-разработчика, основные вопросы и задачи с собеседований и нужно ли знать алгоритмы.
— Читать дальше «Вебинар «Путь JS-разработчика, задачи и вопросы с собеседования»»

14
Сен
2020

Почему подписка на Web Push уведомления в Firefox сама пропадает через некоторое время? (Web Push API)

Не могу разобраться в чём дело, подскажите кто знает, пожалуйста.
В моём приложении я как положено регистрирую serviceWorker, получаю разрешение и оформляю подписку на пуш уведомления. Затем сохраняю подписку у себя в БД и собственно шлю т…

10
Сен
2020

19 сентября, онлайн: Meta/conf Frontend Meetup 2020

Спикеры расскажут о современных фреймворках, правилах проектирования, разработке и тестировании клиентской части веб-приложений.
— Читать дальше «Meta/conf Frontend Meetup»

08
Сен
2020

Как добавить введённые данные в списки при этом не удаляя данные введённые раньше?

Есть сайт в котором вводиться имя и фамилия. Как сделать так чтоб все введённые имена и фамилии отображались на экране.
import React,{Component} from ‘react’;
import ‘./App.css’;

class PersonInput extends React.Component {
constructor(p…

07
Сен
2020

Как вызвать перендер определенного компонента

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

04
Сен
2020

Не могу узнать общее количество элементов в массиве Vue js

Файл который берет данные из store из Vuex.
Когда я добавляю в корзину то считается только элементы которые отличаются, но при добавлении одинаковых просто не увеличиваются больше одного
<template>
<div class="v-catalog&quo…

03
Сен
2020

Как определить, что сайт запущен как PWA?

У сайта есть PWA версия (и TWA). И необходимо собственноручно рекомендовать к загрузке TWA версию из playmarket (разумеется только в том случае, если сайт уже не запущен через TWA). так вот никак не могу найти способ определения этого. Вер…

02
Сен
2020

15 сентября, онлайн: React Global Online Summit

Эксперты расскажут о технологиях разработки в React JS как для разработчиков Junior–Senior уровней, так и для архитекторов и СТО.
— Читать дальше «React Global Online Summit»

01
Сен
2020

Кастомные свойства в CSS. Часть 2: особенности применения

Во второй статье серии мы подробнеее рассмотрим наследование значений кастомных свойств.
— Читать дальше «Кастомные свойства в CSS. Часть 2: особенности применения»

01
Сен
2020

Кастомные свойства в CSS. Часть 1: что это такое и как работает

В первой статье из серии мы познакомимся с основами кастомных свойств, которых будет достаточно, чтобы начать с ними экспериментировать.
— Читать дальше «Кастомные свойства в CSS. Часть 1: что это такое и как работает»

31
Авг
2020

Как Vue.js обратиться к элементам внутри <li> при переборе через v-for?

Как обратиться к элементам и их свойствам внутри перебора v-for?
Перебираю в цикле данные и подставляю в разметку. Данные приходят все ок. Но нужно реализовать следующий сценарий:

имеется несколько li на одной странице, внутри каждой есть…

31
Авг
2020

12 сентября, Ростов-на-Дону: конференция RndTechConf 2020

Расскажут про развитие языков программирования, машинное обучение с JavaScript, переход от REST API к GraphQL и многом другом.
— Читать дальше «Конференция RndTechConf 2020»

28
Авг
2020

Как вставить заголовок popup окна в скрытое поле Contact Form 7?

Наверное, начну с того, что в программировании я понимаю чуть-чуть больше, чем ничего, поэтому прошу отнестись с пониманием и по возможности отвечать попроще)
В общем, делаю сайт на Wordpress + Elementor + Elementor Addon Elements, в котор…

26
Авг
2020

Помогите со сборкой GULP

возникла проблема-призрак, которая появилась просто ниоткуда.
В общем, спокойно живет себе моя сборка GULP, но при сохранении изменений в файле gulpfile.js, в папке dist появляется файл gulpfile.dev.js. Он повторяет логику кода обычного gu…

26
Авг
2020

🔢 Делаем калькулятор на React c хуками и Context API

Идея для проекта выходного дня – собираем калькулятор на React Hooks и Context API. Осваиваем эти интересные технологии в деле. Приводим пример возможной реализации проекта.

Не бывает лучше проекта в портфолио, чем тот, что можно оценить в действии. Через тернии – к звёздам! Показываем пример простого калькулятора на React с использованием современных технологий. Проект можно и нужно улучшать. Текущий результат
– кликабельная задеплоенная демка (код на GitHub). Ниже некоторые пояснения о выбранных решениях.

Внешний вид калькулятора
Внешний вид калькулятора

Приступим!

Для начала запустим стандартный create-react-app:

        npx create-react-app calculator
cd calculator
npm start
    

Файловая структура и CSS

Файловая структура рассматриваемого приложения выглядит следующим образом:

        src
├── App.js
├── index.js
└── components
    ├── BackButton.js
    ├── Calculator.js
    ├── ClearButton.js
    ├── Display.js
    ├── EqualButton.js
    ├── FunctionButton.js
    ├── NegativeButton.js
    ├── NumberButton.js
    ├── NumberProvider.js
    └── styles
        └── Styles.js
    

Если вы хотите точно
следовать примеру, нужно установить Styled Components для CSS:

        npm -i styled-components
    

Затем необходимо добавить Styled CSS в Styles.js.

Основная структура

Файл Calculator.js задает настройки экрана и клавиатуры.
Он содержит следующий код:

Calculator.js
        import React from 'react';
import NumberButton from './NumberButton';
import FunctionButton from './FunctionButton';
import ClearButton from './ClearButton';
import Display from './Display';
import EqualButton from './EqualButton';
import BackButton from './BackButton';
import NegativeButton from './NegativeButton';
import { CalculatorStyles } from './styles/Styles';

const Calculator = () => (
  <CalculatorStyles>
    <div className='display'>
      <h1>CALC-U-LATER</h1>
      <Display />
    </div>
    <div className='number-pad'>
      <ClearButton />
      <BackButton />
      <NegativeButton />
      <FunctionButton buttonValue='/' />
      <NumberButton buttonValue={7} />
      <NumberButton buttonValue={8} />
      <NumberButton buttonValue={9} />
      <FunctionButton buttonValue='*' />
      <NumberButton buttonValue={4} />
      <NumberButton buttonValue={5} />
      <NumberButton buttonValue={6} />
      <FunctionButton buttonValue='-' />
      <NumberButton buttonValue={1} />
      <NumberButton buttonValue={2} />
      <NumberButton buttonValue={3} />
      <FunctionButton buttonValue='+' />
      <div className='zero-button'>
        <NumberButton buttonValue={0} />
      </div>
      <NumberButton buttonValue='.' />
      <EqualButton />
    </div>
  </CalculatorStyles>
);

export default Calculator;
    

Каждый компонент кнопок следует одной базовой структуре. Нулевая кнопка лежит в отдельном div-блоке, так как мы используем для макета грид.

Кстати, о гридах
Если хотите узнать больше о CSS Grid, мы написали несколько статей на эту тему.

Обратите внимание, что свойство
buttonValue необходимо только для NumberButton и FunctionButton.

Создание Context API Provider

NumberProvider.js
это сердце приложения и место, где наши функции обретают жизнь. Здесь же используется
React Context API – отличный инструмент передачи данных между компонентами.

Чтобы передать данные или функции через вложенную структуру компонентов, пришлось
бы попотеть. Обертка из компонента провайдера
позволяет передавать данные в любой вложенный компонент независимо от глубины вложенности. Всякий раз, когда нужно получить данные или использовать функцию, находящуюся внутри провайдера, она будет доступна глобально.

Предварительная версия NumberProvider.js
        import React from 'react';

export const NumberContext = React.createContext();

const NumberProvider = (props) => {
  const number = '0';
  return (
    <NumberContext.Provider
      value={{
        number,
      }}>
      {props.children}
    </NumberContext.Provider>
  );
};

export default NumberProvider;
    

Любое переданное значение теперь доступно всем вложенным компонентам. Так что есть всё необходимое для заполнения App.js:

App.js
        import React from 'react';
import Calculator from './components/Calculator';
import NumberProvider from './components/NumberProvider';

const App = () => (
  <NumberProvider>
    <Calculator />
  </NumberProvider>
);

export default App;
    

Используем Context Provider

Теперь добавим код для дисплея. Можно выводить значение, передав его в функцию useContext из
нового React Hooks API. Больше не нужно передавать проп через вложенные компоненты.

Предварительная версия Display.js
        import React, { useContext } from 'react';
import { NumberContext } from './NumberProvider';
import { DisplayStyles } from './styles/Styles';

const Display = () => {
  const { number } = useContext(NumberContext);
  return (
    <DisplayStyles>
      <h2>{number}</h2>
      <p>Enter Some Numbers</p>
    </DisplayStyles>
  );
};

export default Display;
    

Число, которое передано
на три уровня выше в NumberProvider, становится сразу же доступным компоненту Display при вызове useContext и передаче созданного нами NumberContext. Цифровой
дисплей теперь включен, работает и отображает number, исходно приравненное нулю.

Начинаем работать с Hooks

Хуки позволяют «облегчить» синтаксис класса и получить
состояние внутри функциональных компонентов. Добавим следующий код в NumberProvider.js, чтобы создать хук:

NumberProvider.js
        import React, { useState } from 'react';

export const NumberContext = React.createContext();

const NumberProvider = (props) => {
  const [number, setNumber] = useState('');

  const handleSetDisplayValue = (num) => {
    if (!number.includes('.') || num !== '.') {
      setNumber(`${(number + num).replace(/^0+/, '')}`);
    }
  };

  return (
    <NumberContext.Provider
      value={{
        handleSetDisplayValue,
        number,
      }}>
      {props.children}
    </NumberContext.Provider>
  );
};

export default NumberProvider;
    

Вместо написания класса
с состоянием мы разбиваем состояние и переносим каждую его часть в переменную number. Здесь же используется setNumber, действующая, как функция setState. Для инициализации используется useState.

Создание компонента кнопки

Теперь мы можем вызвать функцию с помощью Context API в любом из вложенных компонентов.

NumberButton.js
        import React, { useContext } from 'react';
import { NumberContext } from './NumberProvider';

const NumberButton = ({ buttonValue }) => {
  const { handleSetDisplayValue } = useContext(NumberContext);
  return (
    <button type='button' onClick={() => handleSetDisplayValue(buttonValue)}>
      {buttonValue}
    </button>
  );
};

export default NumberButton;
    

Обратите внимание, как
можно начать вводить значения, заданные в NumberProvider, в другие компоненты
приложения с помощью функции useContext. Состояние и функции, влияющие на них,
хранятся в NumberProvider . Просто вызываем определенный контекст – и готово.

Функции провайдера

Завершенный NumberProvider.js находится ниже и содержит следующие функции, которые используются вместе с хуками:

  • handleSetDisplayValue: задает значение, выводимое на дисплей. Мы проверяем, что в числовой строке есть только один десятичный знак, и ограничиваем длину числа 8 символами. Он передает свойство buttonValue в NumberButton.js.
  • handleSetStoredValue: принимает строку и сохраняет ее, позволяя ввести другое число.
  • handleClearValue: сбрасывает всё в 0. Это «функция очистки», которая передается в ClearButton.js.
  • handleBackButton: позволяет удалять ранее введенные символы по одному, пока вы не вернетесь в 0. Код привязан к BackButton.js.
  • handleSetCalcFunction: срабатывает при выборе математической функции, передается в FunctionButton.js и в свойства buttonValue.
  • handleToggleNegative: оперирует отображаемыми или сохраненными значениями, передаваемыми в NegativeButton.js.
  • doMath: запускает выбранную математическую операцию.
NumberProvider.js
        import React, { useState } from 'react';

export const NumberContext = React.createContext();

const NumberProvider = (props) => {
  const [number, setNumber] = useState('');
  const [storedNumber, setStoredNumber] = useState('');
  const [functionType, setFunctionType] = useState('');

  const handleSetDisplayValue = (num) => {
    if ((!number.includes('.') || num !== '.') && number.length < 8) {
      setNumber(`${(number + num).replace(/^0+/, '')}`);
    }
  };

  const handleSetStoredValue = () => {
    setStoredNumber(number);
    setNumber('');
  };

  const handleClearValue = () => {
    setNumber('');
    setStoredNumber('');
    setFunctionType('');
  };

  const handleBackButton = () => {
    if (number !== '') {
      const deletedNumber = number.slice(0, number.length - 1);
      setNumber(deletedNumber);
    }
  };

  const handleSetCalcFunction = (type) => {
    if (number) {
      setFunctionType(type);
      handleSetStoredValue();
    }
    if (storedNumber) {
      setFunctionType(type);
    }
  };

  const handleToggleNegative = () => {
    if (number) {
      if (number > 0) {
        setNumber(`-${number}`);
      } else {
        const positiveNumber = number.slice(1);
        setNumber(positiveNumber);
      }
    } else if (storedNumber > 0) {
      setStoredNumber(`-${storedNumber}`);
    } else {
      const positiveNumber = storedNumber.slice(1);
      setStoredNumber(positiveNumber);
    }
  };

  const doMath = () => {
    if (number && storedNumber) {
      switch (functionType) {
        case '+':
          setStoredNumber(
            `${Math.round(`${(parseFloat(storedNumber) + parseFloat(number)) * 100}`) / 100}`
          );
          break;
        case '-':
          setStoredNumber(
            `${Math.round(`${(parseFloat(storedNumber) - parseFloat(number)) * 1000}`) / 1000}`
          );
          break;
        case '/':
          setStoredNumber(
            `${Math.round(`${(parseFloat(storedNumber) / parseFloat(number)) * 1000}`) / 1000}`
          );
          break;
        case '*':
          setStoredNumber(
            `${Math.round(`${parseFloat(storedNumber) * parseFloat(number) * 1000}`) / 1000}`
          );
          break;
        default:
          break;
      }
      setNumber('');
    }
  };

  return (
    <NumberContext.Provider
      value={{
        doMath,
        functionType,
        handleBackButton,
        handleClearValue,
        handleSetCalcFunction,
        handleSetDisplayValue,
        handleSetStoredValue,
        handleToggleNegative,
        number,
        storedNumber,
        setNumber,
      }}>
      {props.children}
    </NumberContext.Provider>
  );
};

export default NumberProvider;
    

Итоговое представление экрана

Обновим файл для отображения экрана. Он должен показывать number и storedNumber в соответствии с functionType. Еще есть несколько проверок, таких как отображение 0 при вставке пустой строки вместо числа.

Display.js
        import React, { useContext } from 'react';
import { NumberContext } from './NumberProvider';
import { DisplayStyles } from './styles/Styles';

const Display = () => {
  const { number, storedNumber, functionType } = useContext(NumberContext);
  return (
    <DisplayStyles>
      <h2>{!number.length && !storedNumber ? '0' : number || storedNumber}</h2>
      <p>{!storedNumber ? 'ENTER SOME NUMBERS' : `${storedNumber} ${functionType} ${number}`}</p>
    </DisplayStyles>
  );
};

export default Display;
    

Заключение

Библиотека программиста
надеется, что данный материал немного прояснит вопрос о том, как можно
использовать хуки React вместе с Context API. Использование встроенных функций
React дает ряд преимуществ:

  • простой для понимания синтаксис и отсутствие беспорядка в компонентах класса. Больше никаких super и constructor – просто чистые переменные;
  • проще устанавливать и использовать состояние внутри компонентов и между ними;
  • нет необходимости в Redux для небольших проектов.

React Hooks и Context API – отличные
способы упростить приложения React и писать более чистый код. О других технологиях React читайте в нашем руководстве для React-разработчика.

23
Авг
2020

Пример MVC и MVVC в Angular2+

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

21
Авг
2020

Что в привденном коде приводит к результату на картинке? (думал-думал, не догадался)

Вдруг сразу напротив даты затесался какой-то кусок непонятно от чего вместо названия учредителя. Дублируются доля и доля(руб)
<div class="item">
<?php foreach ($value1[delete] as $ke…

15
Авг
2020

Ошибка Validation failed for object=’schedule’. Error count: 5 Не могу отправить объект с полями объектами

Всем привет, не получается отправить записать данные из формы в базу данных.
Вот класс сущности которую я хочу записать в бд.
@Entity
@Table(name = "schedule_table")
public class Schedule {
@Id
@GeneratedValue(strateg…