usulpro/js-stack-from-scratch

🌺 Russian translation of "JavaScript Stack from Scratch" from the React-Theming developers https://github.com/sm-react/react-theming

JavaScript Stack from Scratch

Это русскоязычная версия руководства Джонатана Верекии (@verekia). Оригинальное руководство расположено здесь. Начата работа по переводу второй части. Первая версия находится тут

Добро пожаловать в мое современное руководство по стеку технологий JavaScript: Стек технологий JavaScript с нуля.

🎉 Это вторая версия руководства. По сравнению с предыдущм релизом 2016г произведены значительные изменения. См. Change Log!

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

Конечно, вам не нужны все эти технологии, если вы делаете простую веб страницу с парой JS функций (комбинации Browserify / Webpack + Babel + jQuery достаточно, чтобы написать ES6 код в нескольких файлах), но если вы собираетесь создать масштабируемое веб приложение, и вам нужно все правильно настроить, то это руководство вам отлично подходит.

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

В каждой части руководства имеются примеры кода, и вы можете запускать их через yarn && yarn start. Однако я рекомендую писать все с нуля самостоятельно, следуя пошаговым инструкциям.

Итоговый код данного руководства доступен в отдельном репозитории: JS-Stack-Boilerplate repository. Он работает под Linux, macOS, и Windows.

Содержание

01 - Node, Yarn, package.json

02 - Babel, ES6, ESLint, Flow, Jest, Husky

03 - Express, Nodemon, PM2

04 - Webpack, React, HMR

05 - Redux, Immutable, Fetch

06 - React Router, Server-Side Rendering, Helmet

07 - Socket.IO

08 - Bootstrap, JSS

09 - Travis, Coveralls, Heroku

Далее планируется

Настройка вашего редактора (Atom и другие), MongoDB, Прогрессивное веб приложение (Progressive Web App).

Переводы на другие языки

Если вы хотите добавить перевод на другой язык, пожалуйста читайте рекомендации по переводу чтобы начать!

Версия 2

• Русский в процессе превода by React Theming

Версия 1

• 中文 by @pd4d10
• Italiano by Fabrizio Bertone
• 日本語 by @takahashim
• Русский by React Theming
• ไทย by MicroBenz

Сведения

Создано @verekia – verekia.com.

Переведено @usulpro - react-theming

Лицензия: MIT

js-stack-from-scratch's Issues

версия 2

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

Проблема с точкой с запятой #6 - ESLint

Type of issue: (feature suggestion, bug, translation?)

Проблема с gulp-eslint

Chapter:

6 - ESLint

If it's a bug:

Когда использую конструкцию вида:

gulp.task('lint', () =>
  gulp.src([paths.allSrcJs, paths.gulpFile])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError())
);

Линтер ругается на то, что после .pipe(eslint.failAfterError()) нету ";"
Как объяснить линтеру, что данный код валиден и ; там не нужна?
Когда ставлю ; - не может скомпилировать.
Когда переношу последнюю скобку на строку выше, то не ругается, но такая разметка кода выглядит совсем нелепо и не логично:

gulp.task('lint', () =>
  gulp.src([paths.allSrcJs, paths.gulpFile])
    .pipe(eslint())
    .pipe(eslint.format())
    .pipe(eslint.failAfterError()));

Прошу учесть

1 - Не всегда указано в каких директориях создавать тот или иной файл(особенно это видно в начале)
2 - Было бы здорово что б изначально включалась обработка на локальном сервере, потому что открытие файла index.html с папки dist уже как то дико и у меня к примеру не отрабатывает
http://take.ms/h96wE, он его просто не генерирует
3 - Откажитесь от Gulp , через чур громоздким и запутанным в дальнейшем на мое мнение получиться приложение.
4 - Продолжайте в том же духе!!!

Пропал перевод 1 версии

Пропал перевод 1 версии после мержа. Последняя рабочая версия https://github.com/UsulPro/js-stack-from-scratch/tree/7e487c7ee9e3738ef58eabf4dfad9cbcbf6c77cd . Разделите на 2 ветки, чтобы была возможность читать уже переведенный туториал

Обновление пакета color на втором шаге

В разделе "2 - Installing and using a package" используется пакет color. При установке на данный момент командой yarn add color ставится версия 1.0.3, в зависимостях автора - 0.11.3.
В общем, в новой версии пакета нет функции hexString() (есть функция hex), как в примере, соответственно, отваливается с ошибкой.

UPD. В репозитории автора это исправлено.