Мне нужно создать страницу, которая отображает последние действия со стороны пользователей, так что мне просто нужно получить данные от REST и отобразить их в какой-то фильтруемой таблице, ну и обновлять её, если что-то изменится на сервере. Я думал, может быть, использовать JQuery для извлечения и отображения данных?
— Конечно, ты все еще можешь использовать jQuery. Но если ты собираешься в будущем писать что-то посложнее, то тебе, наверное, стоит попробовать React. Он будет очень полезен тебе в будущем.
— Звучит не плохо. Как начать работать с React?
— Самый простой способ — это написать npm install create-react-app -g в терминале и можешь сразу начать работать над проектом.
— Круто, т.е. ты хочешь сказать, что я не должен ничего дополнительного устанавливать?
— Неа.
— А мне нужно устанавливать какие-то специальные IDE например Visual Studio, Android Studio, или Xcode?
— Нет. Просто cd в папку с приложением и начинай с npm start. На этом все.
— Но я же должен собирать свое приложение и долго ждать пока оно пересобирется каждый раз, когда я что-нибудь поменяю?
— Неа. Если ты делаешь изменения на странице, то она автоматически обновится для тебя. Если ты немного меняешь CSS, то он будет перезагружен на лету, без полного обновления страницы.
— Выглядит очень полезным. Похоже это может немного ускорить разработку. Но подожди, что если я хочу опубликовать свой сайт? Просто больше никто не публикует index.html, app.css, main.js не минифицированные, так ведь?
— Ага, ты прав. Если ты когда-нибудь захочешь опубликовать свой сайт, просто запусти npm run build и все что тебе нужно будет лежать в твоей/build папке. Минифицировано, оптимизировано и полностью готовое к публикации.
— Спасибо, было очень познавательно.
*Занавес опускается, звучат аплодисменты, крики из зала. Наши 2 разработчика кланяются, пожимают руки и улетают на драконах в закат*
Давайте получать удовольствие и немного больше делиться позитивными и радостными моментами в JS сообществе.
» Оригинал ответа
Комментарии (45)
MikeLP
31.10.2016 00:25Использую сейчас на проекте create-react-app. Там много чего не поддерживается, хотя в принципе настроить на webpack это несложно(почти). И вообще webpack (в том числе вышеупомянутый конфиг) не серебреная пуля. Почти удобно. Но реализация немного хромает.
jbubsk
31.10.2016 01:07+9Удивительно бесполезный пост про jquery, судя по тэгу. Хорошо хоть одно слово в статье есть про него. Так скоро будет не найти толковых технических статей, если по ключевым тэгам будут такие публикации выкладывать.
Demogor
31.10.2016 02:52+8— Круто, т.е. ты хочешь сказать, что я не должен ничего дополнительного устанавливать?
Ну да, не считая npm, кучи зависимостей для указанного модуля и, соответственно, нехилого количества кода, в котором может быть что угодно.
Npm мне друг, но истина — дороже (С)
vintage
31.10.2016 04:56+6Если ты когда-нибудь захочешь опубликовать свой сайт
Именно "если", а не "когда"? ;-)
Alexeyco
31.10.2016 10:22+3Я давно заметил, что есть такой тип программистов, которые «пишут в стол». Точнее, «пишут в битбакет». Есть у них какая-то своя
бредоваяидея, и вот они, под бутылочку пива, нервно хихикая вечерами что-то кодят.
Вот есть конкретный пример. Знакомый, который третий год пишет «убийцу секснарода». Я через него об этом секснароде и узнал. Судя по его рассказам, его проект использует всегда все самое передовое и на порядок превосходит конкурента. Правда когда первый деплой, пока не совсем понятно.
imater
31.10.2016 13:58+6Не всё так мрачно. Ваш знакомый оттачивает свои навыки и продаёт их на реальных проектах. А это хобби, как у женщин плетение бисером или непродаваемые картины. А после деплоя, он станет заложником своего проекта и ему придётся отвлечся от пива в пользу маркетинга своего проекта, допиливания фич и выпиливания багов, сопровождения юзера, оформления ИП для окупания проекта… Он очень боится своего успеха.
Alexeyco
31.10.2016 14:58+1Я никого не осуждаю… но как по мне, бояться нужно спида, войны, рака, жениться на дуре, детей от левого мужика, отказа тормозов на большой скорости, межпозвоночной грыжи и еще клоунов-карликов. Но никак не успеха.
Methos
31.10.2016 10:20— Но я же должен собирать свое приложение и долго ждать пока оно пересобирется каждый раз, когда я что-нибудь поменяю?
— Неа. Если ты делаешь изменения на странице, то она автоматически обновится для тебя. Если ты немного меняешь CSS, то он будет перезагружен на лету, без полного обновления страницы.
Ответ совершенно не отвечает на вопрос. Да ещё и неправильно ответили. Ибо по любому придётся немного, но ждать.yogurt1
01.11.2016 15:28Аж целые 200 мс на передачу модуля по WebSocket
Ах да, 15 мс на инъекцию во всех другие модулиMethos
01.11.2016 15:36Нет. Часто сборка и компиляция проекта может занимать секунды. Ждать 3 секунды каждый раз, когда отредактировал js код? Это долго.
yogurt1
02.11.2016 02:03Если обновился модуль, то собирается только он сам
Это длится не больше четверти секунды, если модуль очень жирный и от него зависят другие модули
https://webpack.github.io/docs/hot-module-replacement-with-webpack.html
mtt
31.10.2016 10:22+1Написал npm install create-react-app -g, а затем в папке «C:\js» написал npm start. Как теперь посмотреть проект? Где я могу что либо поменять, чтобы оно само обновилось? В папке создался только npm-debug.log в котором ничего вразумительного. Что я делаю не так?
Alexeyco
31.10.2016 10:41+11> *Занавес опускается, звучат аплодисменты, крики из зала. Наши 2 разработчика кланяются, пожимают руки и улетают на драконах в закат*
mtt
31.10.2016 17:41+1Рассказали через личку, оказывается нужно еще было сделать «create-react-app имя-проекта»
Tiendil
31.10.2016 10:40+2Ну если бложик написать или там лендинг, то пойдёт.
А если что-то серьёзное, то вся эта автоматизация идёт лесом и тонет под горой левых зависимостей и требований.
evocatus
31.10.2016 10:43+2А я наоборот: с большим удовольствием ушёл от Python+Django к Golang+httprouter. Пишу вручную код SQL для создания таблиц, думаю об оптимизации, генерирую SQL-запросы без всяких ORM, текущий проект (система учёта посещений для внутреннего пользования одной конторы) делаю вообще без единой строчки JS на данный момент и доволен этим. Формы, GET/POST/DELETE, аутентификация через cookie, https, красивый шрифт и щепотка css — больше ничего не надо
Alexeyco
31.10.2016 13:12+8Я думал, в конце вы расскажете, как посадили картоху у себя на участке, а с будущей весны будете разводить коров и генерировать биогаз, чтобы быть полностью энергонезависимым.
Laney1
31.10.2016 11:01+11а теперь, рубрика «вместо тысячи слов». create-react-app устанавливает в node_modules примерно 750 библиотек общим весом больше 100 мегабайт
mtt
31.10.2016 11:23+1Это всё библиотеки созданные Фейсбуком?
Laney1
31.10.2016 14:05+2нет конечно, там просто какая-то куча мусора из npm. Например, https://www.npmjs.com/package/is-primitive — посмотрите исходники этого чуда и поразитесь
mtt
31.10.2016 14:48+2А если хозяин этого is-primitive вдруг закоммитит новую версию, согласно своим новым представлениям о примитивах, то он сломает чужой create-react-app?
Vladimir37
31.10.2016 19:39-1И что? Они устанавливаются одной командой и никак не усложняют процесс разработки.
yogurt1
01.11.2016 15:32Компилер, парсер, трансплайер, минификатор, статический анализатор JS
Lodash, React, Webpack
В этом нет ничего страшного, это нормально
Поставь с десяток пакетов по ключевому слову React и у тебя вырастит папка node_modules аж на 5 мегабайт!
Иногда стоит запускать npm dedupe и npm prune, что бы удалить дупликаты и выпилить лишние пакеты, от которых ничего не зависит
Пора бы уже научится использовать npm или не использовать его вообще, как и все, что связано с JS
DenimTornado
31.10.2016 12:37+2Да блин, ну вы о чём?? Ну будет солдатик сидеть перед развёрнутым ракетным комплексом, а дальше то, что? Ему надо направить (роутинг), прицелиться (контроллеры), найти снаряды (модель) и уже только тогда «увидеть» результат! Нужен ли ему в 2016 году ракетный комплект, вот в чём вопрос?
Каково это, на самом деле, писать на JavaScript в 2016 году?
1. Определить цели и задачи, которые должно решать приложение;
2. Выбрать инструмент, который позволит решить цели и задачи из пункта 1;
3. ...
4. Profit
arhangelsoft
31.10.2016 19:40На мой взгляд, никогда не будет такой вот серебренной пули. Каждый проект это мозайка, в которой части обладают своеобразной формой и собираются только в определенном порядке.
Самое простое решение: написать для себя, свой «npm i -g silver-bulltet», который будет создавать для Вас основу именно всех Ваших проектов.
Тот факт что я прав, доказывают комментарии. Люди пишут что там чего-то нет. А если там все будет, это его никто не будет использовать, по-скольку тащится за «пулей» два состава и тележка «на всякий случай, вдруг кто-то хочет экзотики». Не надо так, эту роль всегда выполняет npm, а Вы просто собираете свой собственный паровоз с блэк-джеком и экзотикой.
p.S. публиковать этот Ваш silver-bulltet не надо от слова совсем, он удобен только конкретно Вам.
Avdeev
31.10.2016 19:40— Неа. Если ты делаешь изменения на странице, то она автоматически обновится для тебя. Если ты немного меняешь CSS, то он будет перезагружен на лету, без полного обновления страницы.
Будет, но не все части приложения могут быть так перезагружены, поэтому периодически обновлять страницу всё-таки придется.
kpakozz96pyc
01.11.2016 19:30+2— Самый простой способ — это написать npm install create-react-app -g в терминале и можешь сразу начать работать над проектом. Если ты делаешь изменения на странице, то она автоматически обновится для тебя. Если ты немного меняешь CSS, то он будет перезагружен на лету, без полного обновления страницы.
— Круто, а как это работает под капотом?
— Э-э-э-э…
— А чем отличается абстрактный класс от интерфейса?
— Слушай, ты сайт хотел? — на сайт, отстань со своими вопросами!
AlexanderG
02.11.2016 14:55С другой стороны, далеко не каждый автодилер (или сотрудник СТО) может толково объяснить сущность цикла Карно. Возможно, такие процессы справедливы для любой развивающейся и усложняющейся отрасли.
forcewake
create-react-app стал серебряной пулей для frontend? А если мне хочется использовать typescript? Или Dan Abramov переосмыслит flux еще раз? Так жестко завязываться на еще один проект для быстрого старта — опасно, как мне кажется.
TheShock
Кто такой Дан Абрамов и почему у него столько группи?
dolphin4ik
Я выпал! Мог бы поставить 5 плюсов, поставил бы, за «группи».
Regis
А я не понял про «группи» :(
TheShock
«Ааа! Дан снова написал, что раньше мы все делали неправильно и сейчас так уже не делают. Надо написать ему в твиттер, что мы срочно перешем наш код на новую парадигму, чтобы быть современными!»
yogurt1
eject и пили свои костыли. Я вот отточил настрою вебпака до идеала и смысла во всех этих бойлерплейтах не вижу, если только не универсальный бойлерплейт, где нужно наворачивать костыли, что бы на сервере можно было сделать импорт стилей и картинок в компонентах
vintage
Не поделитесь идеальными настройками?
yogurt1
Извиняюсь за ошибки в своем комментарии
github.com/yogurt1/hotux
Boilerplate с процессе разработки, но тут можете увидеть, что вся конфигурация webpack умещается в одном файле на 205 строк
Конфиг универсален для всех сред — клиент, сервер, тесты Karma
В будующем планирую расширить до React Native, Electron и поддержки других библиотек и фреймворков, кроме React
Хуки для импорта компонентов на сервере находятся в файле boot.js
Буду рад пожеланиям и исправлениям