В данном видео вы узнаете как написать и использовать API для интеграции со сторонним сервисом. Добавите форму для регистрации или подписки на ваш сайт. Интегрируете форму с Mailchimp.

## Настройка проекта

Если у вас нет проекта и вы пишете с нуля рекомендую использовать установочную команду для NextJS проекта [тут](https://nextjs.org/docs#automatic-setup)

Просто выберете один из предложенных вариантов:

    npx create-next-app@latest
    # or
    yarn create next-app
    # or
    pnpm create next-app

После чего установите [Material UI](https://mui.com/material-ui/getting-started/installation/) и [Mailchimp](https://npm.io/package/mailchimp-marketing)  

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

[↓ Смотреть сейчас ↓](#watch-now)

## Зачем нужна форма регистрации

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

## Почему Mailchimp

Вряд ли вы не слышали про Mailchimp ранее. Это одна из самыз популярных платформ для email маркетинга. Но главное то что ее можно использовать совершенно бесплатно. При чем в бесплную подписку входит множество автоматизаций, груповая рассыслка писем, создание  email темплейтов, контроль и менеджмент контактов, интеграция с вашим сайтом в виде поп-апов и даже конструктор сайта.
Мне нравиться то что я могу контролировать весь код и внешний вид форм сам, и создав API ключ настроить интеграцию формы с Malchimp. Это легко и удобно, а главное - бесплатно.

## Watch Now


Что вы узнаете

Пишем HTML форму и API для регистрации с React JS и Mailchimp

Sign up form button graphic concept

В данном видео вы узнаете как написать и использовать API. Добавите форму для регистрации или подписки на ваш сайт. Настройте групповую рассылку email

Узнайте как написать и использовать API. Добавите форму для регистрации или подписки на ваш сайт. Делайте имейл рассылки и награждайте пользователей информацией от первых уст.

Пишем HTML форму. Интеграция сайта с email мактетинговой платформой Mailchimp. Основы интернет маркетинга.

Интеграция сайта с email мактетинговой платформой Mailchimp

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

По определению бинарное дерево имеет один корневой узел (root), который является вершиной дерева, от которой начинаются все остальные ветви. У каждого узла может быть не более одного родительского узла.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

Каждый узел может содержать какие-либо данные, которые называются ключом (key). Обычно ключи в бинарных деревьях являются уникальными и используются для поиска, вставки и удаления узлов.

Если узел не имеет потомков, то он называется листом (leaf). Все узлы, которые не являются листьями, называются внутренними узлами.

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

## Реализация бинарного дерева в JavaScript

В JavaScript бинарное дерево может быть реализовано с использованием объектов и ссылок на другие объекты. Каждый узел в дереве представляется объектом, который содержит ключ (key), ссылки на левый и правый потомки (left и right), а также ссылку на родительский узел (parent).

Пример реализации бинарного дерева в JavaScript:

    class Node {
      constructor(key) {
        this.key = key;
        this.left = null;
        this.right = null;
        this.parent = null;
      }
    }

    class BinaryTree {
      constructor() {
        this.root = null;
      }

      // Вставка нового узла
      insert(key) {
        const newNode = new Node(key);

        if (!this.root) {
          this.root = newNode;
        } else {
          this.insertNode(this.root, newNode);
        }
      }

      insertNode(node, newNode) {
        if (newNode.key < node.key) {
          if (node.left === null) {
            node.left = newNode;
            newNode.parent = node;
          } else {
            this.insertNode(node.left, newNode);
          }
        } else {
          if (node.right === null) {
            node.right = newNode;
            newNode.parent = node;
          } else {
            this.insertNode(node.right, newNode);
          }
        }
      }
    }

## Watch Now

Описание бинарного дерева

Пишем бинарное дерево поиска на JS - алгоритмы и структуры данных

Бинарное дерево JS

 Узнайте, что такое бинарное дерево, как оно реализуется в JavaScript и как его использовать для решения задач поиска

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

Бинарное дерево поиска в JavaScript: описание и реализация

Бинарное дерево в JavaScript: описание и реализация

Узнайте, как использовать статическую генерацию и серверный рендеринг в Next.js для создания динамических и статических страниц. Узнайте, как работают эти подходы, как их настроить и как использовать функции `getStaticProps` и `getServerSideProps`. Научитесь, как улучшить производительность сайта и оптимизировать его для поисковых систем.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

## Статическая генерация (SSG)

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

Для того чтобы использовать SSG в Next.js, нужно импортировать функцию `getStaticProps` в файле страницы. Эта функция будет вызываться при сборке проекта и возвращать данные, которые будут использоваться для генерации статической страницы. 

Например:

    export async function getStaticProps() {
      const res = await fetch('https://api.example.com/posts');
      const posts = await res.json();

      return {
        props: {
          posts,
        },
      };
    }

    function Blog({ posts }) {
    // рендеринг блога на основе данных, полученных из props
    }

    export default Blog;

В этом примере функция getStaticProps получает список постов с удаленного API и возвращает их в качестве пропсов для страницы блога. Когда проект будет собран, Next.js создаст статический файл для страницы блога, используя полученные данные.

## Серверный рендеринг (SSR)

Серверный рендеринг (SSR) - это процесс создания страниц на стороне сервера при каждом запросе. Это позволяет динамически изменять содержимое страницы на основе пользовательских запросов и данных.

Чтобы использовать SSR в Next.js, нужно импортировать функцию `getServerSideProps` в файле страницы. Эта функция будет вызываться при каждом запросе к странице и возвращать данные, которые будут использоваться для рендеринга страницы. 

Например:

    export async function getServerSideProps(context) {
      const { params } = context;
      const res = await fetch(`https://api.example.com/posts/${params.id}`);
      const post = await res.json();

      return {
        props: {
          post,
        },
      };
    }

    function Post({ post }) {
      // рендеринг поста на основе данных, полученных из props
    }

    export default Post;

В этом примере функция getServerSideProps получает параметр id из контекста запроса и использует его для получения данных конкретного поста с удаленного API. Когда пользователь запрашивает страницу поста, Next.js вызывает функцию getServerSideProps для получения данных и рендерит страницу на основе полученных пропсов.

## Watch Now

Смотрите так же пример использования в реально проекте


О чем вы узнаете в этом уроке

Что такое SSG и SSR в Next JS - динамические и статические страницы

Next JS уроки - SSR и SSG

Узнайте, как использовать функции getStaticProps и getServerSideProps

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

Статическая генерация и серверный рендеринг в Next.js: как использовать для построения динамических и статических страниц

Статическая генерация и серверный рендеринг в Next.js

Всем привет знаете как работать с асинхронным кодом, а именно как создавать Promise и использовать `awaite/async` а также `then` и `catch` цепочки для того чтобы справиться с этими промисами в JavaScript? 

Вообще что это именно асинхронный код? Это кусок кода который выполняется какое-то длительное время (не моментально) и так как код выполняется сверху вниз, а JS изначально браузерный язык, и в браузере мы не можем просто ждать. Потому что тогда у нас страницы будет бесконечно загружаться, если мы просто по очереди будем ждать. Иногда нужно выполнять сразу следующий код не дожидаясь выполнения предыдущей строки. Таким образом, получается, что нам нужно создать асинхронный код и именно Promise говорит Окей я тебе обещаю вернуть какой-то объект. Просто подожди или делай что хочешь, потом он обязательно появится, и мы можем сразу выполнять следующий код. 

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

### Пишем функцию которая возвращает Promise

    // index.js

    function success(){
      return new Promise((resolve, reject) =>{
        setTimeout(()=> resolve({status: 'OK'}), 3000);  
        })
    }

Итак, promise используем как класс, то есть используя ключевое слово `new`. И передаем в него функцию у которой есть 2 аргумента. Принято называть resolve и reject. Resolve это функция которую выполняют в положительном случае внутри промиса. Т.е. это важно возвращать результат промиса именно при помощи `resolve` или `reject`. Reject это функция котораую вызывают если что-то пошло не так или какие-то условия не выполнились внутри промиса. Т.е. с ее помощью вы сообщаете об ошибке.

    // index.js

    ....

    function failure(){
        return new Promise((resolve, reject) => {
          setTimeout(()=> reject({status: 'Failed'}), 3000);  
        })
    }

### Получаем ответ из Promise при помощи async await

Если у вас мало опыта с асинхронным кодом советую использовать `async await`. Это более понятный и читабельный подход.
Для этого нужно всего то добавить модификатор async для функции (таким образом мы говорим что она асинхронная и может выполняться долго), и для получения результата Promise ставим перед ним await.
Разберемся на примере:

    // index.js

    ....

    async function main(){
        const result = await success();
        console.log(result)
    }

    main();

Можете запустить файл при помощи `node index.js` 

### Получаем ответ из Promise при помощи then цепочки

У класса Promise есть методы `then` и `catch`. Которые принимают функции с одним аргументом, соответствующие `resolve` и `reject`. И выполняются эти функции по завершению промиса.
Разберемся на примере:

    // index.js

    ....

    function main(){
        success().then(resp => console.log(resp));
        console.log('after success')
    }

    main();

Обратите внимания что при использовании `then` нам не нужен модификатор `async`. И если вы запустите данный код, то увидете что `after success` напечатает до того как выполнится промис. Это потому что мы не используем `await`. 
Это главная разница между двумя подходами. `await` ждет пока выполнится процесс и по сути мы работам как с обычным асинхронным кодом. Тогда как `then` не принуждает ждать и просто добавляет `callback` для положительного сценария.

## Watch now

Смотрите видео где я подробнее расказываю про оба подхода. Так же работаю с неуспещными сценариями и показываю пример с использованием API


Что такое асинхронный код?

Async Promise

Multitask performing multiple task simultaneously using tablet laptop cellphone data

Узнай как работать с Promise, что лучше async/await или then/catch 

Узнай как работать с Promise, что лучше async/await или then/catch и остальные практики работы с асинхронным кодом

Асинхронный код в JS - используем Promise await и then подходы

Немного матчасти, стэйт это JS Объект который хранит в себе информацию о компоненте страницы в текущем ее состоянии. Изменять стэйт или состояние объекта можно только с помощью специальных функций, и как вы уже догадались одна из таких функций useState. useState это функция, она возвращает массив из двух элементов первый используется для чтения состояния объекта а второй для обновления или замены значения и прежде чем перейдем к примеру использования Давайте попробуем понять как все-таки работать useState и напишем сами подобную функцию только более примитивном виде.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

## Пишем свою функцию useState

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

    function useState(initialValue){
        return [state, updateState];
    }

Теперь давайте создадим эти переменные скажем что state будет объект - очень важно чтобы это был именно объект. Потому что это не будет работать с примитивными типами например числами или строками. Это работает в React потому что как я уже сказал мы будем делать примитивную версию стейта. К объекту добавим ключ value и передадим в него значение по-умолчанию.

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

    function useState(initialValue){
        сonst state = { value: initialValue };
        const updateState = newValue => state.value = newValue
        return [state, updateState];
    }

Таким образом мы получили `closure` или замыкание. То есть мы не можем поменять никак значение стейта и вообще мы не можем к нему никак достучаться пока мы не вызовем функцию. И эти два объекта они для нас скрыты (state и updateState) они есть внутри функции но за ее пределами нам к ним напрямую никак не достучатся.

## Настоящий useState из React

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

Зачем он нужен? Если обьяснять по-простому то страница в браузере это по сути статический HTML файл. Мы можем делать какие-то изменения с ним с помощью JS, но на чистом JS если вдуматься, это сделать не то чтобы сложно, просто для этого понадобиться сделать определенные шаги:
1. Запустить код каким-то действием (например onclick)
2. Найти желаемый тег
3. Обновить его состояние 

Если это нужно сделать для группы тегов тогда придется все делать в цикле, скорее всего.
React использует JSX который в последствии переводится в HTML, CSS и JS. Когда страница отрисована все данные с этой страницы храняться в JS объекте. Поэтому если мы используем переменную для какого-нибудь текста. Даже если мы поменяем ее значение при  клике это не отобразиться на странице. Для этого в React есть специальные функции для обносления состояния страници, или ее отдельных частей, как useState.

## Ислользуем useState в React

В данном примере показана кнопка при клике на которую будет меняться значение `count`

    import { useState } from 'react'

    function Counter(){
        const [count, setCount] = useState(0)

        const handleClick = _ => setCount(count + 1)

        return (
            <>
                <h2> Вы нажали на кнопку {count} раз</h2>
                <button> Нажал: {count} </button>
            </>)

    }

Как видите, не смотря на то что переменная состояния `count`  используется несколько раз. Нам достаточно один раз обновить ее используя `setCount` чтобы значение поменялось во всех местах

## Watch now

Лучше один раз увидеть чем 100 раз услышать. Больше примеров в видео :)


Что такое стэйт

как использовать useState ReactJS

Software development

Здесь вы узнаете про самый распространенный и довольно простой реакт хук useState и научитесь управлять состоянием страницы в React.

Примеры с объяснением useState и close в JS. Смотри видео и копируй код

Смотри, копируй и проверь как использовать useState хук в React

ReactJS хуки - как работает useState в реакт js

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

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

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

Как и любую другую задачу в программировании рекурсию лучше изучать на практике.

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

## Решение при помощи цикла

Если вы не знакомы с рекурсией скорее всего вы решите задачу при помощт цикла for. Назовем данную функцию pow 

    function pow(num, power)

Пишем цикл от 0 до *Power* то есть до степени. Создаем также переменную result, присваиваем изначально 1 и дальше мы говорим что result равен result умноженное на число:

    function pow(num, power) {
      let result = 1;

      for (let i = 0; i < power; i++) {
result = result * num;
      }
      return result;
    }

То есть в первый раз когда Power равен 1 - мы будем идти только один раз. Мы  умножим число на единицу и это результат будет данное число. Если это будет 0 тогда мы даже не зайдем в этот цикл и любое число в степени 0 будет 1. Если это будет любое другое число, тогда будем умножать результат на число столько сколько нам нужно.

## Рекурсивное решение степени

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

    function powRecursive(num, pow) {
      if (pow === 1) return num;
      if (pow === 0) return 1;
    }

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

Теперь просто возвращаем num умножениый на резултат этой же функции если бы ее вызвали со степенью меньше на еденицу:

    function powRecursive(num, pow) {
      if (pow === 1) return num;
      if (pow === 0) return 1;

      const result = num * powRecursive(num, pow - 1);
      return result;
    }

Похожим образом работает поиск числа из последовательость фибоначчи. Вот код

    function fibonachi(step) {
      if (step === 1) return 1;
      if (step <= 0) return 0;
      const result = fibonachi(step - 1) + fibonachi(step - 2);
      return result;
    }

## Watch Now

Смотрите видео чтобы получить подробное обьяснение. 


Что такое рекурсия?

Как написать рекурсивную функцию в JavaScript поиск чисел Фибоначчи

vector optical illusion background flat style

Рекурсия - это жемчужина теории алгоритмов. Если коротко то это вызов функции самой себя. Но все не так просто.

Освой рекурсию - это жемчужина теории алгоритмов. Если коротко то это вызов функции самой себя. 

Рекурсия на примере последовательности Фибоначчи 

Мне нравится делать игры. Ещё будучи подростком я всегда мечтал что когда-нибудь сделаю свою игру. Возможно это одна из причин по которой и я ушёл в IT.

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

Я выбрал flappy Bird как проект для изучения JS, так как эту игру знают, все она довольно простая, но при этом интересная,  и покрывает все базовые структуры языка программирования.

[↓↓↓ Пропустить текст, смотреть видео ↓↓↓](#watch-now)

## Ссылки на ресурсы картинки

1. Ссылка на фоновую картинку:  https://i.ibb.co/Q9yv5Jk/flappy-bird-set.png
2. Ссылка на птицу: https://bevouliin.com/flappy-box-bird-free-2d-game-sprites/

## Как сделать HTML5 игру 

В HTML есть тег canvas - это специальный контейнер для отображения компьютерной графики с помощью JS. 

Мы будем использовать лишь малую часть того что он может в контексте  2D для, но этого нам будет достаточно чтобы написать игру.

Давайте с этого и начнем.

Создадим базовый html файл (если вы работаете в VSCode в пустом html файле напишите html  и выберете html5 из подсказки, нажав enter). Добавим так canvas в body.  И кнопку которая будет начинать игру.  Можете просто скопировать следующий код:

```
    <!DOCTYPE html>
    <html lang="en">
     <head>
       <meta charset="UTF-8" />
       <meta http-equiv="X-UA-Compatible" content="IE=edge" />
       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
       <title>Document</title>
       <link rel="stylesheet" href="style.css" />
       <script defer src="main.js"></script>
     </head>
     <body>
       <canvas id="main"></canvas>
       <button id="start" onclick="startGame();">Start Game</button>
     </body>
    </html>
```

CSS стили не являются частью данной темы, но вы можете использовать мой код для стилей [тут](https://codepen.io/alexandr-borkun/pen/wvjJZdN)

## Как найти canvas в JS

JavaScript по природе знает как работать с браузером. С помощью функции getElementById  мы можем найти кнопку и canvas.  Начнём с canvas

```
    const canvas = document.getElementById("main");
    const ctx = canvas.getContext("2d");
```

В первой строке мы нашли canvas, а в следующий достали 2D контекста (он содержит все функции для работы с 2D).

Чтобы работать иллюстрациями они должны быть добавлены в html, или мы можем их подгрузить прямо в коде. Делается это очень просто. Создаем new Image и после к ней добавляется путь к картинке.

```
    //load BG image
    const bgImage = new Image();
    bgImage.src = "https://i.ibb.co/Q9yv5Jk/flappy-bird-set.png";

    const birdImg = new Image();
    birdImg.src = "sprites/skeleton-animation_00.png";
```

Картинки подгружаются какое-то время. До того как они загрузится мы не можем их использовать в игре. Для этого, у класса Image, есть метод onload. В него можно передать функцию, которая выполняется как только картинка загрузиться в игру.

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

```
    let startButton;

    function enableStartButton() {
     if (!startButton) startButton = document.getElementById("start");
     startButton.classList.add("active");
    }

    birdImg.onload = enableStartButton();
```

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

```
    function startGame() {
     startButton.classList.remove("active");
     animate();
    }

    function animate(){
     // infinite game loop
     window.requestAnimationFrame(animate);
    }
```

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

```
    function animate(){
     ctx.drawImage(
       bgImage,
       0,
       0,
       431,
       768,
       0,
       0,
       canvas.width,
       canvas.height
     );
     // infinite game loop
     window.requestAnimationFrame(animate);
    }
```

Функция drawImage Используется для отображения картинки в игре в неё мы передаём 9 параметров:  картинка,  4 координата квадрата которые мы из нее вырезаем, и 4 координата квадрата в который мы её вставляем.

Теперь при нажатии на кнопку Start мы должны видеть фоновую картинку игры. (если нет убедитесь что файл с кодом назван main.js)

## Watch Now

Как отобразить птицу, а также добавить гравитацию и кнопку прыжка вы можете узнать посмотрев видео


Учим JS делая игру

Flappy Bird Part 1

game over retro scene

В данной статье ты узнаешь про разработке игры Flappy Bird на JS без использования готовых фреймворков. 

Как сделать HTML5 игру на чистом JS. Делаем Flappy Bird часть 1

Dynamic импорт, или lazy импорт нужен для того чтоб компоненты подгружались не сразу а по надобности, таким образом снизив размер базовой страницы. Меньше размер - быстрее загрузка. Быстрее загрузка - хорошее SEO и довольные пользователи.
Особенно удобно использовать ленивую загрузку при написании блогов.
В блогах есть множество UI компонентов, сколько есть варантов размещения картинки с текстом? Например когда картинка слева, а справа текст или наоборот, или текст поверх картинки, или текст появляется при клике на картинку и т.д. Примеров очень много. Да и самих страниц (блог-постов) может быть сотни. Хардкодить данные никто не будет, скорее всего текст и картинки буду храниться в CMS. CMS - это система управления контентом. В ней можно добавлять тексты, картинки и присваивать каждому типу контента лейблы (теги, названия). Т.е. прям в CMS можно просто написать документы которые будут выступать в качестве контента для блога. Потом интегрировать CMS с кодом, и сайт начнет получать данные.
Но данные это просто JSON обьекты с текстом и ссылками на картинки (или другие медиа).
И в этот момент стоит задуматься о динамическом импорте.

[↓ Смотреть Видео ↓](#watch-now)

## Пример данных из CMS

Приблизительно так выглядит структура данных которые получает сайт из CMS

    {
      sys: {
        type: 'imageWithDescription',
      },
      fields: {
        cover: [Object],
        title: 'Узнайте как написать адаптивное веб приложение на HTML CSS и JS',
        description: 'Научитесь использовать новейшие фичи HTML CSS и JS чтобы написать адаптивное приложение всего за час.'
      }
    }

У каждого обьекта есть `sys` и `fields` поля. Где `sys.type` тип обьекта, а все что в `fields` это разные виды контента принадлежащие этому типу.

## Добавляем импорт с условием

Теперь молжно создать функцию которая будет переводить наш контент в React компонент в зависимости от типа (обратите внимание что в примере я использую Next JS):

    import dynamic from 'next/dynamic'

    const renderComponent = ({sys, fields}) => {
      const elementID = sys.type;

      switch(elementId){
        case 'imageWithButton':{
          const ImageWithButton = dynamic(() => import('components/ImageWithButton'))
          return <ImageWithButton key={sys.id} {...fields}/>
        }
        case 'imageWithDescription':{
          const ImageWithDescription = dynamic(() => import('components/ImageWithDescription'))
          return <ImageWithDescription key={sys.id} {...fields}/>
        }
        default:{
          return <span>Component with type {elementId} not found</span>
        }
      }
    }

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

## Используем функцию для динамического импорта компонентов

Очень важно настроить вашу CMS и сделать так чтобы компонент страницы мог хранить в себе много различных видов контента в виде массива. В разных CMS это может настраиватся по разному. Таким образом наш код на каждой странице будет получать этот массив объектов и все что нам нужно сделать это отобразить каждый из них.
И как вы знаете, в этом может помочь функция `map`:

    // [blog].js
    export default const Page = data => data.map(content => renderComponent(content));

Если вы как и я используете NextJS то это весь код который будет написан непосредственно для страницы блога. 
Мы просто проходимся по массиву данных полученых из CMS и дальше рендерим их используя функцию которую мы создали ранее!

## Watch now


Когда использовать динамический импорт

SEO оптимизация с помощью dynamic import для React и Next js приложений

An analyst working at laptop with automation process. business process automation, business process workflow

Analyst working at laptop with automation process

В этом уроке по JS вы узнаете как с помощью кода можно отображать разные React элементы в зависимости от контента.

Читай и смотри пример как ускорить загрузку твоего сайта используя динамический импорт в React/Next JS. Как это решение поможет сделать сайт с минимальным количеством кода.

Улучшите SEO используя динамический импорт UI компонентов в React JS

Динамический импорт UI компонентов в React JS

Нужно реализовать функцию, в которую передают 2 аргумента: массив чисел `nums` и число `target`.
Функция должна вернуть индексы двух чисел из массива, сумма которых равна `target` 

[↓ Смотреть видео ↓](#watch-now)

### Пример

    Input: nums = [2,7,3,5], target = 5
    Output: [0,1]
    Explanation: Потому что nums[0] + nums[2] == 5, возвращаем [0, 2].

## Наивное решение проблемы

Самый простой и очевидный способ будет сделать два вложенных цикла for, пробежаться по массиву nums перебирая каждую пару индексов.

    const findSum = function(nums, target) {
      for(let i = 0; i < nums.length; i++){
        for(let j=0; j < nums.length; i++){
          if(i===j) continue;
          const sum = nums[i] + nums[j];
          if(sum === target) return [i, j];
        }
      }
    }

Данный способ возможно простой для понимания. И это один из первых решений которые обычно приходят в голову. 
Тем не менее в нем есть огромный недостаток. Давайте узнаем big O данного решение. Нас интересует скорость, или кол-вот операций. 
Так как мы используем вложенный цикл for это будет кубическая формула, т.е. `O(n^2)`. Что это значит? Да то что если в массиве 100 чисел, то данному алгоритму понадобиться до 10 000 повторений чтобы найти сумму.

## Как ускорить алгоритм?

Итак, чтобы решать не наивным способом сначало стоит начать с вопросов. К примеру, что такое сумма? Это `a + b = c`. Где в нашем условии `c`? - это `target`, верно? А как нам найти `b` если известно `a`? 
`b = c - a`
Т.е. если мы напишем только один цикл, то на каждой итерации (на каждом повторе цикла) наше `nums[i]` и будет `a`. Значит  сможем найти `b`. Но как за единицу времени O(1) узнать индекс элемента в массиве? Для этого нам понадобиться перевести массив в обьект, где каждое значение массива будет ключом, а индекс - "парой" значением.

## Решаем задачу за линейное время

Если быть совсем точным то время будет  `O(2*n)` но так как константы игнорируются - остается `O(n)`

    const findSum = function(nums, target) {
      // переводим массив в объект
      let numsObj = {}
      for(let i = 0; i < nums.length; i++){
          numsObj[nums[i]] = i;
          const diff = target - nums[i];
          if((numsObj[diff]  || numsObj[diff] === 0) && i !== numsObj[diff]){
              return [numsObj[diff], i]
          }
      }
      //  узнаем и затем находим индекс разницы в созданном объекте
      for(let i = 0; i < nums.length; i++){
        const diff = target - nums[i];
          if((numsObj[diff]  || numsObj[diff] === 0) && i !== numsObj[diff]){
            return [numsObj[diff], i]
          }
        }
      };

## Watch Now


Условие 

JS уроки: техническое собеседование (LeetCode #1 Sum Two) coding challenge

Blackboard with a sum of a question mark and a light bulb

Разбор решения задачи на поиск двух чисел для заданной суммы с линейной сложностью

Разбор наивного решения и решения с линейной скоростью. Видео пример задания. 

Поиск чисел для заданной суммы JS - coding challenge

Задача на поиск чисел для заданной суммы Sum Two

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

[↓ Посмотреть видео-пример ↓](#watch-now)

## Как работает фильтр в JS

Метод фильтр можно применять к любым массивам в JS. Создатели языка заимплементили основную логику, а саму логику сравнения авбстрагировали и оставили нам. Что прекрасно, ведь массивы могут хранить что угодно! И не знаю как вас, но меня в школе учили, на математике, что груши с яблоками нельзя сравнивать.
Что это значит? Что мы должны передать эту логику сравнения в фильтр. Давайте добавим фильтр для чисел, и оставим только те что делятся на 3.

    // index.js

    const nums = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    const disionOf3 = nums.filter(it=> it%3 === 0);
    console.log(disionOf3); // [3, 6, 9]

Как видете мы создали массив с числами, применили метод `filter` и в него мы передали функцию (это стрелочная функция, или лямбда, но можно и обычную передать). Функция принимает один аргумент - он будет играть роль элемента массива. А возвращать `true` или `false`. Если правда - элемент остаеться в массиве, нет - удаляется. 

Так же не стоит забывать что метод фильтр не модифицирует оригинальный массив, а возвращает новый, элементы которого соответствует заданному условию.

## Пример с массивом обьектов

    // index.js

    const friends = [
      {
        name: "Sasha", 
        age: 30
      },
      {
        name: "Jack",
        age: 35
      },
      {
        name: "Tom",
        age: 12
      }]

      const canDrinkBeer = friends.filter(it => it.age > 18);
      console.log(canDrinkBeer)

### Watch Now


Когда применяется фильтр массива

Фильтр обьектов в массиве React за 5 минут

Red LED filter of 0 and 1 with outcome of only zeros

Filtering

Как наладить фильтр обьектов в React с помощью JS

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

OB Web Dev

OB Web Dev

Блог