ES6 и не только

Даже если у вас уже есть опыт работы с JavaScript, скорее всего, язык вы в полной мере не знаете. Особое внимание в этой книге уделяется новым функциям, появившимся в Ecmanoscript 6 (ES6) -

Среднее арифметическое

Напишите функцию, которая рассчитает среднее арифметическое чисел массива. При этом, постарайтесь реализовать эту функцию как можно компактнее.

Пример:

 var a = [0, 1, 2];
 avg(a) // output should be 1

Функциональное программирование на JavaScript. Как улучшить код JavaScript-программ

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

Что такое React?

React - это JavaScript-библиотека, предназначенная для создания быстрых и интерактивных пользовательских интерфейсов (user interfaces, UI) для веб- и мобильных приложений. Это открытая (с открытым исходным кодом), основанная на компонентах, библиотека для фронтенда, отвечающая только за слой представления (view layer) приложения.

Как React работает с DOM?

Для того, чтобы сделать DOM быстрее, React использует виртуальный DOM, который, по сути, является представлением DOM-дерева в JavaScript. Когда возникает необходимость чтения или записи в DOM, используется данное представление. Затем виртуальный DOM пытается определить наиболее эффективный способ обновления браузерного DOM.

В отличие от DOM-элементов браузера, создание элементов в React обходится гораздо дешевле. React-DOM заботится об обновлении обычного DOM для совпадения с React-элементами. Это объясняется тем, что JavaScript очень быстрый, и хранение DOM-дерева в нем ускоряет модификацию последнего.

Выживет ли он?

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

1 аргумент - пули
2 аргумент - драконы

Примеры:

 hero(10, 5) =>  true
 hero(7, 4) => false

Что такое REACT компоненты?

Компоненты - это строительные блоки любого React-приложения. Как правило, приложение на React состоит из множества компонентов. Проще говоря, компонент - это JavaScript-класс или функция, опционально принимающие так называемые свойства (props) и возвращающие элемент React, описывающий, как должна выглядеть определенная часть UI.

React-приложение состоит из множества компонентов, каждый из которых отвечает за отрисовку (рендеринг, render) небольшой, переиспользуемой (имеющей возможность повторного использования) части HTML. Компоненты могут вкладываться в другие компоненты, что обеспечивает возможность создания сложных приложений, состоящих из элементарных "кирпичиков". Также компоненты могут поддерживать внутреннее состояние - например, компонент TabList может хранить переменную, значением которой является открытая вкладка.

Пример
class Welcome extends React.Component {
render() {
return <h1>Привет, народ!</h1>
}
}

Назовите преимущества и ограничения React

Преимущества
1. Использование виртуального DOM повышает производительность

2. JSX (JavaScript и XML) делает код компонентов/блоков более читаемым.

3. Связывание данных в React предоставляет хорошие условия для создания динамичных приложений

4. Быстрый рендеринг. Использование встроенных методов для минимизации количества операций с DOM помогает оптимизировать и ускорить процесс обновления

5. Тестируемость. Имеются отличные встроенные инструменты для тестирования и отладки кода

Ограничения
1. Кривая обучения. Будучи библиотекой, а не полноценным фреймворком, он требует глубоких знаний по внедрению UI в MVC фреймворки

2. Одним из недостатков React также является ориентированность на слой представления. Для решения проблем "Представления" требуется поиск подходящей "Модели" и "Контроллера"

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

Что такое JSX и как он помогает разрабатывать приложения?

JSX позволяет создавать HTML-элементы прямо в JavaScript и помещать их в DOM без использования таких методов, как createElement() или appendChild(). JSX преобразует HTML-теги в элементы React. React использует JSX для шаблонизации вместо обычного JavaScript. Использовать JSX не обязательно, однако он предоставляет несколько преимуществ:

1. Он быстрее благодаря оптимизации во время компиляции кода в JavaScript
2. Он также является "типобезопасным", большинство ошибок перехватываются во время компиляции
3. Он позволяет легче и быстрее создавать шаблоны
Пример

 import React from 'react'

 class App extends React.Component {
    render() {
       return (
          <div>
             Привет, народ!
          </div>
       )
    }
 }
 export default App

Дэвид Кроудер. «Создание веб-сайта для чайников»

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

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

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

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

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

99 бутылок пива

Напишите функцию, которая вернет текст песни 99 бутылок пива как массив строк. То есть каждая строка песни должна быть элементом массива.