Home

Awesome

Стек технологий JavaScript с нуля

JavaScript Stack from Scratch

Build Status Join the chat at https://gitter.im/js-stack-from-scratch/Lobby

Yarn React Gulp Redux ESLint Webpack Mocha Chai Flow

Это русскоязычная версия руководства Джонатана Верекии (@verekia). Оригинальное руководство расположено здесь. Данное пособие постоянно развивается и дополняется автором, предоставляя читателям максимально свежую и качественную информацию. Текст оригинального пособия и прилагаемый код будут меняться с течением времени. Мы так же будем стараться поддерживать русскоязычную версию в актуальном состоянии. Данный перевод соответствует английской версии по состоянию на commit. Мы будем рады вашим замечаниям и вопросам

<div align="right"><a href="https://twitter.com/UsulPro">@UsulPro</a></div>

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

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

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

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

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

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

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

Примечание: Порядок частей не всегда обязателен. К примеру, тестирование / типизация могут быть выполнены до введения в React. Довольно сложно перемещать или редактировать опубликованные разделы, поскольку приходится вносить изменения во все следующие за ними части. Возможно, когда все определится, я приведу всю документацию к более удобному виду.

Код, приведенный в примерах, работает под Linux, macOS и Windows.

Содержание

1 - Node, NPM, Yarn и package.json

2 - Установка и использование пакетов

3 - Настройка ES6 с Babel и Gulp

4 - Использование ES6 классов

5 - Синтаксис модулей ES6

6 - ESLint

7 - Клиентское приложение на основе Webpack

8 - React

9 - Redux

10 - Immutable JS и улучшения Redux

11 - Тестирование с Mocha, Chai и Sinon

12 - Типизация с Flow

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

Production / development окружение, Express, React Router, Серверный Рендеринг, Стилизация, Enzyme, Приемы Git.

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

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

Сведения

Создано @verekiaverekia.com.

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

Лицензия: MIT