GeekHub-2020.js
GeekHub-2020.js copied to clipboard
redexp
Домашняя работа №5 - Webpack
Видео: https://youtu.be/fwiXFClgZN4
Основаня задача:
Сделать всё что описано в статье A mostly complete guide to webpack (2020) только вместо SASS подключите LESS используя less-loader. Всё делайте в папке webpack
Усложнённое задание:
Постройте таблицу на основе массива в файле webpack/src/App.js. Вот вам в помощь статья по работе с массивами в реакте https://uk.reactjs.org/docs/lists-and-keys.html
Почему-то при работе в папке webpack вываливает кучу ошибок еще на этапе установки webpack webpack-cli и webpack-dev-server. При работе в папке webpack-tutorial (как в статье) все устанавливается и работает без проблем.
@kononyukii Зміни ім'я проекту в файлі package.json
{
"name": "webpack_tutorial"
}
Помилки сипляться тому, що ти в проект з назвою webpack хочеш встановити модуль з такою ж назвою. В тексті помилки це чітко описано
@Daniel-developer5 так он обратно наверно все перенесет при каком-нибудь install. Может так и должно быть если dev?
@Daniel-developer5 так он обратно наверно все перенесет при каком-нибудь install. Может так и должно быть если dev?
Спробуйте встановити ще react-dom
npm i react-dom
І подивіться, що вийде. Просто, я так розумію, що потім, коли деплоїш додаток, то на проді воно робить npm install і додає модулі з dependencies. І так як воно не встановить react, на проді будуть помилки.
@redexp можно ли ставить все необходимые пакеты в корень как было показано в видео? у меня уже есть package.json в корне с установленным линт.
Извините, друзья, на этой неделе у меня навалилось много проблем, и времени пока написать бот для проверки домашки совсем нету. Возможно эту домашку я так и оставлю не проверенной
Добрый день. Мы копируем папку webpack к себе в репозиторий и в ней выполняем все действия, описанные в упомянутой статье или файлы в папке нужны для выполнения только усложненного задания?
Добрый день, вопрос, у меня у одного уже на пункте с webpack's development server начались проблемы? Cannot find module 'webpack-cli/bin/config-yargs' если делаю всё точно по инструкции, уже 3 раза переделывал всё
@SerhiiYahodzynskyi внимательней смотри моё видео, вместо webpack-dev-server запускай webpack serve
@RomanTaran в ней выполняем все действия
@redexp
Браузер не запускается как в мануале написано. заменил "start": "webpack-dev-server --mode development --open",
на "start": "webpack serve".
@MaksymSu понижай версию webpack(4.32.0) webpack-cli(3.3.0) тогда будет работать
@MaksymSu понижай версию webpack(4.32.0) webpack-cli(3.3.0) тогда будет работать
Навіщо? Краще використати webpack serve, як він і зробив. Це ж типу сучасніше)
не сложно, просто как-то оно все у всех( если гуглить) по-разному немного: можно так, а можно и так, а еще вот-так... для меня это все в новинку
Немного сложно в том, что если идти по шагам как описано в статье, то зачастую вываливаются те или иные ошибки, то есть приходится каждый шаг сверять с теми моментами, которые описал Сергей в своем обучающем видео. Ну а если и тогда не получается, то тогда приходится лезть в гугл за помощью
@RomanTaran @MaksymSu ребята, вы серьёзно? Возможно у меня сейчас настроение такое, но я ваши сообщения читаю как Статья такая сложная, что аж гуглить приходиться, а в интернете так много информации, я не ожидал... Впереди ещё сложнее, значительно.
@redexp наверно настроение. не статья сложная, все новое просто, нужно поклацать и поспрашивать чтобы понять, что к чему и почему так конфижится. Я не жаловался, а проявлял активность в чате )
Дело не в сложности статьи, а в том, что она не описывает уникального рецепта по выполнению тех или иных действий. Да, приходится гуглить, но в этом и состоит обучение, чтобы не как обезьянка нажимать клавиши, выполняя алгоритмы действий, а понимать, что ты делаешь и что может произойти. Поэтому лучше для себя разобраться сейчас. Так что мы не жалуемся
Может мне конечно повезло, но я шел по статье (основная задача) и у меня только 1 ошибка была, + 1 минута в гугле и все работает.
Народ, напишіть ось такий код:
import { createElement } from 'react'
console.dir(createElement('div'))
console.dir(document.createElement('div'))
І ви побачите кардинальну різницю між Virtual DOM та Native DOM. Перший, створенний реактом, є дуже компактним, що забезпечує таку швидкість реакту.
@Daniel-developer5 не согласен, в данном примере наоборот, реакт проигрывает по скорости нативному дому, так как тебе всё равно для отображения нужно будет преобразовать реактовский дом в обычный дом. Более того, если сделать все наши предыдущие домашки на реакте, то они будут на милисекунды, но медленее, так как в реакте, прежде чем вообще что-либо сделать - строится полностью весь dom, потом реакт находит разницу и только потом применяет её к реальному дому. На jquery если нам нужно добавить класс, то мы просто добавляем класс, ничего быстрее этого не бывает. Но если говорить об огромных сайтах, то подход реакта начинает выигрывать по скорости.
@redexp А, ну типу основна причина швидкості реакту - це динамічне порівняння між попереднім UI та поточним і "розумний" реднерінг змін. Да?)
@Daniel-developer5 не бывает быстрее кода, который делает изменения в DOM напрямую. Но, сделать огромное приложение, где все изменения делаются напрямую - очень сложно. Сделать его простым и понятным - ещё сложнее. Сделать его устойчивым к багам - просто титанический труд. Реакт решает эти проблемы в замен на несколько миллисекунд работы над виртуальным домом. Реакт - это не про скорость, реакт - это про баланс между понятным кодом и достаточной скоростью.