Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/usulpro/js-stack-from-scratch-v1-rus

🌺 Russian translation of "JavaScript Stack from Scratch" v.1
https://github.com/usulpro/js-stack-from-scratch-v1-rus

chai eslint flow gulp javascript mocha react redux russian translation tutorial webpack yarn

Last synced: 23 days ago
JSON representation

🌺 Russian translation of "JavaScript Stack from Scratch" v.1

Awesome Lists containing this project

README

        

# Π‘Ρ‚Π΅ΠΊ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ JavaScript с нуля
## JavaScript Stack from Scratch

[![Build Status](https://travis-ci.org/verekia/js-stack-from-scratch.svg?branch=master)](https://travis-ci.org/verekia/js-stack-from-scratch) [![Join the chat at https://gitter.im/js-stack-from-scratch/Lobby](https://badges.gitter.im/js-stack-from-scratch/Lobby.svg)](https://gitter.im/js-stack-from-scratch/Lobby)

[![Yarn](/img/yarn.png)](https://yarnpkg.com/)
[![React](/img/react.png)](https://facebook.github.io/react/)
[![Gulp](/img/gulp.png)](http://gulpjs.com/)
[![Redux](/img/redux.png)](http://redux.js.org/)
[![ESLint](/img/eslint.png)](http://eslint.org/)
[![Webpack](/img/webpack.png)](https://webpack.github.io/)
[![Mocha](/img/mocha.png)](https://mochajs.org/)
[![Chai](/img/chai.png)](http://chaijs.com/)
[![Flow](/img/flow.png)](https://flowtype.org/)

>Π­Ρ‚ΠΎ русскоязычная вСрсия руководства Π”ΠΆΠΎΠ½Π°Ρ‚Π°Π½Π° Π’Π΅Ρ€Π΅ΠΊΠΈΠΈ ([@verekia](https://twitter.com/verekia)). ΠžΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ΅ руководство располоТСно [здСсь](https://github.com/verekia/js-stack-from-scratch). Π”Π°Π½Π½ΠΎΠ΅ пособиС постоянно развиваСтся ΠΈ дополняСтся Π°Π²Ρ‚ΠΎΡ€ΠΎΠΌ, прСдоставляя читатСлям максимально ΡΠ²Π΅ΠΆΡƒΡŽ ΠΈ ΠΊΠ°Ρ‡Π΅ΡΡ‚Π²Π΅Π½Π½ΡƒΡŽ ΠΈΠ½Ρ„ΠΎΡ€ΠΌΠ°Ρ†ΠΈΡŽ. ВСкст ΠΎΡ€ΠΈΠ³ΠΈΠ½Π°Π»ΡŒΠ½ΠΎΠ³ΠΎ пособия ΠΈ ΠΏΡ€ΠΈΠ»Π°Π³Π°Π΅ΠΌΡ‹ΠΉ ΠΊΠΎΠ΄ Π±ΡƒΠ΄ΡƒΡ‚ ΠΌΠ΅Π½ΡΡ‚ΡŒΡΡ с Ρ‚Π΅Ρ‡Π΅Π½ΠΈΠ΅ΠΌ Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ. ΠœΡ‹ Ρ‚Π°ΠΊ ΠΆΠ΅ Π±ΡƒΠ΄Π΅ΠΌ ΡΡ‚Π°Ρ€Π°Ρ‚ΡŒΡΡ ΠΏΠΎΠ΄Π΄Π΅Ρ€ΠΆΠΈΠ²Π°Ρ‚ΡŒ Ρ€ΡƒΡΡΠΊΠΎΡΠ·Ρ‹Ρ‡Π½ΡƒΡŽ Π²Π΅Ρ€ΡΠΈΡŽ Π² Π°ΠΊΡ‚ΡƒΠ°Π»ΡŒΠ½ΠΎΠΌ состоянии. Π”Π°Π½Π½Ρ‹ΠΉ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ соотвСтствуСт английской вСрсии ΠΏΠΎ ΡΠΎΡΡ‚ΠΎΡΠ½ΠΈΡŽ Π½Π° [commit](https://github.com/verekia/js-stack-from-scratch/commit/343922149f136bbab2512b14a2fe5efe095d62b7).
ΠœΡ‹ Π±ΡƒΠ΄Π΅ΠΌ Ρ€Π°Π΄Ρ‹ вашим [замСчаниям ΠΈ вопросам](https://github.com/UsulPro/js-stack-from-scratch/issues)

@UsulPro

Π”ΠΎΠ±Ρ€ΠΎ ΠΏΠΎΠΆΠ°Π»ΠΎΠ²Π°Ρ‚ΡŒ Π² ΠΌΠΎΠ΅ соврСмСнноС руководство ΠΏΠΎ стСку Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ JavaScript: **Π‘Ρ‚Π΅ΠΊ Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ JavaScript с нуля**

Π­Ρ‚ΠΎ минималистичноС ΠΈ ΠΏΡ€Π°ΠΊΡ‚ΠΈΠΊΠΎ-ΠΎΡ€ΠΈΠ΅Π½Ρ‚ΠΈΡ€ΠΎΠ²Π°Π½Π½ΠΎΠ΅ пособиС ΠΏΠΎ ΠΏΡ€ΠΈΠΌΠ΅Π½Π΅Π½ΠΈΡŽ JavaScript Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ. Π’Π°ΠΌ ΠΏΠΎΡ‚Ρ€Π΅Π±ΡƒΡŽΡ‚ΡΡ ΠΎΠ±Ρ‰ΠΈΠ΅ знания ΠΏΠΎ ΠΏΡ€ΠΎΠ³Ρ€Π°ΠΌΠΌΠΈΡ€ΠΎΠ²Π°Π½ΠΈΡŽ ΠΈ основы JavaScript. Π­Ρ‚ΠΎ пособиС **Π½Π°Ρ†Π΅Π»Π΅Π½ΠΎ Π½Π° ΠΈΠ½Ρ‚Π΅Π³Ρ€Π°Ρ†ΠΈΡŽ Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΡ‹Ρ… инструмСнтов** ΠΈ прСдоставляСт **максимально простыС ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρ‹** для ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ инструмСнта. Π’Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Ρ€Π°ΡΡΠΌΠ°Ρ‚Ρ€ΠΈΠ²Π°Ρ‚ΡŒ Π΄Π°Π½Π½Ρ‹ΠΉ Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚, ΠΊΠ°ΠΊ *Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎΡΡ‚ΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ свой собствСнный ΡˆΠ°Π±Π»ΠΎΠ½Π½Ρ‹ΠΉ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚ с нуля*.

ΠšΠΎΠ½Π΅Ρ‡Π½ΠΎ, Π²Π°ΠΌ Π½Π΅ Π½ΡƒΠΆΠ½Ρ‹ всС эти Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΈ, Ссли Π²Ρ‹ Π΄Π΅Π»Π°Π΅Ρ‚Π΅ ΠΏΡ€ΠΎΡΡ‚ΡƒΡŽ Π²Π΅Π± страницу с ΠΏΠ°Ρ€ΠΎΠΉ JS Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΉ (ΠΊΠΎΠΌΠ±ΠΈΠ½Π°Ρ†ΠΈΠΈ Browserify / Webpack + Babel + jQuery достаточно, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°ΠΏΠΈΡΠ°Ρ‚ΡŒ ES6 ΠΊΠΎΠ΄ Π² Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… Ρ„Π°ΠΉΠ»Π°Ρ… ΠΈ ΡΠΊΠΎΠΌΠΏΠΈΠ»ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ всС Ρ‡Π΅Ρ€Π΅Π· ΠΊΠΎΠΌΠ°Π½Π΄Π½ΡƒΡŽ строку), Π½ΠΎ Ссли Π²Ρ‹ ΡΠΎΠ±ΠΈΡ€Π°Π΅Ρ‚Π΅ΡΡŒ ΡΠΎΠ·Π΄Π°Ρ‚ΡŒ ΠΌΠ°ΡΡˆΡ‚Π°Π±ΠΈΡ€ΡƒΠ΅ΠΌΠΎΠ΅ Π²Π΅Π± ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅, ΠΈ Π²Π°ΠΌ Π½ΡƒΠΆΠ½ΠΎ всС ΠΏΡ€Π°Π²ΠΈΠ»ΡŒΠ½ΠΎ Π½Π°ΡΡ‚Ρ€ΠΎΠΈΡ‚ΡŒ, Ρ‚ΠΎ это руководство ΠΎΡ‚Π»ΠΈΡ‡Π½ΠΎ Π²Π°ΠΌ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ΠΈΡ‚.

ΠŸΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ Ρ†Π΅Π»ΡŒΡŽ этого руководства являСтся сборка Ρ€Π°Π·Π»ΠΈΡ‡Π½Ρ‹Ρ… инструмСнтов, я Π½Π΅ Π±ΡƒΠ΄Ρƒ Π²Π΄Π°Π²Π°Ρ‚ΡŒΡΡ Π² Π΄Π΅Ρ‚Π°Π»ΠΈ ΠΏΠΎ ΠΊΠ°ΠΆΠ΄ΠΎΠΌΡƒ ΠΈΠ· Π½ΠΈΡ…. Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΏΠΎ Π½ΠΈΠΌ Π±ΠΎΠ»Π΅Π΅ Π³Π»ΡƒΠ±ΠΎΠΊΠΈΠ΅ знания, ΠΈΠ·ΡƒΡ‡Π°ΠΉΡ‚Π΅ ΠΈΡ… Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΈΠ»ΠΈ Π΄Ρ€ΡƒΠ³ΠΈΠ΅ руководства.

Π’ большой части Ρ‚Π΅Ρ…Π½ΠΎΠ»ΠΎΠ³ΠΈΠΉ, описываСмых здСсь, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ΡΡ React. Если Π²Ρ‹ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π½Π°Ρ‡ΠΈΠ½Π°Π΅Ρ‚Π΅ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ React ΠΈ просто Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΈΠ·ΡƒΡ‡ΠΈΡ‚ΡŒ Π΅Π³ΠΎ, Ρ‚ΠΎ [create-react-app](https://github.com/facebookincubator/create-react-app) ΠΏΠΎΠΌΠΎΠΆΠ΅Ρ‚ Π²Π°ΠΌ ΠΈ ΠΊΡ€Π°Ρ‚ΠΊΠΎ ΠΎΠ·Π½Π°ΠΊΠΎΠΌΠΈΡ‚ с инфраструктурой React Π½Π° основС прСдустановлСнной ΠΊΠΎΠ½Ρ„ΠΈΠ³ΡƒΡ€Π°Ρ†ΠΈΠΈ. Π― Π±Ρ‹, Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, ΠΏΠΎΡ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΠΎΠ²Π°Π» Ρ‚Π°ΠΊΠΎΠΉ ΠΏΠΎΠ΄Ρ…ΠΎΠ΄ для Ρ‚Π΅Ρ…, ΠΊΠΎΠΌΡƒ Π½ΡƒΠΆΠ½ΠΎ Π²Π»ΠΈΡ‚ΡŒΡΡ Π² ΠΊΠΎΠΌΠ°Π½Π΄Ρƒ, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡŽΡ‰ΡƒΡŽ React, ΠΈ Π½Π° Ρ‡Π΅ΠΌ-Ρ‚ΠΎ ΠΏΠΎΡ‚Ρ€Π΅Π½ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒΡΡ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ ΠΏΠΎΠ΄Ρ‚ΡΠ½ΡƒΡ‚ΡŒ свои знания. Π’ этом руководствС ΠΌΡ‹ Π½Π΅ Π±ΡƒΠ΄Π΅ΠΌ ΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒΡΡ прСдустановлСнными конфигурациями, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ я Ρ…ΠΎΡ‡Ρƒ, Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π²Ρ‹ ΠΏΠΎΠ»Π½ΠΎΡΡ‚ΡŒΡŽ ΠΏΠΎΠ½ΠΈΠΌΠ°Π»ΠΈ всС, Ρ‡Ρ‚ΠΎ происходит "ΠΏΠΎΠ΄ ΠΊΠ°ΠΏΠΎΡ‚ΠΎΠΌ".

ΠŸΡ€ΠΈΠΌΠ΅Ρ€Ρ‹ ΠΊΠΎΠ΄Π° ΠΈΠΌΠ΅ΡŽΡ‚ΡΡ Π² ΠΊΠ°ΠΆΠ΄ΠΎΠΉ части, ΠΈ Π²Ρ‹ ΠΌΠΎΠΆΠ΅Ρ‚Π΅ Π·Π°ΠΏΡƒΡΠΊΠ°Ρ‚ΡŒ ΠΈΡ… Ρ‡Π΅Ρ€Π΅Π· `yarn && yarn start` ΠΈΠ»ΠΈ `npm install && npm start`. Π― Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄ΡƒΡŽ ΠΏΠΈΡΠ°Ρ‚ΡŒ всС с нуля ΡΠ°ΠΌΠΎΡΡ‚ΠΎΡΡ‚Π΅Π»ΡŒΠ½ΠΎ, слСдуя **ΠΏΠΎΡˆΠ°Π³ΠΎΠ²Ρ‹ΠΌ инструкциям** ΠΊΠ°ΠΆΠ΄ΠΎΠ³ΠΎ Ρ€Π°Π·Π΄Π΅Π»Π°.

**КаТдая Ρ‡Π°ΡΡ‚ΡŒ содСрТит ΠΊΠΎΠ΄, написанный Π² ΠΏΡ€Π΅Π΄Ρ‹Π΄ΡƒΡ‰ΠΈΡ… частях**, Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ Ссли Π²Ρ‹ просто Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ ΠΏΠΎΠ»ΡƒΡ‡ΠΈΡ‚ΡŒ ΠΎΠΊΠΎΠ½Ρ‡Π°Ρ‚Π΅Π»ΡŒΠ½Ρ‹ΠΉ Π²Π°Ρ€ΠΈΠ°Π½Ρ‚ ΠΏΡ€ΠΎΠ΅ΠΊΡ‚Π°, содСрТащий всС Π½Π΅ΠΎΠ±Ρ…ΠΎΠ΄ΠΈΠΌΠΎΠ΅, просто скопируйтС послСдний Ρ€Π°Π·Π΄Π΅Π» ΠΈ смСло ΠΏΠΎΠ»ΡŒΠ·ΡƒΠΉΡ‚Π΅ΡΡŒ.

ΠŸΡ€ΠΈΠΌΠ΅Ρ‡Π°Π½ΠΈΠ΅: ΠŸΠΎΡ€ΡΠ΄ΠΎΠΊ частСй Π½Π΅ всСгда обязатСлСн. К ΠΏΡ€ΠΈΠΌΠ΅Ρ€Ρƒ, тСстированиС / типизация ΠΌΠΎΠ³ΡƒΡ‚ Π±Ρ‹Ρ‚ΡŒ Π²Ρ‹ΠΏΠΎΠ»Π½Π΅Π½Ρ‹ Π΄ΠΎ ввСдСния Π² React. Π”ΠΎΠ²ΠΎΠ»ΡŒΠ½ΠΎ слоТно ΠΏΠ΅Ρ€Π΅ΠΌΠ΅Ρ‰Π°Ρ‚ΡŒ ΠΈΠ»ΠΈ Ρ€Π΅Π΄Π°ΠΊΡ‚ΠΈΡ€ΠΎΠ²Π°Ρ‚ΡŒ ΠΎΠΏΡƒΠ±Π»ΠΈΠΊΠΎΠ²Π°Π½Π½Ρ‹Π΅ Ρ€Π°Π·Π΄Π΅Π»Ρ‹, ΠΏΠΎΡΠΊΠΎΠ»ΡŒΠΊΡƒ приходится Π²Π½ΠΎΡΠΈΡ‚ΡŒ измСнСния Π²ΠΎ всС ΡΠ»Π΅Π΄ΡƒΡŽΡ‰ΠΈΠ΅ Π·Π° Π½ΠΈΠΌΠΈ части. Π’ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, ΠΊΠΎΠ³Π΄Π° всС опрСдСлится, я ΠΏΡ€ΠΈΠ²Π΅Π΄Ρƒ всю Π΄ΠΎΠΊΡƒΠΌΠ΅Π½Ρ‚Π°Ρ†ΠΈΡŽ ΠΊ Π±ΠΎΠ»Π΅Π΅ ΡƒΠ΄ΠΎΠ±Π½ΠΎΠΌΡƒ Π²ΠΈΠ΄Ρƒ.

Код, ΠΏΡ€ΠΈΠ²Π΅Π΄Π΅Π½Π½Ρ‹ΠΉ Π² ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π°Ρ…, Ρ€Π°Π±ΠΎΡ‚Π°Π΅Ρ‚ ΠΏΠΎΠ΄ Linux, macOS ΠΈ Windows.

## Π‘ΠΎΠ΄Π΅Ρ€ΠΆΠ°Π½ΠΈΠ΅

[1 - Node, NPM, Yarn ΠΈ package.json](/tutorial/1-node-npm-yarn-package-json)

[2 - Установка ΠΈ использованиС ΠΏΠ°ΠΊΠ΅Ρ‚ΠΎΠ²](/tutorial/2-packages)

[3 - Настройка ES6 с Babel ΠΈ Gulp](/tutorial/3-es6-babel-gulp)

[4 - ИспользованиС ES6 классов](/tutorial/4-es6-syntax-class)

[5 - Бинтаксис ΠΌΠΎΠ΄ΡƒΠ»Π΅ΠΉ ES6](/tutorial/5-es6-modules-syntax)

[6 - ESLint](/tutorial/6-eslint)

[7 - ΠšΠ»ΠΈΠ΅Π½Ρ‚ΡΠΊΠΎΠ΅ ΠΏΡ€ΠΈΠ»ΠΎΠΆΠ΅Π½ΠΈΠ΅ Π½Π° основС Webpack](/tutorial/7-client-webpack)

[8 - React](/tutorial/8-react)

[9 - Redux](/tutorial/9-redux)

[10 - Immutable JS ΠΈ ΡƒΠ»ΡƒΡ‡ΡˆΠ΅Π½ΠΈΡ Redux](/tutorial/10-immutable-redux-improvements)

[11 - ВСстированиС с Mocha, Chai ΠΈ Sinon](/tutorial/11-testing-mocha-chai-sinon)

[12 - Випизация с Flow](/tutorial/12-flow)

## Π”Π°Π»Π΅Π΅ планируСтся:

Production / development ΠΎΠΊΡ€ΡƒΠΆΠ΅Π½ΠΈΠ΅, Express, React Router, Π‘Π΅Ρ€Π²Π΅Ρ€Π½Ρ‹ΠΉ Π Π΅Π½Π΄Π΅Ρ€ΠΈΠ½Π³, Бтилизация, Enzyme, ΠŸΡ€ΠΈΠ΅ΠΌΡ‹ Git.

## ΠŸΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρ‹ Π½Π° Π΄Ρ€ΡƒΠ³ΠΈΠ΅ языки

- [ΠšΠΈΡ‚Π°ΠΉΡΠΊΠΈΠΉ](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10)
- [Π˜Ρ‚Π°Π»ΡŒΡΠ½ΡΠΊΠΈΠΉ](https://github.com/fbertone/js-stack-from-scratch) by [Fabrizio Bertone](https://github.com/fbertone)
- [Японский](https://github.com/takahashim/js-stack-from-scratch) by [@takahashim](https://github.com/takahashim)
- [Вайский](https://github.com/MicroBenz/js-stack-from-scratch) by [MicroBenz](https://github.com/MicroBenz)

Если Π²Ρ‹ Ρ…ΠΎΡ‚ΠΈΡ‚Π΅ Π΄ΠΎΠ±Π°Π²ΠΈΡ‚ΡŒ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄ Π½Π° Π΄Ρ€ΡƒΠ³ΠΎΠΉ язык, поТалуйста Ρ‡ΠΈΡ‚Π°ΠΉΡ‚Π΅ [Ρ€Π΅ΠΊΠΎΠΌΠ΅Π½Π΄Π°Ρ†ΠΈΠΈ ΠΏΠΎ ΠΏΠ΅Ρ€Π΅Π²ΠΎΠ΄Ρƒ](/how-to-translate.md) Ρ‡Ρ‚ΠΎΠ±Ρ‹ Π½Π°Ρ‡Π°Ρ‚ΡŒ!

## БвСдСния

Π‘ΠΎΠ·Π΄Π°Π½ΠΎ [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/).

ΠŸΠ΅Ρ€Π΅Π²Π΅Π΄Π΅Π½ΠΎ [@usulpro](https://github.com/UsulPro) - [react-theming](https://github.com/sm-react/react-theming)

ЛицСнзия: MIT