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. Итак … с этого мы и начнем:

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

Let и const

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

// ES5
console.log(myVar); // вывод без определения
var myVar = 10;

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

// ES6
console.log(myVar) // ReferenceError myVar не определена
let myVar = 10

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

// ES6
let x = 10
const y = 20
x = 25 // all is ok
y = 30 // TypeError: Назначение переменной для константы.

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

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

//ES5
var theNumber = 10;
console.log(theNumber);

//ES6 - можно обойтись без точек с запятой
let theNumber = 10
console.log(theNumber)

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

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

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

// ES5
var sum = function(a, b) {
 return a + b
}

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

// ES6
const sum = (a, b) => {return a + b}
 И если у вас есть очень простая функция с одной строкой, вы даже можете опустить ключевое слово return:
// ES6
const sum = (a, b) => a + b // функция стрелки из одной строки автоматически выводит результат последнего использовавшегося значения

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

function DogWorldContext() {
  this.age = 0

  setInterval(function growUp() {
 this.age++
 console.log(this.age)
  }, 1000)
}
var worldWithStandardFunction = new DogWorldContext()
// будет выводить Nan каждую секунду, так как growUp это стандартная функция, она содержит собственный контекст ключевого слова this.
function DogWorldContext() {
  this.age = 0

  setInterval(()=> {
 this.age++
 console.log(this.age)
  }, 1000)
}
var worldWithArrowFunction = new DogWorldContext()
// выводит 1,2,3 ... каждую секунду

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

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

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

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

// ES5; предположим, что this.props.user = {name: "Daniel", age : 32}
alert(this.props.user.name + " " + this.props.user.age);

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

// ES5; предположим, что this.props.user = {name: "Daniel", age : 32}
var name = this.props.user.name;
var age = this.props.user.age;
alert(name + " " + age);

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее
// ES6; предположим, что this.props.user = {name: "Daniel", age : 32}
const {name} = this.props.user
const {age} = this.props.user
alert(name + " " + age)

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

// ES6; предположим, что this.props.user = {name: "Daniel", age : 32}
const {name, age} = this.props.user
alert(name + " " + age)

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

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

// ES5
str = "HELLO"
number = 20
obj = {
 str: str,
 number: number
}

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

// ES6
str = "HELLO"
number = 20
obj = { str, number} // даст obj = {str: "HELLO", number: 20}

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

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

// ES5
function Dog(name, weight){
  this.name = name;
  this.weight = weight;
}

Dog.prototype.speak = function(){
 alert("Woof, woof … my name is: " + this.name);
};

// Устанавливаем новый объект с помощью ‘new’
var dog = new Dog("Spike", 25);

// Вызываем методы наподобие this
dog.speak(); // предупрезжение “Woof, woof … my name is: Spike”

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

//ES6
class Dog {
 constructor(name, weight) {
 this.name = name
 this.weight = weight
 }
 speak() {
 alert("Woof, woof … my name is: " + this.name)
 }
}
const dog = new Dog("Spike", 25)
dog.speak()

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

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

// ES6 
class Chihuahua extends Dog {
 shaking() {
  alert("look at me ! I’m shaking !")
 }
}

const miniDog = new Chihuahua("Mini Spike", 1)
miniDog.shaking() // У меня есть собственный метод
miniDog.speak() // но я также унаследовал метода из верхних классов

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

var Greeting = createReactClass({
  render: function() {
 return <h1>Hello, {this.props.name}</h1>;
  }
});

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

class Greeting extends React.Component {
  render() {
 return <h1>Hello, {this.props.name}</h1>;
  }
}

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

Фильтр

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

const numbers = [5,1, 20, 90, 8, 22, 33, 9]

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

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

//ES6

const notDigits = numbers.filter( function(value) {return value > 9})
console.log(notDigits) // выводит [20,90,22,33]

// или используя функцию стрелки
const notDigits1 = numbers.filter( (value) =>  {return value > 9}
// мы также можем использовать возвращаемый результат по умолчанию или функции стрелки
const notDigits2 = numbers.filter( (value) => value > 9 )

… и Карта

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

const numbers = [5,1, 20, 90, 8, 22, 33, 9]

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

numbers.map( (n) => console.log(n))
// и у вас также есть второй параметр, индекс
numbers.map( (n, index) => console.log(n + ' is the ' + index + ' value from the array ') )
// или если мы хотим сгенерировать второй массив 
const double= numbers.map( (n) => n*2 )

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

render() {
 return(
  this.props.items.map( (item, key) =>  <p key={key}>{item}</p>
  )
} 

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

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

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

Современные тенденции и подходы в веб-разработке

Узнайте алгоритм быстрого профессионального роста с нуля в сайтостроении

Узнать подробнее

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

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

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

Метки:

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

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

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

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

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

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

Я не робот.

Spam Protection by WP-SpamFree