🔥 Новости от команды Лектрума🔥

18 марта в 19:30 по Киеву и 20:30 по Москве пройдёт вебинар для новичков на тему «Старт в веб-разработку: JavaScript».

Программа:
🔸 Зачем нужен JavaScript?
🔸 План развития в разработке на основе JS.
🔸 Как эффективно стартовать новичку в разработку?
🔸 Требования к начинающим разработчикам.
🔸 QA с экспертом: разберём вопросы, которые беспокоят новичков.

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


Нажимайте на кнопку для регистрации ⬇️ и занимайте места.

​В чем разница между браузерным и виртуальным DOM?

Браузерный DOM
DOM расшифровывается как "Document Object Model" (объектная модель документа). Браузерный DOM предоставляет интерфейс (API) для работы с узлами. Данный интерфейс включает методы querySelector(), textContent(), appendChild(), removeChild() и т.д.

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

Виртуальный DOM
Виртуальный DOM - это объектное представление DOM, хранимое в оперативной памяти. При каждом изменении состояния приложения обновляется виртуальный, а не браузерный DOM.

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

В чем преимущество виртуального DOM?

При добавлении новых элементов в UI создается виртуальное представление дерева элементов. Каждый элемент является узлом этого дерева. При изменении состояния любого из этих элементов создается новый виртуальный DOM. Новое представление сравнивается со старым, определяется разница.

После этого вычисляется наиболее эффективный способ применения изменений к браузерному DOM. Это позволяет минимизировать количество операций обновления, что, в свою очередь, снижает "цену" обновления реального DOM.

Преимущества виртуального DOM
1. Процесс обновления является сбалансированным и оптимизированным
2. Связывание данных в React предполагает соблюдение некоторых правил для создания динамичных приложений
3. Идеально подходит для "mobile first" приложений
4. Умный рендеринг. Использование эвристических методов сравнения позволяет минимизировать количество операций обновления

Сортировка по последней букве

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

Примеры:

 last('man i need a taxi up to ubud')
 //['a', 'need', 'ubud', 'i', 'taxi', 'man', 'to', 'up']

last('what time are we climbing up the volcano')
 //['time', 'are', 'we', 'the', 'climbing', 'volcano', 'up', 'what'])

last('take me to semynak')
//['take', 'me', 'semynak', 'to']

Определите разницу между компонентами с состоянием и компонентами без состояния

Компоненты с состоянием и без называются по разному:
Компоненты-контейнеры и компоненты-представители
Умные и глупые компоненты

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

Пример Stateful/Container/Smart компонент:

 class Main extends Component {
  constructor() {
    super()
    this.state = {
      books: []
    }
  }
  render() {
    <BooksList books={this.state.books} />
  }
 }

Пример Stateless/Presentational/Dumb компонент
const BooksList = ({ books }) => {
return (
<ul>
{books.map(book => <li key={book.id}>{book.name}</li>})}
</ul>
)
}

На чем писать Web приложения?

Taylor Otwell создал целую экосистему для веб разработки, сегодня она включает в себя:

- Коробочную интеграцию с Vue.js
- Механизм для отложенных задач
- Сокеты с авторизацией
и многое другое.

На канале WebCraft практикующие разработчики делятся тонкостями работы с Laravel и Vue.js, бест практиками в PHP / JS / CSS

Этот канал тебя прокачает, подписывайся 👇

Для чего нужны ключи (keys)?

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

 function NumberList(props) {
   const numbers = props.numbers
   const listItems = numbers.map((number) =>
     <li key={number.toString()}>
       {number}
     </li>
   )
   return (
     <ul>{listItems}</ul>
   )
 }

 const numbers = [1, 2, 3, 4, 5]
 ReactDOM.render(
   <NumberList numbers={numbers} />,
   document.getElementById('root')
 )

Случаи безопасного использование индексов элементов в качестве ключей
1. Список является статичным, т.е. никогда не меняется
2. Порядок расположения элементов также не меняется
3. Список не будет фильтроваться (добавление/удаление элементов из списка)
4. Элементы не имеют идентификаторов или других уникальных значений
Обратите внимание: использование индексов в качестве ключей может привести к непредсказуемому поведению компонента.

​Что такое React Router? Для чего в React Router 4 используется ключевое слово switch?

React Router реализует основанный на компонентах подход к маршрутизации. Он предоставляет различные компоненты, связанные с роутингом, для нужд приложения и платформы.
Он обеспечивает синхронизацию UI с URL (адресом страницы), имеет простой API с мощными возможностями, такими как "ленивая" (отложенная) загрузка, динамический поиск совпадения с маршрутом, обработка переключений между страницами и т.д.

 import React, { Component } from 'react'
 import { BrowserRouter as Router, Route, Redirect, Switch } from 'react-router-dom'

 import Todos from './components/Todos/Todos'
 import TodosNew from './components/TodosNew/TodosNew'
 import TodoShow from './components/TodoShow/TodoShow'

 class Router extends Component {
     constructor(props) {
         super(props)
     }

     render() {
         return (
             <Router>
                 <Switch>
                     <Route path='/todos/new' component={ TodosNew } />
                     <Route path='/todos/:id' component={ TodoShow } />
                     <Route exact path='/' component={ Todos } />
                     <Redirect from='*' to='/' />
                 </Switch>
             </Router>
         )
     }
 }

 export default Router

< Router />
Компонент <Router /> оборачивает маршруты (routes) приложения. Внутрь этого компонента помещаются компоненты <Route />, содержащие ссылки на другие страницы.

<Switch />
Данный компонент позволяет рендерить компонент по совпавшему маршруту или резервный контент при отсутствии совпадения. <Switch> возвращает первый совпавший маршрут.

exact
Атрибут exact указывает на необходимость точного совпадения с маршрутом.

The Road to GraphQL

Эта книга учит вас прагматичному GraphQL в JavaScript с нуля. Вы узнаете, как взаимодействовать с API-интерфейсом GraphQL в React с помощью методов HTTP, а также как создавать более крупные приложения с Apollo Client в качестве вашей библиотеки GraphQL в React или Apollo Server в Node.

Расстояние на лифте

Представьте, что вы находитесь на 5 этаже здания, затем на лифте едете на 2 этаж, после чего на 8. В сумме вы проехали 3 + 6 = 9 этажей.
Создайте функцию, которая принимает массив из этажей, которые вы посетите и вернет сумму этажей, которые вы проедете.

Примеры:
elevatorDistance([5,2,8]) = 9
elevatorDistance([1,2,3]) = 2
elevatorDistance([7,1,7,1]) = 18