10-минутный курс по ES6 для начинающего разработчика React

10-минутный курс по ES6 для начинающего разработчика React

От автора: известный принцип Парето 80-20 также верен, когда речь идет об обучении React ES6. В ES6 появилось более 75 новых функций, но из того, что я видел, мне было нужно менее 20% из них в более чем 80% случаев.

Примечание: просто чтобы избежать каких-либо недоразумений и не вдаваться в очень специфические подробности, JavaScript — это то же самое, что ECMAScript (или ES). ES6 = ES5 + некоторые новые функции, поэтому ES6 и ES5 — суть Javascript. Основное различие заключается в наборе поддерживаемых функций.

Два года назад для меня это было довольно запутанным, когда я впервые перешел от старого Angular 1 и «чистого» Javascript ES5, и увидел в некоторых пособия такие вещи, как функции стрелок или операторы деструктора. Было непонятно, что относится к React, а что к ES6.

На самом деле, в течение первой недели или около того, я был почти уверен, что мы можем написать что-то вроде {name} только в React.

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

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Let и const

В «старом» Javascript (что означает ES5), чтобы объявить переменную, мы использовали ключевое слово var. Учитывая некоторую магическую вещь под названием подъем Javascript, мы могли бы использовать переменную, прежде чем объявлять ее.

Это могло привести к некоторому поведению. Больше нет. В ES6 через ключевые слова let или const вы должны явно объявить что-то перед тем, как это использовать.

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

Никаких больше точек с запятой

И ES6, и ECMAScript 6, и все связанные с ним инструменты прекрасно поддерживают автоматическую вставку точки с запятой. Как следствие, в настоящее время кодеки ECMAScript 6 могут избавить нас от необходимости добавлять точки с запятой почти везде с и убрать из кода некоторый беспорядок.

Не совсем критическая функция, но наверняка полезная, особенно если вы в какой-то момент увлекались такими вещами, как CoffeeScript.

Функции стрелок

Чтобы создать функцию в ES5, вам нужно написать что-то вроде этого:

В ES6 вы можете быстро написать что-то такое:

Еще одна вещь, о которой следует помнить — функции стрелок автоматически связаны с их верхней областью:

Функции стрелок не имеют этого. Этот контекст становится родительским, в нашем случае — DogWorldContext.

Операторы деструктора

Цитируя developer.mozilla.org, инструкции деструктора позволяют извлекать значения из массивов или свойства из объектов в разные переменные.

Весьма распространенным является необходимость извлечь атрибут из объекта в отдельный объект. Допустим, у нас есть следующий код:

Чтобы код было легче читать, мы могли бы сделать что-то вроде этого:

Но с помощью ES6 мы могли бы использовать операторы деструктора и написать:

Или одной строкой:

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Литералы объектов

Примерно согласовано с этой концепцией работают и Литералы объектов. Они позволяют нам определять пары ключ-значение с помощью меньшего количеством кода.

В E6 это можно легко перевести в:

Классы, конструкторы и методы

В «старом Javascript» у нас не было ключевого слова class. Итак, чтобы создать простой класс Dog, вы можете применить обходное решение следующим образом:

Вы также можете определить базовый объект и другие подходы, но суть в том, что раньше у нас не было class «из коробки». Теперь ES6 предоставляет нам эти возможности:

Наследование классов и React

Как и в случае классов, в ES5 вы можете реализовать механизм наследования с помощью обходных решений. Но в ES6у нас есть ключевое слово extends.

Также, как и в случае ключевого слова class, extends — это только синтаксис, но он весьма полезен в коде React, поскольку позволяет нам перейти от следующего кода:

к более чистой версии, наподобие:

Также имейте в виду, что если вы используете extends для определения компонентов React, метод getInitialState() заменяется в конструкторе класса простым инструктором this.sate = .. Больше узнать об этот вы можете здесь.

Фильтр

Допустим, у нас есть следующий массив.

Если вы хотите создать новый массив только со значениями, превышающими 10, в ES5 вам понадобится цикл for или что-то подобное (например each() из jQuery).

Ну, в ES6 мы можем использовать функцию фильтра, чтобы перебрать все значения из массива и сохранить только те, которые отвечают требованиям функции.

… и Карта

Даже если это из «старого» ES5, карта является одной из самых недооцененных функций Javascript. Каждый раз, когда вам нужно перебрать массив, вы можете использовать карту. Допустим, что у нас есть тот же массив, что и в предыдущем примере.

Если вам нужно просто отобразить массив, используйте карту:

Вы будете встречать map() в React снова и снова, каждый раз, когда вам нужно будет вывести список элементов:

Итак, это самые распространенные функции ES6, которые я использую при написании кода React. Отказ от ответственности: список очень предвзятый и субъективный :) Ни в коем случае я не имел намерения приуменьшить полезность других функций ES6. Как уже говорилось, существует множество других функций ES6, которые здесь не рассматриваются, но эти концепции должны позволить вам легко перейти от ES5 React к новому синтаксису ES6, и понять, что относится к React, а что к ES6. Будьте здоровы и удачного кодирования!

Источник: http://www.js-craft.io/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по ES 6 (EcmaScript 6.0)

Прямо сейчас посмотрите курс по EcmaScript 6.0

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree