Рендер страницы в JavaScript

Простой урок, но при этом полезная тема про распаковку структур. Очень ждал что-нибудь про React или vue

Спасибо!

Спасибо.

Отличный материал, давно задавался вопросом от чего отталкиваться при работе с фронтендом, и очень помогла проведённая аналогия бекендом. Спасибо!

За временнЫе метки - респект!

Спасибо, очень интересно!

Возник вопрос, почему в современном js так любят использовать const вместо переменных? Разве это не противоречит самой сути констант?

Супер. Очень доходчиво

Материал на высшем уровне!

Спасибо, очень интересно! Если использовать history api то получается если взять к примеру вк. Левая часть (меню) статическая, а правая динамическая. Это получается на сервере возвращается json и на основе этого рендерится новостная лента список друзей мета информация страницы и тд?

Таким образом при воспроизведении музыки спокойно можно кликать на разные вкладки меню без перезагрузки страницы? Если вместо json фрагмент html отправить site.local/api/news это будет не быстрее чем на клиенте рендерить?

Спасибо. Хорошо излагаете.

Отличный материал. Но несколько "НО":

• нужно было сказать, что есть 2 метода добавления: append и appendChild. В первом можно добавить как Node узел, так и текст. В случае с appendChild можно добавить только Node. Так как мы с помощью append добавляем только Node, лучше использовать appendChild. Есть подозрения, что в этом случае интерпритатор не проверяет тип, что экономит время
• getElementByID устарел (хоть и работает). Для таких целей лучше использовать document.querySelector(), так будет понятнее для людей, кто пришел в профессию из верстки
• JavaScript инициализирует все функции перед выполнением кода только тогда, когда используется декларативное описание. При использовании Function Expression такой подход вызовет ошибку, ибо функция создается только в момент объявления

А так все по делу

Как всегда спасибо, и есть вопрос, я посмотрел пока только 6 уроков, но вижу что react даже с JSX сложен для восприятия и главное для редактирования простым верстальщиком который знает html+css, посмотрел на vue и он вроде проще для визуального восприятия и изменения верстки, вопрос почему вы выбрали React и чем он лучше Vue, спасибо!

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

Спасибо за урок! Есть немного обратной связи:

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

2. Зависимостей между функциями лучше же тоже избегать, даже если они чистые?

3. Сокращать синтакис объявления объекта мне кажется лишним и ошибочным. Не знаю почему разработчики пошли по этому пути! :)

lots.forEach((lot) => {
    node.append(Lot({ lot: lot }));
});

lots.forEach((lot) => {
    node.append(Lot({ lot }));
});

Первый вариант мне кажется более читаемым.

Спасибо за как всегда блестящую подачу материала, Дмитрий! Просмотрел весь цикл до конца и вернулся в начало, чтобы переосмыслить увиденное. И неожиданно для себя обнаружил несколько однотипных тавтологий и мест, которые можно было бы упростить. Я по поводу деструктуризации. Она теряет смысл, когда в объявлении функции и при её вызове используется один объект. Таких примеров здесь несколько, например

function App ({state}) {...}

и потом в вызовах

App({state})

Здесь достаточно простого синтаксиса

function App (state) {...}

а затем

App(state)

В вызовах других методов, например, в Clock внутри App() не нужна такая подстановка аргументов, как

node.append(Clock({time: time.state}))

Вместо этого можно было просто написать

node.append(Clock(state))

поскольку функция Clock объявлена с оператором деструктуризации как

function Clock({time})

И таких примеров тоже несколько.

Интересно получается

let state = {
  time: new Date(),
  lotsData: [
    { id: 1, title: 'Apple', description: 'Apple description', price: '16' },
    { id: 2, title: 'Orange', description: 'Orange description', price: '41' },
  ],
};

function Logo() {
  return '<img class="logo" src="img-logo.png" alt="" />';
}

function Header() {
  return '<header class="header">${Logo()}</header>';
}

function Clock({ time }) {
  return '<div class="clock">${time.toLocaleTimeString()}</div>';
}

function Lot(lotData) {
  return (
    `<article class="lot">
      <div>${lotData.price}</div>
      <h1>${lotData.title}</h1>
      <p>${lotData.description}</p>
    </article>'
  );
}

function Lots({ lotsData }) {
  return lotsData.map((lotData) => '<div class="lots">${Lot(lotData)}</div>');
}

function App({ state }) {
  return '<div class="app">${Header()} ${Clock({ time: state.time })} ${Lots({
    lotsData: state.lotsData,
  })}</div>';
}

function renderDom(realDom, virtualDom) {
  realDom.innerHTML = virtualDom;
}

function render({ state }) {
  renderDom(document.getElementById('root'), App({ state }));
}

render({ state });

setInterval(() => {
  state = {
    ...state,
    time: new Date(),
  };
  render({ state });
});