ТОП языко программирования в 2020 году

ТОП языков программирования в 2020 году

РубрикиНовости IT
47

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

Stack Overflow

Согласно статистике опросов Stack Overflow по мнению профессиональных разработчиков в 2020 году среди наиболее популярных технологий лидирует JavaScript. Этот язык своей простотой, скоростью обучения, легкостью написания сайтов и веб-приложений, уже давно захватил огромный кусок рынка IT технологий.

HTML/CSS не теряет своей популярности и по сей день, при том что они не являются языками программирования в чистом виде и относятся к веб технологиям, на основе которых стоит весь веб. Все веб страницы, которые вы любите посещать, написаны с их использованием.

Как видно из статистики, SQL находится на третьем месте. Этот язык всегда в тренде,  поскольку является де-факто декларативным языком программирования для работы с реляционными базами данных.
Из универсальных языков, на которых можно разрабатывать всевозможные приложения, лидирует Python, за ним сразу Java и С#, PHP. Python очень дружелюбен, особенно для начиняющих изучать программирование. Он считается наиболее простым для освоения и написания кода, имеет великолепный фреймворк Django для разработки веб-приложений.

TypeScript — язык программирования, который с каждым годом становится все популярнее благодаря предоставлению типизации поверх JavaScript, на данный момент он находится на 8 месте в списке Stack Overflow (25.4%), тем самым практически догоняет PHP (26.2%), не менее известный язык программирования, используемый в основном для разработки серверной части веб-приложений и сайтов.

GitHub

Крупнейший веб-сервис для хостинга IT-проектов. Огромное количество кода, open-source, написанного разработчиками со всего мира вы сможете найти тут. Благодаря открытому api сервис предоставляет статистику по публикуемым репозиториям, что позволяет объективно оценить популярность языков программирования.

Как и в Stack Overflow первое место в списке GitHub занимает JavaScript (18.78%), далее Python(16.1%) и тройку лидеров закрывает Java (10.73%). 

На сервисе GitHub языки программирования Go(8.92%) и Ruby(6.49%) также выделяются как наиболее распространенные. TypeScript (7.3%) находится на шестом месте, при этом у него самый большой рост за последний год (+1.9%).

TIOBE

TIOBE — индекс популярности языков программирования, основанный на подсчете поисковых запросов в Google, Blogger, Wikipedia, YouTube, Baidu, Yahoo!, Bing, Amazon. 

Посмотрим на статистику:

В 2020 году рейтинг языка программирования С составляет 16.45%, что позволяет ему выйти на лидирующую позицию среди поисковых интернет запросов. В списке TIOBE мы видим явные отличия от предыдущих источников. Здесь Java является более запрашиваемым языком по сравнению с Python, С++, C#, а JavaScript находится на 7 строчке и имеет всего 2.48% в рейтинге. И, что удивительно, из данной статистики видно, что Visual Basic более популярен, чем JavaScript. 

Дело в том, что все данные в этом рейтинге (как правило) основаны на мнении людей, которые только начинают изучать технологии (самообразование, школы, университеты и другие учебные заведения). C и Visual Basic — те языки программирования, которые всегда можно встретить на академических курсах, и все начальное образование в сфере IT стандартно начинается с изучения этих языков, что соответсвует такой бешеной популярности в интернет запросах.

PYPL индекс

Последний источник, который мы рассмотрим, будет PYPL индекс. Он отражает статистику популярности запросов в Google Trends. На первом месте мы видим Python (31.73%), прибавивший 3.9% в сравнении с предыдущим годом. Второе место занимает Java (17.13%), за последнее время потерявший популярность в трендах на 2.7%. Третье место отдано JavaScript (7.98%). С# (6.67%) тут популярнее чем C++ (5.93%). PHP (5.64%) на 6 месте в списке.

Сравнение данных

Изучив статистику нескольких популярных источников, можно выделить ТОП10 самых популярных языков программирования. Данный список составлен на основе сугубо субъективного мнения автора и не является истиной в последней инстанции. Некоторые пункты в ТОПе языков были присвоены автором на основе личного опыта работы в IТ сфере.

Топ 10 языков программирования в 2020 году:

1. JavaScript/ NodeJS

2. Python

3. Java

4. C#

5. TypeScript

6. C++

7. PHP 

8. C

9. Go

10. Kotlin

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

Надеюсь, что данная статья была вам полезна. Будьте профессионалом, учитесь и достигайте вершин. Удачного кодинга, друзья!

Полезные материалы:

https://insights.stackoverflow.com/survey/2020#most-popular-technologies

https://madnight.github.io/githut/#/pull_requests/2020/2

http://pypl.github.io/PYPL.html

https://www.tiobe.com/tiobe-index/

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

0
Учимся кодить на JavaScript. Типы данных

Учимся кодить на JavaScript. Типы данных.

50

Доброго времени суток, друзья. На сколько хорошо вы знаете JavaScript? Может вы опытный разработчик? Или только начинаете свою карьеру? В любом случае, без хорошего знания теоретических основ языка нельзя стать профессионалом, писать высококачественный и надежный код. В данной серии статей я хочу разобрать самые базовые основы языка и сегодня мы рассмотрим на примерах типы данных, которые имеются в JavaScript.

Видео на эту тему.

О типах в JS

В JavaScript одной переменной можно присвоить значение разных типов.

Пример:


let text = 999;
text = "data";

Дело в том, что данный язык является «динамически типизированным» (или еще называют «слабо типизированным» ) языком программирования. Т.е. переменные не привязаны к типу данных и могут быть изменены в ходе выполнения программы.  Таким образом происходит автоматическое определение типов.

На текущий момент (2020 год) существует 8 основных типов данных. Они делятся на две категории: (1) примитивные и (2) объекты. «Примитивными» называют типы, значения которых могут быть только простыми. К ним относятся:

—   number (Числа)bigInt (Большие числа)

— string (Строки)

— boolean (Булевый тип)

— undefined (Неопределенный тип)

— null

— Symbol

«Объекты» предназначены для хранения коллекций, а также для создания новых структур данных. Давайте подробно разберем каждый из этих типов.

Number

Числовой тип в JavaScript могут иметь как целочисленные так и дробные значения. Этот тип хранится в 64-битном формате IEEE-754.

Пример:


let a = 10
let b = 1.2

Для работы с числами возможно использовать стандартные математические операции, например, сложение (+), вычитание (-), деление (/), умножение (*).

Пример:


let a = 10 + 2
let b = 20 - a

Число можно записывать в двоичном, восьмеричном и шестнадцатеричном формате.

Пример:


0b100101100 // 300 в двоичной 
0o454 // 300 в восьмеричной
0x12c // 300 в шестнадцатеричной

JavaScript имеет несколько функций для округления чисел. Посмотрим на каждую из них:

Math.round — округляет до ближайшего целого

Math.ceil — округляет в большую сторону

Math.floor — округляет  в меньшую сторону

Чтобы получить самое большое или самое маленькое значение типа number можно воспользоваться объектом Number и вызвать у него свойства MAX_VALUE и MIN_VALUE.

Пример:


Number.MAX_VALUE
// 1.7976931348623157e+308
Number.MIN_VALUE
// 5e-324

Часто на собеседованиях задают такой вопрос: 0.1 + 0.2 == 0.3 

Будет ли данное сравнение истинным? Нет


0.1 + 0.2 == 0.3 // false

Если сложить 0.1 и 0.2, мы получим погрешность: 0.1 + 0.2 = 0.30000000000000004

Дело в том, что во время вычислений происходит потеря точности в момент деления чисел при получении значений 0.1 и 0.3. Данной проблемой в погрешности при вычислении чисел с плавающей запятой страдают все языки, поддерживающие формат IEEE-754 (Java, C,  Ruby, Perl, PHP).

BigInt

Большие числа в JavaScript появились совсем недавно. Обычный тип number не может использовать число большее, чем 2 в 53 (-2 в 53). Этот тип используется для работы со значениями, превышающими длину 16 цифр. Пример использования bigInt вы сможете найти в этой статье.

String

Строковой тип предназначен для работы с текстовыми данными.  Для его обозначения используются кавычки. В JavaScript имеется несколько типов кавычек:

» » — двойные

‘ ‘ — одинарные

` ` — обратные.

Обратные кавычки предназначены для добавления выражении в строку. Для этого достаточно добавить изменяемое значение в такую запись ${}

Пример:


let hi = `Hello ${name}!`

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

Пример:


let str = "Text"

Строка состоит из ряда элементов, которые имеют свои индексы. Первым индексом является 0. 

Пример:


let str = "Text"
str[0] // T

Используя метод length можно получить длину строки, которая будет равна количеству элементов строки.

Пример:


str.length // 4

Для получения последнего символа в строке нужно вычесть 1 из длины строки.

Пример:


let str = "Text!"
str[str.length - 1] // !

Имеется возможность переносить текст на новую строку, для чего достаточно добавить спецсимвол \n в месте, где нужно произвести перенос.

Пример:


let text = "Hello \n Mary"
// Hello 
// Mary

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

Строка является иммутабельным типом. Если попытаться изменить одну букву, то исходная строка не поменяется.

Пример:


let text = "Text"
text[0] = "A" // error

Для изменения значения строки следует полностью переопределить переменную.

Пример:


let text = "Text"
text = "Text2"

Изменение регистров в строках. Для этого в JavaScript имеется два метода. Для перевода в верхний регистр toUpperCase и toLowerCase для перевода в нижний, соответственно.

Пример:


"Text".toUpperCase() // TEXT
"Text".toLowerCase() // text

На этом мы закончим. Данный тип имеет большое количество методов, которые будет рассмотрены в отдельной статье. Перейдем к другим нашим типам.

Boolean

Булевый ( Логический ) тип. Данный тип появился благодаря Булевой алгебре. Он имеет всего два значения:

true — истина, да

false — ложь, нет

Данный тип может быть как результатом сравнения, так и просто значением переменной.

Пример:


1 > 10 // false
let isPosition = true

undefined

Это специальное значение, обозначающее не присвоенное значение переменной.

Пример:


let a
console.log(a) // undefined

Можно присвоить значение переменной undefined, но не следует этого делать, т.к. JavaScript сделает это за нас.

null

Это специальный тип имеющий только одно значение и записывается литералом null. Данное значение обозначает отсутствие какого-либо значения, «значение неизвестно».

Можно явно указать, что значение переменной неизвестно.

Пример:


let foo = null

Symbol

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

Пример:


let uid = Symbol("uid")

При сравнении символов не происходит сравнение их описаний. Они всегда будут полностью уникальны.  Данный параметр больше нужен при дебаге кода.

Пример:


let uid = Symbol("uid")
let uid2 = Symbol("uid")
uid == uid2 // false

Object

Объект не относится к «примитивным» типам данных и предназначен для хранения более сложных коллекций и сущностей. JavaScript имеет два способа создания нового объекта: 

(1) Через конструктор

Пример:


let obj = new Object({ name: "Test" })

(2) Через литерал с использование фигурных скобок {}

Пример:


let obj = {
	name: "Test"
}

Объекты имеют свойства, которые обозначаются терминологией «ключ» и «значение».

В примере выше мы создали новый объект, содержащий свойства с ключом «name» и значением «Test».

Для получения значения свойства объекта нужно обратится к нему «через точку».

Пример:


console.log(obj.name) // "Test"

Чтобы переопределить свойство объекта или добавить новое, достаточно присвоить ему новое значение.

Пример:


let obj = {
	name: "Test"
}
obj.name = "Test2"
obj.year = 2020
// { name: "Test2", year: 2020 }

Для удаления свойства в объекте нужно использовать оператор delete.

Пример:


delete obj.name

Объекты появились в JavaScript (и других языках) благодаря концепции ООП и являются синтаксисом описания сущностей окружающей действительности.

typeof

Оператор typeof предназначен для определения типа значения переменной и при вызове возвращает результат в виде строки. 

Пример:


typeof 10 // "number"
typeof 10n // "bigint"
typeof 10.20 // "number"
typeof "Text" // "string"
typeof Symbol("uid") // "symbol"
typeof true // "boolean"
typeof undefined // "undefined"
typeof null // "object"
typeof {} // "object"
typeof []  // "object"
typeof function(){} // "function"

Наверное вы уже заметили, что из все типов typeof определяет null как object. На самом деле null имеет свой собственный тип. Это официально признанная ошибка typeof, оставленная в JavaScript для обратной совместимости.

Также typeof function(){} возвращает  «function». Такой тип отсутсвует в JavaScaript и «function» является объектным типом. Данная запись тоже не верна, но как показывает практика, она бывает очень удобна при написании кода (в случаях создания сложных проверок).

Сегодня мы рассмотрели все типы данных в JavaScript и на примерах разобрали их отличия и особенности. Надеюсь, что данный материал был вам полезен. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Полезные материалы:

https://learn.javascript.ru/types

https://developer.mozilla.org/ru/docs/Web/JavaScript/Data_structures

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

0
Учим useEffect на примерах

Учим useEffect на примерах

РубрикиFront-end ReactJS
92

Доброго времени суток, друзья. В прошлый раз мы разбирали использование useState, сегодня же мы посмотрим на работу хука useEffect. Данный хук дает возможность выполнять побочные эффекты в функциональных компонентах React. Он предназначен для выполнения запросов на сервер, создания подписок и работы с DOM напрямую, используя DOM API.

Для лучшего понимания работы useEffect, мы рассмотрим пример решения задачи с использованием React класса, а затем перепишем этот функционал, непосредственно применяя useEffect.

Видео на эту тему.

Побочные эффекты в классах

Посмотрим на следующий пример кода:


export default class ExampleClass extends React.Component {
  state = {
    x: 0,
    y: 0,
    moveCount: 0,
    cross: 0
  };

  mouseMoveHandler = event => {
    this.setState({
      x: event.clientX,
      y: event.clientY
    });
  };

  componentDidMount() {
    console.log("componentDidMount");
    window.addEventListener("mousemove", this.mouseMoveHandler);
  }

  componentDidUpdate(prevProps, prevState) {
    const { x, y } = this.state;
    if (x !== prevState.x || y !== prevState.y) {
      this.setState(prev => {
        return {
          moveCount: prev.moveCount + 1
        };
      });
    }
  }

  static getDerivedStateFromProps(props, state) {
    if (state.x === state.y) {
      return {
        cross: state.x
      };
    }
    return null;
  }

  componentWillUnmount() {
    console.log("componentDidUnmount");
    window.removeEventListener("mousemove", this.mouseMoveHandler);
  }

  render() {
    const { x, y, moveCount, cross } = this.state;

    return (
      <div>
        <p>
          Координаты мыши: {x}, {y}
        </p>
        <p>Счетчик движения мыши: {moveCount} сек</p>
        <p>
          Позиция пересечения двух точек: {cross}, {cross}
        </p>
      </div>
    );
  }
}

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

В componentDidMount мы добавляем событие mousemove в виде функции  mouseMoveHandler, в которой мы будем присваивать текущие координаты мыши. Условие проверки изменения координат в componentDidUpdate позволяет менять состояние счётчика при движении мыши. Таким образом, когда мы двигаем курсор, счетчик будет «наматывать» свое значение. Для расчета позиции двух точек был использован getDerivedStateFromProps (можно перенести данный код в componentDidUpdate), в котором мы просто сравниваем координаты x и y. Если они равны, то мы обновляем состояние и добавляем новое значение cross. 

В componentWillUnmount происходит удаление подписки на событие mousemove из DOM.

На текущем примере мы разобрали работу жизненного цикла React-компонента в рамках решения задачи с координатами мыши.

Введение в useEffect

Хук useEffect решает задачи всех используемых в примере методов жизненного цикла (componentDidMount, componentDidUpdate, и componentWillUnmount). Прежде чем мы приступим к замене React класса на функциональный компонент, посмотрим какие параметры принимает useEffect и с какими условиями его можно вызывать.

Первым параметром данного хука является функция, в которой инициализируется логика эффекта. 

Пример:


useEffect(() => { 
  console.log('render')
});

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

Вторым параметром useEffect является массив с зависимостями, главная цель которого следить за обновлениями в состоянии и при их изменении перерендеривать компонент (соотвественно снова вызывать useEffect). Если оставить массив пустым, то useEffect будет вызываться один раз после успешного добавления компонента (данная логика повторяет работу componentDidMount).

Пример:


useEffect(() => {
	console.log('mounted')
}, []);

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

Пример:


useEffect(() => {
  return () => {
    console.log('will unmount');
  }
}, []);

Теперь, после изучения теоретической составляющей о useEffect и его работе, мы готовы  переписать первоначальный пример, используя React хуки.

Использование useEffect

Чтобы начать использовать хуки, требуется переписать React класс в React компонент функцию.  Для создания состояния воспользуемся хуком useState

Пример:


export default props => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [moveCount, setMoveCount] = useState(0);
  const [cross, setCross] = useState(0);

return (
  <div>
      <p>
        Координаты мыши: {x}, {y}
      </p>
      <p>
	Счетчик движения мыши: {moveCount} сек
	</p>
      <p>
        Позиция пересечения двух точек: {cross}, {cross}
      </p>
    </div>
)}

Вызовем обработчик события мыши, когда компонент будет добавлен в DOM и удалим его, когда компонент будет удален. При перемещении мыши будем устанавливать новые координаты.

Пример:


export default props => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [moveCount, setMoveCount] = useState(0);
  const [cross, setCross] = useState(0);

  const mouseMoveHandler = event => {
    setX(event.clientX);
    setY(event.clientY);
  };

  useEffect(() => {
    console.log("componentDidMount");
    document.addEventListener("mousemove", mouseMoveHandler);
    return () => {
      console.log("componentDidUnmount");
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []);

  return (
    <div>
      <p>
        Координаты мыши: {x}, {y}
      </p>
      <p>
	Счетчик движения мыши: {moveCount} сек
      </p>
      <p>
        Позиция пересечения двух точек: {cross}, {cross}
      </p>
    </div>
  );
};

Осталось добавить логику со счётчиком движения мыши и позиции пересечения двух точек. Для удобства напишем useEffect еще два раза. В первом вызове укажем условие, где координата x === y, добавим x в cross, как точку пересечения двух осей.

Пример:


useEffect(() => {
    console.log("componentDidUpdate");
    if (x === y) {
      setCross(x);
    }
});

Во втором useEffect добавим конечным параметром массив с зависимостями x и y. Внутри функции первого параметра вызовем setMoveCount, который будет добавлять +1 каждый раз при изменении координат (x,y) указателя мыши.

Пример:

 
useEffect(() => {
   setMoveCount(moveCount => moveCount + 1);
}, [x, y]);

Посмотрим что у нас получилось в финальной версии кода:


export default props => {
  const [x, setX] = useState(0);
  const [y, setY] = useState(0);
  const [moveCount, setMoveCount] = useState(0);
  const [cross, setCross] = useState(0);

  const mouseMoveHandler = event => {
    setX(event.clientX);
    setY(event.clientY);
  };

  useEffect(() => {
    console.log("componentDidUpdate");
    if (x === y) {
      setCross(x);
    }
  });

  useEffect(() => {
    console.log("componentDidMount");
    document.addEventListener("mousemove", mouseMoveHandler);
    return () => {
      console.log("componentDidUnmount");
      document.removeEventListener("mousemove", mouseMoveHandler);
    };
  }, []);

  useEffect(() => {
    setMoveCount(moveCount => moveCount + 1);
  }, [x, y]);

  return (
    <div>
      <p>
        Координаты мыши: {x}, {y}
      </p>
      <p>Счетчик движения мыши: {moveCount} сек</p>
      <p>
        Позиция пересечения двух точек: {cross}, {cross}
      </p>
    </div>
  );
};

Сегодня мы разобрали на примере работы с координатами мыши использование хук useEffect. Также посмотрели из каких параметров он состоит и с какими условиями его можно вызывать. Надеюсь, что данная статья была вам полезна. Исходный код вы сможете найти тут. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Полезные материалы:

https://ru.reactjs.org/docs/hooks-effect.html — официальная документация по React Hooks c  примерами использования useEffect.

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

0
Учим useState на примерах

Учим useState на примерах

РубрикиFront-end ReactJS
146

Доброго времени суток, друзья. На дворе 2К20 год и начиная с версии React 16.8 для работы с состояниями в функциональных компонентах появились хуки. В этой статье мы подробно разберем один из хуков — useState.

Для чего вообще предназначен useState? Если вы работаете с React, то должны были сталкиваться с понятием состояния. Раньше, с состоянием в React можно было работать только в класс компонентах, используя метод setState, которой мы получали наследуя рабочий класс от класса React.Component. Долгое время компоненты функции использовались в качестве ‘глупых’ компонентов, не имеющих состояния, и были предназначены только для рендеринга элементов ui. С версии React 16.8 данный функционал был доработан, теперь при работе с состояниями в функциональных компонентах можно использовать хуки.

Видео на эту тему.

Правила хуков

Сперва мы рассмотрим основные правила применения хуков и их особенности:

1. Используйте хуки только на верхнем уровне. Запрещено вызывать хук в методе или цикле. Следуя этому правилу, можно гарантировать правильность выполнения неизменной последовательности при рендере компонента.

2. React полагается на порядок вызова хуков, что позволяет использовать хуки useState, useEffect в одном компоненте многократно.

Пример:


function Example() {

  const [name, setName] = useState('Name')
  const [surname, setSurname] = useState('Surname')
      
    return (
        <div>
            Example
        </div>
}

3. Не применяйте условия, вызывая хуки, поскольку текущая последовательность вызовов в компоненте может быть нарушена. Допустимо использовать выражение внутри хука.

Пример:


function Example() {

        // ошибка
	if(true) {
		useState()
	}
       
    useState()
    useState()
    
    return (
        <div>
            Example
        </div>
    )
}

Практика использования useState

Давайте на примере подробно разберём работу с useState. Для начала работы следует импортировать метод из React.

Пример:


import React, {useState} from 'react'

Далее вызовем его в функции (соблюдая все правила, которые мы рассмотрели выше).

Пример:


import React, {useState} from 'react'

function Count() {

   const [count, setCount] = useState(1)

    return (
        <div>
	    Count
        </div>
    )
}

Хук useState() принимает один параметр в виде начального состояния, которое может быть представлено как значение (строка, число, массив, объект и т.д.) или функция. После вызова функции, useState возвращает массив из двух элементов. Первым элементом является начальное состояние, которое мы передаём,  вторым — функция, изменяющая это состояние при ее вызове и передаче нового значения. Существует несколько способов получения элементов массива:

1. Через индекс

Пример: 


import React, {useState} from 'react'

function Count() {

     const arr = useState(1)

     const increment = () => {
         arr[1](arr[0]+ 1)
     }

    return (
        <div>
	      <button onClick={increment}>+</button>
              <span>
		  {arr[0]}
	     </span>
        </div>
    )
}

2. Через современный синтаксис деструктуризации  ES6 

Пример: 


import React, {useState} from 'react'

function Count() {

    const [count, setCount] = useState(1)

    const increment = () => {
      setCount(count + 1)
    }

    return (
       <div>
	    <button onClick={increment}>+</button>
            <span>
		{count}
	    </span>
       </div>
    )
}

Второй способ более удобный и понятный и его следует использовать в работе как основной. 

Разберем подробнее, что происходит в функции Count. Мы вызвали хук useState, в параметр которого передали значение 1. Это значение будет является начальным состоянием.  Ниже добавлена функция increment, которая будет изменять значение по клику на кнопку и добавлять +1 к текущему состоянию, вызывая setCount(count + 1). Таким образом, каждый клик будет инкрементировать новое значение и счётчик будет увеличиваться.

Рассмотрим кейс, когда нужно использовать несколько вызовов функций useState подряд.


import React, {useState} from 'react'

function Count() {

    const [count, setCount] = useState(1)

    const increment = () => {
	setCount(count + 1)
	setCount(count + 1)
    }

    return (
       <div>
	   <button onClick={increment}>+</button>
           <span>
		{count}
	    </span>
       </div>
    )
}

По клику на кнопку мы обнаружим, что значение увеличивается только на +1, хотя предполагалось, что счетчик покажет +2. Для решения этой задачи в функции изменения setCount можно вызвать функцию в первом аргументе, которой будет возвращено предыдущее состояние count. При каждом новом вызове setCount, значение count будет меняться.

Пример:


import React, {useState} from 'react'

function Count() {

    const [count, setCount] = useState(1)
    const increment = () => {
          setCount(prevCount =>  prevCount + 1)
          setCount(prevCount =>  prevCount + 1)
    }
 
    return (
       <div>
	    <button onClick={increment}>+</button>
           <span>
		 {count}
	    </span>
       </div>
    )
}

Теперь каждый раз по клику, мы получим нужный результат +2.

Работа с объектами

Часто требуется использовать большое количество состояний в одном компоненте. Рассмотрим кейс с формой, содержащей несколько полей.

Пример:


import React, {useState} from 'react'

function LoginForm() {
  const [name, setName] = useState('');
  const [password, setPassword] = useState('');

  const submit = (e) => {
    e.preventDefault();
    console.log(name, password);
  };

  return (
    <form onSubmit={submit}>
      <label>
        Имя:
        <input
          value={name}
          onChange={event => setName(event.target.value)}
          name="name"
          type="text"
        />
      </label>
        <label>
        Пароль:
        <input
          value={password}
          onChange={event => setPassword(event.target.value)}
          name="password"
          type="password"
        />
      </label>
          <button>Отправить</button>
    </form>
  );
}

Чтобы не писать useState множество раз, можно использовать объект (или массив) для хранения всего состояния целиком. На примере объекта, посмотрим как можно работать с формой.

Пример: 


function LoginForm() {

  const [form, setForm] = useState({
    name: '',
    password: ''
  });

  const submit = e => {
    e.preventDefault();
    console.log(form.username, form.password);
  };

  const update = e => {
    setState({
      ...form,
      [e.target.name]: e.target.value
    });
  };

  return (
    <form onSubmit={submit}>

      <label>
     	Имя:
        <input
          value={form.name}
          name="name"
          onChange={update}
        />
      </label>
      
    <label>
        Пароль:
        <input
          value={form.password}
          name="password"
          type="password"
          onChange={update}
        />
      </label>

      <button>Отправить</button>
    </form>
  );
}

В useState помещаем начальное состояние формы. При отправлении формы вызываем метод submit, в котором увидим текущее состояние. Для изменения состояний input’ов используется метод update, в котором через атрибут name и value из e.target получаем данные и при изменении отправляем их как новое состояние формы через setState. Чтобы каждый раз не ‘перетирать’ предыдущее состояние другого input’a, используется спред оператор (…), позволяющий копировать предыдущее состояние.

Заключение

Сегодня мы рассмотрели особенности работы с хуком useState, а также общие правила использования хуков. На примерах разобрали некоторые рабочие кейсы (состояния, объекты, работа с формой).  Надеюсь, что данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Полезные материалы:

https://ru.reactjs.org/docs/hooks-intro.html — официальная документация по React Hooks

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

1+
Node работа с файлами

NodeJS работа с файлами

РубрикиNodeJS
135

Доброго времени суток, друзья. Поговорим сегодня о работе с файлами в Node.js. Для работы с файлами используется модуль fs (сокращение от File System).

В этой статье мы рассмотрим следующие темы:

— Работа с файловыми дескрипторами;

— Работа с директориями;

— Создание новой папки;

— Чтение содержимого папки;

— Удаление папки;

— Получение системной информации о файле;

— Модуль path и путь к файлу;

— Получение имени, пути и расширения файла;

— Работа с путями файла;

— Переименование файла или директории;

— Чтение файла;

— Запись файла;

— Копирование файла;

— Удаление файла.

Для начала работы нам потребуется установленная Node.js. Подробную инструкцию по ее установке вы можете получить (тут). 

Прежде чем начать работу с модулем, его следует импортировать в рабочем файле. 

Пример:


const fs = require(‘fs');

Пробежимся по основным методам этого модуля и посмотрим на примерах как с ними можно работать.

Работа с файловыми дескрипторами  

Прежде чем двигаться дальше, давайте посмотрим на термины, о которых описано в статье ниже.

Файловый дескриптор — это неотрицательное целое число. Когда создается новый поток ввода-вывода, ядро возвращает процессу, создавшему поток ввода-вывода, его файловый дескриптор (Wikipedia).

Если излагать простыми словами, то при открытии файла мы получаем его дескриптор — это уникальный индикатор, благодаря которому мы можем отслеживать каждый файл отдельно и работать с ним. Для получения дескриптора файла в Node.js используются два метода: (1) асинхронный метод fs.open() и (2) синхронный fs.openSync(). К слову все методы в Node.js имеют синхронные и асинхронные реализации. Синхронные методы отмечены в название метода с окончанием Sync. В чем же разница между синхронным и асинхронным методами? Главное отличие — это порядок их выполнения. Синхронный метод будет выполнен путем блокирования основного потока, в тоже время, если для того же действия использовать ассинхронный метод, то операции могут быть выполнены в произвольном порядке по истечению их выполнения (т.к. основной поток не будет блокироваться).

Перейдем к примерам.


const fs = require('fs')

// асинхронный
fs.open('template.txt', 'r', (err, fd) => {
    if (err) throw err;
    //fd - это дескриптор файла
    console.log(fd)
})

// синхронный 
try {
  const fd = fs.openSync('template.txt', 'r')
  console.log(fd)
} catch (err) {
  console.error(err)
}

В этих примерах при выполнении кода, мы получим уникальный дескриптор файла. Пройдемся по параметрам методов. Первый — это путь к файлу, который читаем. Второй параметр предназначен для передачи флагов доступа к файлам. В данном примере мы указали параметр ‘r’, что означает этот файл открыт для чтения.

Ниже я приведу перечень флагов доступа к файлам

r — чтение;

r+ — чтение и запись;

w+ — чтение и запись, запись с начала файла. Файл создается если его нет;

a —  запись, запись с конца файла. Файл создается если его нет;

a + — чтение и запись, запись с конца файла. Файл создается если его нет;

Третий параметр отличается в зависимости от типа метода. В асинхронном варианте это колбэк функция, первый аргумент которой возвращает ошибку (в случае ее возникновения), а второй — сам дескриптор. Если метод синхронный, то вызов происходит в блоке try/catch для отслеживания ошибок и получения ответа путем присвоения вызова переменной.

Следует помнить, что дескрипторы файлов необходимо закрывать для предотвращения переполнения памяти, а также проблем с производительностью. Выполним данную задачу с помощью метода close() и его синхронного аналога closeSync().

Работа с директориями 

Для проверки существующей директории (файла) и доступов к нему в модуле fs применяется метод access

Пример:


const fs = require('fs')
const file = 'package.json';

// проверка существования файла
fs.access(file, fs.constants.F_OK, (err) => {
  console.log(`${file} ${err ? 'не существует' : 'существует'}`);
});

// проверка на возможность прочитать файл
fs.access(file, fs.constants.R_OK, (err) => {
    console.log(`${file} ${err ? 'не прочитать' : 'прочитать'}`);
});
  
// проверка на возможность перезаписать файл
fs.access(file, fs.constants.W_OK, (err) => {
    console.log(`${file} ${err ? 'не перезаписать' : 'перезаписать'}`);
});

Вторым параметром устанавливается константа режима проверки:

F_OK — существование файла без проверки прав доступа;

R_OK — может ли файл быть прочитан текущим процессом;

W_OK — может ли файл быть записан текущим процессом;

X_OK — может ли файл быть выполнен текущим процессом (в Windows не работает).

Создание новой папки

Для создания каталогов присутствует асинхронный метод mkdir и синхронный mkdirSync.

Пример:


fs.mkdir(__dirname + dir, { recursive: true }, (err) => {
    if (err) {
        console.error(err)
        return
    }
})

if (!fs.existsSync(dir)) {
    try {
      fs.mkdirSync(__dirname + dir, { recursive: true })
    } catch (error) {
        console.error(error)
    }
} else {
    console.log('Папка существует')
}

Для создания в текущей директории нового каталога, перед путем следует указать переменную __dirname как вариант реализации абсолютного пути, либо воспользоваться метом resolve модуля path.

Чтение содержимого папки 

Для получения содержимого директории используются два метода readdir и readdirSync. Первым параметром для методов передается путь директории, содержимое которой нужно получить.

Пример:


const fs = require('fs')
const dir =  __dirname + '/'

fs.readdir(dir, (err, files) => {
    if (err) {
      console.error(err)
      return
    }
    console.log(files)
})

try {
    const files = fs.readdirSync(dir)
    console.log(files)
} catch (error) {
      console.error(error)
}

Удаление папки

Удаление директории производится с помощью методов rmdir и rmdirSync. Первым параметром методов является путь удаляемой директории.

Пример:


const fs = require('fs')

fs.rmdir(__dirname +'/testDel', () => { 
    console.log('Файл успешно удален')
})

try {
    fs.rmdirSync(__dirname + '/testDel')
    console.log('Файл успешно удален')
} catch (error) {
    console.error(error)
}

Получение системной информации о файле 

Каждый файл, который мы загружаем, помимо данных хранит в себе системную информацию. Для получения этой информации можно воспользоваться методом stat() или выбрать синхронный вариант statSync()

Пример:


// асинхронный
fs.stat('template.txt', (err, stats) => {
    if (err) {
        console.error(err)
        return
    }
    console.log(stats)
})

// синхронный
try {
  const stats = fs.statSync('template.txt')
  console.log(stats)
} catch (err) {
  console.error(err)
}

Вся информация хранится в получаемом объекте stats. Данный объект хранит в себе методы для получения дополнительной полезной информации.

Перечислю некоторые из этих свойств:

stats.isDirectory() метод позволяет узнать, является ли файл директорией;

stats.isFile() метод возвращает true, если это файл;

stats.isSocket() метод возвращает true, если это сокет;

stats.isSymbolicLink() метод возвращает true, если файл является символьной ссылкой;

stats.size свойство, которое возвращает размер файла;

stats.birthtime возвращает время и дату, когда данный файл был создан.

Пример: 


fs.stat('template.txt', (err, stats) => {
    if (err) {
        console.error(err)
        return
    }
    console.log(stats.isDirectory())
    console.log(stats.isFile())
    console.log(stats.isSocket())
    console.log(stats.isSymbolicLink())
    console.log(stats.size)
    console.log(stats.mode)
    console.log(stats.birthtime)
})

Модуль path и путь к файлу Node.js

Основной проблемой при работе с файлами и папками в операционных системах является разный синтаксис написания путей их расположения. Для решения этой проблемы в Node.js есть модуль path c набором полезных методов.

Для началы работы с модулем его нужно импортировать.

Пример:


const path = require(‘path');

Получение имени, пути и расширения файла

Предположим, что в папке /temp лежит файл template.txt. Воспользуемся методами модуля path для получения имени файла, пути к нему, а так же его расширения. 

Пример:


const file = ‘/temp/tempalate.txt'

path.basename(file) // tempalate.txt

Метод basename возвращает наименование файла. Первым параметром передается путь к файлу, вторым параметром (опционально) передается расширение файла, если необходимо получить наименование файла без расширения.

Пример:


path.basename(file, ‘.txt’) // tempalate

path.basename(file, ‘.txt’) // tempalate

Метод dirname возвращает весь путь директории, где лежит файл и имеет один параметр, в который передается путь к файлу.

Пример:


path.dirname(file) // /temp

Метод extname возвращает расширение переданного файла.

Пример:


path.extname(file) // .txt

Работа с путями файла

В модуле path есть ряд методов для удобного формирования путей к нужному файлу или директории. Мы не будем рассматривать все методы, а только наиболее часто используемые. Рассмотрим их ниже.

Метод join принимает список параметров, объединяет их в одну строку, используя разделитель, подходящий к конкретной операционной системе, в которой будет исполнятся код.

Пример:


const folderName = 'temp'
path.join('/', folderName, ‘template.txt') // /temp/template.txt

Метод resolve используется для нахождения абсолютных путей к файлу.

Пример:


path.resolve(‘template.txt') // Users/Desktop/dev/node-fs/template.txt
path.resolve(folderName, ‘template.txt’) // /Users/Desktop/dev/node-fs/temp/template.txt
path.resolve('/temp', ‘template.txt') // /temp/template.txt

Метод normalize позволяет найти путь к файлу, используя синтаксис переходов (.. и .) по папкам.

Пример:


path.normalize(‘/users/../temp/template.txt')
// temp/template.txt

Переименование файла или директории

Методы rename() и renameSync() первым параметром принимают путь к файлу, который нужно переименовать. Второй параметр отвечает за новое наименование файла. 

Пример:


const fs = require('fs')

// переименовываем файла
fs.rename('oldFile.txt', 'newFile.txt', (err) => {
    if (err) throw err;
    console.log('Файл переименован');
});

// переименовываем директорию
try {
    fs.renameSync('./oldDir', './newDir')
    console.log('Папка переименован');
} catch (error) {
      console.error(error)
}

Чтение файла

Пример:


const fs = require('fs')

// асинхронное
fs.readFile(‘template.txt', ‘utf-8’, (err, data) => {
    if (err) {
      console.error(err)
      return
    }
    console.log(data)
})

// синхронное
try {
    const data = fs.readFileSync(‘template.txt', 'utf-8')
    console.log(data)
} catch (err) {
    console.error(err)
}

Если вторым параметром не указана кодировка, то возвращается Buffer. Эти методы полностью загружают файлы в память компьютера, что может сильно отразиться на производительности. Если размер файла большой, то стоит воспользоваться потоками fs.createReadStream()

Запись файла 

Чтобы перезаписать контент файлов, используются методы writeFile и writeFileSync. Важный момент! Если файла, контент которого нужно перезаписать, не существует, то он будет создан автоматически.

Пример:


const fs = require('fs')
const content = 'Новый текст'

fs.writeFile('newText.txt', content, (err) => {
  if (err) {
    console.error(err)
    return
  }
  console.log('файл успешно перезаписан')
})

try {
    fs.writeFileSync('newTextTwo.txt', content)
    console.log('файл успешно перезаписан')
} catch (err) {
    console.error(err)
}

Копирование файла 

Методы copyFile() и copyFileSync() первым параметром принимают путь файла для копирования. Второй параметр принимает название пути и нового файла. Третьим параметром является колбэк функция, которая возвращает ошибку.

Пример:


const fs = require('fs')

fs.copyFile('oldFile.txt', 'oldFileTwo.txt', (err) => {
    if (err) {
        console.error(err)
        return
    }
    console.log('Файл успешно копирован')
});

try {
    fs.copyFileSync('oldFile.txt', 'oldFileTwo.txt')
    console.log('Файл успешно копирован')
} catch (error) {
    console.error(error)
}

Удаление файла 

Последнее, что мы рассмотрим в этой статье будут методы unlink() и unlinkSync(). Первым параметром методы принимают путь к удаляемому файлу. Второй параметр в методе unlink возвращает колбэк функцию с ошибкой.

Пример:


const fs = require('fs')

fs.unlink('file.txt', (err) => {
    if (err) throw err;
    console.log('Файл успешно удален');
});

try {
    fs.unlinkSync('file.txt')
    console.log('Файл успешно удален');
} catch (error) {
    console.error(error)
}

Заключение

В данной статье мы разобрали работу Node.js с файлами, на примерах посмотрели основные полезные методы модулей fs и path. Исходный код вы сможете найти тут. Надеюсь данная статья была вам полезна. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Полезные ссылки:

https://nodejs.org/en/ — официальный сайт node.js

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

1+
HTTP Server

NodeJS пишем свой HTTP Server

РубрикиNodeJS
160

Node.js — программная платформа, основанная на движке V8. (транслирующем JavaScript в машинный код), превращающая JavaScript из узкоспециализированного языка в язык общего назначения 

Wikipedia

Доброго времени суток, друзья.

Поговорим сегодня о Node.js, а конкретнее о разработке статического сервера, который будет отдавать нам index.html по всем роутам. Это задача базового уровня, поэтому данный материл предназначен именно для начинающих разработчиков, которые только осваивают Node.js. В этой статье я буду идти от простого к сложному и постараюсь преподнести информацию наиболее подробным образом. Если вы еще не сталкивались с установкой Node.js и npm и вам необходимо написать HTTP Server, то следуйте инструкциям ниже.

Установка NodeJS

Для работы нам понадобится сама Node.js, установить ее можно, используя официальный сайт https://nodejs.org/en/

На сайте предлагается две версии для скачивания: LTS и Current(последняя), из которых можно выбрать любую, т.к это не повлияет на дальнейшую разработку. После скачивания дистрибутива, запустите установку. Чтобы проверить, что установка была произведена корректно, введите в консоли команду node -v, в качестве подтверждения терминал укажет установленную версию Node.js

Пример:

node -v

v12.14.0

NPM и создание package.json

В рабочей директории создадим новую папку и назовем ее http-server. Для работы c пакетами понадобится npm. Если у вас не установлен npm, то инсталлировать его можно, используя следующую команду: npm install npm@latest -g

Далее требуется создать файл package.json — для этого введите команду: npm init. В результате будет вызван bin npm — консольное приложение, через которое можно получить package.json. Вам будет предложен ряд вопросов, отвечая на которые вы cконфигурируете конечный файл.

Вот пример уже готового package.json


{
  "name": "http-server",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/Web-Tricks-Master/node-http-server.git"
  },
  "keywords": [
    "node",
    "http-server"
  ],
  "author": "Kalachev Vlad",
  "license": "ISC",
  "bugs": {
    "url": "https://github.com/Web-Tricks-Master/node-http-server/issues"
  },
  "homepage": "https://github.com/Web-Tricks-Master/node-http-server#readme"
}

Файл server.js

Весь основной код мы будем писать в файле server.js. Для этого в корне проекта создадим файл с названием server.js, написав в нем следующий код:


console.log(‘Hello Node’);

Чтобы выполнить код данного файла, необходимо вызвать его через Node.js. В корне проекта в терминале вызовем команду: node server.js

Пример:

node server.js

// Hello Node

Hello World Server

Напишем первый сервер на Node.js c получением реального ответа по указанному адресу c телом в виде текста: Hello World!

Пример:


// server.js
const http = require('http');

http.createServer((req, res)=> {
  res.writeHead(200, {'Content-Type': 'text/plain'});
  res.end('Hello World!');
}).listen(8080);

В указанном примере мы импортируем модуль http, с которым будем работать в дальнейшем. Для создания http сервера воспользуемся методом createServer, в первом аргументе которого пишем функцию (в примере использован синтаксис стрелочной функции, но можно также писать данный код с помощью function). Функция принимает два параметра: req и res (можно присваивать наименования по желанию). Первый параметр хранит всю информацию о входящем запросе, второй используется для отправки ответов серверу. В строке res.writeHead в ответе сервера добавляем статус 200 (запрос выполнен успешно) и вторым параметром тип контента (здесь достаточно указать, что мы возвращаем текст).

В строке res.end указываем само тело ответа. После того как сервер был создан, воспользуемся методом listen, чтобы развернуть входящее подключение по нужному нам адресу. Метод listen имеет три аргумента, первый из них отвечает за порт, второй — за локальный адрес, третий является функцией, которая вызывается после старта сервера.  В примере мы используем только первый параметр, второй будет назначен по умолчанию, как localhost.

Запустим наш сервер. В консоли наберем команду: node server.js и откроем в браузере адрес http://localhost:8080/ , после чего мы увидим выполнение нашего файла:

Отлично. Вот мы и реализовали наш HelloWorld на Node.js. Давайте усложним нашу систему и добавим работу с файлами, но прежде чуть автоматизируем процесс разработки.

Nodemon

Если попытаться внести изменения в код при развернутом сервере, то окажется, что новые правки не будут отображены. Для решения этой проблемы установим пакет nodemon, который будет следить за вашими изменениями в коде и автоматически перезагружать сервер. В корневой директории проекта введите следующую команду: npm i -D nodemon. Данный пакет нужен только для разработки, поэтому мы устанавливаем его в директорию devDependencies (используем флаг D). После установки пакета добавим в package.json в поле scripts следующие инструкции:


"scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
 }

Поле test можно удалить, т.к. мы не будем рассматривать его в данной статье. Теперь для запуска нашего сервера мы будем использовать npm. Чтобы запустить сервис с nodemon, введем команду: npm run dev, для режима демонстрации: npm start или npm run start (также разрешено конвенцией). Продолжим разработку в режиме dev.

HTTP Server

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

Пример:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Demo</title>
</head>
<body>
    Node HTTP Server
</body>
</html>

В файле server.js напишем следующий код:


const http = require('http');
const fs = require(‘fs');
const path = require('path');
const PORT = 8080;

const server = http.createServer((req, res) => {
    res.writeHead(200, {
        'Content-Type': 'text/html',
        'Expires': '0'
    });
    fs.createReadStream(path.resolve(__dirname, 'index.html')).pipe(res)
})

server.listen(PORT, '0.0.0.0', () => {
    console.log('Server started!');
});

Для работы с файлами в Node.js используется модуль fs, импортируем его. Также, чтобы наше решение работало в разных операционных системах потребуется модуль path, благодаря которому мы сможем писать правильные пути до файлов. Чуть усложним наш метод listen. Вынесем порт в константу, вторым аргументом укажем адрес ‘0.0.0.0’ (он же localhost), и в третий добавим функцию, которая будет вызываться на старте сервера. В res.writeHead укажем статус и заголовок, в котором мы будем отдавать данные (text/html). Строка   ‘Expires’: ‘0′ означает, что каждый раз в момент получения ответа сервера мы будем чистить куки (делается это для того, чтобы всегда видеть корректные изменения в html файле без кэширования). В строке fs.createReadStream(path.resolve(__dirname, ‘index.html’)).pipe(res) происходит чтение файла из потока в виде стрима и связывание его через метод .pipe с выходящем потоком ответа.

Использование createReadStream является наилучшей практикой (помните, что все зависит от ваших задач и это не серебренная пуля), хотя часто в коде можно увидеть метод readFile. В чем же отличие? Метод readFile, при чтении файла, полностью его загружает и сохраняет в память, после чего начинает с ним работать. Если же файл будет большого размера, то вероятность, что сервер переполнит память очень велика. При использовании метода createReadStream, он создает стрим, в котором файл передается кусками, что позволяет в случае загрузки большого файла не завершать работу приложения, тем самым предотвращая возможность переполнения памяти.

После запуска нашего кода  получим следующий результат:

Мы пришли к поставленной цели. Теперь Node.js отдает нам index.html, на основе которого в дальнейшем мы сможем создавать статические сайты.

Заключение

Надеюсь данная статья была вам полезна. Исходный код вы сможете найти тут. Прекрасно понимаю, что для раздачи статики лучше всего использовать nginx как более простое и эффективное решение подобной задачи, но целью данной статьи является разработка именно на Node.js и объяснения базовых тем, на мой взгляд такой пример является более понятным для начинающих разработчиков. Учитесь, думайте, пишите код. Удачного кодинга, друзья!

Полезные ссылки:

https://nodejs.org/en/ — официальный сайт node.js  

https://github.com/nodejs — node.js на github

https://www.npmjs.com/ — официальный сайт 7pm

Подписывайтесь на наш канал в Telegram для получения самой последней и актуальной информации. 

2+
JavaScript ES2020

Что нового в JavaScript ES2020 (ES11) ?

РубрикиJS Front-end
252

Доброго времени суток, друзья. На дворе 2К20 год. Окунемся в текущие новшества JavaScript. В этой статье мы рассмотрим следующие темы:

— BigInt

 — Dynamic import

 — GlobalThis

 — Private Class Variables

 — Promise.allSettled()

 — Nullish Coalescing Operator

 — Optional Chaining Operator

 — Numeric Separators

 — String.protype.matchAll

 — import.meta

 — export * as nameModule from «module»

Теперь мы разберем каждую из них более подробно.

Читать далее «Что нового в JavaScript ES2020 (ES11) ?»

3+

Декораторы в React или как оптимизировать ваши компоненты.

РубрикиJS Front-end ReactJS
7 771

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

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

1+

Как работает bind? Пишем полифилл для bind

РубрикиJS Front-end
7 172

Доброго времени суток друзья. Сегодня я хотел бы поговорить с вами о bind. Для чего он вообще используется и как с ним работать? Общее определение: «Метод bind() создаёт новую «привязанную функцию» (ПФ).  ПФ — это «необычный функциональный объект» ( термин из ECMAScript 6 ), который является оберткой над исходным функциональным объектом. Вызов ПФ   приводит к исполнению кода обернутой функции.” Взято тут. В практики bind используется для создания функции с предопределенными аргументами. А так же он полезен в случаях, если вы хотите создать сокращение для функции, требующей определенное значение this. Читать далее «Как работает bind? Пишем полифилл для bind»

2+

Курс для Junior разработчика. Основы JavaScript. Синтаксис. Часть 2.

Рубрикиjunior JS Front-end
1 354

Доброго времени суток друзья. Вот и пришло время вновь продолжить наш курс по JavaScript. Хочу обратить ваше внимание что статьи по циклу основы JavaScript предназначены для тех кто еще только начинает свой путь в веб программирование и некоторые моменты я стараюсь по максимуму упростить для процесса обучения. Вы готовы? Если да то эта статья для вас.
Читать далее «Курс для Junior разработчика. Основы JavaScript. Синтаксис. Часть 2.»

2+