From 05f7f07477cb8012979819961feb749209154051 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Tue, 1 Nov 2016 18:25:08 +0700 Subject: [PATCH 01/73] Table of contents --- Definitions.md | 8 ++++++ README.md | 26 ++++++++++++++++++ READMEeng.md | 74 ++++++++++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 108 insertions(+) create mode 100644 Definitions.md create mode 100644 READMEeng.md diff --git a/Definitions.md b/Definitions.md new file mode 100644 index 0000000..2c40973 --- /dev/null +++ b/Definitions.md @@ -0,0 +1,8 @@ +Термины и Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ + +package - пакет +https://ru.wikipedia.org/wiki/Package_(Java) + +class - клаÑÑ + +Type Checking - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ diff --git a/README.md b/README.md index 27cfdaa..67f9c63 100644 --- a/README.md +++ b/README.md @@ -56,6 +56,32 @@ The code of this tutorial works on Linux, macOS, and Windows. [12 - Type Checking with Flow](/tutorial/12-flow) +## Содержание + +[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 and ~Redux Improvements~](/tutorial/10-immutable-redux-improvements) + +[11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) + +[12 - ~Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ~ Flow](/tutorial/12-flow) + ## Coming up next Production / development environments, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks. diff --git a/READMEeng.md b/READMEeng.md new file mode 100644 index 0000000..27cfdaa --- /dev/null +++ b/READMEeng.md @@ -0,0 +1,74 @@ +# JavaScript Stack from Scratch + +[](https://yarnpkg.com/) +[](https://facebook.github.io/react/) +[](http://gulpjs.com/) +[](http://redux.js.org/) +[](http://eslint.org/) +[](https://webpack.github.io/) +[](https://mochajs.org/) +[](http://chaijs.com/) +[](https://flowtype.org/) + +[](https://travis-ci.org/verekia/js-stack-from-scratch) + +Welcome to my modern JavaScript stack tutorial: **JavaScript Stack from Scratch**. + +This is a minimalistic and straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. **It focuses on wiring tools together** and giving you the **simplest possible example** for each tool. You can see this tutorial as *a way to write your own boilerplate from scratch*. + +You don't need to use this entire stack if you build a simple web page with a few JS interactions of course (a combination of Babel + jQuery is enough!), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you. + +Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them. + +A big chunk of the stack described in this tutorial uses React. If you are beginning and just want to learn React, [create-react-app](https://github.com/facebookincubator/create-react-app) will get you up and running with a React environment very quickly with a premade configuration. I would for instance recommend this approach to someone who arrives in a team that's using React and needs to catch up with a learning playground. In this tutorial you won't use a premade configuration, because I want you to understand everything that's happening under the hood. + +Code examples are available for each chapter, and you can run them all with `yarn && yarn start` or `npm install && npm start`. I recommend writing everything from scratch yourself by following the **step-by-step instructions** of each chapter. + +**Every chapter contains the code of previous chapters**, so if you are simply looking for a boilerplate project containing everything, just clone the last chapter and you're good to go. + +Note: The order of chapters is not necessarily the most educational. For instance, testing / type checking could have been done before introducing React. It is quite difficult to move chapters around or edit past ones, since I need to apply those changes to every following chapter. If things settle down, I might reorganize the whole thing in a better way. + +The code of this tutorial works on Linux, macOS, and Windows. + +## Table of contents + +[1 - Node, NPM, Yarn, and package.json](/tutorial/1-node-npm-yarn-package-json) + +[2 - Installing and using a package](/tutorial/2-packages) + +[3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) + +[4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) + +[5 - The ES6 modules syntax](/tutorial/5-es6-modules-syntax) + +[6 - ESLint](/tutorial/6-eslint) + +[7 - Client app with Webpack](/tutorial/7-client-webpack) + +[8 - React](/tutorial/8-react) + +[9 - Redux](/tutorial/9-redux) + +[10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) + +[11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon) + +[12 - Type Checking with Flow](/tutorial/12-flow) + +## Coming up next + +Production / development environments, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks. + +## Translations + +- [Chinese](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10) +- [Italian](https://github.com/fbertone/js-stack-from-scratch) by [Fabrizio Bertone](https://github.com/fbertone) + +If you want to add your translation, please read the [translation recommendations](/how-to-translate.md) to get started! + +## Credits + +Created by [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/). + +License: MIT -- GitLab From 187d2177c32b3762fa7800bc3b0b8f6acd65f397 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Tue, 1 Nov 2016 18:26:28 +0700 Subject: [PATCH 02/73] upd --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 67f9c63..bda49ff 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ The code of this tutorial works on Linux, macOS, and Windows. [3 - ÐаÑтройка ES6 Ñ Babel и Gulp](/tutorial/3-es6-babel-gulp) -[4 - ИÑпользование ES6 ÑинтактиÑа ~Ñ ÐºÐ»Ð°ÑÑами~](/tutorial/4-es6-syntax-class) +[4 - ИÑпользование ES6 ÑинтактиÑа ~~Ñ ÐºÐ»Ð°ÑÑами~~](/tutorial/4-es6-syntax-class) [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) -- GitLab From 7ad291cc262416fa9183f36514ac68629a7ff575 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Tue, 1 Nov 2016 20:14:25 +0700 Subject: [PATCH 03/73] section 4 --- Definitions.md | 12 +++++++ README.md | 2 +- tutorial/4-es6-syntax-class/README.md | 20 ++++++------ tutorial/4-es6-syntax-class/READMEeng.md | 41 ++++++++++++++++++++++++ 4 files changed, 64 insertions(+), 11 deletions(-) create mode 100644 tutorial/4-es6-syntax-class/READMEeng.md diff --git a/Definitions.md b/Definitions.md index 2c40973..83bab5a 100644 --- a/Definitions.md +++ b/Definitions.md @@ -6,3 +6,15 @@ https://ru.wikipedia.org/wiki/Package_(Java) class - клаÑÑ Type Checking - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ + +OOP - объектно-ориентированное программирование + +JavaScript + +template strings - Шаблонные Ñтроки +https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/template_strings + +arrow functions - Ñтрелочные функции +https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions + + diff --git a/README.md b/README.md index bda49ff..05f98b2 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ The code of this tutorial works on Linux, macOS, and Windows. [3 - ÐаÑтройка ES6 Ñ Babel и Gulp](/tutorial/3-es6-babel-gulp) -[4 - ИÑпользование ES6 ÑинтактиÑа ~~Ñ ÐºÐ»Ð°ÑÑами~~](/tutorial/4-es6-syntax-class) +[4 - ИÑпользование ES6 ÑинтактиÑа ~~и клаÑÑов~~](/tutorial/4-es6-syntax-class) [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) diff --git a/tutorial/4-es6-syntax-class/README.md b/tutorial/4-es6-syntax-class/README.md index 4dc8c7c..73d5976 100644 --- a/tutorial/4-es6-syntax-class/README.md +++ b/tutorial/4-es6-syntax-class/README.md @@ -1,6 +1,6 @@ -# 4 - Using the ES6 syntax with a class +# 4 - ИÑпользование ES6 ÑинтактиÑа ~~и клаÑÑов~~ -- Create a new file, `src/dog.js`, containing the following ES6 class: +- Создайте новый файл, `src/dog.js`, Ñодержащий Ñделующий ES6 клаÑÑ: ```javascript class Dog { @@ -16,11 +16,11 @@ class Dog { module.exports = Dog; ``` -It should not look surprising to you if you've done OOP in the past in any language. It's relatively recent for JavaScript though. The class is exposed to the outside world via the `module.exports` assignment. +Ðто не должно Ð²Ð°Ñ Ñмущать, еÑли вы ÑталкивалиÑÑŒ Ñ ÐžÐžÐŸ в любом другом Ñзыке программированиÑ. Ð¥Ð¾Ñ‚Ñ Ð² JavaScript клаÑÑÑ‹ поÑвилиÑÑŒ отноÑительно недавно. КлаÑÑ Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹Ñтвует Ñ Ð¾ÐºÑ€ÑƒÐ¶Ð°ÑŽÑ‰Ð¸Ð¼ миром, путем Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ `module.exports`. -Typical ES6 code uses classes, `const` and `let`, "template strings" (with back ticks) like the one in `bark()`, and arrow functions (`(param) => { console.log('Hi'); }`), even though we're not using any in this example. +Обычно в ES6 коде приÑутÑтвуют клаÑÑÑ‹, `const` и `let`, "шаблонные Ñтроки" (в обратных кавычках) как в функции `bark()` и Ñтрелочные функции (`(param) => { console.log('Hi'); }`), Ñ…Ð¾Ñ‚Ñ Ð¼Ñ‹ их не иÑпользуем в нашем примере. -In `src/index.js`, write the following: +Ð’ `src/index.js`, напишите Ñледующее: ```javascript const Dog = require('./dog'); @@ -29,13 +29,13 @@ const toby = new Dog('Toby'); console.log(toby.bark()); ``` -As you can see, unlike the community-made package `color` that we used before, when we require one of our files, we use `./` in the `require()`. +Как вы можете видеть в отличие от ~~community-made~~ пакета `color`, который мы иÑпользовали ранее, когда мы подключаем один из наших файлов, мы иÑпользуем `./` в `require()`. -- Run `yarn start` and it should print 'Wah wah, I am Toby'. +- ЗапуÑтите `yarn start` и должно отобразитьÑÑ 'Wah wah, I am Toby'. -- Take a look at the code generated in `lib` to see how your compiled code looks like (`var` instead of `const` for instance). +- ПоÑмотрите на код Ñгенерированный в директории `lib`, чтобы увидеть как он выглÑдит в Ñкомпилированном виде (`var` вмеÑто `const` например). -Next section: [5 - The ES6 modules syntax](/tutorial/5-es6-modules-syntax) +Следующий раздел: [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) -Back to the [previous section](/tutorial/3-es6-babel-gulp) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](https://github.com/verekia/js-stack-from-scratch). diff --git a/tutorial/4-es6-syntax-class/READMEeng.md b/tutorial/4-es6-syntax-class/READMEeng.md new file mode 100644 index 0000000..4dc8c7c --- /dev/null +++ b/tutorial/4-es6-syntax-class/READMEeng.md @@ -0,0 +1,41 @@ +# 4 - Using the ES6 syntax with a class + +- Create a new file, `src/dog.js`, containing the following ES6 class: + +```javascript +class Dog { + constructor(name) { + this.name = name; + } + + bark() { + return `Wah wah, I am ${this.name}`; + } +} + +module.exports = Dog; +``` + +It should not look surprising to you if you've done OOP in the past in any language. It's relatively recent for JavaScript though. The class is exposed to the outside world via the `module.exports` assignment. + +Typical ES6 code uses classes, `const` and `let`, "template strings" (with back ticks) like the one in `bark()`, and arrow functions (`(param) => { console.log('Hi'); }`), even though we're not using any in this example. + +In `src/index.js`, write the following: + +```javascript +const Dog = require('./dog'); + +const toby = new Dog('Toby'); + +console.log(toby.bark()); +``` +As you can see, unlike the community-made package `color` that we used before, when we require one of our files, we use `./` in the `require()`. + +- Run `yarn start` and it should print 'Wah wah, I am Toby'. + +- Take a look at the code generated in `lib` to see how your compiled code looks like (`var` instead of `const` for instance). + + +Next section: [5 - The ES6 modules syntax](/tutorial/5-es6-modules-syntax) + +Back to the [previous section](/tutorial/3-es6-babel-gulp) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From 796c3240e5532bb43839f9c8acd574e2913b5952 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Tue, 1 Nov 2016 20:59:24 +0700 Subject: [PATCH 04/73] section 5 --- Definitions.md | 8 ++++ tutorial/4-es6-syntax-class/README.md | 4 +- tutorial/5-es6-modules-syntax/README.md | 28 ++++++------ tutorial/5-es6-modules-syntax/READMEeng.md | 50 ++++++++++++++++++++++ 4 files changed, 74 insertions(+), 16 deletions(-) create mode 100644 tutorial/5-es6-modules-syntax/READMEeng.md diff --git a/Definitions.md b/Definitions.md index 83bab5a..c0dc7da 100644 --- a/Definitions.md +++ b/Definitions.md @@ -17,4 +17,12 @@ https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/template_strings arrow functions - Ñтрелочные функции https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_functions +CommonJS +Gulp + +Node + +Babel + +ÑинтакÑичеÑкий Ñахар - syntactic sugar diff --git a/tutorial/4-es6-syntax-class/README.md b/tutorial/4-es6-syntax-class/README.md index 73d5976..f9d8495 100644 --- a/tutorial/4-es6-syntax-class/README.md +++ b/tutorial/4-es6-syntax-class/README.md @@ -16,7 +16,7 @@ class Dog { module.exports = Dog; ``` -Ðто не должно Ð²Ð°Ñ Ñмущать, еÑли вы ÑталкивалиÑÑŒ Ñ ÐžÐžÐŸ в любом другом Ñзыке программированиÑ. Ð¥Ð¾Ñ‚Ñ Ð² JavaScript клаÑÑÑ‹ поÑвилиÑÑŒ отноÑительно недавно. КлаÑÑ Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹Ñтвует Ñ Ð¾ÐºÑ€ÑƒÐ¶Ð°ÑŽÑ‰Ð¸Ð¼ миром, путем Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ `module.exports`. +Ðто не должно Ð²Ð°Ñ Ñмущать, еÑли вы ÑталкивалиÑÑŒ Ñ ÐžÐžÐŸ в любом другом Ñзыке программированиÑ, Ñ…Ð¾Ñ‚Ñ Ð² JavaScript клаÑÑÑ‹ поÑвилиÑÑŒ отноÑительно недавно. КлаÑÑ Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹Ñтвует Ñ Ð¾ÐºÑ€ÑƒÐ¶Ð°ÑŽÑ‰Ð¸Ð¼ миром, путем Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ `module.exports`. Обычно в ES6 коде приÑутÑтвуют клаÑÑÑ‹, `const` и `let`, "шаблонные Ñтроки" (в обратных кавычках) как в функции `bark()` и Ñтрелочные функции (`(param) => { console.log('Hi'); }`), Ñ…Ð¾Ñ‚Ñ Ð¼Ñ‹ их не иÑпользуем в нашем примере. @@ -33,7 +33,7 @@ console.log(toby.bark()); - ЗапуÑтите `yarn start` и должно отобразитьÑÑ 'Wah wah, I am Toby'. -- ПоÑмотрите на код Ñгенерированный в директории `lib`, чтобы увидеть как он выглÑдит в Ñкомпилированном виде (`var` вмеÑто `const` например). +- ПоÑмотрите на код Ñгенерированный в директории `lib`, чтобы увидеть как он выглÑдит в Ñкомпилированном виде (`var` вмеÑто `const`, например). Следующий раздел: [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 0d5ce9e..55b1530 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -1,10 +1,10 @@ -# 5 - The ES6 modules syntax +# 5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6 -Here we simply replace `const Dog = require('./dog')` by `import Dog from './dog'`, which is the newer ES6 modules syntax (as opposed to "CommonJS" modules syntax). +ЗдеÑÑŒ мы проÑто заменим `const Dog = require('./dog')` на `import Dog from './dog'`, что ÑвлÑетÑÑ Ð±Ð¾Ð»ÐµÐµ новым ÑинтакÑиÑом ES6 модулей (по Ñравнению Ñ ÑинтакÑиÑом "CommonJS" модулей). -In `dog.js`, we also replace `module.exports = Dog` by `export default Dog`. +Ð’ `dog.js`, мы также заменим `module.exports = Dog` на `export default Dog`. -Note that in `dog.js`, the name `Dog` is only used in the `export`. Therefore it could be possible to export directly an anonymous class like this instead: +Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, вмеÑто Ñтого, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñ‚Ð°ÐºÐ¸Ð¼ образом: ```javascript export default class { @@ -18,21 +18,21 @@ export default class { } ``` -You might now guess that the name 'Dog' used in the `import` in `index.js` is actually completely up to you. This would work just fine: +Ð’Ñ‹ возможно уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² `import` в `index.js` Ñовершенно по вашему уÑмотрению. Вполне будет работать: ```javascript import Cat from './dog'; const toby = new Cat('Toby'); ``` -Obviously, most of the time you will use the same name as the class / module you're importing. -A case where you don't do that is how we `const babel = require('gulp-babel')` in our Gulp file. +Очевидно, что в оÑновном вы будете вÑегда иÑпользовать тоже Ð¸Ð¼Ñ Ñ‡Ñ‚Ð¾ и Ð¸Ð¼Ñ ÐºÐ»Ð°ÑÑа/Ð¼Ð¾Ð´ÑƒÐ»Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ð¾Ð³Ð¾ вы импортируете. +Случай, когда вы не будете делать так, Ñто когда мы ~~иÑпользовали~~ `const babel = require('gulp-babel')` в нашем Gulp файле. -So what about those `require()`s in our `gulpfile.js`? Can we use `import` instead? The latest version of Node supports most ES6 features, but not ES6 modules yet. Luckily for us, Gulp is able to call Babel for help. If we rename our `gulpfile.js` to `gulpfile.babel.js`, Babel will take care of passing `import`ed modules to Gulp. +Так что наÑчет тех `require()` в нашем `gulpfile.js`? Можем мы иÑпользовать `import` вмеÑто них? ПоÑледнÑÑ Ð²ÐµÑ€ÑÐ¸Ñ Node поддерживает большую чаÑть возможноÑтей ES6, но не ES6 модули пока-что. К ÑчаÑтью Ð´Ð»Ñ Ð½Ð°Ñ, Gulp ÑпоÑобен призывать Babel на помощь. ЕÑли мы переименуем наш `gulpfile.js` в `gulpfile.babel.js`, Babel позаботитÑÑ Ð¾ передаче импортируемых через `import` модулей в Gulp. -- Rename your `gulpfile.js` to `gulpfile.babel.js` +- Переименуйте ваш `gulpfile.js` в `gulpfile.babel.js` -- Replace your `require()`s by: +- Замените вÑе `require()` на: ```javascript import gulp from 'gulp'; @@ -41,10 +41,10 @@ import del from 'del'; import { exec } from 'child_process'; ``` -Note the syntactic sugar to extract `exec` directly from `child_process`. Pretty elegant! +Обратите внимение на "ÑинтакÑичеÑкий Ñахар", позволÑющий получать `exec` напрÑмую из `child_process`. Довольно Ñлегантно! -- `yarn start` should still print "Wah wah, I am Toby". +- `yarn start` должно по прежнему выводить "Wah wah, I am Toby". -Next section: [6 - ESLint](/tutorial/6-eslint) +Следующий раздел: [6 - ESLint](/tutorial/6-eslint) -Back to the [previous section](/tutorial/4-es6-syntax-class) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](https://github.com/verekia/js-stack-from-scratch). diff --git a/tutorial/5-es6-modules-syntax/READMEeng.md b/tutorial/5-es6-modules-syntax/READMEeng.md new file mode 100644 index 0000000..0d5ce9e --- /dev/null +++ b/tutorial/5-es6-modules-syntax/READMEeng.md @@ -0,0 +1,50 @@ +# 5 - The ES6 modules syntax + +Here we simply replace `const Dog = require('./dog')` by `import Dog from './dog'`, which is the newer ES6 modules syntax (as opposed to "CommonJS" modules syntax). + +In `dog.js`, we also replace `module.exports = Dog` by `export default Dog`. + +Note that in `dog.js`, the name `Dog` is only used in the `export`. Therefore it could be possible to export directly an anonymous class like this instead: + +```javascript +export default class { + constructor(name) { + this.name = name; + } + + bark() { + return `Wah wah, I am ${this.name}`; + } +} +``` + +You might now guess that the name 'Dog' used in the `import` in `index.js` is actually completely up to you. This would work just fine: + +```javascript +import Cat from './dog'; + +const toby = new Cat('Toby'); +``` +Obviously, most of the time you will use the same name as the class / module you're importing. +A case where you don't do that is how we `const babel = require('gulp-babel')` in our Gulp file. + +So what about those `require()`s in our `gulpfile.js`? Can we use `import` instead? The latest version of Node supports most ES6 features, but not ES6 modules yet. Luckily for us, Gulp is able to call Babel for help. If we rename our `gulpfile.js` to `gulpfile.babel.js`, Babel will take care of passing `import`ed modules to Gulp. + +- Rename your `gulpfile.js` to `gulpfile.babel.js` + +- Replace your `require()`s by: + +```javascript +import gulp from 'gulp'; +import babel from 'gulp-babel'; +import del from 'del'; +import { exec } from 'child_process'; +``` + +Note the syntactic sugar to extract `exec` directly from `child_process`. Pretty elegant! + +- `yarn start` should still print "Wah wah, I am Toby". + +Next section: [6 - ESLint](/tutorial/6-eslint) + +Back to the [previous section](/tutorial/4-es6-syntax-class) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From 6ca983c4d20c7ec7c089b8f752b720c1e0f05963 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Wed, 2 Nov 2016 13:25:32 +0700 Subject: [PATCH 05/73] 6 sction typo --- Definitions.md | 10 +++ tutorial/6-eslint/README.md | 25 +++---- tutorial/6-eslint/READMEeng.md | 117 +++++++++++++++++++++++++++++++++ 3 files changed, 140 insertions(+), 12 deletions(-) create mode 100644 tutorial/6-eslint/READMEeng.md diff --git a/Definitions.md b/Definitions.md index c0dc7da..50550eb 100644 --- a/Definitions.md +++ b/Definitions.md @@ -26,3 +26,13 @@ Node Babel ÑинтакÑичеÑкий Ñахар - syntactic sugar + +lint - ÑтатичеÑкий анализ, контроль качеÑтва кода +https://ru.wikipedia.org/wiki/Lint + +linter - ÑтатичеÑкий анализатор кода. + +Gulpfile + +linting errors + diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index 654f045..0cac9d2 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -1,12 +1,12 @@ # 6 - ESLint -We're going to lint our code to catch potential issues. ESLint is the linter of choice for ES6 code. Instead of configuring the rules we want for our code ourselves, we will use the config created by Airbnb. This config uses a few plugins, so we need to install those as well to use their config. +Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (англ. lint - прим. переводчика) чтобы перехватывать потенциальные проблемы. ESLint - предпочтительный анализатор кода (англ. linter - прим. переводчика) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. -- Run `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` +- ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` -As you can see, you can install several packages in one command. It will add all of these to your `package.json`, as usual. +Как вы видите, вы можете уÑтановить неÑколько пакетов одной командой. Как обычно, они вÑе добавÑÑ‚ÑÑ Ð² ваш `package.json`. -In `package.json`, add an `eslintConfig` field like so: +Ð’ `package.json`, добавьте ÑвойÑтво `eslintConfig` Ñ Ñ‚Ð°ÐºÐ¸Ð¼ Ñодержанием: ```json "eslintConfig": { "extends": "airbnb", @@ -15,15 +15,15 @@ In `package.json`, add an `eslintConfig` field like so: ] }, ``` -The `plugins` part is to tell ESLint that we use the ES6 import syntax. +Ð’ разделе `plugins` мы Ñообщаем ESLint что иÑпользуем ÑинтакиÑÐ¸Ñ ES6 `import`. -**Note**: An `.eslintrc.js` file at the root of your project could also be used instead of the `eslintConfig` field of `package.json`. Just like for the Babel configuration, we try to avoid bloating the root folder with too many files, but if you have a complex ESLint config, consider this alternative. +**Замечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. -We'll create a Gulp task that runs ESLint for us. So we'll install the ESLint Gulp plugin as well: +Мы Ñоздадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкает ESLint Ð´Ð»Ñ Ð½Ð°Ñ. ПоÑтому уÑтановим также плагин ESLint Ð´Ð»Ñ Gulp: -- Run `yarn add --dev gulp-eslint` +- запуÑтите `yarn add --dev gulp-eslint` -Add the following task to your `gulpfile.babel.js`: +Добавьте Ñледующую задачу в ваш `gulpfile.babel.js`: ```javascript import eslint from 'gulp-eslint'; @@ -47,9 +47,9 @@ gulp.task('lint', () => { }); ``` -Here we tell Gulp that for this task, we want to include `gulpfile.babel.js`, and the JS files located under `src`. +ЗдеÑÑŒ мы говорм Gulp, что Ð´Ð»Ñ Ñтой задачи мы хотим подключить `gulpfile.babel.js` и JS файлы, раÑположенные в src`. -Modify your `build` Gulp task by making the `lint` task a prerequisite to it, like so: +Откорректируйте задачу `build` так, чтобы `lint` предварÑла ее запуÑк: ```javascript gulp.task('build', ['lint', 'clean'], () => { @@ -57,9 +57,10 @@ gulp.task('build', ['lint', 'clean'], () => { }); ``` -- Run `yarn start`, and you should see a bunch of linting errors in this Gulpfile, and a warning for using `console.log()` in `index.js`. +- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (англ. linting errors - прим. переводчика) в Ñтом Gulp-файле и предупреждений об иÑпользовании `console.log()` в `index.js`. One type of issue you will see is `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)`. That's actually a false negative. ESLint cannot know which JS files are part of the build only, and which ones aren't, so we'll need to help it a little bit using comments in code. In `gulpfile.babel.js`, at the very top, add: +Один из видов ошибок будет: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ```javascript``` /* eslint-disable import/no-extraneous-dependencies */ diff --git a/tutorial/6-eslint/READMEeng.md b/tutorial/6-eslint/READMEeng.md new file mode 100644 index 0000000..ef29ef2 --- /dev/null +++ b/tutorial/6-eslint/READMEeng.md @@ -0,0 +1,117 @@ +# 6 - ESLint + +We're going to lint our code to catch potential issues. ESLint is the linter of choice for ES6 code. Instead of configuring the rules we want for our code ourselves, we will use the config created by Airbnb. This config uses a few plugins, so we need to install those as well to use their config. + +- Run `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` + +As you can see, you can install several packages in one command. It will add all of these to your `package.json`, as usual. + +In `package.json`, add an `eslintConfig` field like so: +```json +"eslintConfig": { + "extends": "airbnb", + "plugins": [ + "import" + ] +}, +``` +The `plugins` part is to tell ESLint that we use the ES6 import syntax. + +**Note**: An `.eslintrc.js` file at the root of your project could also be used instead of the `eslintConfig` field of `package.json`. Just like for the Babel configuration, we try to avoid bloating the root folder with too many files, but if you have a complex ESLint config, consider this alternative. + +We'll create a Gulp task that runs ESLint for us. So we'll install the ESLint Gulp plugin as well: + +- Run `yarn add --dev gulp-eslint` + +Add the following task to your `gulpfile.babel.js`: + +```javascript +import eslint from 'gulp-eslint'; + +const paths = { + allSrcJs: 'src/**/*.js', + gulpFile: 'gulpfile.babel.js', + libDir: 'lib', +}; + +// [...] + +gulp.task('lint', () => { + return gulp.src([ + paths.allSrcJs, + paths.gulpFile, + ]) + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failAfterError()); +}); +``` + +Here we tell Gulp that for this task, we want to include `gulpfile.babel.js`, and the JS files located under `src`. + +Modify your `build` Gulp task by making the `lint` task a prerequisite to it, like so: + +```javascript +gulp.task('build', ['lint', 'clean'], () => { + // ... +}); +``` + +- Run `yarn start`, and you should see a bunch of linting errors in this Gulpfile, and a warning for using `console.log()` in `index.js`. + +One type of issue you will see is `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)`. That's actually a false negative. ESLint cannot know which JS files are part of the build only, and which ones aren't, so we'll need to help it a little bit using comments in code. In `gulpfile.babel.js`, at the very top, add: + +```javascript +/* eslint-disable import/no-extraneous-dependencies */ +``` + +This way, ESLint won't apply the rule `import/no-extraneous-dependencies` in this file. + +Now we are left with the issue `Unexpected block statement surrounding arrow body (arrow-body-style)`. That's a great one. ESLint is telling us that there is a better way to write the following code: + +```javascript +() => { + return 1; +} +``` + +It should be rewritten into: + +```javascript +() => 1 +``` + +Because when a function only contains a return statement, you can omit the curly braces, return statement, and semicolon in ES6. + +So let's update the Gulp file accordingly: + +```javascript +gulp.task('lint', () => + gulp.src([ + paths.allSrcJs, + paths.gulpFile, + ]) + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failAfterError()) +); + +gulp.task('clean', () => del(paths.libDir)); + +gulp.task('build', ['lint', 'clean'], () => + gulp.src(paths.allSrcJs) + .pipe(babel()) + .pipe(gulp.dest(paths.libDir)) +); +``` + +The last issue left is about `console.log()`. Let's say that we want this `console.log()` to be valid in `index.js` instead of triggering a warning in this example. You might have guessed it, we'll put `/* eslint-disable no-console */` at the top of our `index.js` file. + +- Run `yarn start` and we are now all clear again. + +**Note**: This section sets you up with ESLint in the console. It is great for catching errors at build time / before pushing, but you also probably want it integrated to your IDE. Do NOT use your IDE's native linting for ES6. Configure it so the binary it uses for linting is the one in your `node_modules` folder. This way it can use all of your project's config, the Airbnb preset, etc. Otherwise you will just get a generic ES6 linting. + + +Next section: [7 - Client app with Webpack](/tutorial/7-client-webpack) + +Back to the [previous section](/tutorial/5-es6-modules-syntax) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From 1d480b0a5c07d0b0fbbfb403e2024562f91d4ce9 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Wed, 2 Nov 2016 14:29:22 +0700 Subject: [PATCH 06/73] section 6 --- tutorial/6-eslint/README.md | 23 +++++++++++------------ 1 file changed, 11 insertions(+), 12 deletions(-) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index 0cac9d2..60d98b3 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -59,16 +59,15 @@ gulp.task('build', ['lint', 'clean'], () => { - ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (англ. linting errors - прим. переводчика) в Ñтом Gulp-файле и предупреждений об иÑпользовании `console.log()` в `index.js`. -One type of issue you will see is `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)`. That's actually a false negative. ESLint cannot know which JS files are part of the build only, and which ones aren't, so we'll need to help it a little bit using comments in code. In `gulpfile.babel.js`, at the very top, add: -Один из видов ошибок будет: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. +Один из видов ошибок будет: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (англ. build - прим. переводчика ) а какие нет. ПоÑтому мы немного поможем ESLint иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: ```javascript``` /* eslint-disable import/no-extraneous-dependencies */ ``` -This way, ESLint won't apply the rule `import/no-extraneous-dependencies` in this file. +Таким образом, ESLint не будет применÑть правило `import/no-extraneous-dependencies` в Ñтом файле. -Now we are left with the issue `Unexpected block statement surrounding arrow body (arrow-body-style)`. That's a great one. ESLint is telling us that there is a better way to write the following code: +Теперь у Ð½Ð°Ñ Ð¾ÑталаÑÑŒ проблема Ñ `Unexpected block statement surrounding arrow body (arrow-body-style)` (Ðеожиданное определение блока, окружающего тело Ñтрелочной функции). Ðто важно. ESLint Ñообщает нам, что ÑущеÑтвует лучший ÑпоÑоб напиÑать Ñледующий код: ```javascript () => { @@ -76,15 +75,15 @@ Now we are left with the issue `Unexpected block statement surrounding arrow bod } ``` -It should be rewritten into: +Ðто нужно перепиÑать так: ```javascript () => 1 ``` -Because when a function only contains a return statement, you can omit the curly braces, return statement, and semicolon in ES6. +Потому что, когда в ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, вы можете опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. -So let's update the Gulp file accordingly: +Так что давайте обновим Gulp-файл ÑоответÑтвенно: ```javascript gulp.task('lint', () => @@ -106,13 +105,13 @@ gulp.task('build', ['lint', 'clean'], () => ); ``` -The last issue left is about `console.log()`. Let's say that we want this `console.log()` to be valid in `index.js` instead of triggering a warning in this example. You might have guessed it, we'll put `/* eslint-disable no-console */` at the top of our `index.js` file. +ПоÑледнÑÑ Ð¾ÑтавшаÑÑÑ Ð¿Ñ€Ð¾Ð±Ð»ÐµÐ¼Ð° ÑвÑзана Ñ `console.log()`. Давайте Ñкажем, что мы хотим в Ñтом примере, чтобы иÑпользование `console.log()` в `index.js` было правомерным, а не вызывало предупреждение. Как вы, возможно, догадалиÑÑŒ мы помеÑтим `/* eslint-disable no-console */` в начале нашего `index.js` файла. -- Run `yarn start` and we are now all clear again. +- ЗапуÑтите `yarn start` - теперь вÑе Ñнова без ошибок. -**Note**: This section sets you up with ESLint in the console. It is great for catching errors at build time / before pushing, but you also probably want it integrated to your IDE. Do NOT use your IDE's native linting for ES6. Configure it so the binary it uses for linting is the one in your `node_modules` folder. This way it can use all of your project's config, the Airbnb preset, etc. Otherwise you will just get a generic ES6 linting. +**Замечание**: Ð’ Ñтой чаÑти мы работали Ñ ESLint через конÑоль. Ðто хорошо Ð´Ð»Ñ Ð¿Ð¾Ð¸Ñка ошибок во Ð²Ñ€ÐµÐ¼Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции / перед ~~публикацией~~, но вы, так же, возможно, захотите интегрировать его в вашу IDE. ÐЕ ИСПОЛЬЗУЙТЕ вÑтроенный в вашу Ñреду анализатор кода Ð´Ð»Ñ ES6. Сконфигурируйте ее так, чтобы Ð´Ð»Ñ Ñтого иÑпользовалиÑÑŒ модули, раÑположенные в директории `node_modules`. Ð’ Ñтом Ñлучае будут иÑпользоватьÑÑ Ð²Ñе наÑтройки вашего проекта, правила Airbnb и так далее. Иначе, вы получите лишь уÑредненный ES6 анализатор. -Next section: [7 - Client app with Webpack](/tutorial/7-client-webpack) +Следующий раздел: [7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) -Back to the [previous section](/tutorial/5-es6-modules-syntax) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](https://github.com/verekia/js-stack-from-scratch). -- GitLab From 787b73a8b244398db57f55a04c22ce5660dd038c Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Wed, 2 Nov 2016 20:39:24 +0700 Subject: [PATCH 07/73] section 7 --- Definitions.md | 11 ++ tutorial/7-client-webpack/README.md | 85 +++++------ tutorial/7-client-webpack/READMEeng.md | 193 +++++++++++++++++++++++++ 3 files changed, 248 insertions(+), 41 deletions(-) create mode 100644 tutorial/7-client-webpack/READMEeng.md diff --git a/Definitions.md b/Definitions.md index 50550eb..0c1698f 100644 --- a/Definitions.md +++ b/Definitions.md @@ -36,3 +36,14 @@ Gulpfile linting errors +bundle - Ñборка + +polyfill +https://remysharp.com/2010/10/08/what-is-a-polyfill + +TRANSPILING - транÑпилиÑÑ†Ð¸Ñ (транÑлÑциÑ) +https://www.stevefenton.co.uk/2012/11/compiling-vs-transpiling/ + +tutorial - руководÑтво + +entry point file - файл, указывающий на начальную точку Ñборки diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index f69dcdf..b9adc15 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -1,8 +1,9 @@ -# 7 - Client App with Webpack +# 7 - КлиентÑкое приложение ~на оÑнове Webpack~ -## Structure of our app +## Структура нашего Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ - Create a `dist` folder at the root of your project, and add the following `index.html` file to it: +- Создайте директорию `dist` в корне вашего проекта, и добавьте туда файл `index.html` Ñо Ñледующим Ñодержанием: ```html <!doctype html> @@ -16,11 +17,12 @@ </html> ``` -In your `src` folder, create the following subfolders: `server`, `shared`, `client`, and move your current `index.js` into `server`, and `dog.js` into `shared`. Create `app.js` in `client`. +Ð’ директории `src` Ñоздайте Ñледующие поддиректории: `server`, `shared`, `client` и перемеÑтите текущий `index.js` в папку `server`, а `dog.js` в `shared`. Создайте `app.js` в директории `client`. We are not going to do any Node back-end yet, but this separation will help you see more clearly where things belong. You'll need to change the `import Dog from './dog';` in `server/index.js` to `import Dog from '../shared/dog';` though, or ESLint will detect errors for unresolved modules. +Мы пока что не ÑобираемÑÑ Ñоздавать на Node Ñерверную чаÑть, но Ñто разделение поможет более ÑÑно понÑть что к чему отноÑитÑÑ. Вам нужно заменить `import Dog from './dog';` в `server/index.js` на `import Dog from '../shared/dog';`, иначе ESLint обнаружит ошибки неразрешаемых модулей. -Write this in `client/app.js`: +Ðапишите в `client/app.js`: ```javascript import Dog from '../shared/dog'; @@ -30,36 +32,36 @@ const browserToby = new Dog('Browser Toby'); document.querySelector('.app').innerText = browserToby.bark(); ``` -Add the following to your `package.json`, under `eslintConfig`: +Добавьте Ñледующее в `package.json`, поÑле `eslintConfig`: ```json "env": { "browser": true } ``` -This way we can use variables such as `window` or `document` which are always accessible in the browser without ESLint complaining about undeclared variables. +Таким образом мы Ñможем иÑпользовать такие переменные как `window` или `document`, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. -If you want to use some of the most recent ES features in your client code, like `Promise`s, you need to include the [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) in your client code. +ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (Ð¾Ð±ÐµÑ‰Ð°Ð½Ð¸Ñ - прим. пер.), вам нужно включить [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. -- Run `yarn add babel-polyfill` +- ЗапуÑтите `yarn add babel-polyfill` -And before anything else in `app.js`, add this import: +И вÑтавьте в Ñамое начало `app.js` импорт Ñтого модулÑ: ```javascript import 'babel-polyfill'; ``` -Including the polyfill adds some weight to your bundle, so add it only if you use the features it covers. In order to provide some solid boilerplate code with this tutorial, I am including it and it will appear in code samples in the next chapters. +Включение ~~полифила~~ (англ. polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только когда применÑете конÑтрукции, которые он охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ ÐµÐ³Ð¾ применÑÑŽ, и он поÑвитÑÑ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð°Ñ… в Ñледующих чаÑÑ‚ÑÑ…. ## Webpack -In a Node environment, you can freely `import` different files and Node will resolve these files using your filesystem. In a browser, there is no filesystem, and therefore your `import`s point to nowhere. In order for our entry point file `app.js` to retrieve the tree of imports it needs, we are going to "bundle" that entire tree of dependencies into one file. Webpack is a tool that does this. +Ð’ Ñреде Node вы можете Ñвободно иÑпользовать `import` Ð´Ð»Ñ Ñ€Ð°Ð·Ð»Ð¸Ñ‡Ð½Ñ‹Ñ… файлов и Node разрешит (англ. resolve) их поÑредÑтвом файловой ÑиÑтемы. Ð’ браузере Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð°Ñ ÑиÑтема отÑутÑтвует, Ñледовательно `import` ведет в никуда. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾ чтобы `app.js`, ÑвлÑющийÑÑ Ñ‚Ð¾Ñ‡ÐºÐ¾Ð¹ входа Ð´Ð»Ñ Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, получил вÑÑŽ древовидную Ñтруктуру импортируемых файлов, мы ÑобираемÑÑ "Ñобрать" вÑе Ñто дерево завиÑимоÑтей в один файл. Webpack - нужный Ð´Ð»Ñ Ñтого инÑтрумент. -Webpack uses a config file, just like Gulp, called `webpack.config.js`. It is possible to use ES6 imports and exports in it, in the exact same way that we made Gulp rely on Babel to do so: by naming this file `webpack.config.babel.js`. +Webpack, как и Gulp, иÑпользует конфигурационные файлы вида `webpack.config.js`. Ð’ них возможно иÑпользование ES6 импорта и ÑкÑпорта точно таким же ÑпоÑобом, как мы делали Ñ Gulp отноÑительно Babel: Ð¾Ð±Ð¾Ð·Ð½Ð°Ñ‡Ð°Ñ Ñтот файл как `webpack.config.babel.js`. -- Create an empty `webpack.config.babel.js` file +- Создайте пуÑтой файл `webpack.config.babel.js` -- While you're at it, add `webpack.config.babel.js` to your Gulp `lint` task, and a few more `paths` constants: +- Пока вы в нем, добавьте `webpack.config.babel.js` в задачу `lint` в Gulp, и еще неÑколько конÑтант Ñ Ð¿ÑƒÑ‚Ñми (`paths` - англ): ```javascript const paths = { @@ -84,11 +86,11 @@ gulp.task('lint', () => ); ``` -We need to teach Webpack how to process ES6 files via Babel (just like we taught Gulp how to process ES6 files with `gulp-babel`). In Webpack, when you need to process files that are not plain old JavaScript, you use *loaders*. So let's install the Babel loader for Webpack: +Мы должы научить Webpack обрабатывать ES6 файлы Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ Babel (точно так же как мы показали Gulp как Ñто делать через `gulp-babel`). Ð”Ð»Ñ Webpack, когда нужно обработать файлы, не ÑвлÑющиеÑÑ Ð¿Ñ€Ð¾Ñтым Ñтарым JavaScript, мы иÑпользуем *загрузчики* (loaders). Давайте уÑтановим загрузчик Babel Ð´Ð»Ñ Webpack: -- Run `yarn add --dev babel-loader` +- ЗапуÑтите `yarn add --dev babel-loader` -- Write the following to your `webpack.config.babel.js` file: +- Ðапишите Ñледующее в `webpack.config.babel.js` файле: ```javascript export default { @@ -111,38 +113,39 @@ export default { }; ``` -Let's analyze this a bit: +Давайте Ñто немного проанализируем: -We need this file to `export` stuff for Webpack to read. `output.filename` is the name of the bundle we want to generate. `devtool: 'source-map'` will enable source maps for a better debugging experience in your browser. In `module.loaders`, we have a `test`, which is the JavaScript regex that will be used to test which files should be processed by the `babel-loader`. Since we will use both `.js` files and `.jsx` files (for React) in the next chapters, we have the following regex: `/\.jsx?$/`. The `node_modules` folder is excluded because there is no transpilation to do there. This way, when your code `import`s packages located in `node_modules`, Babel doesn't bother processing those files, which reduces build time. The `resolve` part is to tell Webpack what kind of file we want to be able to `import` in our code using extension-less paths like `import Foo from './foo'` where `foo` could be `foo.js` or `foo.jsx` for instance. +Ðтот файл нужен чтобы Ñообщить Webpack некоторую информацию. `output.filename` - Ð¸Ð¼Ñ Ñ„Ð°Ð¹Ð»Ð° генерируемой Ñборки. `devtool: 'source-map'` - позволÑет иÑпользовать source maps (карты кода) Ð´Ð»Ñ ÑƒÐ¿Ñ€Ð¾Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ñ‚Ð»Ð°Ð´ÐºÐ¸ в браузере. Ð’ `module.loaders` еÑть ÑвойÑтво `test` Ñ Ñ€ÐµÐ³ÑƒÐ»Ñрным выражением, определÑющим какие файлы должны обрабатыватьÑÑ Ð·Ð°Ð³Ñ€ÑƒÐ·Ñ‡Ð¸ÐºÐ¾Ð¼ `babel-loader`. ПоÑкольку мы будем иÑпользовать как `.js` так и `.jsx` файлы (Ð´Ð»Ñ React) в Ñледующих чаÑÑ‚ÑÑ…, наше выражение выглÑдит как `/\.jsx?$/`. Ð”Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `node_modules` иÑключена (exclude) поÑкольку ее не нужно транÑпилировать. Таким образом, когда код импортирует (`import`) пакеты, раÑположенные в `node_modules`, Babel не тратит Ð²Ñ€ÐµÐ¼Ñ Ð½Ð° обработку Ñтих файлов. Раздел `resolve` Ñообщает Webpack файлы какого типа мы хотим подключать через `import`, позволÑÑ Ñ‚ÐµÐ¼ Ñамым опуÑкать раÑÑˆÐ¸Ñ€ÐµÐ½Ð¸Ñ Ð² именах файлов, например как в `import Foo from './foo'`, где `foo` может быть `foo.js` или `foo.jsx`. -Okay so now we have Webpack set up, but we still need a way to *run* it. +И так, мы наÑтроили Webpack, но нам до Ñих пор требуетÑÑ ÑпоÑоб *запуÑтить* его. -## Integrating Webpack to Gulp +## Подключение Webpack к Gulp -Webpack can do a lot of things. It can actually replace Gulp entirely if your project is mostly client-side. Gulp being a more general tool, it is better suited for things like linting, tests, and back-end tasks though. It is also simpler to understand for newcomers than a complex Webpack config. We have a pretty solid Gulp setup and workflow here, so integrating Webpack to our Gulp build is going to be easy peasy. +Webpack может делать множеÑтво вещей. Он даже может полноÑтью заменить Gulp, еÑли проект в оÑновном выполнÑетÑÑ Ð½Ð° Ñтороне клиента. Gulp в Ñвою очередь, как более общий инÑтрумент, больше подходит Ð´Ð»Ñ Ñ‚Ð°ÐºÐ¸Ñ… вещей как анализ кода (linting), теÑтирование, запуÑк задач на Ñтороне Ñервера. Он так же проще в понимании Ð´Ð»Ñ Ð½Ð¾Ð²Ð¸Ñ‡ÐºÐ¾Ð² чем чем Ñложное конфигурирование Webpack. У Ð½Ð°Ñ ÑƒÐ¶Ðµ довольно хорошо наÑтроен рабочий процеÑÑ Ð½Ð° базе Gulp, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ Webpack в Ð¿Ñ€Ð¾Ñ†ÐµÑ Ñборки пройдет проще проÑтого. -Let's create the Gulp task to run Webpack. Open your `gulpfile.babel.js`. +Давайте Ñоздадим в Gulp задачу по запуÑку Webpack. Откройте `gulpfile.babel.js`. -We don't need the `main` task to execute `node lib/` anymore, since we will open `index.html` to run our app. +We don't need the `main` task to execute `node lib/` anymore, since we will open `index.html` to run our app. +ПоÑкольку мы ~~will open~~ `index.html` чтобы запуÑкать наше приложение, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. -- Remove `import { exec } from 'child_process'`. +- Уберите `import { exec } from 'child_process'`. -Similarly to Gulp plugins, the `webpack-stream` package lets us integrate Webpack into Gulp very easily. +Ðналогично плагинам Ð´Ð»Ñ Gulp, пакет `webpack-stream` позволÑет очень проÑто интегрировать Webpack в Gulp. -- Install the package with: `yarn add --dev webpack-stream` +- УÑтанавливаем пакет: `yarn add --dev webpack-stream` -- Add the following `import`s: +- ДобавлÑем Ñледующие `import`: ```javascript import webpack from 'webpack-stream'; import webpackConfig from './webpack.config.babel'; ``` -The second line just grabs our config file. +Ð’Ñ‚Ð¾Ñ€Ð°Ñ Ñтрочка проÑто подключает наш конфигурационный файл. -Like I said earlier, in the next chapter we are going to use `.jsx` files (on the client, and even on the server later on), so let's set that up right now to have a bit of a head start. +Как было Ñказанно ранее, в Ñледующей чаÑти мы ÑобираемÑÑ Ð¸Ñпользовать `.jsx` файлы (на клиенте и даже позже на Ñервере), так что давайте наÑтроим Ñто ÑейчаÑ, чтобы затем иметь фору. -- Change the constants to the following: +- Измените конÑтанты Ñледующим образом: ```javascript const paths = { @@ -157,11 +160,11 @@ const paths = { }; ``` -The `.js?(x)` is just a pattern to match `.js` or `.jsx` files. +ЗдеÑÑŒ `.js?(x)` - проÑто шаблон, ÑоответÑвующий `.js` и `.jsx` файлам. -We now have constants for the different parts of our application, and an entry point file. +Теперь у Ð½Ð°Ñ ÐµÑть конÑтанты Ð´Ð»Ñ Ñ€Ð°Ð·Ð»Ð¸Ñ‡Ð½Ñ‹Ñ… чаÑтей Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸ файл, указывающий на начальную точку Ñборки (entry point file). -- Modify the `main` task like so: +- Измените задачу `main` так: ```javascript gulp.task('main', ['lint', 'clean'], () => @@ -171,13 +174,13 @@ gulp.task('main', ['lint', 'clean'], () => ); ``` -**Note**: Our `build` task currently transpiles ES6 code to ES5 for every `.js` file located under `src`. Now that we've split our code into `server`, `shared`, and `client` code, we could make this task only compile `server` and `shared` (since Webpack takes care of `client`). However, in the Testing chapter, we are going to need Gulp to also compile the `client` code to test it outside of Webpack. So until you reach that chapter, there is a bit of useless duplicated build being done. I'm sure we can all agree that it's fine for now. We actually aren't even going to be using the `build` task and `lib` folder anymore until that chapter, since all we care about right now is the client bundle. +**Замечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, то мы могли бы компилировать только `server` и `shared` (поÑкольку Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода чтобы теÑтировать его вне Webpack. Так что пока-что мы не дойдем до Ñтого раздела, будет ~~неÑколько избыточное дублирование в~~ `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще мы даже не будем иÑпользовать `build` и директорию `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что вÑе что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. -- Run `yarn start`, you should now see Webpack building your `client-bundle.js` file. Opening `index.html` in your browser should display "Wah wah, I am Browser Toby". +- ЗапуÑтите `yarn start`, вы должны увидеть поÑтроенный Webpack файл `client-bundle.js`. Откройте `index.html` в браузере. Должно отобразитьÑÑ "Wah wah, I am Browser Toby". -One last thing: unlike our `lib` folder, the `dist/client-bundle.js` and `dist/client-bundle.js.map` files are not being cleaned up by our `clean` task before each build. +Одна поÑледнÑÑ Ð²ÐµÑ‰ÑŒ: в отличие от директории `lib`, файлы `dist/client-bundle.js` и `dist/client-bundle.js.map` не очищаютÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `clean` перед каждой Ñборкой. -- Add `clientBundle: 'dist/client-bundle.js?(.map)'` to our `paths` configuration, and tweak the `clean` task like so: +- Добавьте `clientBundle: 'dist/client-bundle.js?(.map)'` в нашу конфигурацию путей (`paths`), и наÑтройте задачу `clean` Ñледующим образом: ```javascript gulp.task('clean', () => del([ @@ -186,8 +189,8 @@ gulp.task('clean', () => del([ ])); ``` -- Add `/dist/client-bundle.js*` to your `.gitignore` file: +- Добавьте `/dist/client-bundle.js*` в файл `.gitignore`: -Next section: [8 - React](/tutorial/8-react) +Следующий раздел: [8 - React](/tutorial/8-react) -Back to the [previous section](/tutorial/6-eslint) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](https://github.com/verekia/js-stack-from-scratch). diff --git a/tutorial/7-client-webpack/READMEeng.md b/tutorial/7-client-webpack/READMEeng.md new file mode 100644 index 0000000..f69dcdf --- /dev/null +++ b/tutorial/7-client-webpack/READMEeng.md @@ -0,0 +1,193 @@ +# 7 - Client App with Webpack + +## Structure of our app + +- Create a `dist` folder at the root of your project, and add the following `index.html` file to it: + +```html +<!doctype html> +<html> + <head> + </head> + <body> + <div class="app"></div> + <script src="client-bundle.js"></script> + </body> +</html> +``` + +In your `src` folder, create the following subfolders: `server`, `shared`, `client`, and move your current `index.js` into `server`, and `dog.js` into `shared`. Create `app.js` in `client`. + +We are not going to do any Node back-end yet, but this separation will help you see more clearly where things belong. You'll need to change the `import Dog from './dog';` in `server/index.js` to `import Dog from '../shared/dog';` though, or ESLint will detect errors for unresolved modules. + +Write this in `client/app.js`: + +```javascript +import Dog from '../shared/dog'; + +const browserToby = new Dog('Browser Toby'); + +document.querySelector('.app').innerText = browserToby.bark(); +``` + +Add the following to your `package.json`, under `eslintConfig`: + +```json +"env": { + "browser": true +} +``` +This way we can use variables such as `window` or `document` which are always accessible in the browser without ESLint complaining about undeclared variables. + +If you want to use some of the most recent ES features in your client code, like `Promise`s, you need to include the [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) in your client code. + +- Run `yarn add babel-polyfill` + +And before anything else in `app.js`, add this import: + +```javascript +import 'babel-polyfill'; +``` + +Including the polyfill adds some weight to your bundle, so add it only if you use the features it covers. In order to provide some solid boilerplate code with this tutorial, I am including it and it will appear in code samples in the next chapters. + +## Webpack + +In a Node environment, you can freely `import` different files and Node will resolve these files using your filesystem. In a browser, there is no filesystem, and therefore your `import`s point to nowhere. In order for our entry point file `app.js` to retrieve the tree of imports it needs, we are going to "bundle" that entire tree of dependencies into one file. Webpack is a tool that does this. + +Webpack uses a config file, just like Gulp, called `webpack.config.js`. It is possible to use ES6 imports and exports in it, in the exact same way that we made Gulp rely on Babel to do so: by naming this file `webpack.config.babel.js`. + +- Create an empty `webpack.config.babel.js` file + +- While you're at it, add `webpack.config.babel.js` to your Gulp `lint` task, and a few more `paths` constants: + +```javascript +const paths = { + allSrcJs: 'src/**/*.js', + gulpFile: 'gulpfile.babel.js', + webpackFile: 'webpack.config.babel.js', + libDir: 'lib', + distDir: 'dist', +}; + +// [...] + +gulp.task('lint', () => + gulp.src([ + paths.allSrcJs, + paths.gulpFile, + paths.webpackFile, + ]) + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failAfterError()) +); +``` + +We need to teach Webpack how to process ES6 files via Babel (just like we taught Gulp how to process ES6 files with `gulp-babel`). In Webpack, when you need to process files that are not plain old JavaScript, you use *loaders*. So let's install the Babel loader for Webpack: + +- Run `yarn add --dev babel-loader` + +- Write the following to your `webpack.config.babel.js` file: + +```javascript +export default { + output: { + filename: 'client-bundle.js', + }, + devtool: 'source-map', + module: { + loaders: [ + { + test: /\.jsx?$/, + loader: 'babel-loader', + exclude: [/node_modules/], + }, + ], + }, + resolve: { + extensions: ['', '.js', '.jsx'], + }, +}; +``` + +Let's analyze this a bit: + +We need this file to `export` stuff for Webpack to read. `output.filename` is the name of the bundle we want to generate. `devtool: 'source-map'` will enable source maps for a better debugging experience in your browser. In `module.loaders`, we have a `test`, which is the JavaScript regex that will be used to test which files should be processed by the `babel-loader`. Since we will use both `.js` files and `.jsx` files (for React) in the next chapters, we have the following regex: `/\.jsx?$/`. The `node_modules` folder is excluded because there is no transpilation to do there. This way, when your code `import`s packages located in `node_modules`, Babel doesn't bother processing those files, which reduces build time. The `resolve` part is to tell Webpack what kind of file we want to be able to `import` in our code using extension-less paths like `import Foo from './foo'` where `foo` could be `foo.js` or `foo.jsx` for instance. + +Okay so now we have Webpack set up, but we still need a way to *run* it. + +## Integrating Webpack to Gulp + +Webpack can do a lot of things. It can actually replace Gulp entirely if your project is mostly client-side. Gulp being a more general tool, it is better suited for things like linting, tests, and back-end tasks though. It is also simpler to understand for newcomers than a complex Webpack config. We have a pretty solid Gulp setup and workflow here, so integrating Webpack to our Gulp build is going to be easy peasy. + +Let's create the Gulp task to run Webpack. Open your `gulpfile.babel.js`. + +We don't need the `main` task to execute `node lib/` anymore, since we will open `index.html` to run our app. + +- Remove `import { exec } from 'child_process'`. + +Similarly to Gulp plugins, the `webpack-stream` package lets us integrate Webpack into Gulp very easily. + +- Install the package with: `yarn add --dev webpack-stream` + +- Add the following `import`s: + +```javascript +import webpack from 'webpack-stream'; +import webpackConfig from './webpack.config.babel'; +``` + +The second line just grabs our config file. + +Like I said earlier, in the next chapter we are going to use `.jsx` files (on the client, and even on the server later on), so let's set that up right now to have a bit of a head start. + +- Change the constants to the following: + +```javascript +const paths = { + allSrcJs: 'src/**/*.js?(x)', + serverSrcJs: 'src/server/**/*.js?(x)', + sharedSrcJs: 'src/shared/**/*.js?(x)', + clientEntryPoint: 'src/client/app.js', + gulpFile: 'gulpfile.babel.js', + webpackFile: 'webpack.config.babel.js', + libDir: 'lib', + distDir: 'dist', +}; +``` + +The `.js?(x)` is just a pattern to match `.js` or `.jsx` files. + +We now have constants for the different parts of our application, and an entry point file. + +- Modify the `main` task like so: + +```javascript +gulp.task('main', ['lint', 'clean'], () => + gulp.src(paths.clientEntryPoint) + .pipe(webpack(webpackConfig)) + .pipe(gulp.dest(paths.distDir)) +); +``` + +**Note**: Our `build` task currently transpiles ES6 code to ES5 for every `.js` file located under `src`. Now that we've split our code into `server`, `shared`, and `client` code, we could make this task only compile `server` and `shared` (since Webpack takes care of `client`). However, in the Testing chapter, we are going to need Gulp to also compile the `client` code to test it outside of Webpack. So until you reach that chapter, there is a bit of useless duplicated build being done. I'm sure we can all agree that it's fine for now. We actually aren't even going to be using the `build` task and `lib` folder anymore until that chapter, since all we care about right now is the client bundle. + +- Run `yarn start`, you should now see Webpack building your `client-bundle.js` file. Opening `index.html` in your browser should display "Wah wah, I am Browser Toby". + +One last thing: unlike our `lib` folder, the `dist/client-bundle.js` and `dist/client-bundle.js.map` files are not being cleaned up by our `clean` task before each build. + +- Add `clientBundle: 'dist/client-bundle.js?(.map)'` to our `paths` configuration, and tweak the `clean` task like so: + +```javascript +gulp.task('clean', () => del([ + paths.libDir, + paths.clientBundle, +])); +``` + +- Add `/dist/client-bundle.js*` to your `.gitignore` file: + +Next section: [8 - React](/tutorial/8-react) + +Back to the [previous section](/tutorial/6-eslint) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From 7332b298c745e240f5b22c861f1f868af6769766 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Thu, 3 Nov 2016 19:02:11 +0700 Subject: [PATCH 08/73] section 8 --- README.md | 3 ++ tutorial/8-react/README.md | 27 ++++++++-------- tutorial/8-react/READMEeng.md | 61 +++++++++++++++++++++++++++++++++++ 3 files changed, 78 insertions(+), 13 deletions(-) create mode 100644 tutorial/8-react/READMEeng.md diff --git a/README.md b/README.md index 05f98b2..81fc864 100644 --- a/README.md +++ b/README.md @@ -12,6 +12,9 @@ [](https://travis-ci.org/verekia/js-stack-from-scratch) +## Перевод еще полноÑтью не завершен. Ðто не Ð¾ÐºÐ¾Ð½Ñ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€ÑиÑ! +перевод терминов Ñм. [Definitions.md](Definitions.md) + Welcome to my modern JavaScript stack tutorial: **JavaScript Stack from Scratch**. This is a minimalistic and straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. **It focuses on wiring tools together** and giving you the **simplest possible example** for each tool. You can see this tutorial as *a way to write your own boilerplate from scratch*. diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index b612b7d..f44b996 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -1,14 +1,14 @@ # 8 - React -We're now going to render our app using React. +Теперь мы начнем генерировать наше приложение Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ React. -First, let's install React and ReactDOM: +Сначала уÑтановим React и ReactDOM: -- Run `yarn add react react-dom` +- запуÑтите `yarn add react react-dom` -These 2 packages go to our `"dependencies"` and not `"devDependencies"` because unlike build tools, the client bundle needs them in production. +Ðти 2 пакета будут включены в раздел `"dependencies"` а не `"devDependencies"` потому что, в отличие от инÑтрументов разработки, они должны быть в итоговой клиентÑкой Ñборке (production). -Let's rename our `src/client/app.js` file into `src/client/app.jsx` and write some React and JSX code in it: +Давайте переименуем файл `src/client/app.js` в `src/client/app.jsx` и напишем там немного кода на React и JSX: ```javascript import 'babel-polyfill'; @@ -32,17 +32,17 @@ App.propTypes = { ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); ``` -**Note**: If you are unfamiliar with React or its PropTypes, learn about React first and come back to this tutorial later. There is going to be quite some React things in the upcoming chapters, so you need a good understanding of it. +**Замечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво позже. Ð’ Ñледующих чаÑÑ‚ÑÑ… мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ понимание его. -In your Gulpfile, change the value of `clientEntryPoint` to give it a `.jsx` extension: +Ð’ Gulp файле, измените в `clientEntryPoint` раÑширение на `.jsx`: ```javascript clientEntryPoint: 'src/client/app.jsx', ``` -Since we use the JSX syntax here, we have to tell Babel that it needs to transform it as well. -Install the React Babel preset, which will teach Babel how to process the JSX syntax: -`yarn add --dev babel-preset-react` and change the `babel` entry in your `package.json` file like so: +ПоÑкольку мы иÑпользуем ÑÐ¸Ð½Ñ‚Ð°ÐºÑ JSX, то нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. +УÑтановите React Babel preset, который научит Babel обрабатывать JSX ÑинтакÑ: +`yarn add --dev babel-preset-react` и откорректируйте раздел `babel` в `package.json` таким образом: ```json "babel": { @@ -53,9 +53,10 @@ Install the React Babel preset, which will teach Babel how to process the JSX sy }, ``` -Now after running `yarn start`, if we open `index.html`, we should see "The dog says: Wah wah, I am Browser Toby" rendered by React. +Теперь, поÑле запуÑка `yarn start`, еÑли мы откроем `index.html`, то должны увидеть "The dog says: Wah wah, I am Browser Toby" Ñгенерированное React. -Next section: [9 - Redux](/tutorial/9-redux) -Back to the [previous section](/tutorial/7-client-webpack) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Следующий раздел: [9 - Redux](/tutorial/9-redux) + +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](https://github.com/verekia/js-stack-from-scratch). diff --git a/tutorial/8-react/READMEeng.md b/tutorial/8-react/READMEeng.md new file mode 100644 index 0000000..b612b7d --- /dev/null +++ b/tutorial/8-react/READMEeng.md @@ -0,0 +1,61 @@ +# 8 - React + +We're now going to render our app using React. + +First, let's install React and ReactDOM: + +- Run `yarn add react react-dom` + +These 2 packages go to our `"dependencies"` and not `"devDependencies"` because unlike build tools, the client bundle needs them in production. + +Let's rename our `src/client/app.js` file into `src/client/app.jsx` and write some React and JSX code in it: + +```javascript +import 'babel-polyfill'; + +import React, { PropTypes } from 'react'; +import ReactDOM from 'react-dom'; +import Dog from '../shared/dog'; + +const dogBark = new Dog('Browser Toby').bark(); + +const App = props => ( + <div> + The dog says: {props.message} + </div> +); + +App.propTypes = { + message: PropTypes.string.isRequired, +}; + +ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); +``` + +**Note**: If you are unfamiliar with React or its PropTypes, learn about React first and come back to this tutorial later. There is going to be quite some React things in the upcoming chapters, so you need a good understanding of it. + +In your Gulpfile, change the value of `clientEntryPoint` to give it a `.jsx` extension: + +```javascript +clientEntryPoint: 'src/client/app.jsx', +``` + +Since we use the JSX syntax here, we have to tell Babel that it needs to transform it as well. +Install the React Babel preset, which will teach Babel how to process the JSX syntax: +`yarn add --dev babel-preset-react` and change the `babel` entry in your `package.json` file like so: + +```json +"babel": { + "presets": [ + "latest", + "react" + ] +}, +``` + +Now after running `yarn start`, if we open `index.html`, we should see "The dog says: Wah wah, I am Browser Toby" rendered by React. + + +Next section: [9 - Redux](/tutorial/9-redux) + +Back to the [previous section](/tutorial/7-client-webpack) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From e27afc9a3f4d4ac8388700bc08a018956ac36560 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Thu, 3 Nov 2016 19:07:25 +0700 Subject: [PATCH 09/73] readme note --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index 81fc864..26a186c 100644 --- a/README.md +++ b/README.md @@ -14,6 +14,7 @@ ## Перевод еще полноÑтью не завершен. Ðто не Ð¾ÐºÐ¾Ð½Ñ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€ÑиÑ! перевод терминов Ñм. [Definitions.md](Definitions.md) +[вопроÑÑ‹, замечаниÑ, предложениÑ](issues) Welcome to my modern JavaScript stack tutorial: **JavaScript Stack from Scratch**. -- GitLab From 99ab1d8b9eba618d65cd37d71358bd6b318b6249 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Thu, 3 Nov 2016 23:31:05 +0700 Subject: [PATCH 10/73] Intro --- README.md | 66 ++++++++++++++++++++----------------------------------- 1 file changed, 24 insertions(+), 42 deletions(-) diff --git a/README.md b/README.md index 26a186c..797c91b 100644 --- a/README.md +++ b/README.md @@ -1,4 +1,5 @@ -# JavaScript Stack from Scratch +# Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ +## JavaScript Stack from Scratch [](https://yarnpkg.com/) [](https://facebook.github.io/react/) @@ -12,53 +13,32 @@ [](https://travis-ci.org/verekia/js-stack-from-scratch) -## Перевод еще полноÑтью не завершен. Ðто не Ð¾ÐºÐ¾Ð½Ñ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€ÑиÑ! -перевод терминов Ñм. [Definitions.md](Definitions.md) -[вопроÑÑ‹, замечаниÑ, предложениÑ](issues) - -Welcome to my modern JavaScript stack tutorial: **JavaScript Stack from Scratch**. - -This is a minimalistic and straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. **It focuses on wiring tools together** and giving you the **simplest possible example** for each tool. You can see this tutorial as *a way to write your own boilerplate from scratch*. - -You don't need to use this entire stack if you build a simple web page with a few JS interactions of course (a combination of Babel + jQuery is enough!), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you. - -Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them. - -A big chunk of the stack described in this tutorial uses React. If you are beginning and just want to learn React, [create-react-app](https://github.com/facebookincubator/create-react-app) will get you up and running with a React environment very quickly with a premade configuration. I would for instance recommend this approach to someone who arrives in a team that's using React and needs to catch up with a learning playground. In this tutorial you won't use a premade configuration, because I want you to understand everything that's happening under the hood. - -Code examples are available for each chapter, and you can run them all with `yarn && yarn start` or `npm install && npm start`. I recommend writing everything from scratch yourself by following the **step-by-step instructions** of each chapter. - -**Every chapter contains the code of previous chapters**, so if you are simply looking for a boilerplate project containing everything, just clone the last chapter and you're good to go. +Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии (@verekia). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. -Note: The order of chapters is not necessarily the most educational. For instance, testing / type checking could have been done before introducing React. It is quite difficult to move chapters around or edit past ones, since I need to apply those changes to every following chapter. If things settle down, I might reorganize the whole thing in a better way. +## Работа над переводом идет. Ðто не Ð¾ÐºÐ¾Ð½Ñ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€ÑиÑ! -The code of this tutorial works on Linux, macOS, and Windows. +перевод терминов Ñм. [Definitions.md](Definitions.md) -## Table of contents +[вопроÑÑ‹, замечаниÑ, предложениÑ](https://github.com/UsulPro/js-stack-from-scratch/issues) -[1 - Node, NPM, Yarn, and package.json](/tutorial/1-node-npm-yarn-package-json) -[2 - Installing and using a package](/tutorial/2-packages) +Добро пожаловать в мое Ñовременное руководÑтво по Ñтеку технологий JavaScript: **Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ** -[3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) +Ðто минималиÑтичное и практико-ориентированное поÑобие по применению JavaScript технологий. Вам потребуютÑÑ Ð¾Ð±Ñ‰Ð¸Ðµ Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ программированию и оÑновы JavaScript. Ðто поÑобие **нацелено на интеграцию необходимых инÑтрументов** и предоÑтавлÑет **макÑимально проÑтые примеры** Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ инÑтрумента. Ð’Ñ‹ можете раÑÑматривать данный документ как *возможноÑть Ñоздать Ñвой ÑобÑтвенный шаблонный проект Ñ Ð½ÑƒÐ»Ñ*. -[4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) +Вам, конечно, не нужны вÑе Ñти технологии еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (доÑтаточно комбинаци Babel + jQuery), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. -[5 - The ES6 modules syntax](/tutorial/5-es6-modules-syntax) +ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. -[6 - ESLint](/tutorial/6-eslint) +Ð’ большой чаÑти технологий опиÑываемых тут иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко проведет через Ñреду React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду иÑпользующую React и наверÑтать Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы полноÑтью понимали вÑе, что проиÑходит "под капотом". -[7 - Client app with Webpack](/tutorial/7-client-webpack) +Примеры кода доÑтупны Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð¹ чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждой чаÑти. -[8 - React](/tutorial/8-react) +**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что еÑли вы проÑто хотите получить окончательный вариант проекта Ñодержащий вÑе, проÑто Ñкопируйте поÑледнюю чаÑть и пользуйтеÑÑŒ наздоровье. -[9 - Redux](/tutorial/9-redux) +Замечание: ПорÑдок чаÑтей не обÑзателен. К примеру, теÑтирование / Ñ‚Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð¼Ð¾Ð³ÑƒÑ‚ быть выполнены до Ð²Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð² React. Довольно Ñложно перемещать или редактировать опубликованные разделы, поÑкольку приходитÑÑ Ð²Ð½Ð¾Ñить Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¾ вÑе Ñледующие за ними чаÑти. Возможно, когда вÑе определитÑÑ, Ñ Ð¿Ñ€Ð¸Ð²ÐµÐ´Ñƒ вÑÑŽ документацию к более удобному виду. -[10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) - -[11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon) - -[12 - Type Checking with Flow](/tutorial/12-flow) +Код, приведенный в примерах, работает под Linux, macOS, и Windows. ## Содержание @@ -86,19 +66,21 @@ The code of this tutorial works on Linux, macOS, and Windows. [12 - ~Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ~ Flow](/tutorial/12-flow) -## Coming up next +## Далее Ñледует -Production / development environments, Express, React Router, Server-Side Rendering, Styling, Enzyme, Git Hooks. +Production / development окружение, Express, React Router, Серверный Рендеринг, СтилизациÑ, Enzyme, Приемы Git. -## Translations +## Переводы на другие Ñзыки - [Chinese](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10) - [Italian](https://github.com/fbertone/js-stack-from-scratch) by [Fabrizio Bertone](https://github.com/fbertone) -If you want to add your translation, please read the [translation recommendations](/how-to-translate.md) to get started! +ЕÑли вы хотите добавить перевод на другой Ñзык, пожалуйÑта читайте [рекомендации по переводу](/how-to-translate.md) чтобы начать! + +## Контакты -## Credits +Создано [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/). -Created by [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/). +Переведено [@usulpro](https://github.com/UsulPro) - [sm-react](https://github.com/sm-react) -License: MIT +ЛицензиÑ: MIT -- GitLab From bfa49b849e63018ab946b90907c4886d70ad0fde Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Fri, 4 Nov 2016 00:02:48 +0700 Subject: [PATCH 11/73] fix Intro --- README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index 797c91b..61aa5f5 100644 --- a/README.md +++ b/README.md @@ -30,13 +30,13 @@ ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. -Ð’ большой чаÑти технологий опиÑываемых тут иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко проведет через Ñреду React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду иÑпользующую React и наверÑтать Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы полноÑтью понимали вÑе, что проиÑходит "под капотом". +Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду иÑпользующую React и наверÑтать Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". -Примеры кода доÑтупны Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð¹ чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждой чаÑти. +Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. -**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что еÑли вы проÑто хотите получить окончательный вариант проекта Ñодержащий вÑе, проÑто Ñкопируйте поÑледнюю чаÑть и пользуйтеÑÑŒ наздоровье. +**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что еÑли вы проÑто хотите получить окончательный вариант проекта, Ñодержащий вÑе, проÑто Ñкопируйте поÑледний раздел и пользуйтеÑÑŒ на здоровье. -Замечание: ПорÑдок чаÑтей не обÑзателен. К примеру, теÑтирование / Ñ‚Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð¼Ð¾Ð³ÑƒÑ‚ быть выполнены до Ð²Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð² React. Довольно Ñложно перемещать или редактировать опубликованные разделы, поÑкольку приходитÑÑ Ð²Ð½Ð¾Ñить Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¾ вÑе Ñледующие за ними чаÑти. Возможно, когда вÑе определитÑÑ, Ñ Ð¿Ñ€Ð¸Ð²ÐµÐ´Ñƒ вÑÑŽ документацию к более удобному виду. +Замечание: ПорÑдок чаÑтей не вÑегда обÑзателен. К примеру, теÑтирование / Ñ‚Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð¼Ð¾Ð³ÑƒÑ‚ быть выполнены до Ð²Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð² React. Довольно Ñложно перемещать или редактировать опубликованные разделы, поÑкольку приходитÑÑ Ð²Ð½Ð¾Ñить Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¾ вÑе Ñледующие за ними чаÑти. Возможно, когда вÑе определитÑÑ, Ñ Ð¿Ñ€Ð¸Ð²ÐµÐ´Ñƒ вÑÑŽ документацию к более удобному виду. Код, приведенный в примерах, работает под Linux, macOS, и Windows. -- GitLab From 5dd0ab9a2ecf7942cc3f2318b7e71c1d62802104 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Fri, 4 Nov 2016 14:19:20 +0700 Subject: [PATCH 12/73] section 2 --- Definitions.md | 5 ++ .../1-node-npm-yarn-package-json/README.md | 42 +++++++------- .../1-node-npm-yarn-package-json/READMEeng.md | 55 +++++++++++++++++++ 3 files changed, 81 insertions(+), 21 deletions(-) create mode 100644 tutorial/1-node-npm-yarn-package-json/READMEeng.md diff --git a/Definitions.md b/Definitions.md index 0c1698f..d73b133 100644 --- a/Definitions.md +++ b/Definitions.md @@ -47,3 +47,8 @@ https://www.stevefenton.co.uk/2012/11/compiling-vs-transpiling/ tutorial - руководÑтво entry point file - файл, указывающий на начальную точку Ñборки + +back-end - ÑÐµÑ€Ð²ÐµÑ€Ð½Ð°Ñ Ñ‡Ð°Ñть + +trailing commas - Ð·Ð°Ð²ÐµÑ€ÑˆÐ°ÑŽÑ‰Ð°Ñ Ð·Ð°Ð¿ÑÑ‚Ð°Ñ (/пробел) +http://www.multitran.ru/c/m.exe?t=6766895_1_2&s1=trailing%20space diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 05d7484..1a9199c 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -1,35 +1,35 @@ # 1 - Node, NPM, Yarn, and package.json -In this section we will set up Node, NPM, Yarn, and a basic `package.json` file. +Ð’ Ñтой чаÑти мы наÑтроим Node, NPM, Yarn, и проÑтой `package.json`. -First, we need to install Node, which is not only used for back-end JavaScript, but all the tools we need to build a modern Front-End stack. +Прежде вÑего, нам нужно уÑтановить Node, который необходим не только Ð´Ð»Ñ Ñерверной чаÑти (back-end), но и Ð´Ð»Ñ Ð²Ñех тех инÑтрументов, которые входÑÑ‚ в ÑоÑтав Ñовременных технологий Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ ÐºÐ»Ð¸ÐµÐ½Ñ‚Ñкой чаÑти (Front-End). -Head to the [download page](https://nodejs.org/en/download/current/) for macOS or Windows binaries, or the [package manager installations page](https://nodejs.org/en/download/package-manager/) for Linux distributions. +Зайдите на [Ñтраницу загрузки](https://nodejs.org/en/download/current/) диÑтрибутива Ð´Ð»Ñ macOS или Windows, или уÑтановите [через менеджер пакетов](https://nodejs.org/en/download/package-manager/) Ð´Ð»Ñ Linux. -For instance, on **Ubuntu / Debian**, you would run the following commands to install Node: +Ðапример, на **Ubuntu / Debian**, чтобы уÑтановить Node нужно выполнить Ñледующие команды: ```bash curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - sudo apt-get install -y nodejs ``` -You want any version of Node > 6.5.0. +Вам подойдет Ð»ÑŽÐ±Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Node > 6.5.0. -`npm`, the default package manager for Node, comes automatically with Node, so you don't have to install it yourself. +`npm` - Ñтандартный менеджер пакетов Ð´Ð»Ñ Node, уÑтанавливаетÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑки, так что вам не нужно делать Ñто вручную. -**Note**: If Node is already installed, install `nvm` ([Node Version Manager](https://github.com/creationix/nvm)), make `nvm` install and use the latest version of Node for you. +**Замечание**: ЕÑли Node уже уÑтановлен, уÑтановите `nvm` ([Node Version Manager](https://github.com/creationix/nvm))(Менеджер верÑий Node), выполните `nvm` install и пользуйтеÑÑŒ поÑледней верÑией Node. -[Yarn](https://yarnpkg.com/) is another package manager which is much faster than NPM, has offline support, and fetches dependencies [more predictably](https://yarnpkg.com/en/docs/yarn-lock). Since it [came out](https://code.facebook.com/posts/1840075619545360) in October 2016, it received a very quick adoption and is becoming the new package manager of choice of the JavaScript community. We are going to use Yarn in this tutorial. If you want to stick to NPM you can simply replace all `yarn add` and `yarn add --dev` commands of this tutorial by `npm install --save` and `npm install --dev`. +[Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Мы будем иÑпользовать Yarn в Ñтом руководÑтве. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --dev` в Ñтом поÑобии. -- Install Yarn by following the [instructions](https://yarnpkg.com/en/docs/install). You can likely install it with `npm install -g yarn` or `sudo npm install -g yarn` (yeah, we're using NPM to install Yarn, much like you would use Internet Explorer or Safari to install Chrome!). +- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (ага, мы иÑпользуем NPM чтобы уÑтановить Yarn, прÑм как иÑпользовать Internet Explorer или Safari чтобы уÑтановить Chrome!). -- Create a new folder to work in, and `cd` in it. -- Run `yarn init` and answer the questions (`yarn init -y` to skip all questions), to generate a `package.json` file automatically. -- Create an `index.js` file containing `console.log('Hello world')`. -- Run `node .` in this folder (`index.js` is the default file Node looks for in the current folder). It should print "Hello world". +- Создайте новую директорию Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ и зайдите (`cd`) в нее. +- ЗапуÑтите `yarn init` и ответьте на вопроÑÑ‹ (`yarn init -y` чтобы пропуÑтить вопроÑÑ‹), чтобы Ñоздать файл `package.json` автоматичеÑки. +- Создайте файл `index.js` Ñодержащий `console.log('Hello world')`. +- ЗапуÑтите `node .` в Ñтой директории (`index.js` - файл по умолчанию, который Node будет запуÑкать в текущей папке). Должно выйти "Hello world". -Running `node .` to execute our program is a bit too low-level. We are going to use an NPM/Yarn script to trigger the execution of that code instead. That will give us a nice abstraction to be able to always use `yarn start`, even when our program gets more complicated. +Команда `node .` - Ñлегка Ð½Ð¸Ð·ÐºÐ¾ÑƒÑ€Ð¾Ð²Ð½ÐµÐ²Ð°Ñ Ð´Ð»Ñ Ð·Ð°Ð¿ÑƒÑка программ. ВмеÑто Ñтого, мы будем иÑпользовать NPM/Yarn Ñкрипты чтобы запуÑкать выполнение нужного кода. Ðто даÑÑ‚ нам хороший уровень абÑтракции, позволÑющий вÑегда иÑпользовать `yarn start`, даже когда наша программа Ñтанет более Ñложной. -- In `package.json`, add a `scripts` object to the root object like so: +- Ð’ `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтоб было так: ``` "scripts": { @@ -37,19 +37,19 @@ Running `node .` to execute our program is a bit too low-level. We are going to } ``` -`package.json` must be a valid JSON file, which means that you cannot have trailing commas. So be careful when editing manually your `package.json` file. +`package.json` должен быть дейÑтвительным JSON файлом, что значит, что он не может Ñодержать завершающие запÑтые (trailing commas). Так что будьте внимательны, Ñ€ÐµÐ´Ð°ÐºÑ‚Ð¸Ñ€ÑƒÑ ÐµÐ³Ð¾ вручную. -- Run `yarn start`. It should print `Hello world`. +- ЗапуÑтите `yarn start`. Должно выйти `Hello world`. -- Create a `.gitignore` file and add the following to it: +- Создайте файл `.gitignore` и добавьте туда Ñледующее: ``` npm-debug.log yarn-error.log ``` -**Note**: If you take a look at the `package.json` files I provide, you will see a `tutorial-test` script in every chapter. Those scripts let me test that the chapter works fine when running `yarn && yarn start`. You can delete them in your own projects. +**Замечание**: ЕÑли вы поÑмотрите на файлы `package.json`, которые Ñ Ð¿Ñ€Ð¸Ð»Ð°Ð³Ð°ÑŽ к Ñтому руководÑтву, вы увидете там Ñкрипт `tutorial-test`. Он еÑть в каждой чаÑти. Ðтот Ñкрипт позволÑет мне теÑтировать, что код правильно работает при запуÑке `yarn && yarn start`. Ð’Ñ‹ можете удалÑть его из ваших проектов. -Next section: [2 - Installing and using a package](/tutorial/2-packages) +Следующий раздел: [2 - Installing and using a package](/tutorial/2-packages) -Back to the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [Содержание](https://github.com/verekia/js-stack-from-scratch). diff --git a/tutorial/1-node-npm-yarn-package-json/READMEeng.md b/tutorial/1-node-npm-yarn-package-json/READMEeng.md new file mode 100644 index 0000000..05d7484 --- /dev/null +++ b/tutorial/1-node-npm-yarn-package-json/READMEeng.md @@ -0,0 +1,55 @@ +# 1 - Node, NPM, Yarn, and package.json + +In this section we will set up Node, NPM, Yarn, and a basic `package.json` file. + +First, we need to install Node, which is not only used for back-end JavaScript, but all the tools we need to build a modern Front-End stack. + +Head to the [download page](https://nodejs.org/en/download/current/) for macOS or Windows binaries, or the [package manager installations page](https://nodejs.org/en/download/package-manager/) for Linux distributions. + +For instance, on **Ubuntu / Debian**, you would run the following commands to install Node: + +```bash +curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - +sudo apt-get install -y nodejs +``` +You want any version of Node > 6.5.0. + +`npm`, the default package manager for Node, comes automatically with Node, so you don't have to install it yourself. + +**Note**: If Node is already installed, install `nvm` ([Node Version Manager](https://github.com/creationix/nvm)), make `nvm` install and use the latest version of Node for you. + +[Yarn](https://yarnpkg.com/) is another package manager which is much faster than NPM, has offline support, and fetches dependencies [more predictably](https://yarnpkg.com/en/docs/yarn-lock). Since it [came out](https://code.facebook.com/posts/1840075619545360) in October 2016, it received a very quick adoption and is becoming the new package manager of choice of the JavaScript community. We are going to use Yarn in this tutorial. If you want to stick to NPM you can simply replace all `yarn add` and `yarn add --dev` commands of this tutorial by `npm install --save` and `npm install --dev`. + +- Install Yarn by following the [instructions](https://yarnpkg.com/en/docs/install). You can likely install it with `npm install -g yarn` or `sudo npm install -g yarn` (yeah, we're using NPM to install Yarn, much like you would use Internet Explorer or Safari to install Chrome!). + +- Create a new folder to work in, and `cd` in it. +- Run `yarn init` and answer the questions (`yarn init -y` to skip all questions), to generate a `package.json` file automatically. +- Create an `index.js` file containing `console.log('Hello world')`. +- Run `node .` in this folder (`index.js` is the default file Node looks for in the current folder). It should print "Hello world". + +Running `node .` to execute our program is a bit too low-level. We are going to use an NPM/Yarn script to trigger the execution of that code instead. That will give us a nice abstraction to be able to always use `yarn start`, even when our program gets more complicated. + +- In `package.json`, add a `scripts` object to the root object like so: + +``` +"scripts": { + "start": "node ." +} +``` + +`package.json` must be a valid JSON file, which means that you cannot have trailing commas. So be careful when editing manually your `package.json` file. + +- Run `yarn start`. It should print `Hello world`. + +- Create a `.gitignore` file and add the following to it: + +``` +npm-debug.log +yarn-error.log +``` + +**Note**: If you take a look at the `package.json` files I provide, you will see a `tutorial-test` script in every chapter. Those scripts let me test that the chapter works fine when running `yarn && yarn start`. You can delete them in your own projects. + +Next section: [2 - Installing and using a package](/tutorial/2-packages) + +Back to the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From 513117ebffa58608db995a3de4eb69a5cb1cd3d8 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Fri, 4 Nov 2016 17:51:39 +0700 Subject: [PATCH 13/73] section 2 --- Definitions.md | 6 ++++ README.md | 2 +- .../1-node-npm-yarn-package-json/README.md | 2 +- tutorial/2-packages/README.md | 33 ++++++++++--------- tutorial/2-packages/READMEeng.md | 31 +++++++++++++++++ 5 files changed, 56 insertions(+), 18 deletions(-) create mode 100644 tutorial/2-packages/READMEeng.md diff --git a/Definitions.md b/Definitions.md index d73b133..eb9c727 100644 --- a/Definitions.md +++ b/Definitions.md @@ -52,3 +52,9 @@ back-end - ÑÐµÑ€Ð²ÐµÑ€Ð½Ð°Ñ Ñ‡Ð°Ñть trailing commas - Ð·Ð°Ð²ÐµÑ€ÑˆÐ°ÑŽÑ‰Ð°Ñ Ð·Ð°Ð¿ÑÑ‚Ð°Ñ (/пробел) http://www.multitran.ru/c/m.exe?t=6766895_1_2&s1=trailing%20space + +repo/repository - репозиторий + +commit - фикÑировать гл. +commit - коммит Ñущ. + diff --git a/README.md b/README.md index 61aa5f5..c6ccf63 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ [](https://travis-ci.org/verekia/js-stack-from-scratch) -Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии (@verekia). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. +>Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии (@verekia). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. ## Работа над переводом идет. Ðто не Ð¾ÐºÐ¾Ð½Ñ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€ÑиÑ! diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 1a9199c..46acd2e 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -52,4 +52,4 @@ yarn-error.log Следующий раздел: [2 - Installing and using a package](/tutorial/2-packages) -Ðазад в [Содержание](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [Содержание](/tutorial). diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index 66b71a6..5d7fa41 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -1,31 +1,32 @@ # 2 - Installing and using a package -In this section we will install and use a package. A "package" is simply a piece of code that someone else wrote, and that you can use in your own code. It can be anything. Here, we're going to try a package that helps you manipulate colors for instance. +Ð’ Ñтой чаÑти мы уÑтановим и будем иÑпользовать один пакет (package). "Пакет" Ñто проÑто куÑок кода, напиÑанный кем-то другим, и который вы можете иÑпользовать в Ñвоей программе. Ðто может быть что угодно. Ðапример, мы ÑÐµÐ¹Ñ‡Ð°Ñ Ð¿Ð¾Ð¿Ñ€Ð¾Ð±ÑƒÐµÐ¼ воÑпользоватьÑÑ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð¼, который помогает манипулировать цветами. -- Install the community-made package called `color` by running `yarn add color`. +- УÑтановим Ñозданный ÑообщеÑтвом пакет, называемый `color`, путем запуÑка команды `yarn add color`. -Open `package.json` to see how Yarn automatically added `color` in `dependencies`. +Откройте `package.json` чтобы увидеть как Yarn автоматичеÑки добавил `color` в `dependencies` (завиÑимоÑти). -A `node_modules` folder has been created to store the package. +Сам пакет находитÑÑ Ð² Ñозданной Ð´Ð»Ñ Ñтого папке `node_modules`. -- Add `node_modules/` to your `.gitignore` file (and `git init` a new repo if you haven't done that yet). +- Добавьте `node_modules/` в файл `.gitignore` (и запуÑтите `git init`, чтобы Ñоздать новый репозиторий, еÑли вы еще Ñтого не Ñделали) -You will also notice that a `yarn.lock` file got generated by Yarn. You should commit this file to your repository, as it will ensure that everyone in your team uses the same version of your packages. If you're sticking to NPM instead of Yarn, the equivalent of this file is the *shrinkwrap*. +Ð’Ñ‹ также могли заметить файл `yarn.lock`, Ñгенерированный Yarn. Вам нужно зафикÑировать (commit) Ñтот файл в репозитории, так как Ñто позволит быть уверенным, что любой член вашей команды иÑпользует те же Ñамые верÑии пакетов, что и вы. ЕÑли вы вÑе еще предпочетаете NPM, а не Yarn, Ñквивалентом Ñтого файла будет *shrinkwrap*. -- Add `const Color = require('color');` in `index.js` -- Use the package like this for instance: `const redHexa = Color({r: 255, g: 0, b: 0}).hexString();` -- Add `console.log(redHexa)`. -- Running `yarn start` should show `#FF0000`. +- Добавьте `const Color = require('color');` в `index.js` +- ИÑпользуем пакет, например, таким образом: `const redHexa = Color({r: 255, g: 0, b: 0}).hexString();` +- Добавьте `console.log(redHexa)`. +- ЗапуÑтите `yarn start` - должны увидеть `#FF0000`. -Congratulations, you installed and used a package! +ПоздравлÑÑŽ! Ð’Ñ‹ уÑтановили и применили пакет! -`color` is just used in this section to teach you how to use a simple package. We won't need it anymore, so you can uninstall it: +`color` is just used in this section to teach you how to use a simple package. +`color` здеÑÑŒ проÑто как пример, чтобы научить Ð²Ð°Ñ Ð¸Ñпользовать пакеты. Больше он нам не нужен, можно его удалить: -- Run `yarn remove color` +- Выполните `yarn remove color` -**Note**: There are 2 kinds of package dependencies, `"dependencies"` and `"devDependencies"`. `"dependencies"` is more general than `"devDependencies"`, which are packages that you only need during development, not production (typically, build-related packages, linters, etc). For `"devDependencies"`, we will use `yarn add --dev [package]`. +**Замечание**: СущеÑтвует два вида завиÑимоÑтей Ð´Ð»Ñ Ð¿Ð¾Ð´ÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð²: `"dependencies"` и `"devDependencies"`. `"dependencies"` - более общее понÑтие, чем `"devDependencies"`, так как поÑледние нужны только Ð´Ð»Ñ Ñ€Ð°Ð·Ñ€Ð°Ð±Ð¾Ñ‚ÐºÐ¸ а не выпуÑка (production) Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (обычно Ñто пакеты ÑвÑзанные Ñ Ð¿Ñ€Ð¾Ñ†ÐµÑÑом поÑтроениÑ, анализаторы кода и Ñ‚.п.). Ð”Ð»Ñ `"devDependencies"`, будем иÑпользовать `yarn add --dev [package]`. (прим. пер. `npm install [package] --save-dev`) -Next section: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) +Следующий раздел: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -Back to the [previous section](/tutorial/1-node-npm-yarn-package-json) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/tutorial). diff --git a/tutorial/2-packages/READMEeng.md b/tutorial/2-packages/READMEeng.md new file mode 100644 index 0000000..66b71a6 --- /dev/null +++ b/tutorial/2-packages/READMEeng.md @@ -0,0 +1,31 @@ +# 2 - Installing and using a package + +In this section we will install and use a package. A "package" is simply a piece of code that someone else wrote, and that you can use in your own code. It can be anything. Here, we're going to try a package that helps you manipulate colors for instance. + +- Install the community-made package called `color` by running `yarn add color`. + +Open `package.json` to see how Yarn automatically added `color` in `dependencies`. + +A `node_modules` folder has been created to store the package. + +- Add `node_modules/` to your `.gitignore` file (and `git init` a new repo if you haven't done that yet). + +You will also notice that a `yarn.lock` file got generated by Yarn. You should commit this file to your repository, as it will ensure that everyone in your team uses the same version of your packages. If you're sticking to NPM instead of Yarn, the equivalent of this file is the *shrinkwrap*. + +- Add `const Color = require('color');` in `index.js` +- Use the package like this for instance: `const redHexa = Color({r: 255, g: 0, b: 0}).hexString();` +- Add `console.log(redHexa)`. +- Running `yarn start` should show `#FF0000`. + +Congratulations, you installed and used a package! + +`color` is just used in this section to teach you how to use a simple package. We won't need it anymore, so you can uninstall it: + +- Run `yarn remove color` + +**Note**: There are 2 kinds of package dependencies, `"dependencies"` and `"devDependencies"`. `"dependencies"` is more general than `"devDependencies"`, which are packages that you only need during development, not production (typically, build-related packages, linters, etc). For `"devDependencies"`, we will use `yarn add --dev [package]`. + + +Next section: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) + +Back to the [previous section](/tutorial/1-node-npm-yarn-package-json) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). -- GitLab From afc49cf95504b53b9a6af044fff8ccee91099b38 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Fri, 4 Nov 2016 17:59:06 +0700 Subject: [PATCH 14/73] fix content --- tutorial/1-node-npm-yarn-package-json/README.md | 2 +- tutorial/2-packages/README.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 46acd2e..081b59c 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -52,4 +52,4 @@ yarn-error.log Следующий раздел: [2 - Installing and using a package](/tutorial/2-packages) -Ðазад в [Содержание](/tutorial). +Ðазад в [Содержание](/). diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index 5d7fa41..e8ff97c 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -29,4 +29,4 @@ Следующий раздел: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/tutorial). +Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/). -- GitLab From 43ba0a58c3b2a5cc84c980693d22067792855b7c Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Fri, 4 Nov 2016 20:02:39 +0700 Subject: [PATCH 15/73] fix TOC links --- tutorial/1-node-npm-yarn-package-json/README.md | 2 +- tutorial/10-immutable-redux-improvements/README.md | 2 +- tutorial/11-testing-mocha-chai-sinon/README.md | 2 +- tutorial/12-flow/README.md | 2 +- tutorial/2-packages/README.md | 2 +- tutorial/3-es6-babel-gulp/README.md | 2 +- tutorial/4-es6-syntax-class/README.md | 2 +- tutorial/5-es6-modules-syntax/README.md | 2 +- tutorial/6-eslint/README.md | 6 +++--- tutorial/7-client-webpack/README.md | 2 +- tutorial/8-react/README.md | 2 +- tutorial/9-redux/README.md | 2 +- 12 files changed, 14 insertions(+), 14 deletions(-) diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 081b59c..6062fbe 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -52,4 +52,4 @@ yarn-error.log Следующий раздел: [2 - Installing and using a package](/tutorial/2-packages) -Ðазад в [Содержание](/). +Ðазад в [Содержание](/README.md). diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index 031409b..ca56507 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -99,4 +99,4 @@ export const makeBark = createAction(MAKE_BARK, () => true); Next section: [11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon) -Back to the [previous section](/tutorial/9-redux) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/9-redux) or the [table of contents](/README.md). diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 0d0acd4..53a2766 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -154,4 +154,4 @@ If everything went well in this chapter, you should have 2 passing tests. Next section: [12 - Type Checking with Flow](/tutorial/12-flow) -Back to the [previous section](/tutorial/10-immutable-redux-improvements) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/10-immutable-redux-improvements) or the [table of contents](/README.md). diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index 2cec7fb..f80e409 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -105,4 +105,4 @@ In my case, the `linter-flow` plugin for Atom was detecting type errors in the ` You now have bullet-proof code that is linted, typechecked, and tested, good job! -Back to the [previous section](/tutorial/11-testing-mocha-chai-sinon) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/11-testing-mocha-chai-sinon) or the [table of contents](/README.md). diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index e8ff97c..f58cf25 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -29,4 +29,4 @@ Следующий раздел: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/). +Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/README.md). diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index d1e062b..64543c1 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -90,4 +90,4 @@ Alright! Let's see if this works. Next section: [4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) -Back to the [previous section](/tutorial/2-packages) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/2-packages) or the [table of contents](/README.md). diff --git a/tutorial/4-es6-syntax-class/README.md b/tutorial/4-es6-syntax-class/README.md index f9d8495..64ab11e 100644 --- a/tutorial/4-es6-syntax-class/README.md +++ b/tutorial/4-es6-syntax-class/README.md @@ -38,4 +38,4 @@ console.log(toby.bark()); Следующий раздел: [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) -Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](/README.md). diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 55b1530..14018d2 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -47,4 +47,4 @@ import { exec } from 'child_process'; Следующий раздел: [6 - ESLint](/tutorial/6-eslint) -Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](/README.md). diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index 60d98b3..aeecc4e 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -47,7 +47,7 @@ gulp.task('lint', () => { }); ``` -ЗдеÑÑŒ мы говорм Gulp, что Ð´Ð»Ñ Ñтой задачи мы хотим подключить `gulpfile.babel.js` и JS файлы, раÑположенные в src`. +ЗдеÑÑŒ мы говорм Gulp, что Ð´Ð»Ñ Ñтой задачи мы хотим подключить `gulpfile.babel.js` и JS файлы, раÑположенные в `src`. Откорректируйте задачу `build` так, чтобы `lint` предварÑла ее запуÑк: @@ -61,7 +61,7 @@ gulp.task('build', ['lint', 'clean'], () => { Один из видов ошибок будет: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (англ. build - прим. переводчика ) а какие нет. ПоÑтому мы немного поможем ESLint иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: -```javascript``` +```javascript /* eslint-disable import/no-extraneous-dependencies */ ``` @@ -114,4 +114,4 @@ gulp.task('build', ['lint', 'clean'], () => Следующий раздел: [7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) -Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](/README.md). diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index b9adc15..896ce7e 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -193,4 +193,4 @@ gulp.task('clean', () => del([ Следующий раздел: [8 - React](/tutorial/8-react) -Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](/README.md). diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index f44b996..721baf3 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -59,4 +59,4 @@ clientEntryPoint: 'src/client/app.jsx', Следующий раздел: [9 - Redux](/tutorial/9-redux) -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](https://github.com/verekia/js-stack-from-scratch). +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/README.md). diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index 566175a..20bfe89 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -155,4 +155,4 @@ export default connect(mapStateToProps)(Message); Next section: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Back to the [previous section](/tutorial/8-react) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/8-react) or the [table of contents](/README.md). -- GitLab From 613db2379b6d1da1661cbf91be16eb89cef49b19 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Fri, 4 Nov 2016 22:54:26 +0700 Subject: [PATCH 16/73] section 12 --- Definitions.md | 1 + README.md | 2 +- .../10-immutable-redux-improvements/README.md | 55 ++++----- .../READMEeng.md | 102 +++++++++++++++++ tutorial/12-flow/README.md | 53 ++++----- tutorial/12-flow/READMEeng.md | 108 ++++++++++++++++++ 6 files changed, 267 insertions(+), 54 deletions(-) create mode 100644 tutorial/10-immutable-redux-improvements/READMEeng.md create mode 100644 tutorial/12-flow/READMEeng.md diff --git a/Definitions.md b/Definitions.md index eb9c727..dfe9584 100644 --- a/Definitions.md +++ b/Definitions.md @@ -58,3 +58,4 @@ repo/repository - репозиторий commit - фикÑировать гл. commit - коммит Ñущ. +reducer functions - reducer-функции diff --git a/README.md b/README.md index c6ccf63..c104206 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ [9 - Redux](/tutorial/9-redux) -[10 - Immutable JS and ~Redux Improvements~](/tutorial/10-immutable-redux-improvements) +[10 - Immutable JS и ÑƒÐ»ÑƒÑ‡ÑˆÐµÐ½Ð¸Ñ Redux](/tutorial/10-immutable-redux-improvements) [11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index ca56507..ccf02b3 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -1,26 +1,26 @@ -# 10 - Immutable JS and Redux Improvements +# 10 - Immutable JS и ÑƒÐ»ÑƒÑ‡ÑˆÐµÐ½Ð¸Ñ Redux ## Immutable JS -Unlike the previous chapter, this one is rather easy, and consists in minor improvements. +Ð’ отличие от предыдущей чаÑти, Ñта довольно проÑÑ‚Ð°Ñ Ð¸ ÑоÑтоит из незначительных улучшений. -First, we are going to add **Immutable JS** to our codebase. Immutable is a library to manipulate objects without mutating them. Instead of doing: +Сначала мы добавим **Immutable JS** в наш проект. Immutable - Ñто библиотека, позволÑÑŽÑ‰Ð°Ñ Ð¼Ð°Ð½Ð¸Ð¿ÑƒÐ»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ объектами не изменÑÑ Ð¸Ñ…. ВмеÑто: ```javascript const obj = { a: 1 }; -obj.a = 2; // Mutates `obj` +obj.a = 2; // ИзменÑет `obj` ``` -You would do: +Мы можем Ñделать так: ```javascript const obj = Immutable.Map({ a: 1 }); -obj.set('a', 2); // Returns a new object without mutating `obj` +obj.set('a', 2); // Возвращает новый объект не изменÑÑ `obj` ``` -This approach follows the **functional programming** paradigm, which works really well with Redux. Your reducer functions actually *have* to be pure functions that don't alter the state passed as parameter, but return a brand new state object instead. Let's use Immutable to enforce this. +Такой подход Ñледует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообщето **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища, переданное в качеÑтве параметра, а возвращать вмеÑто Ñтого абÑолютно новое. Давайте воÑпользуемÑÑ Immutable чтобы доÑтичь Ñтого. -- Run `yarn add immutable` +- ЗапуÑтите `yarn add immutable` -We are going to use `Map` in our codebase, but ESLint and the Airbnb config will complain about using a capitalized name without it being a class. Add the following to your `package.json` under `eslintConfig`: +Мы будем иÑпользовать Ð¸Ð¼Ñ `Map` в нашем проекте, но ESLint и ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ Airbnb начнут жаловатьÑÑ Ð½Ð° иÑпользование capitalized (где Ð¿ÐµÑ€Ð²Ð°Ñ Ð±ÑƒÐºÐ²Ð° заглавнаÑ) имен, еÑли Ñто не Ð¸Ð¼Ñ ÐºÐ»Ð°ÑÑа. Добавьте Ñледующее в `package.json` поÑле `eslintConfig`: ```json "rules": { @@ -35,11 +35,11 @@ We are going to use `Map` in our codebase, but ESLint and the Airbnb config will ] } ``` -This makes `Map` and `List` (the 2 Immutable objects you'll use all the time) exceptions to that ESLint rule. This verbose JSON formatting is actually done automatically by Yarn/NPM, so we cannot make it more compact unfortunately. +Таким образом мы внеÑли `Map` и `List` (два Immutable объекта, которые мы будем иÑпользовать поÑтоÑно) в иÑÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ðº Ñтому ESLint правилу. Такой подробный Ñтиль Ñ„Ð¾Ñ€Ð¼Ð°Ñ‚Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ JSON, выполнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑки Yarn/NPM, так что мы, к Ñожалению, не можем Ñделать его более компактным. -Anyway, back to Immutable: +Ð’ любом Ñлучае, вернемÑÑ Ðº Immutable: -In `dog-reducer.js` tweak your file so it looks like this: +ÐаÑтройте `dog-reducer.js`, чтобы он выглÑдел так: ```javascript import Immutable from 'immutable'; @@ -61,9 +61,9 @@ const dogReducer = (state = initialState, action) => { export default dogReducer; ``` -The initial state is now built using an Immutable Map, and the new state is generated using `set()`, preventing any mutation of the previous state. +Теперь мы Ñоздаем иÑходное ÑоÑтоÑние, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Immutable Map, а новое ÑоÑтоÑние получаем применÑÑ `set()`, что иÑключает любые мутации предыдущего ÑоÑтоÑниÑ. -In `containers/bark-message.js`, update the `mapStateToProps` function to use `.get('hasBarked')` instead of `.hasBarked`: +Ð’ `containers/bark-message.js`, обновите функцию `mapStateToProps` чтобы она иÑпользовала `.get('hasBarked')` вмеÑто `.hasBarked`: ```javascript const mapStateToProps = state => ({ @@ -71,20 +71,20 @@ const mapStateToProps = state => ({ }); ``` -The app should still behave exactly the way it did before. +Приложение должно ÑÐµÐ±Ñ Ð²ÐµÑти точно так же как и до Ñтого. -**Note**: If Babel complains about Immutable exceeding 100KB, add `"compact": false` to your `package.json` under `babel`. +**Замечание**: ЕÑли Babel жалуетÑÑ Ð½Ð° то, что Immutable превышает 100KB, добавьте `"compact": false` в `package.json` поÑле `babel`. -As you can see from the code snippet above, our state object still contains a plain old `dog` object attribute, which isn't immutable. It is fine this way, but if you want to only manipulate immutable objects, you could install the `redux-immutable` package to replace Redux's `combineReducers` function. +Как вы можете видеть из предыдущего фрагмента кода, Ñам объект state вÑе еще Ñодержит Ñтарый атрибут `dog`, ÑвлÑющийÑÑ Ð¿Ñ€Ð¾Ñтым объектом и подверженный мутациÑм. Ð’ нашем Ñлучае Ñто нормально, но еÑли вы хотите манипулировать только немутируемыми объектами, можете уÑтановить пакет `redux-immutable` чтобы заменить функцию `combineReducers` у Redux. -**Optional**: -- Run `yarn add redux-immutable` -- Replace your `combineReducers` function in `app.jsx` to use the one imported from `redux-immutable` instead. -- In `bark-message.js` replace `state.dog.get('hasBarked')` by `state.getIn(['dog', 'hasBarked'])`. +**Ðе обÑзательно**: +- ЗапуÑтите `yarn add redux-immutable` +- Замените функцию `combineReducers` из `app.jsx` на ту, что мы импортировали из `redux-immutable`. +- Ð’ `bark-message.js` замените `state.dog.get('hasBarked')` на `state.getIn(['dog', 'hasBarked'])`. -## Redux Actions +## Redux ДейÑÑ‚Ð²Ñ (Actions) -As you add more and more actions to your app, you will find yourself writing quite a lot of the same boilerplate. The `redux-actions` package helps reducing that boilerplate code. With `redux-actions` you can rewrite your `dog-actions.js` file in a more compact way: +По мере того, как вы добавлÑете вÑе больше и больше дейÑтвий в ваше приложение, вы обнаружите, что приходитÑÑ Ð¿Ð¸Ñать довольно много одного и того же кода. Пакет `redux-actions` помогает уменьшить Ñтот повторÑющийÑÑ ÐºÐ¾Ð´. С помощью `redux-actions` вы можете привеÑти файл `dog-actions.js` к более компактному виду: ```javascript import { createAction } from 'redux-actions'; @@ -93,10 +93,11 @@ export const MAKE_BARK = 'MAKE_BARK'; export const makeBark = createAction(MAKE_BARK, () => true); ``` -`redux-actions` implement the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) model, just like the action we previously wrote, so integrating `redux-actions` is seamless if you follow this model. +`redux-actions` внедрÑет модель [Flux Standard Action](https://github.com/acdlite/flux-standard-action), прÑм так же как, дейÑтвиÑ, которые мы пиÑали до Ñтого, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ `redux-actions` будет беÑшовной еÑли вы придерживаетеÑÑŒ Ñтой модели. -- Don't forget to run `yarn add redux-actions`. +- Ðе забудьте запуÑтить `yarn add redux-actions`. -Next section: [11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon) +Следующий раздел: [11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) + +Ðазад в [предыдущий раздел](/tutorial/9-redux) или [Содержание](/README.md). -Back to the [previous section](/tutorial/9-redux) or the [table of contents](/README.md). diff --git a/tutorial/10-immutable-redux-improvements/READMEeng.md b/tutorial/10-immutable-redux-improvements/READMEeng.md new file mode 100644 index 0000000..ca56507 --- /dev/null +++ b/tutorial/10-immutable-redux-improvements/READMEeng.md @@ -0,0 +1,102 @@ +# 10 - Immutable JS and Redux Improvements + +## Immutable JS + +Unlike the previous chapter, this one is rather easy, and consists in minor improvements. + +First, we are going to add **Immutable JS** to our codebase. Immutable is a library to manipulate objects without mutating them. Instead of doing: + +```javascript +const obj = { a: 1 }; +obj.a = 2; // Mutates `obj` +``` +You would do: +```javascript +const obj = Immutable.Map({ a: 1 }); +obj.set('a', 2); // Returns a new object without mutating `obj` +``` + +This approach follows the **functional programming** paradigm, which works really well with Redux. Your reducer functions actually *have* to be pure functions that don't alter the state passed as parameter, but return a brand new state object instead. Let's use Immutable to enforce this. + +- Run `yarn add immutable` + +We are going to use `Map` in our codebase, but ESLint and the Airbnb config will complain about using a capitalized name without it being a class. Add the following to your `package.json` under `eslintConfig`: + +```json +"rules": { + "new-cap": [ + 2, + { + "capIsNewExceptions": [ + "Map", + "List" + ] + } + ] +} +``` +This makes `Map` and `List` (the 2 Immutable objects you'll use all the time) exceptions to that ESLint rule. This verbose JSON formatting is actually done automatically by Yarn/NPM, so we cannot make it more compact unfortunately. + +Anyway, back to Immutable: + +In `dog-reducer.js` tweak your file so it looks like this: + +```javascript +import Immutable from 'immutable'; +import { MAKE_BARK } from '../actions/dog-actions'; + +const initialState = Immutable.Map({ + hasBarked: false, +}); + +const dogReducer = (state = initialState, action) => { + switch (action.type) { + case MAKE_BARK: + return state.set('hasBarked', action.payload); + default: + return state; + } +}; + +export default dogReducer; +``` + +The initial state is now built using an Immutable Map, and the new state is generated using `set()`, preventing any mutation of the previous state. + +In `containers/bark-message.js`, update the `mapStateToProps` function to use `.get('hasBarked')` instead of `.hasBarked`: + +```javascript +const mapStateToProps = state => ({ + message: state.dog.get('hasBarked') ? 'The dog barked' : 'The dog did not bark', +}); +``` + +The app should still behave exactly the way it did before. + +**Note**: If Babel complains about Immutable exceeding 100KB, add `"compact": false` to your `package.json` under `babel`. + +As you can see from the code snippet above, our state object still contains a plain old `dog` object attribute, which isn't immutable. It is fine this way, but if you want to only manipulate immutable objects, you could install the `redux-immutable` package to replace Redux's `combineReducers` function. + +**Optional**: +- Run `yarn add redux-immutable` +- Replace your `combineReducers` function in `app.jsx` to use the one imported from `redux-immutable` instead. +- In `bark-message.js` replace `state.dog.get('hasBarked')` by `state.getIn(['dog', 'hasBarked'])`. + +## Redux Actions + +As you add more and more actions to your app, you will find yourself writing quite a lot of the same boilerplate. The `redux-actions` package helps reducing that boilerplate code. With `redux-actions` you can rewrite your `dog-actions.js` file in a more compact way: + +```javascript +import { createAction } from 'redux-actions'; + +export const MAKE_BARK = 'MAKE_BARK'; +export const makeBark = createAction(MAKE_BARK, () => true); +``` + +`redux-actions` implement the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) model, just like the action we previously wrote, so integrating `redux-actions` is seamless if you follow this model. + +- Don't forget to run `yarn add redux-actions`. + +Next section: [11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon) + +Back to the [previous section](/tutorial/9-redux) or the [table of contents](/README.md). diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index f80e409..fa82086 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -1,12 +1,12 @@ # 12 - Flow -[Flow](https://flowtype.org/) is a static type checker. It detects inconsistent types in your code and you can add explicit type declarations in it via annotations. +[Flow](https://flowtype.org/) - ÑтатичеÑкий типизатор (static type checker). Он определÑет неÑоответÑтвие типов в вашем коде и позволÑет напрÑмую декларировать типы через аннотации. -- In order for Babel to understand and remove Flow annotations during the transpilation process, install the Flow preset for Babel by running `yarn add --dev babel-preset-flow`. Then, add `"flow"` under `babel.presets` in your `package.json`. +- Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы Babel мог понимать и убирать аннотации Flow в процеÑÑе транÑпилÑции, уÑтановите плагин Flow Ð´Ð»Ñ Babel выполнив `yarn add --dev babel-preset-flow`. Затем добавье `"flow"` поÑле `babel.presets` в `package.json`. -- Create an empty `.flowconfig` file at the root of your project +- Создайте пуÑтой файл `.flowconfig` в корне проекта. -- Run `yarn add --dev gulp-flowtype` to install the Gulp plugin for Flow, and add `flow()` to your `lint` task: +- ЗапуÑтите `yarn add --dev gulp-flowtype` чтобы уÑтановить Gulp плагин Ð´Ð»Ñ Flow, и добавьте `flow()` в задачу `lint`: ```javascript import flow from 'gulp-flowtype'; @@ -26,11 +26,11 @@ gulp.task('lint', () => ); ``` -The `abort` option is to interrupt the Gulp task if Flow detects an issue. +ÐžÐ¿Ñ†Ð¸Ñ `abort` прерывает задачу Gulp еÑли Flow обнаруживает проблему. -Alright, we should be able to run Flow now. +Отлично, теперь мы можем запуÑтить Flow. -- Add Flow annotations to `src/shared/dog.js` like so: +- Добавьте аннотации Flow в `src/shared/dog.js` так, чтобы: ```javascript // @flow @@ -57,52 +57,53 @@ class Dog { export default Dog; ``` -The `// @flow` comment tells Flow that we want this file to be typechecked. For the rest, Flow annotations are typically a colon after a function parameter or a function name. Check the documentation for more details. +Комментарий `// @flow` говорит Flow что мы хотим проверÑть типы Ð´Ð»Ñ Ñтого файла. Ð’ оÑтальном, аннотации Flow - Ñто обычно двоеточие поÑле параметра фукции или имени функции. ПодробноÑти поÑмотрите в документации. -Now if you run `yarn start`, Flow will work fine, but ESLint is going to complain about that non-standard syntax we're using. Since Babel's parser is all up-and-running with parsing Flow content thanks to the `babel-preset-flow` plugin we installed, it'd be nice if ESLint could rely on Babel's parser instead of trying to understand Flow annotations on its own. That's actually possible using the `babel-eslint` package. Let's do this. +Теперь, еÑли вы запуÑтите `yarn start`, Flow будет работать, но ESLint начнет жаловатьÑÑ, что иÑпользуетÑÑ Ð½ÐµÑтандартный ÑинтакÑиÑ. +ПоÑкольку парÑер Babel отлично ÑправлÑетÑÑ Ñ Ð¿Ð°Ñ€Ñингом Flow контента (Ð±Ð»Ð°Ð³Ð¾Ð´Ð°Ñ€Ñ ÑƒÑтановленному нами плагину `babel-preset-flow`), было бы здорово, еÑли бы ESLint мог опиратьÑÑ Ð½Ð° парÑер Babel, вмеÑто того, чтобы пытатьÑÑ Ñамому понÑть аннотации Flow. Вообще, Ñто возможно при иÑпользовании пакета `babel-eslint`. Давайте Ñделаем Ñто. -- Run `yarn add --dev babel-eslint` +- ЗапуÑтите `yarn add --dev babel-eslint` -- In `package.json`, under `eslintConfig`, add the following property: `"parser": "babel-eslint"` +- Ð’ `package.json`, поÑле `eslintConfig`, добавьте Ñледующее ÑвойÑтво: `"parser": "babel-eslint"` -`yarn start` should now both lint and typecheck your code fine. +Теперь `yarn start` должен одновременно анализировать код Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ ESLint и проверÑть типы поÑредÑтвом Flow. -Now that ESLint and Babel are able to share a common parser, we can actually get ESLint to lint our Flow annotations via the `eslint-plugin-flowtype` plugin. +Теперь, поÑкольку ESLint и Babel ÑовмеÑтно иÑпользовать общий парÑер, мы можем заÑтавить ESLint проверÑть наши Flow аннотации, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ `eslint-plugin-flowtype`. -- Run `yarn add --dev eslint-plugin-flowtype` and add `"flowtype"` under `eslintConfig.plugins` in `package.json`, and add `"plugin:flowtype/recommended"` under `eslintConfig.extends` in an array next to `"airbnb"`. +- ЗапуÑтите `yarn add --dev eslint-plugin-flowtype` и добавьте `"flowtype"` поÑле `eslintConfig.plugins` в `package.json`, и добавьте `"plugin:flowtype/recommended"` поÑле `eslintConfig.extends` в маÑÑив поÑле `"airbnb"`. -Now if you type `name:string` as an annotation, ESLint should complain that you forgot a space after the colon for instance. +Теперь еÑли вы, например, введете `name:string` в качеÑтве аннотации, ESLint должен пожаловатьÑÑ, что вы забыли пробел поÑле двоеточиÑ. -**Note**: The `"parser": "babel-eslint"` property that I made you write in `package.json` is actually included in the `"plugin:flowtype/recommended"` config, so you can now remove it for a more minimal `package.json`. Leaving it there is more explicit though, so that's up to your personal preference. Since this tutorial is about the most minimal setup, I removed it. +**Замечание**: СвойÑтво `"parser": "babel-eslint"` которое Ñ Ð·Ð°Ñтавил Ð²Ð°Ñ Ð½Ð°Ð¿Ð¸Ñать в `package.json` вообще-то входит в конфигурацию `"plugin:flowtype/recommended"`, так что теперь можете убрать его, чтобы Ñократить `package.json`. С другой Ñтороны, оÑтавить его здеÑÑŒ будет более наглÑдным, так что Ñто на ваше предпочтение. ПоÑкольку Ñто руководÑтво нацелено на макÑимальную краткоÑть, Ñ ÑƒÐ±ÐµÑ€Ñƒ. -- You can now add `// @flow` in every `.js` and `.jsx` file under `src`, run `yarn test` or `yarn start`, and add type annotations everywhere Flow asks you to do so. +- Ð’Ñ‹ можете теперь добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запуÑтить `yarn test` или `yarn start`, и добавлÑть аннотации везде где Ñтого попроÑит Flow. -One counterintuitive case is the following, for `src/client/component/message.jsx`: +Ð’Ñ‹ можете обнаружить неожиданный Ñлучай в `src/client/component/message.jsx`: ```javascript const Message = ({ message }: { message: string }) => <div>{message}</div>; ``` -As you can see, when destructuring function parameters, you must annotate the extracted properties using a sort of object literal notation. +Как можете видеть, при деÑтруктурировании параметра функции, вы должны делать аннотации Ð´Ð»Ñ Ð²Ñ‹Ð´ÐµÐ»Ñемых ÑвойÑтв в виде объекта в литеральной нотации. -Another case you will encounter is that in `src/client/reducers/dog-reducer.js`, Flow will complain about Immutable not having a default export. This issue is discussed in [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), which highlights 2 workarounds: +Другим Ñлучаем, Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ñ‹Ð¼ вы ÑтолкнетеÑÑŒ, будет в `src/client/reducers/dog-reducer.js`. Flow начнет жаловатьÑÑ, что Immutable не имеет возвращаемого Ð·Ð½Ð°Ñ‡ÐµÐ½Ð¸Ñ Ð¿Ð¾ умолчанию. Ðта проблема опиÑана тут: [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), и имеет два обходных путÑ: ```javascript import { Map as ImmutableMap } from 'immutable'; -// or +// или import * as Immutable from 'immutable'; ``` -Until Immutable officially adresses the issue, just pick whichever looks better to you when importing Immutable components. I'm personally going for `import * as Immutable from 'immutable'` since it's shorter and won't require refactoring the code when this issue gets fixed. +Пока Immutable официально не разрешит проблему, проÑто выберите то, что вам больше нравитÑÑ, когда импортируете компоненты Immutable. Лично Ñ, буду иÑпользовать `import * as Immutable from 'immutable'`, поÑкольку Ñто короче и не потребует рефакторинга кода поÑле того, как проблема будет решена. -**Note**: If Flow detects type errors in your `node_modules` folder, add an `[ignore]` section in your `.flowconfig` to ignore the packages causing issues specifically (do not ignore the entire `node_modules` directory). It could look like this: +**Замечание**: ЕÑли Flow определÑет ошибки типизации в папке `node_modules`, добавьте раздел `[ignore]` в файл `.flowconfig` чтобы указать какие именно пакеты игнорировать (не игнорируйте полноÑтью директорию `node_modules`). Ðто может выглÑдеть так: ``` [ignore] .*/node_modules/gulp-flowtype/.* ``` -In my case, the `linter-flow` plugin for Atom was detecting type errors in the `node_modules/gulp-flowtype` directory, which contains files annotated with `// @flow`. +Ð’ моем Ñлуче плагин `linter-flow` Ð´Ð»Ñ Atom обнаружил ошибки типизации в директории `node_modules/gulp-flowtype`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñодержит файлы аннотированные `// @flow`. -You now have bullet-proof code that is linted, typechecked, and tested, good job! +Теперь у Ð²Ð°Ñ ÐµÑть "пуленепробиваемый" код, который проанализирован, протипизирован и протеÑтирован - Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð°Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ð°! -Back to the [previous section](/tutorial/11-testing-mocha-chai-sinon) or the [table of contents](/README.md). +Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/README.md). diff --git a/tutorial/12-flow/READMEeng.md b/tutorial/12-flow/READMEeng.md new file mode 100644 index 0000000..f80e409 --- /dev/null +++ b/tutorial/12-flow/READMEeng.md @@ -0,0 +1,108 @@ +# 12 - Flow + +[Flow](https://flowtype.org/) is a static type checker. It detects inconsistent types in your code and you can add explicit type declarations in it via annotations. + +- In order for Babel to understand and remove Flow annotations during the transpilation process, install the Flow preset for Babel by running `yarn add --dev babel-preset-flow`. Then, add `"flow"` under `babel.presets` in your `package.json`. + +- Create an empty `.flowconfig` file at the root of your project + +- Run `yarn add --dev gulp-flowtype` to install the Gulp plugin for Flow, and add `flow()` to your `lint` task: + +```javascript +import flow from 'gulp-flowtype'; + +// [...] + +gulp.task('lint', () => + gulp.src([ + paths.allSrcJs, + paths.gulpFile, + paths.webpackFile, + ]) + .pipe(eslint()) + .pipe(eslint.format()) + .pipe(eslint.failAfterError()) + .pipe(flow({ abort: true })) // Add Flow here +); +``` + +The `abort` option is to interrupt the Gulp task if Flow detects an issue. + +Alright, we should be able to run Flow now. + +- Add Flow annotations to `src/shared/dog.js` like so: + +```javascript +// @flow + +class Dog { + name: string; + + constructor(name: string) { + this.name = name; + } + + bark(): string { + return `Wah wah, I am ${this.name}`; + } + + barkInConsole() { + /* eslint-disable no-console */ + console.log(this.bark()); + /* eslint-enable no-console */ + } + +} + +export default Dog; +``` + +The `// @flow` comment tells Flow that we want this file to be typechecked. For the rest, Flow annotations are typically a colon after a function parameter or a function name. Check the documentation for more details. + +Now if you run `yarn start`, Flow will work fine, but ESLint is going to complain about that non-standard syntax we're using. Since Babel's parser is all up-and-running with parsing Flow content thanks to the `babel-preset-flow` plugin we installed, it'd be nice if ESLint could rely on Babel's parser instead of trying to understand Flow annotations on its own. That's actually possible using the `babel-eslint` package. Let's do this. + +- Run `yarn add --dev babel-eslint` + +- In `package.json`, under `eslintConfig`, add the following property: `"parser": "babel-eslint"` + +`yarn start` should now both lint and typecheck your code fine. + +Now that ESLint and Babel are able to share a common parser, we can actually get ESLint to lint our Flow annotations via the `eslint-plugin-flowtype` plugin. + +- Run `yarn add --dev eslint-plugin-flowtype` and add `"flowtype"` under `eslintConfig.plugins` in `package.json`, and add `"plugin:flowtype/recommended"` under `eslintConfig.extends` in an array next to `"airbnb"`. + +Now if you type `name:string` as an annotation, ESLint should complain that you forgot a space after the colon for instance. + +**Note**: The `"parser": "babel-eslint"` property that I made you write in `package.json` is actually included in the `"plugin:flowtype/recommended"` config, so you can now remove it for a more minimal `package.json`. Leaving it there is more explicit though, so that's up to your personal preference. Since this tutorial is about the most minimal setup, I removed it. + +- You can now add `// @flow` in every `.js` and `.jsx` file under `src`, run `yarn test` or `yarn start`, and add type annotations everywhere Flow asks you to do so. + +One counterintuitive case is the following, for `src/client/component/message.jsx`: + +```javascript +const Message = ({ message }: { message: string }) => <div>{message}</div>; +``` + +As you can see, when destructuring function parameters, you must annotate the extracted properties using a sort of object literal notation. + +Another case you will encounter is that in `src/client/reducers/dog-reducer.js`, Flow will complain about Immutable not having a default export. This issue is discussed in [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), which highlights 2 workarounds: + +```javascript +import { Map as ImmutableMap } from 'immutable'; +// or +import * as Immutable from 'immutable'; +``` + +Until Immutable officially adresses the issue, just pick whichever looks better to you when importing Immutable components. I'm personally going for `import * as Immutable from 'immutable'` since it's shorter and won't require refactoring the code when this issue gets fixed. + +**Note**: If Flow detects type errors in your `node_modules` folder, add an `[ignore]` section in your `.flowconfig` to ignore the packages causing issues specifically (do not ignore the entire `node_modules` directory). It could look like this: +``` +[ignore] + +.*/node_modules/gulp-flowtype/.* +``` +In my case, the `linter-flow` plugin for Atom was detecting type errors in the `node_modules/gulp-flowtype` directory, which contains files annotated with `// @flow`. + +You now have bullet-proof code that is linted, typechecked, and tested, good job! + +Back to the [previous section](/tutorial/11-testing-mocha-chai-sinon) or the [table of contents](/README.md). -- GitLab From f73924b92329e1b8120e684d944653453d2d8ef3 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 5 Nov 2016 12:12:13 +0000 Subject: [PATCH 17/73] README.md edited online with Bitbucket --- .../1-node-npm-yarn-package-json/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 6062fbe..65b8cf1 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -1,6 +1,6 @@ # 1 - Node, NPM, Yarn, and package.json -Ð’ Ñтой чаÑти мы наÑтроим Node, NPM, Yarn, и проÑтой `package.json`. +Ð’ Ñтой главе мы наÑтроим Node, NPM, Yarn, и проÑтой `package.json`. Прежде вÑего, нам нужно уÑтановить Node, который необходим не только Ð´Ð»Ñ Ñерверной чаÑти (back-end), но и Ð´Ð»Ñ Ð²Ñех тех инÑтрументов, которые входÑÑ‚ в ÑоÑтав Ñовременных технологий Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ ÐºÐ»Ð¸ÐµÐ½Ñ‚Ñкой чаÑти (Front-End). @@ -16,20 +16,20 @@ sudo apt-get install -y nodejs `npm` - Ñтандартный менеджер пакетов Ð´Ð»Ñ Node, уÑтанавливаетÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑки, так что вам не нужно делать Ñто вручную. -**Замечание**: ЕÑли Node уже уÑтановлен, уÑтановите `nvm` ([Node Version Manager](https://github.com/creationix/nvm))(Менеджер верÑий Node), выполните `nvm` install и пользуйтеÑÑŒ поÑледней верÑией Node. +**Примечание**: ЕÑли Node уже уÑтановлен, уÑтановите `nvm` ([Node Version Manager](https://github.com/creationix/nvm))(Менеджер верÑий Node), выполните `nvm` install и пользуйтеÑÑŒ поÑледней верÑией Node. -[Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Мы будем иÑпользовать Yarn в Ñтом руководÑтве. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --dev` в Ñтом поÑобии. +[Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Ð’ данном руководÑтве мы будем иÑпользовать Yarn. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --dev` в Ñтом поÑобии. -- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (ага, мы иÑпользуем NPM чтобы уÑтановить Yarn, прÑм как иÑпользовать Internet Explorer или Safari чтобы уÑтановить Chrome!). +- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (Верно, мы иÑпользуем NPM чтобы уÑтановить Yarn, вÑе равно, что иÑпользовать Internet Explorer или Safari чтобы уÑтановить Chrome!). - Создайте новую директорию Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ и зайдите (`cd`) в нее. -- ЗапуÑтите `yarn init` и ответьте на вопроÑÑ‹ (`yarn init -y` чтобы пропуÑтить вопроÑÑ‹), чтобы Ñоздать файл `package.json` автоматичеÑки. +- ЗапуÑтите `yarn init` и ответьте на вопроÑÑ‹, чтобы Ñоздать файл `package.json` автоматичеÑки (`yarn init -y` чтобы пропуÑтить вопроÑÑ‹). - Создайте файл `index.js` Ñодержащий `console.log('Hello world')`. - ЗапуÑтите `node .` в Ñтой директории (`index.js` - файл по умолчанию, который Node будет запуÑкать в текущей папке). Должно выйти "Hello world". -Команда `node .` - Ñлегка Ð½Ð¸Ð·ÐºÐ¾ÑƒÑ€Ð¾Ð²Ð½ÐµÐ²Ð°Ñ Ð´Ð»Ñ Ð·Ð°Ð¿ÑƒÑка программ. ВмеÑто Ñтого, мы будем иÑпользовать NPM/Yarn Ñкрипты чтобы запуÑкать выполнение нужного кода. Ðто даÑÑ‚ нам хороший уровень абÑтракции, позволÑющий вÑегда иÑпользовать `yarn start`, даже когда наша программа Ñтанет более Ñложной. +Команда `node .` - Ñлегка Ð½Ð¸Ð·ÐºÐ¾ÑƒÑ€Ð¾Ð²Ð½ÐµÐ²Ð°Ñ Ð´Ð»Ñ Ð·Ð°Ð¿ÑƒÑка программ. ВмеÑто нее, мы будем иÑпользовать NPM/Yarn Ñкрипты, чтобы запуÑкать выполнение нужного кода. Ðто даÑÑ‚ нам хороший уровень абÑтракции, позволÑющий вÑегда иÑпользовать `yarn start`, даже когда наша программа Ñтанет более Ñложной. -- Ð’ `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтоб было так: +- Ð’ файле `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтоб было так: ``` "scripts": { @@ -37,7 +37,7 @@ sudo apt-get install -y nodejs } ``` -`package.json` должен быть дейÑтвительным JSON файлом, что значит, что он не может Ñодержать завершающие запÑтые (trailing commas). Так что будьте внимательны, Ñ€ÐµÐ´Ð°ÐºÑ‚Ð¸Ñ€ÑƒÑ ÐµÐ³Ð¾ вручную. +`package.json` должен быть дейÑтвительным JSON файлом, Ñто значит, что он не может Ñодержать завершающие запÑтые (trailing commas). Так что будьте внимательны, Ñ€ÐµÐ´Ð°ÐºÑ‚Ð¸Ñ€ÑƒÑ ÐµÐ³Ð¾ вручную. - ЗапуÑтите `yarn start`. Должно выйти `Hello world`. @@ -48,7 +48,7 @@ npm-debug.log yarn-error.log ``` -**Замечание**: ЕÑли вы поÑмотрите на файлы `package.json`, которые Ñ Ð¿Ñ€Ð¸Ð»Ð°Ð³Ð°ÑŽ к Ñтому руководÑтву, вы увидете там Ñкрипт `tutorial-test`. Он еÑть в каждой чаÑти. Ðтот Ñкрипт позволÑет мне теÑтировать, что код правильно работает при запуÑке `yarn && yarn start`. Ð’Ñ‹ можете удалÑть его из ваших проектов. +**Примечание**: ЕÑли вы поÑмотрите на файлы `package.json`, которые Ñ Ð¿Ñ€Ð¸Ð»Ð°Ð³Ð°ÑŽ к Ñтому руководÑтву, вы увидете там Ñкрипт `tutorial-test`. Он еÑть в каждой чаÑти. Ðтот Ñкрипт позволÑет теÑтировать код, на правильную работу при запуÑке `yarn && yarn start`. Ð’Ñ‹ можете удалить его из вашего проекта. Следующий раздел: [2 - Installing and using a package](/tutorial/2-packages) -- GitLab From 47122309e74e80a9d65a57a9dcc62c86cdecaeab Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 5 Nov 2016 12:29:45 +0000 Subject: [PATCH 18/73] README.md edited online with Bitbucket --- tutorial/2-packages/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index f58cf25..4bb4e2a 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -1,16 +1,16 @@ # 2 - Installing and using a package -Ð’ Ñтой чаÑти мы уÑтановим и будем иÑпользовать один пакет (package). "Пакет" Ñто проÑто куÑок кода, напиÑанный кем-то другим, и который вы можете иÑпользовать в Ñвоей программе. Ðто может быть что угодно. Ðапример, мы ÑÐµÐ¹Ñ‡Ð°Ñ Ð¿Ð¾Ð¿Ñ€Ð¾Ð±ÑƒÐµÐ¼ воÑпользоватьÑÑ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð¼, который помогает манипулировать цветами. +Ð’ Ñтой чаÑти мы уÑтановим и будем иÑпользовать один пакет (package). "Пакет" Ñто проÑто куÑок кода, напиÑанный кем-то другим, и который вы можете иÑпользовать в Ñвоей программе. Ðто может быть что угодно. Ðапример, ÑÐµÐ¹Ñ‡Ð°Ñ Ð¼Ñ‹ попробуем воÑпользоватьÑÑ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð¼, который позволÑет манипулировать цветами. - УÑтановим Ñозданный ÑообщеÑтвом пакет, называемый `color`, путем запуÑка команды `yarn add color`. -Откройте `package.json` чтобы увидеть как Yarn автоматичеÑки добавил `color` в `dependencies` (завиÑимоÑти). +Откройте `package.json`, чтобы увидеть, как Yarn автоматичеÑки добавил `color` в `dependencies` (завиÑимоÑти). -Сам пакет находитÑÑ Ð² Ñозданной Ð´Ð»Ñ Ñтого папке `node_modules`. +Сам пакет находитÑÑ Ð² Ñозданной Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ папке `node_modules`. - Добавьте `node_modules/` в файл `.gitignore` (и запуÑтите `git init`, чтобы Ñоздать новый репозиторий, еÑли вы еще Ñтого не Ñделали) -Ð’Ñ‹ также могли заметить файл `yarn.lock`, Ñгенерированный Yarn. Вам нужно зафикÑировать (commit) Ñтот файл в репозитории, так как Ñто позволит быть уверенным, что любой член вашей команды иÑпользует те же Ñамые верÑии пакетов, что и вы. ЕÑли вы вÑе еще предпочетаете NPM, а не Yarn, Ñквивалентом Ñтого файла будет *shrinkwrap*. +Ð’Ñ‹ также могли заметить файл `yarn.lock`, Ñгенерированный Yarn. Вам необходимо зафикÑировать (commit) Ñтот файл в репозитории, так как Ñто гарантирует, что любой член вашей команды иÑпользует те же Ñамые верÑии пакетов, что и вы. ЕÑли вы вÑе еще предпочетаете NPM, а не Yarn, Ñквивалентом Ñтого файла будет *shrinkwrap*. - Добавьте `const Color = require('color');` в `index.js` - ИÑпользуем пакет, например, таким образом: `const redHexa = Color({r: 255, g: 0, b: 0}).hexString();` @@ -19,12 +19,12 @@ ПоздравлÑÑŽ! Ð’Ñ‹ уÑтановили и применили пакет! -`color` is just used in this section to teach you how to use a simple package. -`color` здеÑÑŒ проÑто как пример, чтобы научить Ð²Ð°Ñ Ð¸Ñпользовать пакеты. Больше он нам не нужен, можно его удалить: +`color` is just used in this section to teach you how to use a simple package. - Ñто надо оÑтавить? +`color` здеÑÑŒ проÑто пример, чтобы научить Ð²Ð°Ñ Ð¸Ñпользовать пакеты. Больше он нам не нужен, можно его удалить: - Выполните `yarn remove color` -**Замечание**: СущеÑтвует два вида завиÑимоÑтей Ð´Ð»Ñ Ð¿Ð¾Ð´ÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð²: `"dependencies"` и `"devDependencies"`. `"dependencies"` - более общее понÑтие, чем `"devDependencies"`, так как поÑледние нужны только Ð´Ð»Ñ Ñ€Ð°Ð·Ñ€Ð°Ð±Ð¾Ñ‚ÐºÐ¸ а не выпуÑка (production) Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (обычно Ñто пакеты ÑвÑзанные Ñ Ð¿Ñ€Ð¾Ñ†ÐµÑÑом поÑтроениÑ, анализаторы кода и Ñ‚.п.). Ð”Ð»Ñ `"devDependencies"`, будем иÑпользовать `yarn add --dev [package]`. (прим. пер. `npm install [package] --save-dev`) +**Примечание**: СущеÑтвует два вида завиÑимоÑтей Ð´Ð»Ñ Ð¿Ð¾Ð´ÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð²: `"dependencies"` и `"devDependencies"`. `"dependencies"` - более общее понÑтие, чем `"devDependencies"`, так как поÑледние иÑпользуютьÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ Ð´Ð»Ñ Ñ€Ð°Ð·Ñ€Ð°Ð±Ð¾Ñ‚ÐºÐ¸, а не выпуÑка (production) Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (обычно Ñто пакеты ÑвÑзанные Ñ Ð¿Ñ€Ð¾Ñ†ÐµÑÑом поÑтроениÑ, анализаторы кода и Ñ‚.п.). Ð”Ð»Ñ `"devDependencies"`, будем иÑпользовать `yarn add --dev [package]`. (прим. пер. `npm install [package] --save-dev`) Следующий раздел: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -- GitLab From e260775318b4f0b5f43e8b450dabaf16e003fde7 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 5 Nov 2016 12:41:33 +0000 Subject: [PATCH 19/73] README.md edited online with Bitbucket --- tutorial/8-react/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 721baf3..36266f9 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -6,7 +6,7 @@ - запуÑтите `yarn add react react-dom` -Ðти 2 пакета будут включены в раздел `"dependencies"` а не `"devDependencies"` потому что, в отличие от инÑтрументов разработки, они должны быть в итоговой клиентÑкой Ñборке (production). +Ðти два пакета будут включены в раздел `"dependencies"`, а не `"devDependencies"`, потому что, в отличие от инÑтрументов разработки, они должны быть в итоговой клиентÑкой Ñборке (production). Давайте переименуем файл `src/client/app.js` в `src/client/app.jsx` и напишем там немного кода на React и JSX: @@ -32,7 +32,7 @@ App.propTypes = { ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); ``` -**Замечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво позже. Ð’ Ñледующих чаÑÑ‚ÑÑ… мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ понимание его. +**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ (его) понимание Ñтой библиотеки. Ð’ Gulp файле, измените в `clientEntryPoint` раÑширение на `.jsx`: @@ -40,9 +40,9 @@ ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); clientEntryPoint: 'src/client/app.jsx', ``` -ПоÑкольку мы иÑпользуем ÑÐ¸Ð½Ñ‚Ð°ÐºÑ JSX, то нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. +ПоÑкольку мы иÑпользуем ÑÐ¸Ð½Ñ‚Ð°ÐºÑ JSX, нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. УÑтановите React Babel preset, который научит Babel обрабатывать JSX ÑинтакÑ: -`yarn add --dev babel-preset-react` и откорректируйте раздел `babel` в `package.json` таким образом: +`yarn add --dev babel-preset-react` и откорректируйте раздел `babel` в `package.json` Ñледующим образом: ```json "babel": { @@ -53,7 +53,7 @@ clientEntryPoint: 'src/client/app.jsx', }, ``` -Теперь, поÑле запуÑка `yarn start`, еÑли мы откроем `index.html`, то должны увидеть "The dog says: Wah wah, I am Browser Toby" Ñгенерированное React. +Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby" Ñгенерированное React. -- GitLab From 11a4999a37e91fcb6696902f270c05bb8f98a6e2 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 5 Nov 2016 12:43:41 +0000 Subject: [PATCH 20/73] README.md edited online with Bitbucket --- tutorial/8-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 36266f9..72337f6 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -8,7 +8,7 @@ Ðти два пакета будут включены в раздел `"dependencies"`, а не `"devDependencies"`, потому что, в отличие от инÑтрументов разработки, они должны быть в итоговой клиентÑкой Ñборке (production). -Давайте переименуем файл `src/client/app.js` в `src/client/app.jsx` и напишем там немного кода на React и JSX: +Давайте переименуем файл `src/client/app.js` в `src/client/app.jsx` и напишем в нем немного кода на React и JSX: ```javascript import 'babel-polyfill'; -- GitLab From 29033ea38cb159cb03596d32791c5781f5d45a21 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 5 Nov 2016 13:24:58 +0000 Subject: [PATCH 21/73] README.md edited online with Bitbucket --- tutorial/10-immutable-redux-improvements/README.md | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index ccf02b3..2bb44b1 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -4,7 +4,7 @@ Ð’ отличие от предыдущей чаÑти, Ñта довольно проÑÑ‚Ð°Ñ Ð¸ ÑоÑтоит из незначительных улучшений. -Сначала мы добавим **Immutable JS** в наш проект. Immutable - Ñто библиотека, позволÑÑŽÑ‰Ð°Ñ Ð¼Ð°Ð½Ð¸Ð¿ÑƒÐ»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ объектами не изменÑÑ Ð¸Ñ…. ВмеÑто: +Сначала мы добавим **Immutable JS** в наш проект. Immutable - Ñто библиотека, позволÑÑŽÑ‰Ð°Ñ Ð¼Ð°Ð½Ð¸Ð¿ÑƒÐ»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ объектами, не изменÑÑ Ð¸Ñ…. ВмеÑто: ```javascript const obj = { a: 1 }; @@ -16,7 +16,7 @@ const obj = Immutable.Map({ a: 1 }); obj.set('a', 2); // Возвращает новый объект не изменÑÑ `obj` ``` -Такой подход Ñледует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообщето **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища, переданное в качеÑтве параметра, а возвращать вмеÑто Ñтого абÑолютно новое. Давайте воÑпользуемÑÑ Immutable чтобы доÑтичь Ñтого. +Такой подход ÑоответÑтвует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообщето **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища (переданного в качеÑтве параметра), а вмеÑто Ñтого возвращать абÑолютно новое. Давайте воÑпользуемÑÑ Immutable чтобы доÑтичь Ñтого. - ЗапуÑтите `yarn add immutable` @@ -63,7 +63,7 @@ export default dogReducer; Теперь мы Ñоздаем иÑходное ÑоÑтоÑние, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Immutable Map, а новое ÑоÑтоÑние получаем применÑÑ `set()`, что иÑключает любые мутации предыдущего ÑоÑтоÑниÑ. -Ð’ `containers/bark-message.js`, обновите функцию `mapStateToProps` чтобы она иÑпользовала `.get('hasBarked')` вмеÑто `.hasBarked`: +Ð’ `containers/bark-message.js`, обновите функцию `mapStateToProps`, чтобы она иÑпользовала `.get('hasBarked')` вмеÑто `.hasBarked`: ```javascript const mapStateToProps = state => ({ @@ -71,11 +71,11 @@ const mapStateToProps = state => ({ }); ``` -Приложение должно ÑÐµÐ±Ñ Ð²ÐµÑти точно так же как и до Ñтого. +Приложение должно веÑти ÑÐµÐ±Ñ Ñ‚Ð¾Ñ‡Ð½Ð¾ так же, как и до Ñтого. -**Замечание**: ЕÑли Babel жалуетÑÑ Ð½Ð° то, что Immutable превышает 100KB, добавьте `"compact": false` в `package.json` поÑле `babel`. +**Примечание**: ЕÑли Babel жалуетÑÑ Ð½Ð° то, что Immutable превышает 100KB, добавьте `"compact": false` в `package.json` поÑле `babel`. -Как вы можете видеть из предыдущего фрагмента кода, Ñам объект state вÑе еще Ñодержит Ñтарый атрибут `dog`, ÑвлÑющийÑÑ Ð¿Ñ€Ð¾Ñтым объектом и подверженный мутациÑм. Ð’ нашем Ñлучае Ñто нормально, но еÑли вы хотите манипулировать только немутируемыми объектами, можете уÑтановить пакет `redux-immutable` чтобы заменить функцию `combineReducers` у Redux. +Как вы можете видеть из предыдущего фрагмента кода, Ñам объект state вÑе еще Ñодержит Ñтарый атрибут `dog`, ÑвлÑющийÑÑ Ð¿Ñ€Ð¾Ñтым объектом и подверженный мутациÑм. Ð’ нашем Ñлучае Ñто нормально, но еÑли вы хотите манипулировать только немутируемыми объектами, можете уÑтановить пакет `redux-immutable`, чтобы заменить функцию `combineReducers` у Redux. **Ðе обÑзательно**: - ЗапуÑтите `yarn add redux-immutable` @@ -93,7 +93,7 @@ export const MAKE_BARK = 'MAKE_BARK'; export const makeBark = createAction(MAKE_BARK, () => true); ``` -`redux-actions` внедрÑет модель [Flux Standard Action](https://github.com/acdlite/flux-standard-action), прÑм так же как, дейÑтвиÑ, которые мы пиÑали до Ñтого, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ `redux-actions` будет беÑшовной еÑли вы придерживаетеÑÑŒ Ñтой модели. +`redux-actions` оÑновываетÑÑ Ð½Ð° молели [Flux Standard Action](https://github.com/acdlite/flux-standard-action),так же, как и дейÑтвиÑ, которые мы Ñоздавали до Ñтого, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ `redux-actions` будет беÑшовной, еÑли вы придерживаетеÑÑŒ Ñтой модели. - Ðе забудьте запуÑтить `yarn add redux-actions`. -- GitLab From be4df6f88144243e755bcba50cded2246ea4e098 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 5 Nov 2016 13:58:21 +0000 Subject: [PATCH 22/73] README.md edited online with Bitbucket --- tutorial/12-flow/README.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index fa82086..cfcf5c1 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -2,11 +2,11 @@ [Flow](https://flowtype.org/) - ÑтатичеÑкий типизатор (static type checker). Он определÑет неÑоответÑтвие типов в вашем коде и позволÑет напрÑмую декларировать типы через аннотации. -- Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы Babel мог понимать и убирать аннотации Flow в процеÑÑе транÑпилÑции, уÑтановите плагин Flow Ð´Ð»Ñ Babel выполнив `yarn add --dev babel-preset-flow`. Затем добавье `"flow"` поÑле `babel.presets` в `package.json`. +- Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы Babel мог понимать и убирать аннотации Flow в процеÑÑе транÑпилÑции, уÑтановите плагин Flow Ð´Ð»Ñ Babel, выполнив `yarn add --dev babel-preset-flow`. Затем добавье `"flow"` поÑле `babel.presets` в `package.json`. - Создайте пуÑтой файл `.flowconfig` в корне проекта. -- ЗапуÑтите `yarn add --dev gulp-flowtype` чтобы уÑтановить Gulp плагин Ð´Ð»Ñ Flow, и добавьте `flow()` в задачу `lint`: +- ЗапуÑтите `yarn add --dev gulp-flowtype`, чтобы уÑтановить Gulp плагин Ð´Ð»Ñ Flow, и добавьте `flow()` в задачу `lint`: ```javascript import flow from 'gulp-flowtype'; @@ -26,7 +26,7 @@ gulp.task('lint', () => ); ``` -ÐžÐ¿Ñ†Ð¸Ñ `abort` прерывает задачу Gulp еÑли Flow обнаруживает проблему. +ÐžÐ¿Ñ†Ð¸Ñ `abort` прерывает задачу Gulp, еÑли Flow обнаруживает проблему. Отлично, теперь мы можем запуÑтить Flow. @@ -57,10 +57,10 @@ class Dog { export default Dog; ``` -Комментарий `// @flow` говорит Flow что мы хотим проверÑть типы Ð´Ð»Ñ Ñтого файла. Ð’ оÑтальном, аннотации Flow - Ñто обычно двоеточие поÑле параметра фукции или имени функции. ПодробноÑти поÑмотрите в документации. +Комментарий `// @flow` говорит Flow, что мы хотим проверÑть типы Ð´Ð»Ñ Ñтого файла. Сами анатации Flow предварÑютьÑÑ Ð´Ð²Ð¾ÐµÑ‚Ð¾Ñ‡Ð¸ÐµÐ¼ и обычно добавлÑютьÑÑ Ð¿Ð¾Ñле параметра функции или имени функции. ПодробноÑти Ñмотрите в документации. Теперь, еÑли вы запуÑтите `yarn start`, Flow будет работать, но ESLint начнет жаловатьÑÑ, что иÑпользуетÑÑ Ð½ÐµÑтандартный ÑинтакÑиÑ. -ПоÑкольку парÑер Babel отлично ÑправлÑетÑÑ Ñ Ð¿Ð°Ñ€Ñингом Flow контента (Ð±Ð»Ð°Ð³Ð¾Ð´Ð°Ñ€Ñ ÑƒÑтановленному нами плагину `babel-preset-flow`), было бы здорово, еÑли бы ESLint мог опиратьÑÑ Ð½Ð° парÑер Babel, вмеÑто того, чтобы пытатьÑÑ Ñамому понÑть аннотации Flow. Вообще, Ñто возможно при иÑпользовании пакета `babel-eslint`. Давайте Ñделаем Ñто. +ПоÑкольку парÑер Babel отлично ÑправлÑетÑÑ Ñ Ð¿Ð°Ñ€Ñингом Flow контента (Ð±Ð»Ð°Ð³Ð¾Ð´Ð°Ñ€Ñ ÑƒÑтановленному нами плагину `babel-preset-flow`), было бы здорово, еÑли бы ESLint мог опиратьÑÑ Ð½Ð° парÑер Babel, вмеÑто того, чтобы пытатьÑÑ Ñамому понÑть аннотации Flow. Ðто возможно при иÑпользовании пакета `babel-eslint`. Давайте Ñделаем Ñто. - ЗапуÑтите `yarn add --dev babel-eslint` @@ -68,25 +68,25 @@ export default Dog; Теперь `yarn start` должен одновременно анализировать код Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ ESLint и проверÑть типы поÑредÑтвом Flow. -Теперь, поÑкольку ESLint и Babel ÑовмеÑтно иÑпользовать общий парÑер, мы можем заÑтавить ESLint проверÑть наши Flow аннотации, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ `eslint-plugin-flowtype`. +Далее, поÑкольку ESLint и Babel ÑовмеÑтно иÑпользуют общий парÑер, мы можем заÑтавить ESLint проверÑть наши Flow аннотации, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð»Ð°Ð³Ð¸Ð½ `eslint-plugin-flowtype`. -- ЗапуÑтите `yarn add --dev eslint-plugin-flowtype` и добавьте `"flowtype"` поÑле `eslintConfig.plugins` в `package.json`, и добавьте `"plugin:flowtype/recommended"` поÑле `eslintConfig.extends` в маÑÑив поÑле `"airbnb"`. +- ЗапуÑтите `yarn add --dev eslint-plugin-flowtype` и добавьте `"flowtype"` поÑле `eslintConfig.plugins` в `package.json`. Затем добавьте `"plugin:flowtype/recommended"` поÑле `eslintConfig.extends` в маÑÑив поÑле `"airbnb"`. -Теперь еÑли вы, например, введете `name:string` в качеÑтве аннотации, ESLint должен пожаловатьÑÑ, что вы забыли пробел поÑле двоеточиÑ. +Теперь, еÑли вы, например, введете `name:string` в качеÑтве аннотации, ESLint должен пожаловатьÑÑ, что вы забыли пробел поÑле двоеточиÑ. -**Замечание**: СвойÑтво `"parser": "babel-eslint"` которое Ñ Ð·Ð°Ñтавил Ð²Ð°Ñ Ð½Ð°Ð¿Ð¸Ñать в `package.json` вообще-то входит в конфигурацию `"plugin:flowtype/recommended"`, так что теперь можете убрать его, чтобы Ñократить `package.json`. С другой Ñтороны, оÑтавить его здеÑÑŒ будет более наглÑдным, так что Ñто на ваше предпочтение. ПоÑкольку Ñто руководÑтво нацелено на макÑимальную краткоÑть, Ñ ÑƒÐ±ÐµÑ€Ñƒ. +**Примечание**: СвойÑтво `"parser": "babel-eslint"`, которое Ñ Ð·Ð°Ñтавил Ð²Ð°Ñ Ð½Ð°Ð¿Ð¸Ñать в `package.json`, вообще-то входит в конфигурацию `"plugin:flowtype/recommended"`, так что теперь можете убрать его, чтобы Ñократить `package.json`. С другой Ñтороны, оÑтавить его здеÑÑŒ будет более наглÑдным, так что Ñто на ваше уÑмотрение. ПоÑкольку Ñто руководÑтво нацелено на макÑимальную краткоÑть, Ñ ÐµÐ³Ð¾ уберу. -- Ð’Ñ‹ можете теперь добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запуÑтить `yarn test` или `yarn start`, и добавлÑть аннотации везде где Ñтого попроÑит Flow. +- Теперь вы можете добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запуÑтить `yarn test` или `yarn start`, и добавлÑть аннотации везде, где Ñтого попроÑит Flow. -Ð’Ñ‹ можете обнаружить неожиданный Ñлучай в `src/client/component/message.jsx`: +Ð’Ñ‹ можете обнаружить неожиданный Ñлучай (результат) в `src/client/component/message.jsx`: (предлажение кривое надо заменить - неожиданную проблему?) ```javascript const Message = ({ message }: { message: string }) => <div>{message}</div>; ``` -Как можете видеть, при деÑтруктурировании параметра функции, вы должны делать аннотации Ð´Ð»Ñ Ð²Ñ‹Ð´ÐµÐ»Ñемых ÑвойÑтв в виде объекта в литеральной нотации. +Как вы видите, при деÑтруктурировании параметра функции, необходимо делать аннотации Ð´Ð»Ñ Ð²Ñ‹Ð´ÐµÐ»Ñемых ÑвойÑтв в виде объекта в литеральной нотации. -Другим Ñлучаем, Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ñ‹Ð¼ вы ÑтолкнетеÑÑŒ, будет в `src/client/reducers/dog-reducer.js`. Flow начнет жаловатьÑÑ, что Immutable не имеет возвращаемого Ð·Ð½Ð°Ñ‡ÐµÐ½Ð¸Ñ Ð¿Ð¾ умолчанию. Ðта проблема опиÑана тут: [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), и имеет два обходных путÑ: +Другой Ñлучай, Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ñ‹Ð¼ вы ÑтолкнетеÑÑŒ, будет в `src/client/reducers/dog-reducer.js`. Flow начнет жаловатьÑÑ, что Immutable не имеет возвращаемого Ð·Ð½Ð°Ñ‡ÐµÐ½Ð¸Ñ Ð¿Ð¾ умолчанию. Ðта проблема опиÑана тут: [#863 on Immutable](https://github.com/facebook/immutable-js/issues/863), и имеет два обходных пути: ```javascript import { Map as ImmutableMap } from 'immutable'; @@ -94,16 +94,16 @@ import { Map as ImmutableMap } from 'immutable'; import * as Immutable from 'immutable'; ``` -Пока Immutable официально не разрешит проблему, проÑто выберите то, что вам больше нравитÑÑ, когда импортируете компоненты Immutable. Лично Ñ, буду иÑпользовать `import * as Immutable from 'immutable'`, поÑкольку Ñто короче и не потребует рефакторинга кода поÑле того, как проблема будет решена. +Пока Immutable официально не решит проблему, проÑто выберите то, что вам больше нравитÑÑ, когда импортируете компоненты Immutable. Лично Ñ, буду иÑпользовать `import * as Immutable from 'immutable'`, поÑкольку Ñто короче и не потребует рефакторинга кода, поÑле того, как проблема будет решена. -**Замечание**: ЕÑли Flow определÑет ошибки типизации в папке `node_modules`, добавьте раздел `[ignore]` в файл `.flowconfig` чтобы указать какие именно пакеты игнорировать (не игнорируйте полноÑтью директорию `node_modules`). Ðто может выглÑдеть так: +**Примечание**: ЕÑли Flow выÑвлÑет ошибки типизации в папке `node_modules`, добавьте раздел `[ignore]` в файл `.flowconfig`, чтобы указать какие именно пакеты игнорировать (не игнорируйте полноÑтью директорию `node_modules`). Ðто может выглÑдеть так: ``` [ignore] .*/node_modules/gulp-flowtype/.* ``` -Ð’ моем Ñлуче плагин `linter-flow` Ð´Ð»Ñ Atom обнаружил ошибки типизации в директории `node_modules/gulp-flowtype`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñодержит файлы аннотированные `// @flow`. +Ð’ моем Ñлуче, плагин `linter-flow` Ð´Ð»Ñ Atom обнаружил ошибки типизации в директории `node_modules/gulp-flowtype`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñодержит файлы аннотированные `// @flow`. -Теперь у Ð²Ð°Ñ ÐµÑть "пуленепробиваемый" код, который проанализирован, протипизирован и протеÑтирован - Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð°Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ð°! +Теперь, у Ð²Ð°Ñ ÐµÑть "пуленепробиваемый" код, который проанализирован, протипизирован и протеÑтирован - Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð°Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ð°! Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/README.md). -- GitLab From 856aae14547c8ae7b20f5824ff04df22515968b8 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Sun, 6 Nov 2016 11:24:31 +0700 Subject: [PATCH 23/73] it's not a final ver --- README.md | 2 +- tutorial/1-node-npm-yarn-package-json/README.md | 2 +- tutorial/2-packages/README.md | 1 - 3 files changed, 2 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index c104206..0ddfb91 100644 --- a/README.md +++ b/README.md @@ -30,7 +30,7 @@ ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. -Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду иÑпользующую React и наверÑтать Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". +Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомитÑÑ Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду иÑпользующую React и наверÑтать Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 65b8cf1..da7272c 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -1,6 +1,6 @@ # 1 - Node, NPM, Yarn, and package.json -Ð’ Ñтой главе мы наÑтроим Node, NPM, Yarn, и проÑтой `package.json`. +Ð’ Ñтой чаÑти мы наÑтроим Node, NPM, Yarn, и проÑтой `package.json`. Прежде вÑего, нам нужно уÑтановить Node, который необходим не только Ð´Ð»Ñ Ñерверной чаÑти (back-end), но и Ð´Ð»Ñ Ð²Ñех тех инÑтрументов, которые входÑÑ‚ в ÑоÑтав Ñовременных технологий Ð´Ð»Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ ÐºÐ»Ð¸ÐµÐ½Ñ‚Ñкой чаÑти (Front-End). diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index 4bb4e2a..02064f5 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -19,7 +19,6 @@ ПоздравлÑÑŽ! Ð’Ñ‹ уÑтановили и применили пакет! -`color` is just used in this section to teach you how to use a simple package. - Ñто надо оÑтавить? `color` здеÑÑŒ проÑто пример, чтобы научить Ð²Ð°Ñ Ð¸Ñпользовать пакеты. Больше он нам не нужен, можно его удалить: - Выполните `yarn remove color` -- GitLab From 2ff7e80dbed7e372858770da870231275eff78fa Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Mon, 7 Nov 2016 13:57:38 +0700 Subject: [PATCH 24/73] section 3 --- Definitions.md | 8 ++- README.md | 2 +- tutorial/2-packages/README.md | 2 +- tutorial/3-es6-babel-gulp/README.md | 54 ++++++++------- tutorial/3-es6-babel-gulp/READMEeng.md | 93 ++++++++++++++++++++++++++ 5 files changed, 129 insertions(+), 30 deletions(-) create mode 100644 tutorial/3-es6-babel-gulp/READMEeng.md diff --git a/Definitions.md b/Definitions.md index dfe9584..70f3c67 100644 --- a/Definitions.md +++ b/Definitions.md @@ -19,9 +19,13 @@ https://developer.mozilla.org/ru/docs/Web/JavaScript/Reference/Functions/Arrow_f CommonJS -Gulp +Gulp - Ñборщик проектов +https://habrahabr.ru/post/208890/ -Node +Task Runner - менеджер задач. +(диÑпетчер запуÑка задач) + +Node - Ñервер Node Babel diff --git a/README.md b/README.md index 0ddfb91..0785f32 100644 --- a/README.md +++ b/README.md @@ -48,7 +48,7 @@ [3 - ÐаÑтройка ES6 Ñ Babel и Gulp](/tutorial/3-es6-babel-gulp) -[4 - ИÑпользование ES6 ÑинтактиÑа ~~и клаÑÑов~~](/tutorial/4-es6-syntax-class) +[4 - ИÑпользование ES6 клаÑÑов](/tutorial/4-es6-syntax-class) [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index 02064f5..83ef30e 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -28,4 +28,4 @@ Следующий раздел: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/../../). diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index 64543c1..7e9e6aa 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -1,11 +1,11 @@ -# 3 - Setting up ES6 with Babel and Gulp +# 3 - ÐаÑтройка ES6 Ñ Babel и Gulp] -We're now going to use ES6 syntax, which is a great improvement over the "old" ES5 syntax. All browsers and JS environments understand ES5 well, but not ES6. So we're going to use a tool called Babel to transform ES6 files into ES5 files. To run Babel, we are going to use Gulp, a task runner. It is similar to the tasks located under `scripts` in `package.json`, but writing your task in a JS file is simpler and clearer than a JSON file, so we'll install Gulp, and the Babel plugin for Gulp too: +Мы начинаем иÑпользовать ÑинтакÑÐ¸Ñ ES6, предÑтавлÑющий значительное продвижение отноÑительно "Ñтарого" ES5. Ð’Ñе браузеры и JS Ð¾ÐºÑ€ÑƒÐ¶ÐµÐ½Ð¸Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ понимают ES5, но не ES6. ПоÑтому мы будем иÑпользовать инÑтрумент, называемый Babel, чтобы преобразовать файлы ES6 в ES5 формат. Чтобы запуÑкать Babel, мы будем иÑпользовать Gulp - менеджер задач. Ðто похоже на Ñоздание задач, раÑположенных в `scripts` файла `package.json`, но напиÑание задач в JS файле проще и понÑтнее чем в JSON, поÑтому уÑтановим Gulp и плагин Babel Ð´Ð»Ñ Ð½ÐµÐ³Ð¾. -- Run `yarn add --dev gulp` -- Run `yarn add --dev gulp-babel` -- Run `yarn add --dev babel-preset-latest` -- In `package.json`, add a `babel` field for the babel configuration. Make it use the latest Babel preset like this: +- ЗапуÑтите `yarn add --dev gulp` +- ЗапуÑтите `yarn add --dev gulp-babel` +- ЗапуÑтите `yarn add --dev babel-preset-latest` +- Ð’ `package.json`, добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем Ñледующим образом, что хотим иÑпользовать новейшую конфигурацию Babel: ```json "babel": { @@ -15,18 +15,18 @@ We're now going to use ES6 syntax, which is a great improvement over the "old" E }, ``` -**Note**: A `.babelrc` file at the root of your project could also be used instead of the `babel` field of `package.json`. Your root folder will get more and more bloated over time, so keep the Babel config in `package.json` until it grows too large. +**Примечание**: Файл `.babelrc` в корне проекта так же может быть иÑпользован вмеÑто ÑвойÑтва `babel` в `package.json`. Ðо поÑкольку ÐºÐ¾Ñ€Ð½ÐµÐ²Ð°Ñ Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ Ð²Ð°ÑˆÐµÐ³Ð¾ проекта будет вÑе больше и больше раздуватьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени, лучше храните конфигурацию Babel в `package.json`, до тех пор, пока она не Ñтанет Ñлишком большой. -- Move your `index.js` into a new `src` folder. This is where you will write your ES6 code. A `lib` folder is where the compiled ES5 code will go. Gulp and Babel will take care of creating it. Remove the previous `color`-related code in `index.js`, and replace it with a simple: +- ПеремеÑтите файл `index.js` в директорию `src`. Там вы будете пиÑать ES6 код. Рпапка `lib` будет меÑтом, куда ваш код будет компилироватьÑÑ Ð² ES5. Gulp и Babel позаботÑÑ‚ÑÑ Ð¾ ее Ñоздании. Уберите предыдущий, отноÑÑщийÑÑ Ðº `color`, код из `index.js`, и замените его на нечто проÑтое, например такое: ```javascript const str = 'ES6'; console.log(`Hello ${str}`); ``` -We're using a *template string* here, which is an ES6 feature that lets us inject variables directly inside the string without concatenation using `${}`. Note that template strings are created using **backquotes**. +Мы здеÑÑŒ иÑпользовали *шаблонную Ñтроку* - возможоÑть ES6 внедрÑть Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `${}` переменные прÑмо в Ñтроки без иÑÐ¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ ÐºÐ¾Ð½ÐºÐ°Ð½Ñ‚ÐµÐ½Ð°Ñ†Ð¸Ð¸. Обратите внимание, что шаблонные Ñтроки пишутÑÑ Ð² **\`обратных кавычках\`** -- Create a `gulpfile.js` containing: +- Создайте `gulpfile.js`, Ñодержащий: ```javascript const gulp = require('gulp'); @@ -64,30 +64,32 @@ gulp.task('default', ['watch', 'main']); ``` -Let's take a moment to understand all this. +Давайте приоÑтановимÑÑ Ð¸ разберемÑÑ Ñ Ñтим. -The API of Gulp itself is pretty straightforward. It defines `gulp.task`s, that can reference `gulp.src` files, applies a chain of treatments to them with `.pipe()` (like `babel()` in our case) and outputs the new files to `gulp.dest`. It can also `gulp.watch` for changes on your filesystem. Gulp tasks can run prerequisite tasks before them, by passing an array (like `['build']`) as a second parameter to `gulp.task`. Refer to the [documentation](https://github.com/gulpjs/gulp) for a more thorough presentation. +Gulp Ñам по Ñебе имеет довольно понÑтный API. Он определÑет задачи `gulp.task`, которые могут брать файы из `gulp.src`, применÑть к ним цепочки обработчиков - `.pipe()` (как `babel()` в нашем Ñлучае), и ÑохранÑть новые файлы в `gulp.dest`. Так же от может отÑлеживать (`gulp.watch`) Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð² файловой ÑиÑтеме. Одни задачи Gulp могут предварÑть запуÑк других, еÑли указать их в маÑÑиве (как `['build']`) в качеÑтве второго аргумента в `gulp.task`. Ð’ [документации](https://github.com/gulpjs/gulp) вÑе изложено более оÑновательно. -First we define a `paths` object to store all our different file paths and keep things DRY. +Сначала мы определили объект `paths`, что бы хранить в одном меÑте вÑе нужные пути и иÑпользовать принцип "не повторÑйÑÑ" (DRY). -Then we define 5 tasks: `build`, `clean`, `main`, `watch`, and `default`. +Затем мы определили пÑть задач: `build` *(Ñоздать)*, `clean` *(очиÑтить)*, `main` *(оÑновнаÑ)*, `watch` *(наблюдать)*, and `default` *(по умолчанию)*. -- `build` is where Babel is called to transform all of our source files located under `src` and write the transformed ones to `lib`. -- `clean` is a task that simply deletes our entire auto-generated `lib` folder before every `build`. This is typically useful to get rid of old compiled files after renaming or deleting some in `src`, or to make sure the `lib` folder is in sync with the `src` folder if your build fails and you don't notice. We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package. -- `main` is the equivalent of running `node .` in the previous chapter, except this time, we want to run it on `lib/index.js`. Since `index.js` is the default file Node looks for, we can simply write `node lib` (we use the `libDir` variable to keep things DRY). The `require('child_process').exec` and `exec` part in the task is a native Node function that executes a shell command. We forward `stdout` to `console.log()` and return a potential error using `gulp.task`'s callback function. Don't worry if this part is not super clear to you, remember that this task is basically just running `node lib`. -- `watch` runs the `main` task when filesystem changes happen in the specified files. -- `default` is a special task that will be run if you simply call `gulp` from the CLI. In our case we want it to run both `watch` and `main` (for the first execution). +- `build` вызывает Babel, чтобы преобразовать вÑе иÑходные файлы из `src`, и запиÑывает результат в `lib`. +- We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package. -**Note**: You might be wondering how come we're using some ES6 code in this Gulp file, since it doesn't get transpiled into ES5 by Babel. This is because we're using a version of Node that supports ES6 features out of the box (make sure you are running Node > 6.5.0 by running `node -v`). +- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) или Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del` чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) +- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir` чтоб ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто лишь запуÑкает `node lib`. +- `watch` запуÑкает задчу `main`, когда проиÑходÑÑ‚ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð¾Ð¹ ÑиÑтемы Ð´Ð»Ñ ÑƒÐºÐ°Ð·Ð°Ð½Ð½Ñ‹Ñ… файлов. +- `default` - Ñто ÑÐ¿ÐµÑ†Ð¸Ð°Ð»ÑŒÐ½Ð°Ñ Ð·Ð°Ð´Ð°Ñ‡Ð°, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкаетÑÑ, еÑли вы проÑто вызываете `gulp` из CLI (коммандной Ñтроки). Ð’ нашем Ñлучае мы хотим Ñначала запуÑтить `main` (один раз), а затем `watch`. -Alright! Let's see if this works. +**Примечание**: Возможно вы удивитеÑÑŒ, что мы иÑпользуем ÑинтакÑÐ¸Ñ ES6 в Ñтом Gulp файле, Ñ…Ð¾Ñ‚Ñ Ð¾Ð½ не транÑпилируетÑÑ Ð² ES5 Ñо помощью Babel. Ðто потому, что мы иÑпользуем верÑию Node, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°ÐµÑ‚ возможноÑти ES6 из коробки (убедитеÑÑŒ, Что вы иÑпользуете верÑию Node > 6.5.0, запуÑтив `node -v`). -- In `package.json`, change your `start` script to: `"start": "gulp"`. -- Run `yarn start`. It should print "Hello ES6" and start watching for changes. Try writing bad code in `src/index.js` to see Gulp automatically showing you the error when you save. +Отлично! ПоÑмотрим как Ñто работает. -- Add `/lib/` to your `.gitignore` +- Ð’ `package.json`, замените Ñкрипт `start` на: `"start": "gulp"`. +- ЗапуÑтите `yarn start`. Должно вывеÑтиÑÑŒ "Hello ES6" и запуÑтитÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑкое отÑлеживание изменений. Попробуйте ввеÑти неверный код в `src/index.js` и увидите поÑле ÑохранениÑ, как Gulp автоматичеÑки указывает на ошибку. +- Добавьте `/lib/` в `.gitignore` -Next section: [4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) -Back to the [previous section](/tutorial/2-packages) or the [table of contents](/README.md). +Следующий раздел: [4 - ИÑпользование ES6 клаÑÑов](/tutorial/4-es6-syntax-class) + +Ðазад в [предыдущий раздел](/tutorial/2-packages)или [Содержание](/../../).. diff --git a/tutorial/3-es6-babel-gulp/READMEeng.md b/tutorial/3-es6-babel-gulp/READMEeng.md new file mode 100644 index 0000000..64543c1 --- /dev/null +++ b/tutorial/3-es6-babel-gulp/READMEeng.md @@ -0,0 +1,93 @@ +# 3 - Setting up ES6 with Babel and Gulp + +We're now going to use ES6 syntax, which is a great improvement over the "old" ES5 syntax. All browsers and JS environments understand ES5 well, but not ES6. So we're going to use a tool called Babel to transform ES6 files into ES5 files. To run Babel, we are going to use Gulp, a task runner. It is similar to the tasks located under `scripts` in `package.json`, but writing your task in a JS file is simpler and clearer than a JSON file, so we'll install Gulp, and the Babel plugin for Gulp too: + +- Run `yarn add --dev gulp` +- Run `yarn add --dev gulp-babel` +- Run `yarn add --dev babel-preset-latest` +- In `package.json`, add a `babel` field for the babel configuration. Make it use the latest Babel preset like this: + +```json +"babel": { + "presets": [ + "latest" + ] +}, +``` + +**Note**: A `.babelrc` file at the root of your project could also be used instead of the `babel` field of `package.json`. Your root folder will get more and more bloated over time, so keep the Babel config in `package.json` until it grows too large. + +- Move your `index.js` into a new `src` folder. This is where you will write your ES6 code. A `lib` folder is where the compiled ES5 code will go. Gulp and Babel will take care of creating it. Remove the previous `color`-related code in `index.js`, and replace it with a simple: + +```javascript +const str = 'ES6'; +console.log(`Hello ${str}`); +``` + +We're using a *template string* here, which is an ES6 feature that lets us inject variables directly inside the string without concatenation using `${}`. Note that template strings are created using **backquotes**. + +- Create a `gulpfile.js` containing: + +```javascript +const gulp = require('gulp'); +const babel = require('gulp-babel'); +const del = require('del'); +const exec = require('child_process').exec; + +const paths = { + allSrcJs: 'src/**/*.js', + libDir: 'lib', +}; + +gulp.task('clean', () => { + return del(paths.libDir); +}); + +gulp.task('build', ['clean'], () => { + return gulp.src(paths.allSrcJs) + .pipe(babel()) + .pipe(gulp.dest(paths.libDir)); +}); + +gulp.task('main', ['build'], (callback) => { + exec(`node ${paths.libDir}`, (error, stdout) => { + console.log(stdout); + return callback(error); + }); +}); + +gulp.task('watch', () => { + gulp.watch(paths.allSrcJs, ['main']); +}); + +gulp.task('default', ['watch', 'main']); + +``` + +Let's take a moment to understand all this. + +The API of Gulp itself is pretty straightforward. It defines `gulp.task`s, that can reference `gulp.src` files, applies a chain of treatments to them with `.pipe()` (like `babel()` in our case) and outputs the new files to `gulp.dest`. It can also `gulp.watch` for changes on your filesystem. Gulp tasks can run prerequisite tasks before them, by passing an array (like `['build']`) as a second parameter to `gulp.task`. Refer to the [documentation](https://github.com/gulpjs/gulp) for a more thorough presentation. + +First we define a `paths` object to store all our different file paths and keep things DRY. + +Then we define 5 tasks: `build`, `clean`, `main`, `watch`, and `default`. + +- `build` is where Babel is called to transform all of our source files located under `src` and write the transformed ones to `lib`. +- `clean` is a task that simply deletes our entire auto-generated `lib` folder before every `build`. This is typically useful to get rid of old compiled files after renaming or deleting some in `src`, or to make sure the `lib` folder is in sync with the `src` folder if your build fails and you don't notice. We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package. +- `main` is the equivalent of running `node .` in the previous chapter, except this time, we want to run it on `lib/index.js`. Since `index.js` is the default file Node looks for, we can simply write `node lib` (we use the `libDir` variable to keep things DRY). The `require('child_process').exec` and `exec` part in the task is a native Node function that executes a shell command. We forward `stdout` to `console.log()` and return a potential error using `gulp.task`'s callback function. Don't worry if this part is not super clear to you, remember that this task is basically just running `node lib`. +- `watch` runs the `main` task when filesystem changes happen in the specified files. +- `default` is a special task that will be run if you simply call `gulp` from the CLI. In our case we want it to run both `watch` and `main` (for the first execution). + +**Note**: You might be wondering how come we're using some ES6 code in this Gulp file, since it doesn't get transpiled into ES5 by Babel. This is because we're using a version of Node that supports ES6 features out of the box (make sure you are running Node > 6.5.0 by running `node -v`). + +Alright! Let's see if this works. + +- In `package.json`, change your `start` script to: `"start": "gulp"`. +- Run `yarn start`. It should print "Hello ES6" and start watching for changes. Try writing bad code in `src/index.js` to see Gulp automatically showing you the error when you save. + +- Add `/lib/` to your `.gitignore` + + +Next section: [4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) + +Back to the [previous section](/tutorial/2-packages) or the [table of contents](/README.md). -- GitLab From e257bbb2b7ea2ace473ce34f7f117fbfd9ad141c Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Mon, 7 Nov 2016 08:13:20 +0000 Subject: [PATCH 25/73] README.md edited online with Bitbucket --- README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 0785f32..405e4c1 100644 --- a/README.md +++ b/README.md @@ -24,19 +24,19 @@ Добро пожаловать в мое Ñовременное руководÑтво по Ñтеку технологий JavaScript: **Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ** -Ðто минималиÑтичное и практико-ориентированное поÑобие по применению JavaScript технологий. Вам потребуютÑÑ Ð¾Ð±Ñ‰Ð¸Ðµ Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ программированию и оÑновы JavaScript. Ðто поÑобие **нацелено на интеграцию необходимых инÑтрументов** и предоÑтавлÑет **макÑимально проÑтые примеры** Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ инÑтрумента. Ð’Ñ‹ можете раÑÑматривать данный документ как *возможноÑть Ñоздать Ñвой ÑобÑтвенный шаблонный проект Ñ Ð½ÑƒÐ»Ñ*. +Ðто минималиÑтичное и практико-ориентированное поÑобие по применению JavaScript технологий. Вам потребуютÑÑ Ð¾Ð±Ñ‰Ð¸Ðµ Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ программированию и оÑновы JavaScript. Ðто поÑобие **нацелено на интеграцию необходимых инÑтрументов** и предоÑтавлÑет **макÑимально проÑтые примеры** Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ инÑтрумента. Ð’Ñ‹ можете раÑÑматривать данный документ, как *возможноÑть Ñоздать Ñвой ÑобÑтвенный шаблонный проект Ñ Ð½ÑƒÐ»Ñ*. -Вам, конечно, не нужны вÑе Ñти технологии еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (доÑтаточно комбинаци Babel + jQuery), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. +Конечно, вам не нужны вÑе Ñти технологии, еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (доÑтаточно комбинаци Babel + jQuery), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. -Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомитÑÑ Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду иÑпользующую React и наверÑтать Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". +Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. -**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что еÑли вы проÑто хотите получить окончательный вариант проекта, Ñодержащий вÑе, проÑто Ñкопируйте поÑледний раздел и пользуйтеÑÑŒ на здоровье. +**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что, еÑли вы проÑто хотите получить окончательный вариант проекта, Ñодержащий вÑе необходимое, проÑто Ñкопируйте поÑледний раздел и пользуйтеÑÑŒ на здоровье. -Замечание: ПорÑдок чаÑтей не вÑегда обÑзателен. К примеру, теÑтирование / Ñ‚Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð¼Ð¾Ð³ÑƒÑ‚ быть выполнены до Ð²Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð² React. Довольно Ñложно перемещать или редактировать опубликованные разделы, поÑкольку приходитÑÑ Ð²Ð½Ð¾Ñить Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¾ вÑе Ñледующие за ними чаÑти. Возможно, когда вÑе определитÑÑ, Ñ Ð¿Ñ€Ð¸Ð²ÐµÐ´Ñƒ вÑÑŽ документацию к более удобному виду. +Примечание: ПорÑдок чаÑтей не вÑегда обÑзателен. К примеру, теÑтирование / Ñ‚Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð¼Ð¾Ð³ÑƒÑ‚ быть выполнены до Ð²Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð² React. Довольно Ñложно перемещать или редактировать опубликованные разделы, поÑкольку приходитÑÑ Ð²Ð½Ð¾Ñить Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¾ вÑе Ñледующие за ними чаÑти. Возможно, когда вÑе определитÑÑ, Ñ Ð¿Ñ€Ð¸Ð²ÐµÐ´Ñƒ вÑÑŽ документацию к более удобному виду. Код, приведенный в примерах, работает под Linux, macOS, и Windows. -- GitLab From 63a5455b9f4d5b3df47d3e310c46f780b28caadd Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Mon, 7 Nov 2016 20:19:15 +0700 Subject: [PATCH 26/73] section 9 --- Definitions.md | 2 + tutorial/3-es6-babel-gulp/README.md | 4 +- tutorial/8-react/README.md | 2 +- tutorial/9-redux/README.md | 58 +++++----- tutorial/9-redux/READMEeng.md | 164 ++++++++++++++++++++++++++++ 5 files changed, 200 insertions(+), 30 deletions(-) create mode 100644 tutorial/9-redux/READMEeng.md diff --git a/Definitions.md b/Definitions.md index 70f3c67..2995be0 100644 --- a/Definitions.md +++ b/Definitions.md @@ -27,6 +27,8 @@ Task Runner - менеджер задач. Node - Ñервер Node +plain JavaScript object - проÑтой JavaScript объект + Babel ÑинтакÑичеÑкий Ñахар - syntactic sugar diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index 7e9e6aa..603685b 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -1,4 +1,4 @@ -# 3 - ÐаÑтройка ES6 Ñ Babel и Gulp] +# 3 - ÐаÑтройка ES6 Ñ Babel и Gulp Мы начинаем иÑпользовать ÑинтакÑÐ¸Ñ ES6, предÑтавлÑющий значительное продвижение отноÑительно "Ñтарого" ES5. Ð’Ñе браузеры и JS Ð¾ÐºÑ€ÑƒÐ¶ÐµÐ½Ð¸Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ понимают ES5, но не ES6. ПоÑтому мы будем иÑпользовать инÑтрумент, называемый Babel, чтобы преобразовать файлы ES6 в ES5 формат. Чтобы запуÑкать Babel, мы будем иÑпользовать Gulp - менеджер задач. Ðто похоже на Ñоздание задач, раÑположенных в `scripts` файла `package.json`, но напиÑание задач в JS файле проще и понÑтнее чем в JSON, поÑтому уÑтановим Gulp и плагин Babel Ð´Ð»Ñ Ð½ÐµÐ³Ð¾. @@ -73,8 +73,6 @@ Gulp Ñам по Ñебе имеет довольно понÑтный API. Он Затем мы определили пÑть задач: `build` *(Ñоздать)*, `clean` *(очиÑтить)*, `main` *(оÑновнаÑ)*, `watch` *(наблюдать)*, and `default` *(по умолчанию)*. - `build` вызывает Babel, чтобы преобразовать вÑе иÑходные файлы из `src`, и запиÑывает результат в `lib`. -- We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package. - - `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) или Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del` чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) - `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir` чтоб ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто лишь запуÑкает `node lib`. - `watch` запуÑкает задчу `main`, когда проиÑходÑÑ‚ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð¾Ð¹ ÑиÑтемы Ð´Ð»Ñ ÑƒÐºÐ°Ð·Ð°Ð½Ð½Ñ‹Ñ… файлов. diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 72337f6..d2db020 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -59,4 +59,4 @@ clientEntryPoint: 'src/client/app.jsx', Следующий раздел: [9 - Redux](/tutorial/9-redux) -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index 20bfe89..7e2c73c 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -1,16 +1,22 @@ # 9 - Redux -In this chapter (which is the most difficult so far) we will be adding [Redux](http://redux.js.org/) to our application and will hook it up with React. Redux manages the state of your application. It is composed of a **store** which is a plain JavaScript object representing the state of your app, **actions** which are typically triggered by users, and **reducers** which can be seen as action handlers. Reducers affect your application state (the *store*), and when the application state is modified, things happen in your app. A good visual demonstration of Redux can be found [here](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). +Ð’ Ñтой чаÑти (ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð½Ð°Ð¸Ð±Ð¾Ð»ÐµÐµ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ Ð¸Ð· пройденных), мы добавим в наше приложение [Redux](http://redux.js.org/) ([Ð´Ð¾ÐºÑƒÐ¼ÐµÐ½Ñ‚Ð°Ñ†Ð¸Ñ Ð½Ð° РуÑÑком](https://www.gitbook.com/book/rajdee/redux-in-russian/details)) и подключим его к React. Redux управлÑет ÑоÑтоÑнием приложениÑ. Он включает в ÑÐµÐ±Ñ Ñ‚Ð°ÐºÐ¸Ðµ понÑтиÑ, как: -In order to demonstrate how to use Redux in the simplest possible way, our app will consist of a message and a button. The message says whether the dog has barked or not (it initially hasn't), and the button makes the dog bark, which should update the message. +- **хранилище** (store) - проÑтой JavaScript объект, предÑтавлÑющий ÑоÑтоÑние вашего приложениÑ; +- **дейÑтвиÑ** (actions), которые обычно запуÑкаютÑÑ Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚ÐµÐ»ÐµÐ¼; +- **редюÑеры** (reducers), которые можно раÑÑматривать как обработчики дейÑтвий. -We are going to need 2 packages in this part, `redux` and `react-redux`. +РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). -- Run `yarn add redux react-redux`. +Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы продемонÑтрировать иÑпользование Redux наиболее доÑтупным ÑпоÑобом, наше приложение будет ÑоÑтоÑть и ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¸ кнопки. Сообщение будет показывать лает Ñобака или нет (изначально - нет), а кнопка будет заÑтавлÑть ее лаÑть, что должно будет отразитьÑÑ Ð² Ñообщении. -Lets start by creating 2 folders: `src/client/actions` and `src/client/reducers`. +Ðам потребуетÑÑ Ð´Ð²Ð° пакета в Ñтой чаÑти: `redux` и `react-redux`. -- In `actions`, create `dog-actions.js`: +- ЗапуÑтите `yarn add redux react-redux`. + +Давайте начнем Ñ ÑÐ¾Ð·Ð´Ð°Ð½Ð¸Ñ Ð´Ð²ÑƒÑ… папок: `src/client/actions` и `src/client/reducers`. + +- Ð’ `actions`, Ñоздайте `dog-actions.js`: ```javascript export const MAKE_BARK = 'MAKE_BARK'; @@ -20,9 +26,9 @@ export const makeBark = () => ({ payload: true, }); ``` -Here we define an action type, `MAKE_BARK`, and a function (also known as *action creator*) that triggers a `MAKE_BARK` action called `makeBark`. Both are exported because we'll need them both in other files. This action implements the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) model, which is why it has `type` and `payload` attributes. +Тут мы определÑем тип дейÑÑ‚Ð²Ð¸Ñ - `MAKE_BARK`, и функцию `makeBark` (именуемую *генератор дейÑтвий*), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкает дейÑтвие `MAKE_BARK`. Мы их ÑкÑпортируем Ñ‚.к. они нам понадобÑÑ‚ÑÑ Ð² других файлах. Ðто дейÑтвие поÑтроено на оÑнове модели [Flux Standard Action](https://github.com/acdlite/flux-standard-action), вот почему оно имеет атрибуты `type` и `payload`. -- In `reducers`, create `dog-reducer.js`: +- Ð’ `reducers`, Ñоздайте `dog-reducer.js`: ```javascript import { MAKE_BARK } from '../actions/dog-actions'; @@ -43,9 +49,9 @@ const dogReducer = (state = initialState, action) => { export default dogReducer; ``` -Here we define the initial state of our app, which is an object containing the `hasBarked` property set to `false`, and the `dogReducer`, which is the function responsible for altering the state based on which action happened. The state cannot be modified in this function, a brand new state object must be returned. +ЗдеÑÑŒ мы определили иÑходное ÑоÑтоÑние приложениÑ, ÑвлÑющееÑÑ Ð¾Ð±ÑŠÐµÐºÑ‚Ð¾Ð¼, Ñодержащим ÑвойÑтво `hasBarked`, уÑтановленное в `false`, и `dogReducer` - функцию, ответÑвенную за перемену ÑоÑтоÑÐ½Ð¸Ñ Ð² завиÑимоÑти от того, какое дейÑтвие произошло. СоÑтоÑние не может быть изменено в Ñтой функции, но должн быть возвращен Ñовершенно новый объект ÑоÑтоÑниÑ. -- We are now going to modify `app.jsx` to create the *store*. You can replace the entire content of that file by the following: +- Изменим `app.jsx` чтобы Ñоздать *хранилище*. Можете заменить веÑÑŒ файл Ñледующим Ñодержимым: ```javascript import React from 'react'; @@ -71,19 +77,19 @@ ReactDOM.render( ); ``` -Our store is created by the Redux function `createStore`, pretty explicit. The store object is assembled by combining all our reducers (in our case, only one) using Redux's `combineReducers` function. Each reducer is named here, and we'll name ours `dog`. +Ðаше хранилище Ñоздано функцией Redux `createStore`, вполне наглÑдно. Объект хранилища ÑобираетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ ÐºÐ¾Ð¼Ð±Ð¸Ð½Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ Ð²ÑÑ… редюÑеров (в нашем Ñлучае одного) Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ функции Redux `combineReducers`. Каждый редюÑер в ней имеет имÑ, наш назовем `dog`. -That's pretty much it for the pure Redux part. +Мы Ñделали доÑтаточно, в чаÑти, отноÑÑщейÑÑ Ðº чиÑтому Redux. -Now we are going to hook up Redux with React using `react-redux`. In order for `react-redux` to pass the store to our React app, it needs to wrap the entire app in a `<Provider>` component. This component must have a single child, so we created a `<div>`, and this `<div>` contains the 2 main elements of our app, a `BarkMessage` and a `BarkButton`. +Теперь мы подключим Redux к React, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð°ÐºÐµÑ‚ `react-redux`. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы `react-redux`, могу передать хранилище в наше Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð½Ð° React, нам нужно обернуть вÑе приложение в компонент `<Provider>`. Ðтот компонент должен Ñодержать единÑтвенный дочерний Ñлемент, так что мы добавли `<div>`, и Ñтот `<div>` Ñодержит два оÑновных Ñлемента нашего приложениÑ: `BarkMessage` и `BarkButton`. -As you can tell in the `import` section, `BarkMessage` and `BarkButton` are imported from a `containers` folder. Now is a good time to introduce the concept of **Components** and **Containers**. +Как вы могли заметить в разделе `import`, мы импортируем `BarkMessage` and `BarkButton` из директории `containers`. Ð¡ÐµÐ¹Ñ‡Ð°Ñ Ñамое Ð²Ñ€ÐµÐ¼Ñ Ð¿Ñ€ÐµÐ´Ñтавить концепцию **Компонентов** и **Контейнеров**. -*Components* are *dumb* React components, in a sense that they don't know anything about the Redux state. *Containers* are *smart* components that know about the state and that we are going to *connect* to our dumb components. +*Компоненты* - Ñто *"глупые"* компоненты React, в том ÑмыÑле, что они ничего не знают о ÑоÑтоÑнии Redux. *Контейнеры* - *"умные"*, знают о ÑоÑтоÑнии и о том, что мы ÑобираемÑÑ *подключитьÑÑ* (*connect*) к "глупым" компонентам. -- Create 2 folders, `src/client/components` and `src/client/containers`. +- Создайте 2 папки, `src/client/components` и `src/client/containers`. -- In `components`, create the following files: +- Ð’ `components` Ñоздайте Ñледующие файлы: **button.jsx** @@ -100,7 +106,7 @@ Button.propTypes = { export default Button; ``` -and **message.jsx**: +и **message.jsx**: ```javascript import React, { PropTypes } from 'react'; @@ -115,11 +121,11 @@ export default Message; ``` -These are examples of *dumb* components. They are logic-less, and just show whatever they are asked to show via React **props**. The main difference between `button.jsx` and `message.jsx` is that `Button` contains an **action** in its props. That action is bound on the `onClick` event. In the context of our app, the `Button` label is never going to change, however, the `Message` component is going to reflect the state of our app, and will vary based on the state. +Ðто примеры *"глупых"* компонентов. Они практичеÑки лишены логики и проÑто оборажают то, что потребуетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ передачи им **ÑвойÑтв** (props) React. ОÑновное отличие `button.jsx` от `message.jsx`, в том, что поÑледний Ñодержит **дейÑтвие** в качеÑтве одного из параметров. Ðто дейÑтвие Ñрабатывет по Ñобытию `onClick`. Ð’ контекÑте нашего приложениÑ, надпиÑÑŒ `Button` никогда не будет изменÑтьÑÑ, однако компонент `Message` должен отражать ÑоÑтоÑние нашего приложениÑ, и будет изменÑтьÑÑ Ð½Ð° оÑнове Ñтого. -Again, *components* don't know anything about Redux **actions** or the **state** of our app, which is why we are going to create smart **containers** that will feed the proper *actions* and *data* to these 2 dumb components. +ОпÑть же, *компоненты* ничего не знают о Redux **дейÑтвиÑÑ…** или о **ÑоÑтоÑнии** нашего приложениÑ, вот почему мы ÑобираемÑÑ Ñоздать "умные" **контейнеры** которые "подведут" нужные *дейÑтвиÑ* и *данные* к Ñтим двум "глупым" компонентам. -- In `containers`, create the following files: +- Ð’ `containers`, Ñоздайте Ñледующие файлы: **bark-button.js** @@ -136,7 +142,7 @@ const mapDispatchToProps = dispatch => ({ export default connect(null, mapDispatchToProps)(Button); ``` -and **bark-message.js**: +и **bark-message.js**: ```javascript import { connect } from 'react-redux'; @@ -149,10 +155,10 @@ const mapStateToProps = state => ({ export default connect(mapStateToProps)(Message); ``` -`BarkButton` will hook up `Button` with the `makeBark` action and Redux's `dispatch` method, and `BarkMessage` will hook up the app state with `Message`. When the state changes, `Message` will now automatically re-render with the proper `message` prop. These connections are done via the `connect` function of `react-redux`. +`BarkButton` подключает дейÑтвие `makeBark` и метод Redux `dispatch` к `Button`. Ð `BarkMessage` подключает `Message` к ÑоÑтоÑнию приложениÑ. Когда ÑоÑтоÑние изменитÑÑ, `Message` автоматичеÑки перегенерируетÑÑ Ñ Ð½ÑƒÐ¶Ð½Ñ‹Ð¼ значением ÑвойÑтва `message`. Ðти Ð¿Ð¾Ð´ÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ð²Ñ‹Ð¿Ð¾Ð»Ð½ÐµÐ½Ñ‹ через функцию `connect` пакета `react-redux`. -- You can now run `yarn start` and open `index.html`. You should see "The dog did not bark" and a button. When you click the button, the message should show "The dog barked". +- Теперь можете запуÑтить `yarn start` и открыть `index.html`. Ð’Ñ‹ должны увидеть надпиÑÑŒ "The dog did not bark" и кнопку. Когда вы нажмете на кнопку, Ñообщение должно изменитьÑÑ Ð½Ð° "The dog barked". -Next section: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) +Следующий раздел: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Back to the [previous section](/tutorial/8-react) or the [table of contents](/README.md). +Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). diff --git a/tutorial/9-redux/READMEeng.md b/tutorial/9-redux/READMEeng.md new file mode 100644 index 0000000..6d174d6 --- /dev/null +++ b/tutorial/9-redux/READMEeng.md @@ -0,0 +1,164 @@ +# 9 - Redux + +Ð’ Ñтой чаÑти (ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð½Ð°Ð¸Ð±Ð¾Ð»ÐµÐµ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ Ð¸Ð· пройденных), мы добавим в наше приложение [Redux](http://redux.js.org/) ([Ð´Ð¾ÐºÑƒÐ¼ÐµÐ½Ñ‚Ð°Ñ†Ð¸Ñ Ð½Ð° РуÑÑком](https://www.gitbook.com/book/rajdee/redux-in-russian/details)) и подключим его к React. Redux управлÑет ÑоÑтоÑнием приложениÑ. Он включает в ÑÐµÐ±Ñ Ñ‚Ð°ÐºÐ¸Ðµ понÑтиÑ, как: + +- **хранилище** (store) - проÑтой JavaScript объект, предÑтавлÑющий ÑоÑтоÑние вашего приложениÑ; +- **дейÑтвиÑ** (actions), которые обычно запуÑкаютÑÑ Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚ÐµÐ»ÐµÐ¼; +- **редюÑеры** (reducers), которые можно раÑÑматривать как обработчики дейÑтвий. + +РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). + +In order to demonstrate how to use Redux in the simplest possible way, our app will consist of a message and a button. The message says whether the dog has barked or not (it initially hasn't), and the button makes the dog bark, which should update the message. + +We are going to need 2 packages in this part, `redux` and `react-redux`. + +- Run `yarn add redux react-redux`. + +Lets start by creating 2 folders: `src/client/actions` and `src/client/reducers`. + +- In `actions`, create `dog-actions.js`: + +```javascript +export const MAKE_BARK = 'MAKE_BARK'; + +export const makeBark = () => ({ + type: MAKE_BARK, + payload: true, +}); +``` +Here we define an action type, `MAKE_BARK`, and a function (also known as *action creator*) that triggers a `MAKE_BARK` action called `makeBark`. Both are exported because we'll need them both in other files. This action implements the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) model, which is why it has `type` and `payload` attributes. + +- In `reducers`, create `dog-reducer.js`: + +```javascript +import { MAKE_BARK } from '../actions/dog-actions'; + +const initialState = { + hasBarked: false, +}; + +const dogReducer = (state = initialState, action) => { + switch (action.type) { + case MAKE_BARK: + return { hasBarked: action.payload }; + default: + return state; + } +}; + +export default dogReducer; +``` + +Here we define the initial state of our app, which is an object containing the `hasBarked` property set to `false`, and the `dogReducer`, which is the function responsible for altering the state based on which action happened. The state cannot be modified in this function, a brand new state object must be returned. + +- We are now going to modify `app.jsx` to create the *store*. You can replace the entire content of that file by the following: + +```javascript +import React from 'react'; +import ReactDOM from 'react-dom'; +import { createStore, combineReducers } from 'redux'; +import { Provider } from 'react-redux'; +import dogReducer from './reducers/dog-reducer'; +import BarkMessage from './containers/bark-message'; +import BarkButton from './containers/bark-button'; + +const store = createStore(combineReducers({ + dog: dogReducer, +})); + +ReactDOM.render( + <Provider store={store}> + <div> + <BarkMessage /> + <BarkButton /> + </div> + </Provider> + , document.querySelector('.app') +); +``` + +Our store is created by the Redux function `createStore`, pretty explicit. The store object is assembled by combining all our reducers (in our case, only one) using Redux's `combineReducers` function. Each reducer is named here, and we'll name ours `dog`. + +That's pretty much it for the pure Redux part. + +Now we are going to hook up Redux with React using `react-redux`. In order for `react-redux` to pass the store to our React app, it needs to wrap the entire app in a `<Provider>` component. This component must have a single child, so we created a `<div>`, and this `<div>` contains the 2 main elements of our app, a `BarkMessage` and a `BarkButton`. + +As you can tell in the `import` section, `BarkMessage` and `BarkButton` are imported from a `containers` folder. Now is a good time to introduce the concept of **Components** and **Containers**. + +*Components* are *dumb* React components, in a sense that they don't know anything about the Redux state. *Containers* are *smart* components that know about the state and that we are going to *connect* to our dumb components. + +- Create 2 folders, `src/client/components` and `src/client/containers`. + +- In `components`, create the following files: + +**button.jsx** + +```javascript +import React, { PropTypes } from 'react'; + +const Button = ({ action, actionLabel }) => <button onClick={action}>{actionLabel}</button>; + +Button.propTypes = { + action: PropTypes.func.isRequired, + actionLabel: PropTypes.string.isRequired, +}; + +export default Button; +``` + +and **message.jsx**: + +```javascript +import React, { PropTypes } from 'react'; + +const Message = ({ message }) => <div>{message}</div>; + +Message.propTypes = { + message: PropTypes.string.isRequired, +}; + +export default Message; + +``` + +These are examples of *dumb* components. They are logic-less, and just show whatever they are asked to show via React **props**. The main difference between `button.jsx` and `message.jsx` is that `Button` contains an **action** in its props. That action is bound on the `onClick` event. In the context of our app, the `Button` label is never going to change, however, the `Message` component is going to reflect the state of our app, and will vary based on the state. + +Again, *components* don't know anything about Redux **actions** or the **state** of our app, which is why we are going to create smart **containers** that will feed the proper *actions* and *data* to these 2 dumb components. + +- In `containers`, create the following files: + +**bark-button.js** + +```javascript +import { connect } from 'react-redux'; +import Button from '../components/button'; +import { makeBark } from '../actions/dog-actions'; + +const mapDispatchToProps = dispatch => ({ + action: () => { dispatch(makeBark()); }, + actionLabel: 'Bark', +}); + +export default connect(null, mapDispatchToProps)(Button); +``` + +and **bark-message.js**: + +```javascript +import { connect } from 'react-redux'; +import Message from '../components/message'; + +const mapStateToProps = state => ({ + message: state.dog.hasBarked ? 'The dog barked' : 'The dog did not bark', +}); + +export default connect(mapStateToProps)(Message); +``` + +`BarkButton` will hook up `Button` with the `makeBark` action and Redux's `dispatch` method, and `BarkMessage` will hook up the app state with `Message`. When the state changes, `Message` will now automatically re-render with the proper `message` prop. These connections are done via the `connect` function of `react-redux`. + +- You can now run `yarn start` and open `index.html`. You should see "The dog did not bark" and a button. When you click the button, the message should show "The dog barked". + +Next section: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) + +Back to the [previous section](/tutorial/8-react) or the [table of contents](/README.md). -- GitLab From 0a2ed91707277a0f8fabf010998dba2d2e5afa31 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Mon, 7 Nov 2016 23:15:34 +0700 Subject: [PATCH 27/73] section 11 --- README.md | 2 +- .../10-immutable-redux-improvements/README.md | 2 +- .../11-testing-mocha-chai-sinon/README.md | 61 +++---- .../11-testing-mocha-chai-sinon/READMEeng.md | 157 ++++++++++++++++++ 4 files changed, 190 insertions(+), 32 deletions(-) create mode 100644 tutorial/11-testing-mocha-chai-sinon/READMEeng.md diff --git a/README.md b/README.md index 405e4c1..dee43c4 100644 --- a/README.md +++ b/README.md @@ -64,7 +64,7 @@ [11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) -[12 - ~Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ~ Flow](/tutorial/12-flow) +[12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) ## Далее Ñледует diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index 2bb44b1..69c2d38 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -99,5 +99,5 @@ export const makeBark = createAction(MAKE_BARK, () => true); Следующий раздел: [11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) -Ðазад в [предыдущий раздел](/tutorial/9-redux) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/9-redux) или [Содержание](/../../). diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 53a2766..810d483 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -1,16 +1,16 @@ -# 11 - Testing with Mocha, Chai, and Sinon +# 11 - ТеÑтировние Ñ Mocha, Chai, и Sinon ## Mocha and Chai -- Create an `src/test` folder. This folder will mirror our application folder structure, so create a `src/test/client` folder as well (feel free to add `server` and `shared` if you want, but we're not going to write tests for these). +- Создайте директорию `src/test`. Ðта папка будет отражать Ñтруктуру директорий нашего приложениÑ, поÑтому Ñоздайте также `src/test/client` (можете так же добавить `server` и `shared`, еÑли хотите, но мы не будем пиÑать теÑты Ð´Ð»Ñ Ð½Ð¸Ñ…). -- In `src/test/client`, create a `state-test.js` file, which we are going to use to test our Redux application life cycle. +- Ð’ `src/test/client`, Ñоздайте файл `state-test.js` , в котором мы будем теÑтировать жизненный цикл нашего Redux приложеиÑ. -We are going to use [Mocha](http://mochajs.org/) as our main testing framework. Mocha is easy to use, has tons of features, and is currently the [most popular JavaScript testing framework](http://stateofjs.com/2016/testing/). It is very flexible and modular. In particular, it lets you use any assertion library you want. [Chai](http://chaijs.com/) is a great assertion library that has a lot of [plugins](http://chaijs.com/plugins/) available and lets you choose between different assertion styles. +Мы будем иÑпользовать [Mocha](http://mochajs.org/) в качеÑве оÑновного фреймворка Ð´Ð»Ñ Ñ‚ÐµÑтированиÑ. Mocha проÑÑ‚ в иÑпользовании, имеет множеÑтво возможноÑтей, и на данный момент [Ñамый популÑрный фреймворк Ð´Ð»Ñ Ñ‚ÐµÑтированиÑ](http://stateofjs.com/2016/testing/). Он модульный и очень гибкий. Ð’ чаÑтноÑти, он позволÑет иÑпользовать любые библиотеки утверждений (assertion) на ваше пожелание. [Chai](http://chaijs.com/) - Ð·Ð°Ð¼ÐµÑ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð±Ð¸Ð±Ð»Ð¸Ð¾Ñ‚ÐµÐºÐ° утверждений, Ð¸Ð¼ÐµÑŽÑ‰Ð°Ñ Ð¼Ð½Ð¾Ð³Ð¾ доÑтупных [плагинов](http://chaijs.com/plugins/) и позволÑÑŽÑ‰Ð°Ñ Ð²Ð°Ð¼ выбирать между различными ÑтилÑми утверждений. -- Let's install Mocha and Chai by running `yarn add --dev mocha chai` +- УÑтановим Mocha и Chai выполним `yarn add --dev mocha chai` -In `state-test.js`, write the following: +Ð’ `state-test.js`, напишите Ñледующее: ```javascript /* eslint-disable import/no-extraneous-dependencies, no-unused-expressions */ @@ -42,17 +42,17 @@ describe('App State', () => { }); }); ``` -Alright, let's analyze this whole thing. +Хорошо, давайте вÑе Ñто проанализируем. -First, notice how we import the `should` assertion style from `chai`. This lets us assert things using a syntax like `mynumber.should.equal(3)`, pretty neat. In order to be able to call `should` on any object, we need to run the function `should()` before anything. Some of these assertion are *expressions*, like `mybook.should.be.true`, which will make ESLint grumpy, so we've added an ESLint comment at the top to disable the `no-unused-expressions` rule in this file. +Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, что бы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавили Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. -Mocha tests work like a tree. In our case, we want to test the `makeBark` function which should affect the `dog` attribute of the application state, so it makes sense to use the following hierarchy of tests: `App State > Dog > makeBark`, that we declare using `describe()`. `it()` is the actual test function and `beforeEach()` is a function that is executed before each `it()` test. In our case, we want a fresh new store before running each test. We declare a `store` variable at the top of the file because it should be useful in every test of this file. +ТеÑты Mocha уÑтроены наподобие дерева. Ð’ нашем Ñлучае, мы хотим протеÑтировать функцию `makeBark`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð° воздейÑтвовать на атрибут `dog` ÑоÑтоÑÐ½Ð¸Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ приложениÑ, поÑтому имеет ÑмыÑл иÑпользовать Ñледующую иерархию теÑтов: `App State > Dog > makeBark`, что мы и опиÑали иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ `describe()`. `it()` - Ñто ÑобÑтвенно, теÑÑ‚Ð¸Ñ€ÑƒÑŽÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, а `beforeEach()` - Ñто функциÑ, Ð²Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼Ð°Ñ Ð¿ÐµÑ€ÐµÐ´ каждым вызовом теÑта `it()`. Ð’ нашем Ñлучае мы хотим иметь новую чиÑтую верÑию хранилища перед запуÑком каждого теÑта. Мы обÑвили переменную `store` в начале файла, поÑкольку она нам пригодитÑÑ Ð² кадом теÑте. -Our `makeBark` test is very explicit, and the description provided as a string in `it()` makes it even clearer: we test that `hasBarked` go from `false` to `true` after calling `makeBark`. +ТеÑÑ‚ `makeBark` вполне понÑтен, а Ñтрока Ñ Ð¾Ð¿Ð¸Ñанием в `it()` делает его еще ÑÑнее: мы проверÑем, что `hasBarked` менÑетÑÑ Ñ `false` на `true` поÑле вызова `makeBark`. -Alright, let's run this test! +Отлично, запуÑтим Ñтот теÑÑ‚! -- Create the following `test` task, which relies on the `gulp-mocha` plugin: +- Создайте Ñледующую задачу `test`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¾ÑновываетÑÑ Ð½Ð° плагине `gulp-mocha`: ```javascript import mocha from 'gulp-mocha'; @@ -70,27 +70,29 @@ gulp.task('test', ['build'], () => ); ``` -- Run `yarn add --dev gulp-mocha` of course. +- Конечно же, выполните `yarn add --dev gulp-mocha`. -As you can see, tests are run on transpiled code in `lib`, which is why `build` is a prerequisite task of `test`. `build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. +Как вы можете видеть, теÑты запуÑкаютÑÑ Ð½Ð° транÑпилированом коде из папки `lib`, вот почему задачу `test` предварÑет запуÑк `build`. `build`, в Ñвою очередь, предварÑетÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `lint`, а Ñам `test` мы будем запуÑкать перед `main`, что в итоге даÑÑ‚ нам Ñледующий каÑкад задач Ð´Ð»Ñ `default`: `lint` > `build` > `test` > `main`. -- Change the prerequisite of `main` to `test`: +`build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. + +- УÑтановите в `main` предварительный запуÑк команды `test`: ```javascript gulp.task('main', ['test'], () => /* ... */ ); ``` -- In `package.json`, replace the current `"test"` script by: `"test": "gulp test"`. This way you can use `yarn test` to just run your tests. `test` is also the standard script that will be automatically called by tools like continuous integration services for instance, so you should always bind your test task to it. `yarn start` will run the tests before building the Webpack client bundle as well, so it will only build it if all tests pass. +- Ð’ `package.json`, текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test` чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ еÑли вÑе теÑты будут пройдены. -- Run `yarn test` or `yarn start`, and it should print the result for our test, hopefully green. +- ЗапуÑтите `yarn test` или `yarn start`, и должны будут выйти результаты ваших теÑтов, предпочтительно зеленые. ## Sinon -In some cases, we want to be able to *fake* things in a unit test. For instance, let's say we have a function, `deleteEverything`, which contains a call to `deleteDatabases()`. Running `deleteDatabases()` causes a lot of side-effects, which we absolutely don't want to happen when running our test suite. +Ð’ некоторых ÑлучаÑÑ…, мы хотим иметь возможноÑть *Ñмулировать* некоторые вещи в юнит теÑтах. Ðапример, давайте Ñкажем, у Ð½Ð°Ñ ÐµÑть Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ `deleteEverything`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñодержит вызов `deleteDatabases()`. ЗапуÑк `deleteDatabases()` вызовет много побочных Ñффектов, которые нам абÑолютно не желательны, во Ð²Ñ€ÐµÐ¼Ñ Ñ‚ÐµÑтированиÑ. -[Sinon](http://sinonjs.org/) is a testing library that offers **Stubs** (and a lot of other things), which allow us to neutralize `deleteDatabases` and simply monitor it without actually calling it. This way we can test if it got called, or which parameters it got called with for instance. This is typically very useful to fake or avoid AJAX calls - which can cause side-effects on the back-end. +[Sinon](http://sinonjs.org/) - библиотека теÑтированиÑ, Ð¿Ñ€ÐµÐ´Ð»Ð°Ð³Ð°ÑŽÑ‰Ð°Ñ **Заглушки** (и многие другие вещи), позволÑет нейтрализовать `deleteDatabases` и проÑто мониторить ее не запуÑÐºÐ°Ñ Ð½Ð° Ñамом деле. Таким образом, к примеру, мы можем теÑтировать была ли она запущена или Ñ ÐºÐ°ÐºÐ¸Ð¼Ð¸ параметрами она была запущена. Обычно, Ñто очень полезно ÑмулÑции или иÑÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ AJAX вызовов, которые могут вызвать побочные Ñффекты на Ñервере. -In the context of our app, we are going to add a `barkInConsole` method to our `Dog` class in `src/shared/dog.js`: +Ð’ рамках нашего приложениÑ, мы добавим метод `barkInConsole` в клаÑÑ `Dog` в файле `src/shared/dog.js`: ```javascript class Dog { @@ -111,10 +113,9 @@ class Dog { export default Dog; ``` +ЕÑли мы запуÑтим `barkInConsole` в нашем юнит теÑте, то `console.log()` выведет что-то в терминал. Давайте мы будем Ñто раÑÑматривать, как нежелательный побочный Ñффект в рамках нашего юнит теÑта. Тем не менее мы желаем, знать была ли `console.log()` *нормально запущена*, и какие параметры были *переданы ей при вызове*. -If we run `barkInConsole` in a unit test, `console.log()` will print things in the terminal. We are going to consider this to be an undesired side-effect in the context of our unit tests. We are interested in knowing if `console.log()` *would have normally been called* though, and we want to test what parameters it *would have been called with*. - -- Create a new `src/test/shared/dog-test.js` file, and add write the following: +- Создайте новый файл `src/test/shared/dog-test.js` и добавьте туда Ñледующее: ```javascript /* eslint-disable import/no-extraneous-dependencies, no-console */ @@ -142,16 +143,16 @@ describe('Shared', () => { }); ``` -Here, we are using *stubs* from Sinon, and a Chai plugin to be able to use Chai assertions on Sinon stubs and such. +Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, поÑволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° таких заглушках и им подобных. -- Run `yarn add --dev sinon sinon-chai` to install these libraries. +- ЗапуÑтите `yarn add --dev sinon sinon-chai` чтобы уÑтановить Ñти библиотеки. -So what is new here? Well first of all, we call `chai.use(sinonChai)` to activate the Chai plugin. Then, all the magic happens in the `it()` statement: `stub(console, 'log')` is going to neutralize `console.log` and monitor it. When `new Dog('Test Toby').barkInConsole()` is executed, a `console.log` is normally supposed to happen. We test this call to `console.log` with `console.log.should.have.been.calledWith()`, and finally, we `restore` the neutralized `console.log` to make it work normally again. +Что здеÑÑŒ нового? Ðу прежде вÑего, мы вызываем `chai.use(sinonChai)`, чтобы активировать плагин Ð´Ð»Ñ Chai. Затем, вÑÑ Ð¼Ð°Ð³Ð¸Ñ Ð¿Ñ€Ð¾Ð¸Ñходит внутри `it()`: `stub(console, 'log')` нейтрализует `console.log` и Ñледит за ней. Когда `new Dog('Test Toby').barkInConsole()` выполнен, `console.log` должна была бы Ñработать. Мы проверÑем Ñтот вызов `console.log` Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `console.log.should.have.been.calledWith()`, а затем, воÑÑтанавливаем Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `restore` нейтрализированную `console.log`, чтобы позволить ей дальше работать нормльно. -**Important note**: Stubbing `console.log` is not recommended, because if the test fails, `console.log.restore()` is never called, and therefore `console.log` will remain broken for the rest of the command you executed in your terminal! It won't even print the error message that caused the test to fail, so it leaves you with very little information about what happened. That can be quite confusing. It is a good example to illustrate stubs in this simple app though. +**Важное замечание**: Заглушать `console.log` не рекомендуетÑÑ, потому, что еÑли теÑÑ‚ провалитÑÑ, то `console.log.restore()` никогда не запуÑтитÑÑ, и Ñледовательно `console.log` оÑтанетÑÑ Ð½ÐµÐ¸Ñправной Ð´Ð»Ñ Ð²Ñех оÑтальных команд, выполнÑемых в терминале. При Ñтом даже не выйдет ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ð± ошибке Ð¿Ñ€Ð¾Ñ…Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ Ñ‚ÐµÑта, так что вы оÑтанетеÑÑŒ Ñ Ð¾Ñ‡ÐµÐ½ÑŒ малой информацией о том, что же произошло. Ðто может оказатьÑÑ Ð´Ð¾Ñтаточно не приÑтно. Тем не менее, Ñто хороший пример, иллюÑтрирующий применение заглушек в Ñтом проÑтом приложении. -If everything went well in this chapter, you should have 2 passing tests. +ЕÑли в Ñтом разделе прошло хорошо, то у Ð²Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð¾ быть два пройденых теÑта. -Next section: [12 - Type Checking with Flow](/tutorial/12-flow) +Следующий раздел: [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -Back to the [previous section](/tutorial/10-immutable-redux-improvements) or the [table of contents](/README.md). +Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). diff --git a/tutorial/11-testing-mocha-chai-sinon/READMEeng.md b/tutorial/11-testing-mocha-chai-sinon/READMEeng.md new file mode 100644 index 0000000..53a2766 --- /dev/null +++ b/tutorial/11-testing-mocha-chai-sinon/READMEeng.md @@ -0,0 +1,157 @@ +# 11 - Testing with Mocha, Chai, and Sinon + +## Mocha and Chai + +- Create an `src/test` folder. This folder will mirror our application folder structure, so create a `src/test/client` folder as well (feel free to add `server` and `shared` if you want, but we're not going to write tests for these). + +- In `src/test/client`, create a `state-test.js` file, which we are going to use to test our Redux application life cycle. + +We are going to use [Mocha](http://mochajs.org/) as our main testing framework. Mocha is easy to use, has tons of features, and is currently the [most popular JavaScript testing framework](http://stateofjs.com/2016/testing/). It is very flexible and modular. In particular, it lets you use any assertion library you want. [Chai](http://chaijs.com/) is a great assertion library that has a lot of [plugins](http://chaijs.com/plugins/) available and lets you choose between different assertion styles. + +- Let's install Mocha and Chai by running `yarn add --dev mocha chai` + +In `state-test.js`, write the following: + +```javascript +/* eslint-disable import/no-extraneous-dependencies, no-unused-expressions */ + +import { createStore } from 'redux'; +import { combineReducers } from 'redux-immutable'; +import { should } from 'chai'; +import { describe, it, beforeEach } from 'mocha'; +import dogReducer from '../../client/reducers/dog-reducer'; +import { makeBark } from '../../client/actions/dog-actions'; + +should(); +let store; + +describe('App State', () => { + describe('Dog', () => { + beforeEach(() => { + store = createStore(combineReducers({ + dog: dogReducer, + })); + }); + describe('makeBark', () => { + it('should make hasBarked go from false to true', () => { + store.getState().getIn(['dog', 'hasBarked']).should.be.false; + store.dispatch(makeBark()); + store.getState().getIn(['dog', 'hasBarked']).should.be.true; + }); + }); + }); +}); +``` +Alright, let's analyze this whole thing. + +First, notice how we import the `should` assertion style from `chai`. This lets us assert things using a syntax like `mynumber.should.equal(3)`, pretty neat. In order to be able to call `should` on any object, we need to run the function `should()` before anything. Some of these assertion are *expressions*, like `mybook.should.be.true`, which will make ESLint grumpy, so we've added an ESLint comment at the top to disable the `no-unused-expressions` rule in this file. + +Mocha tests work like a tree. In our case, we want to test the `makeBark` function which should affect the `dog` attribute of the application state, so it makes sense to use the following hierarchy of tests: `App State > Dog > makeBark`, that we declare using `describe()`. `it()` is the actual test function and `beforeEach()` is a function that is executed before each `it()` test. In our case, we want a fresh new store before running each test. We declare a `store` variable at the top of the file because it should be useful in every test of this file. + +Our `makeBark` test is very explicit, and the description provided as a string in `it()` makes it even clearer: we test that `hasBarked` go from `false` to `true` after calling `makeBark`. + +Alright, let's run this test! + +- Create the following `test` task, which relies on the `gulp-mocha` plugin: + +```javascript +import mocha from 'gulp-mocha'; + +const paths = { + // [...] + allLibTests: 'lib/test/**/*.js', +}; + +// [...] + +gulp.task('test', ['build'], () => + gulp.src(paths.allLibTests) + .pipe(mocha()) +); +``` + +- Run `yarn add --dev gulp-mocha` of course. + +As you can see, tests are run on transpiled code in `lib`, which is why `build` is a prerequisite task of `test`. `build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. + +- Change the prerequisite of `main` to `test`: + +```javascript +gulp.task('main', ['test'], () => /* ... */ ); +``` + +- In `package.json`, replace the current `"test"` script by: `"test": "gulp test"`. This way you can use `yarn test` to just run your tests. `test` is also the standard script that will be automatically called by tools like continuous integration services for instance, so you should always bind your test task to it. `yarn start` will run the tests before building the Webpack client bundle as well, so it will only build it if all tests pass. + +- Run `yarn test` or `yarn start`, and it should print the result for our test, hopefully green. + +## Sinon + +In some cases, we want to be able to *fake* things in a unit test. For instance, let's say we have a function, `deleteEverything`, which contains a call to `deleteDatabases()`. Running `deleteDatabases()` causes a lot of side-effects, which we absolutely don't want to happen when running our test suite. + +[Sinon](http://sinonjs.org/) is a testing library that offers **Stubs** (and a lot of other things), which allow us to neutralize `deleteDatabases` and simply monitor it without actually calling it. This way we can test if it got called, or which parameters it got called with for instance. This is typically very useful to fake or avoid AJAX calls - which can cause side-effects on the back-end. + +In the context of our app, we are going to add a `barkInConsole` method to our `Dog` class in `src/shared/dog.js`: + +```javascript +class Dog { + constructor(name) { + this.name = name; + } + + bark() { + return `Wah wah, I am ${this.name}`; + } + + barkInConsole() { + /* eslint-disable no-console */ + console.log(this.bark()); + /* eslint-enable no-console */ + } +} + +export default Dog; +``` + +If we run `barkInConsole` in a unit test, `console.log()` will print things in the terminal. We are going to consider this to be an undesired side-effect in the context of our unit tests. We are interested in knowing if `console.log()` *would have normally been called* though, and we want to test what parameters it *would have been called with*. + +- Create a new `src/test/shared/dog-test.js` file, and add write the following: + +```javascript +/* eslint-disable import/no-extraneous-dependencies, no-console */ + +import chai from 'chai'; +import { stub } from 'sinon'; +import sinonChai from 'sinon-chai'; +import { describe, it } from 'mocha'; +import Dog from '../../shared/dog'; + +chai.should(); +chai.use(sinonChai); + +describe('Shared', () => { + describe('Dog', () => { + describe('barkInConsole', () => { + it('should print a bark string with its name', () => { + stub(console, 'log'); + new Dog('Test Toby').barkInConsole(); + console.log.should.have.been.calledWith('Wah wah, I am Test Toby'); + console.log.restore(); + }); + }); + }); +}); +``` + +Here, we are using *stubs* from Sinon, and a Chai plugin to be able to use Chai assertions on Sinon stubs and such. + +- Run `yarn add --dev sinon sinon-chai` to install these libraries. + +So what is new here? Well first of all, we call `chai.use(sinonChai)` to activate the Chai plugin. Then, all the magic happens in the `it()` statement: `stub(console, 'log')` is going to neutralize `console.log` and monitor it. When `new Dog('Test Toby').barkInConsole()` is executed, a `console.log` is normally supposed to happen. We test this call to `console.log` with `console.log.should.have.been.calledWith()`, and finally, we `restore` the neutralized `console.log` to make it work normally again. + +**Important note**: Stubbing `console.log` is not recommended, because if the test fails, `console.log.restore()` is never called, and therefore `console.log` will remain broken for the rest of the command you executed in your terminal! It won't even print the error message that caused the test to fail, so it leaves you with very little information about what happened. That can be quite confusing. It is a good example to illustrate stubs in this simple app though. + +If everything went well in this chapter, you should have 2 passing tests. + +Next section: [12 - Type Checking with Flow](/tutorial/12-flow) + +Back to the [previous section](/tutorial/10-immutable-redux-improvements) or the [table of contents](/README.md). -- GitLab From 6046c0aa22bff3c5b8ca32698c27554018c540c3 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Mon, 7 Nov 2016 16:26:24 +0000 Subject: [PATCH 28/73] README.md edited online with Bitbucket --- tutorial/3-es6-babel-gulp/README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index 603685b..40a2bfd 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -1,11 +1,11 @@ # 3 - ÐаÑтройка ES6 Ñ Babel и Gulp -Мы начинаем иÑпользовать ÑинтакÑÐ¸Ñ ES6, предÑтавлÑющий значительное продвижение отноÑительно "Ñтарого" ES5. Ð’Ñе браузеры и JS Ð¾ÐºÑ€ÑƒÐ¶ÐµÐ½Ð¸Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ понимают ES5, но не ES6. ПоÑтому мы будем иÑпользовать инÑтрумент, называемый Babel, чтобы преобразовать файлы ES6 в ES5 формат. Чтобы запуÑкать Babel, мы будем иÑпользовать Gulp - менеджер задач. Ðто похоже на Ñоздание задач, раÑположенных в `scripts` файла `package.json`, но напиÑание задач в JS файле проще и понÑтнее чем в JSON, поÑтому уÑтановим Gulp и плагин Babel Ð´Ð»Ñ Ð½ÐµÐ³Ð¾. +Мы начинаем иÑпользовать ÑинтакÑÐ¸Ñ ES6, значительно более продвинутый отноÑительно "Ñтарого" ES5. Ð’Ñе браузеры и JS Ð¾ÐºÑ€ÑƒÐ¶ÐµÐ½Ð¸Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ понимают ES5, но не ES6. ПоÑтому мы будем иÑпользовать инÑтрумент, называемый Babel, чтобы преобразовать файлы ES6 в ES5 формат. Чтобы запуÑтить Babel, мы будем иÑпользовать Gulp - менеджер задач. Ðто похоже на Ñоздание задач, раÑположенных в `scripts` файла `package.json`, но напиÑание задач в JS файле проще и понÑтнее чем в JSON, поÑтому уÑтановим Gulp и плагин Babel Ð´Ð»Ñ Ð½ÐµÐ³Ð¾. - ЗапуÑтите `yarn add --dev gulp` - ЗапуÑтите `yarn add --dev gulp-babel` - ЗапуÑтите `yarn add --dev babel-preset-latest` -- Ð’ `package.json`, добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем Ñледующим образом, что хотим иÑпользовать новейшую конфигурацию Babel: +- Ð’ `package.json`, добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel,Ñледующим образом: ```json "babel": { @@ -15,16 +15,16 @@ }, ``` -**Примечание**: Файл `.babelrc` в корне проекта так же может быть иÑпользован вмеÑто ÑвойÑтва `babel` в `package.json`. Ðо поÑкольку ÐºÐ¾Ñ€Ð½ÐµÐ²Ð°Ñ Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ Ð²Ð°ÑˆÐµÐ³Ð¾ проекта будет вÑе больше и больше раздуватьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени, лучше храните конфигурацию Babel в `package.json`, до тех пор, пока она не Ñтанет Ñлишком большой. +**Примечание**: Файл `.babelrc` в корне проекта так же может быть иÑпользован вмеÑто ÑвойÑтва `babel` в `package.json`. Ðо поÑкольку ÐºÐ¾Ñ€Ð½ÐµÐ²Ð°Ñ Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ Ð²Ð°ÑˆÐµÐ³Ð¾ проекта, Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени, будет вÑе больше и больше раздуватьÑÑ, лучше храните конфигурацию Babel в `package.json`, до тех пор, пока она не Ñтанет Ñлишком большой. -- ПеремеÑтите файл `index.js` в директорию `src`. Там вы будете пиÑать ES6 код. Рпапка `lib` будет меÑтом, куда ваш код будет компилироватьÑÑ Ð² ES5. Gulp и Babel позаботÑÑ‚ÑÑ Ð¾ ее Ñоздании. Уберите предыдущий, отноÑÑщийÑÑ Ðº `color`, код из `index.js`, и замените его на нечто проÑтое, например такое: +- ПеремеÑтите файл `index.js` в директорию `src`. Там вы будете пиÑать ES6 код. Рпапка `lib` будет меÑтом, куда ваш код будет компилироватьÑÑ Ð² ES5. Gulp и Babel позаботÑÑ‚ÑÑ Ð¾ ее Ñоздании. Уберите предыдущий, отноÑÑщийÑÑ Ðº `color`, код из `index.js`, и замените его на нечто проÑтое, например: ```javascript const str = 'ES6'; console.log(`Hello ${str}`); ``` -Мы здеÑÑŒ иÑпользовали *шаблонную Ñтроку* - возможоÑть ES6 внедрÑть Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `${}` переменные прÑмо в Ñтроки без иÑÐ¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ ÐºÐ¾Ð½ÐºÐ°Ð½Ñ‚ÐµÐ½Ð°Ñ†Ð¸Ð¸. Обратите внимание, что шаблонные Ñтроки пишутÑÑ Ð² **\`обратных кавычках\`** +ЗдеÑÑŒ мы иÑпользовали *шаблонную Ñтроку* - возможоÑть ES6 внедрÑть Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `${}` переменные прÑмо в Ñтроки, без иÑÐ¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ð½Ð¸Ñ ÐºÐ¾Ð½ÐºÐ°Ð½Ñ‚ÐµÐ½Ð°Ñ†Ð¸Ð¸. Обратите внимание, что шаблонные Ñтроки пишутÑÑ Ð² **\`обратных кавычках\`** - Создайте `gulpfile.js`, Ñодержащий: @@ -64,21 +64,21 @@ gulp.task('default', ['watch', 'main']); ``` -Давайте приоÑтановимÑÑ Ð¸ разберемÑÑ Ñ Ñтим. +Давайте приоÑтановимÑÑ Ð¸ разберемÑÑ. -Gulp Ñам по Ñебе имеет довольно понÑтный API. Он определÑет задачи `gulp.task`, которые могут брать файы из `gulp.src`, применÑть к ним цепочки обработчиков - `.pipe()` (как `babel()` в нашем Ñлучае), и ÑохранÑть новые файлы в `gulp.dest`. Так же от может отÑлеживать (`gulp.watch`) Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð² файловой ÑиÑтеме. Одни задачи Gulp могут предварÑть запуÑк других, еÑли указать их в маÑÑиве (как `['build']`) в качеÑтве второго аргумента в `gulp.task`. Ð’ [документации](https://github.com/gulpjs/gulp) вÑе изложено более оÑновательно. +Gulp, Ñам по Ñебе, имеет довольно понÑтный API. Он определÑет задачи `gulp.task`, которые могут брать файы из `gulp.src`, применÑть к ним цепочки обработчиков - `.pipe()` (как `babel()` в нашем Ñлучае), и ÑохранÑть новые файлы в `gulp.dest`. Так же он может отÑлеживать (`gulp.watch`) Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð² файловой ÑиÑтеме. Одни задачи Gulp могут предварÑть запуÑк других, еÑли указать их в маÑÑиве (как `['build']`) в качеÑтве второго аргумента в `gulp.task`. Ð’ [документации](https://github.com/gulpjs/gulp) вÑе изложено более оÑновательно. Сначала мы определили объект `paths`, что бы хранить в одном меÑте вÑе нужные пути и иÑпользовать принцип "не повторÑйÑÑ" (DRY). Затем мы определили пÑть задач: `build` *(Ñоздать)*, `clean` *(очиÑтить)*, `main` *(оÑновнаÑ)*, `watch` *(наблюдать)*, and `default` *(по умолчанию)*. - `build` вызывает Babel, чтобы преобразовать вÑе иÑходные файлы из `src`, и запиÑывает результат в `lib`. -- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) или Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del` чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) -- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir` чтоб ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто лишь запуÑкает `node lib`. +- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del` чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) +- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением того, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir` чтоб ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте, еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто лишь запуÑкает `node lib`. - `watch` запуÑкает задчу `main`, когда проиÑходÑÑ‚ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð¾Ð¹ ÑиÑтемы Ð´Ð»Ñ ÑƒÐºÐ°Ð·Ð°Ð½Ð½Ñ‹Ñ… файлов. -- `default` - Ñто ÑÐ¿ÐµÑ†Ð¸Ð°Ð»ÑŒÐ½Ð°Ñ Ð·Ð°Ð´Ð°Ñ‡Ð°, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкаетÑÑ, еÑли вы проÑто вызываете `gulp` из CLI (коммандной Ñтроки). Ð’ нашем Ñлучае мы хотим Ñначала запуÑтить `main` (один раз), а затем `watch`. +- `default` - Ñто ÑÐ¿ÐµÑ†Ð¸Ð°Ð»ÑŒÐ½Ð°Ñ Ð·Ð°Ð´Ð°Ñ‡Ð°, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкаетÑÑ, еÑли вы проÑто вызываете `gulp` из CLI (коммандной Ñтроки). Ð’ нашем Ñлучае, мы хотим Ñначала запуÑтить `main` (один раз), а затем `watch`. -**Примечание**: Возможно вы удивитеÑÑŒ, что мы иÑпользуем ÑинтакÑÐ¸Ñ ES6 в Ñтом Gulp файле, Ñ…Ð¾Ñ‚Ñ Ð¾Ð½ не транÑпилируетÑÑ Ð² ES5 Ñо помощью Babel. Ðто потому, что мы иÑпользуем верÑию Node, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°ÐµÑ‚ возможноÑти ES6 из коробки (убедитеÑÑŒ, Что вы иÑпользуете верÑию Node > 6.5.0, запуÑтив `node -v`). +**Примечание**: Возможно вы удивилиÑÑŒ тому, что мы иÑпользуем ÑинтакÑÐ¸Ñ ES6 в Ñтом Gulp файле, Ñ…Ð¾Ñ‚Ñ Ð¾Ð½ не транÑпилируетÑÑ Ð² ES5 Ñо помощью Babel. Ðто потому, что мы иÑпользуем верÑию Node, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°ÐµÑ‚ возможноÑти ES6 из коробки (убедитеÑÑŒ, что вы иÑпользуете верÑию Node > 6.5.0, запуÑтив `node -v`). Отлично! ПоÑмотрим как Ñто работает. -- GitLab From 3a943bfc6b83440e2f494eb064d0fc20cd1a2e2e Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Mon, 7 Nov 2016 16:43:06 +0000 Subject: [PATCH 29/73] README.md edited online with Bitbucket --- tutorial/9-redux/README.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index 7e2c73c..4420c38 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -8,9 +8,9 @@ РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). -Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы продемонÑтрировать иÑпользование Redux наиболее доÑтупным ÑпоÑобом, наше приложение будет ÑоÑтоÑть и ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¸ кнопки. Сообщение будет показывать лает Ñобака или нет (изначально - нет), а кнопка будет заÑтавлÑть ее лаÑть, что должно будет отразитьÑÑ Ð² Ñообщении. +Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы продемонÑтрировать иÑпользование Redux наиболее доÑтупным ÑпоÑобом, наше приложение будет ÑоÑтоÑть из ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¸ кнопки. Сообщение будет показывать лает Ñобака или нет (изначально - нет), а кнопка будет заÑтавлÑть ее лаÑть, что должно будет отражатьÑÑ Ð² Ñообщении. -Ðам потребуетÑÑ Ð´Ð²Ð° пакета в Ñтой чаÑти: `redux` и `react-redux`. +Ð’ Ñтой чаÑти нам потребуетÑÑ Ð´Ð²Ð° пакета: `redux` и `react-redux`. - ЗапуÑтите `yarn add redux react-redux`. @@ -49,9 +49,9 @@ const dogReducer = (state = initialState, action) => { export default dogReducer; ``` -ЗдеÑÑŒ мы определили иÑходное ÑоÑтоÑние приложениÑ, ÑвлÑющееÑÑ Ð¾Ð±ÑŠÐµÐºÑ‚Ð¾Ð¼, Ñодержащим ÑвойÑтво `hasBarked`, уÑтановленное в `false`, и `dogReducer` - функцию, ответÑвенную за перемену ÑоÑтоÑÐ½Ð¸Ñ Ð² завиÑимоÑти от того, какое дейÑтвие произошло. СоÑтоÑние не может быть изменено в Ñтой функции, но должн быть возвращен Ñовершенно новый объект ÑоÑтоÑниÑ. +ЗдеÑÑŒ мы определили иÑходное ÑоÑтоÑние приложениÑ, ÑвлÑющееÑÑ Ð¾Ð±ÑŠÐµÐºÑ‚Ð¾Ð¼, Ñодержащим ÑвойÑтво `hasBarked`, уÑтановленное в `false`, и `dogReducer` - функцию, ответÑвенную за перемену ÑоÑтоÑниÑ, в завиÑимоÑти от того, какое дейÑтвие произошло. СоÑтоÑние не может быть изменено в Ñтой функции, но должен быть возвращен Ñовершенно новый объект ÑоÑтоÑниÑ. -- Изменим `app.jsx` чтобы Ñоздать *хранилище*. Можете заменить веÑÑŒ файл Ñледующим Ñодержимым: +- Изменим `app.jsx`, чтобы Ñоздать *хранилище*. Можете заменить веÑÑŒ файл Ñледующим Ñодержимым: ```javascript import React from 'react'; @@ -77,13 +77,13 @@ ReactDOM.render( ); ``` -Ðаше хранилище Ñоздано функцией Redux `createStore`, вполне наглÑдно. Объект хранилища ÑобираетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ ÐºÐ¾Ð¼Ð±Ð¸Ð½Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ Ð²ÑÑ… редюÑеров (в нашем Ñлучае одного) Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ функции Redux `combineReducers`. Каждый редюÑер в ней имеет имÑ, наш назовем `dog`. +Ðаше хранилище Ñоздано функцией Redux `createStore`, вполне наглÑдно. Объект хранилища ÑобираетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ ÐºÐ¾Ð¼Ð±Ð¸Ð½Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ Ð²Ñех редюÑеров (в нашем Ñлучае одного) Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ функции Redux `combineReducers`. Каждый редюÑер в ней имеет имÑ, наш назовем `dog`. Мы Ñделали доÑтаточно, в чаÑти, отноÑÑщейÑÑ Ðº чиÑтому Redux. -Теперь мы подключим Redux к React, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð°ÐºÐµÑ‚ `react-redux`. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы `react-redux`, могу передать хранилище в наше Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð½Ð° React, нам нужно обернуть вÑе приложение в компонент `<Provider>`. Ðтот компонент должен Ñодержать единÑтвенный дочерний Ñлемент, так что мы добавли `<div>`, и Ñтот `<div>` Ñодержит два оÑновных Ñлемента нашего приложениÑ: `BarkMessage` и `BarkButton`. +Теперь мы подключим Redux к React, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð°ÐºÐµÑ‚ `react-redux`. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы `react-redux`, мог передать хранилище в наше приложение на React, нам нужно обернуть вÑе приложение в компонент `<Provider>`. Ðтот компонент должен Ñодержать единÑтвенный дочерний Ñлемент, так что мы добавли `<div>`, и Ñтот `<div>` Ñодержит два оÑновных Ñлемента нашего приложениÑ: `BarkMessage` и `BarkButton`. -Как вы могли заметить в разделе `import`, мы импортируем `BarkMessage` and `BarkButton` из директории `containers`. Ð¡ÐµÐ¹Ñ‡Ð°Ñ Ñамое Ð²Ñ€ÐµÐ¼Ñ Ð¿Ñ€ÐµÐ´Ñтавить концепцию **Компонентов** и **Контейнеров**. +Как вы могли заметить, в разделе `import`, мы импортируем `BarkMessage` and `BarkButton` из директории `containers`. Ð¡ÐµÐ¹Ñ‡Ð°Ñ Ñамое Ð²Ñ€ÐµÐ¼Ñ Ð¿Ñ€ÐµÐ´Ñтавить концепцию **Компонентов** и **Контейнеров**. *Компоненты* - Ñто *"глупые"* компоненты React, в том ÑмыÑле, что они ничего не знают о ÑоÑтоÑнии Redux. *Контейнеры* - *"умные"*, знают о ÑоÑтоÑнии и о том, что мы ÑобираемÑÑ *подключитьÑÑ* (*connect*) к "глупым" компонентам. @@ -121,9 +121,9 @@ export default Message; ``` -Ðто примеры *"глупых"* компонентов. Они практичеÑки лишены логики и проÑто оборажают то, что потребуетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ передачи им **ÑвойÑтв** (props) React. ОÑновное отличие `button.jsx` от `message.jsx`, в том, что поÑледний Ñодержит **дейÑтвие** в качеÑтве одного из параметров. Ðто дейÑтвие Ñрабатывет по Ñобытию `onClick`. Ð’ контекÑте нашего приложениÑ, надпиÑÑŒ `Button` никогда не будет изменÑтьÑÑ, однако компонент `Message` должен отражать ÑоÑтоÑние нашего приложениÑ, и будет изменÑтьÑÑ Ð½Ð° оÑнове Ñтого. +Ðто примеры *"глупых"* компонентов. Они практичеÑки лишены логики и проÑто оборажают то, что потребуетÑÑ, путем передачи им **ÑвойÑтв** (props) React. ОÑновное отличие `button.jsx` от `message.jsx`, в том, что поÑледний Ñодержит **дейÑтвие** в качеÑтве одного из параметров. Ðто дейÑтвие Ñрабатывет по Ñобытию `onClick`. Ð’ контекÑте нашего приложениÑ, надпиÑÑŒ `Button` никогда не будет изменÑтьÑÑ, однако, компонент `Message` должен отражать ÑоÑтоÑние нашего Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸ будет изменÑтьÑÑ Ð½Ð° оÑнове Ñтого. -ОпÑть же, *компоненты* ничего не знают о Redux **дейÑтвиÑÑ…** или о **ÑоÑтоÑнии** нашего приложениÑ, вот почему мы ÑобираемÑÑ Ñоздать "умные" **контейнеры** которые "подведут" нужные *дейÑтвиÑ* и *данные* к Ñтим двум "глупым" компонентам. +ОпÑть же, *компоненты* ничего не знают о Redux **дейÑтвиÑÑ…** или о **ÑоÑтоÑнии** нашего приложениÑ. Вот почему мы ÑобираемÑÑ Ñоздать "умные" **контейнеры** которые "подведут" нужные *дейÑтвиÑ* и *данные* к Ñтим двум "глупым" компонентам. - Ð’ `containers`, Ñоздайте Ñледующие файлы: -- GitLab From e9c13b7c22d9fca2850fb59a90f71d5cfa1b6288 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Tue, 8 Nov 2016 00:46:43 +0700 Subject: [PATCH 30/73] pre-release --- README.md | 24 ++++++++--------- .../10-immutable-redux-improvements/README.md | 3 +-- .../11-testing-mocha-chai-sinon/README.md | 26 +++++++++---------- tutorial/12-flow/README.md | 6 ++--- tutorial/2-packages/README.md | 2 +- tutorial/4-es6-syntax-class/README.md | 13 +++++----- tutorial/5-es6-modules-syntax/README.md | 12 ++++----- tutorial/6-eslint/README.md | 22 ++++++++-------- tutorial/7-client-webpack/README.md | 2 +- tutorial/8-react/README.md | 2 +- tutorial/9-redux/README.md | 20 +++++++------- 11 files changed, 66 insertions(+), 66 deletions(-) diff --git a/README.md b/README.md index dee43c4..3401419 100644 --- a/README.md +++ b/README.md @@ -13,14 +13,13 @@ [](https://travis-ci.org/verekia/js-stack-from-scratch) ->Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии (@verekia). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. +>Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@verekia](https://twitter.com/verekia)). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. -## Работа над переводом идет. Ðто не Ð¾ÐºÐ¾Ð½Ñ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð²ÐµÑ€ÑиÑ! +## Перевод практичеÑки завершен. Идет правка текÑта. -перевод терминов Ñм. [Definitions.md](Definitions.md) - -[вопроÑÑ‹, замечаниÑ, предложениÑ](https://github.com/UsulPro/js-stack-from-scratch/issues) +[будем благодарны за помощь в обнаружении опечаток и неточноÑтей](https://github.com/UsulPro/js-stack-from-scratch/issues) +**Далее текÑÑ‚ автора** Добро пожаловать в мое Ñовременное руководÑтво по Ñтеку технологий JavaScript: **Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ** @@ -30,7 +29,7 @@ ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. -Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". +Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React, и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. @@ -54,7 +53,7 @@ [6 - ESLint](/tutorial/6-eslint) -[7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) +[7 - КлиентÑкое приложение на оÑнове Webpack](/tutorial/7-client-webpack) [8 - React](/tutorial/8-react) @@ -66,21 +65,22 @@ [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -## Далее Ñледует +## Далее планируетÑÑ: Production / development окружение, Express, React Router, Серверный Рендеринг, СтилизациÑ, Enzyme, Приемы Git. ## Переводы на другие Ñзыки -- [Chinese](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10) -- [Italian](https://github.com/fbertone/js-stack-from-scratch) by [Fabrizio Bertone](https://github.com/fbertone) +- [КитайÑкий](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) ЕÑли вы хотите добавить перевод на другой Ñзык, пожалуйÑта читайте [рекомендации по переводу](/how-to-translate.md) чтобы начать! -## Контакты +## Ð¡Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð¡Ð¾Ð·Ð´Ð°Ð½Ð¾ [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/). -Переведено [@usulpro](https://github.com/UsulPro) - [sm-react](https://github.com/sm-react) +Переведено [@usulpro](https://github.com/UsulPro) - [react-theming](https://github.com/sm-react/react-theming) ЛицензиÑ: MIT diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index 69c2d38..8e3f539 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -93,11 +93,10 @@ export const MAKE_BARK = 'MAKE_BARK'; export const makeBark = createAction(MAKE_BARK, () => true); ``` -`redux-actions` оÑновываетÑÑ Ð½Ð° молели [Flux Standard Action](https://github.com/acdlite/flux-standard-action),так же, как и дейÑтвиÑ, которые мы Ñоздавали до Ñтого, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ `redux-actions` будет беÑшовной, еÑли вы придерживаетеÑÑŒ Ñтой модели. +`redux-actions` оÑновываетÑÑ Ð½Ð° модели [Flux Standard Action](https://github.com/acdlite/flux-standard-action),так же, как и дейÑтвиÑ, которые мы Ñоздавали до Ñтого, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ `redux-actions` будет беÑшовной, еÑли вы придерживаетеÑÑŒ Ñтой модели. - Ðе забудьте запуÑтить `yarn add redux-actions`. Следующий раздел: [11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) Ðазад в [предыдущий раздел](/tutorial/9-redux) или [Содержание](/../../). - diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 810d483..5cd74c5 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -6,7 +6,7 @@ - Ð’ `src/test/client`, Ñоздайте файл `state-test.js` , в котором мы будем теÑтировать жизненный цикл нашего Redux приложеиÑ. -Мы будем иÑпользовать [Mocha](http://mochajs.org/) в качеÑве оÑновного фреймворка Ð´Ð»Ñ Ñ‚ÐµÑтированиÑ. Mocha проÑÑ‚ в иÑпользовании, имеет множеÑтво возможноÑтей, и на данный момент [Ñамый популÑрный фреймворк Ð´Ð»Ñ Ñ‚ÐµÑтированиÑ](http://stateofjs.com/2016/testing/). Он модульный и очень гибкий. Ð’ чаÑтноÑти, он позволÑет иÑпользовать любые библиотеки утверждений (assertion) на ваше пожелание. [Chai](http://chaijs.com/) - Ð·Ð°Ð¼ÐµÑ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð±Ð¸Ð±Ð»Ð¸Ð¾Ñ‚ÐµÐºÐ° утверждений, Ð¸Ð¼ÐµÑŽÑ‰Ð°Ñ Ð¼Ð½Ð¾Ð³Ð¾ доÑтупных [плагинов](http://chaijs.com/plugins/) и позволÑÑŽÑ‰Ð°Ñ Ð²Ð°Ð¼ выбирать между различными ÑтилÑми утверждений. +Мы будем иÑпользовать [Mocha](http://mochajs.org/) в качеÑве оÑновного фреймворка Ð´Ð»Ñ Ñ‚ÐµÑтированиÑ. Mocha проÑÑ‚ в иÑпользовании, имеет множеÑтво возможноÑтей, и на данный момент [Ñамый популÑрный фреймворк Ð´Ð»Ñ Ñ‚ÐµÑтированиÑ](http://stateofjs.com/2016/testing/). Он модульный и очень гибкий. Ð’ чаÑтноÑти, он позволÑет иÑпользовать любые библиотеки утверждений (assertion) по вашему желанию. [Chai](http://chaijs.com/) - Ð·Ð°Ð¼ÐµÑ‡Ð°Ñ‚ÐµÐ»ÑŒÐ½Ð°Ñ Ð±Ð¸Ð±Ð»Ð¸Ð¾Ñ‚ÐµÐºÐ° утверждений, Ð¸Ð¼ÐµÑŽÑ‰Ð°Ñ Ð¼Ð½Ð¾Ð³Ð¾ доÑтупных [плагинов](http://chaijs.com/plugins/) и позволÑÑŽÑ‰Ð°Ñ Ð²Ð°Ð¼ выбирать между различными ÑтилÑми утверждений. - УÑтановим Mocha и Chai выполним `yarn add --dev mocha chai` @@ -44,9 +44,9 @@ describe('App State', () => { ``` Хорошо, давайте вÑе Ñто проанализируем. -Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, что бы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавили Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. +Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, что бы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. -ТеÑты Mocha уÑтроены наподобие дерева. Ð’ нашем Ñлучае, мы хотим протеÑтировать функцию `makeBark`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð° воздейÑтвовать на атрибут `dog` ÑоÑтоÑÐ½Ð¸Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ приложениÑ, поÑтому имеет ÑмыÑл иÑпользовать Ñледующую иерархию теÑтов: `App State > Dog > makeBark`, что мы и опиÑали иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ `describe()`. `it()` - Ñто ÑобÑтвенно, теÑÑ‚Ð¸Ñ€ÑƒÑŽÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, а `beforeEach()` - Ñто функциÑ, Ð²Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼Ð°Ñ Ð¿ÐµÑ€ÐµÐ´ каждым вызовом теÑта `it()`. Ð’ нашем Ñлучае мы хотим иметь новую чиÑтую верÑию хранилища перед запуÑком каждого теÑта. Мы обÑвили переменную `store` в начале файла, поÑкольку она нам пригодитÑÑ Ð² кадом теÑте. +ТеÑты Mocha уÑтроены наподобие дерева. Ð’ нашем Ñлучае, мы хотим протеÑтировать функцию `makeBark`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð° воздейÑтвовать на атрибут `dog` ÑоÑтоÑÐ½Ð¸Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ приложениÑ, поÑтому имеет ÑмыÑл иÑпользовать Ñледующую иерархию теÑтов: `App State > Dog > makeBark`, что мы и опиÑали иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ `describe()`. `it()` - Ñто ÑобÑтвенно, теÑÑ‚Ð¸Ñ€ÑƒÑŽÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, а `beforeEach()` - Ñто функциÑ, Ð²Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼Ð°Ñ Ð¿ÐµÑ€ÐµÐ´ каждым вызовом теÑта `it()`. Ð’ нашем Ñлучае, мы хотим иметь новую чиÑтую верÑию хранилища перед запуÑком каждого теÑта. Мы обÑвили переменную `store` в начале файла, поÑкольку она нам пригодитÑÑ Ð² каждом теÑте. ТеÑÑ‚ `makeBark` вполне понÑтен, а Ñтрока Ñ Ð¾Ð¿Ð¸Ñанием в `it()` делает его еще ÑÑнее: мы проверÑем, что `hasBarked` менÑетÑÑ Ñ `false` на `true` поÑле вызова `makeBark`. @@ -74,7 +74,7 @@ gulp.task('test', ['build'], () => Как вы можете видеть, теÑты запуÑкаютÑÑ Ð½Ð° транÑпилированом коде из папки `lib`, вот почему задачу `test` предварÑет запуÑк `build`. `build`, в Ñвою очередь, предварÑетÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `lint`, а Ñам `test` мы будем запуÑкать перед `main`, что в итоге даÑÑ‚ нам Ñледующий каÑкад задач Ð´Ð»Ñ `default`: `lint` > `build` > `test` > `main`. -`build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. +`build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. -удалить Ñтрочку? - УÑтановите в `main` предварительный запуÑк команды `test`: @@ -82,7 +82,7 @@ gulp.task('test', ['build'], () => gulp.task('main', ['test'], () => /* ... */ ); ``` -- Ð’ `package.json`, текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test` чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ еÑли вÑе теÑты будут пройдены. +- Ð’ `package.json`, замените текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test`, чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ еÑли вÑе теÑты будут пройдены. - ЗапуÑтите `yarn test` или `yarn start`, и должны будут выйти результаты ваших теÑтов, предпочтительно зеленые. @@ -90,7 +90,7 @@ gulp.task('main', ['test'], () => /* ... */ ); Ð’ некоторых ÑлучаÑÑ…, мы хотим иметь возможноÑть *Ñмулировать* некоторые вещи в юнит теÑтах. Ðапример, давайте Ñкажем, у Ð½Ð°Ñ ÐµÑть Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ `deleteEverything`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñодержит вызов `deleteDatabases()`. ЗапуÑк `deleteDatabases()` вызовет много побочных Ñффектов, которые нам абÑолютно не желательны, во Ð²Ñ€ÐµÐ¼Ñ Ñ‚ÐµÑтированиÑ. -[Sinon](http://sinonjs.org/) - библиотека теÑтированиÑ, Ð¿Ñ€ÐµÐ´Ð»Ð°Ð³Ð°ÑŽÑ‰Ð°Ñ **Заглушки** (и многие другие вещи), позволÑет нейтрализовать `deleteDatabases` и проÑто мониторить ее не запуÑÐºÐ°Ñ Ð½Ð° Ñамом деле. Таким образом, к примеру, мы можем теÑтировать была ли она запущена или Ñ ÐºÐ°ÐºÐ¸Ð¼Ð¸ параметрами она была запущена. Обычно, Ñто очень полезно ÑмулÑции или иÑÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ AJAX вызовов, которые могут вызвать побочные Ñффекты на Ñервере. +[Sinon](http://sinonjs.org/) - библиотека теÑтированиÑ, Ð¿Ñ€ÐµÐ´Ð»Ð°Ð³Ð°ÑŽÑ‰Ð°Ñ **Заглушки** (и многие другие вещи), позволÑет нейтрализовать `deleteDatabases` и проÑто мониторить ее, не запуÑÐºÐ°Ñ Ð½Ð° Ñамом деле. Таким образом, к примеру, мы можем проверить была ли она запущена или Ñ ÐºÐ°ÐºÐ¸Ð¼Ð¸ параметрами она была запущена. Обычно, Ñто очень полезно Ð´Ð»Ñ ÑмулÑции или иÑÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ AJAX вызовов, которые могут вызвать побочные Ñффекты на Ñервере. Ð’ рамках нашего приложениÑ, мы добавим метод `barkInConsole` в клаÑÑ `Dog` в файле `src/shared/dog.js`: @@ -113,7 +113,7 @@ class Dog { export default Dog; ``` -ЕÑли мы запуÑтим `barkInConsole` в нашем юнит теÑте, то `console.log()` выведет что-то в терминал. Давайте мы будем Ñто раÑÑматривать, как нежелательный побочный Ñффект в рамках нашего юнит теÑта. Тем не менее мы желаем, знать была ли `console.log()` *нормально запущена*, и какие параметры были *переданы ей при вызове*. +ЕÑли мы запуÑтим `barkInConsole` в нашем юнит теÑте, то `console.log()` выведет что-то в терминал. Давайте мы будем Ñто раÑÑматривать, как нежелательный побочный Ñффект в рамках нашего юнит теÑта. Тем не менее, мы желаем знать, была ли `console.log()` *нормально запущена*, и какие параметры были *переданы ей при вызове*. - Создайте новый файл `src/test/shared/dog-test.js` и добавьте туда Ñледующее: @@ -143,16 +143,16 @@ describe('Shared', () => { }); ``` -Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, поÑволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° таких заглушках и им подобных. +Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° и им подобных заглушках. -- ЗапуÑтите `yarn add --dev sinon sinon-chai` чтобы уÑтановить Ñти библиотеки. +- ЗапуÑтите `yarn add --dev sinon sinon-chai`, чтобы уÑтановить Ñти библиотеки. -Что здеÑÑŒ нового? Ðу прежде вÑего, мы вызываем `chai.use(sinonChai)`, чтобы активировать плагин Ð´Ð»Ñ Chai. Затем, вÑÑ Ð¼Ð°Ð³Ð¸Ñ Ð¿Ñ€Ð¾Ð¸Ñходит внутри `it()`: `stub(console, 'log')` нейтрализует `console.log` и Ñледит за ней. Когда `new Dog('Test Toby').barkInConsole()` выполнен, `console.log` должна была бы Ñработать. Мы проверÑем Ñтот вызов `console.log` Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `console.log.should.have.been.calledWith()`, а затем, воÑÑтанавливаем Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `restore` нейтрализированную `console.log`, чтобы позволить ей дальше работать нормльно. +Что здеÑÑŒ нового? Ðу прежде вÑего, мы вызываем `chai.use(sinonChai)`, чтобы активировать плагин Ð´Ð»Ñ Chai. Затем, вÑÑ Ð¼Ð°Ð³Ð¸Ñ Ð¿Ñ€Ð¾Ð¸Ñходит внутри `it()`: `stub(console, 'log')` нейтрализует `console.log` и Ñледит за ней. Во Ð²Ñ€ÐµÐ¼Ñ Ð²Ñ‹Ð¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ `new Dog('Test Toby').barkInConsole()`, `console.log` должна была бы Ñработать. Мы проверÑем Ñтот вызов `console.log` Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `console.log.should.have.been.calledWith()`, а затем, воÑÑтанавливаем Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ `restore` нейтрализированную `console.log`, чтобы позволить ей дальше работать нормльно. -**Важное замечание**: Заглушать `console.log` не рекомендуетÑÑ, потому, что еÑли теÑÑ‚ провалитÑÑ, то `console.log.restore()` никогда не запуÑтитÑÑ, и Ñледовательно `console.log` оÑтанетÑÑ Ð½ÐµÐ¸Ñправной Ð´Ð»Ñ Ð²Ñех оÑтальных команд, выполнÑемых в терминале. При Ñтом даже не выйдет ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ð± ошибке Ð¿Ñ€Ð¾Ñ…Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ Ñ‚ÐµÑта, так что вы оÑтанетеÑÑŒ Ñ Ð¾Ñ‡ÐµÐ½ÑŒ малой информацией о том, что же произошло. Ðто может оказатьÑÑ Ð´Ð¾Ñтаточно не приÑтно. Тем не менее, Ñто хороший пример, иллюÑтрирующий применение заглушек в Ñтом проÑтом приложении. +**Важное замечание**: Заглушать `console.log` не рекомендуетÑÑ, потому что, еÑли теÑÑ‚ провалитÑÑ, то `console.log.restore()` никогда не запуÑтитÑÑ, и Ñледовательно `console.log` оÑтанетÑÑ Ð½ÐµÐ¸Ñправной Ð´Ð»Ñ Ð²Ñех оÑтальных команд, выполнÑемых в терминале. При Ñтом, даже не выйдет ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ð± ошибке Ð¿Ñ€Ð¾Ñ…Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ Ñ‚ÐµÑта, так что вы оÑтанетеÑÑŒ Ñ Ð¾Ñ‡ÐµÐ½ÑŒ малой информацией о том, что же произошло. Ðто может оказатьÑÑ Ð´Ð¾Ñтаточно не приÑтно. Тем не менее, Ñто хороший пример, иллюÑтрирующий применение заглушек в Ñтом проÑтом приложении. -ЕÑли в Ñтом разделе прошло хорошо, то у Ð²Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð¾ быть два пройденых теÑта. +ЕÑли в Ñтом разделе вÑе прошло хорошо, то у Ð²Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð¾ быть два пройденых теÑта. Следующий раздел: [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). \ No newline at end of file diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index cfcf5c1..9aa06db 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -57,7 +57,7 @@ class Dog { export default Dog; ``` -Комментарий `// @flow` говорит Flow, что мы хотим проверÑть типы Ð´Ð»Ñ Ñтого файла. Сами анатации Flow предварÑютьÑÑ Ð´Ð²Ð¾ÐµÑ‚Ð¾Ñ‡Ð¸ÐµÐ¼ и обычно добавлÑютьÑÑ Ð¿Ð¾Ñле параметра функции или имени функции. ПодробноÑти Ñмотрите в документации. +Комментарий `// @flow` говорит Flow, что мы хотим проверÑть типы Ð´Ð»Ñ Ñтого файла. Сами аннотации Flow предварÑÑŽÑ‚ÑÑ Ð´Ð²Ð¾ÐµÑ‚Ð¾Ñ‡Ð¸ÐµÐ¼ и обычно добавлÑÑŽÑ‚ÑÑ Ð¿Ð¾Ñле параметра функции или имени функции. ПодробноÑти Ñмотрите в документации. Теперь, еÑли вы запуÑтите `yarn start`, Flow будет работать, но ESLint начнет жаловатьÑÑ, что иÑпользуетÑÑ Ð½ÐµÑтандартный ÑинтакÑиÑ. ПоÑкольку парÑер Babel отлично ÑправлÑетÑÑ Ñ Ð¿Ð°Ñ€Ñингом Flow контента (Ð±Ð»Ð°Ð³Ð¾Ð´Ð°Ñ€Ñ ÑƒÑтановленному нами плагину `babel-preset-flow`), было бы здорово, еÑли бы ESLint мог опиратьÑÑ Ð½Ð° парÑер Babel, вмеÑто того, чтобы пытатьÑÑ Ñамому понÑть аннотации Flow. Ðто возможно при иÑпользовании пакета `babel-eslint`. Давайте Ñделаем Ñто. @@ -78,7 +78,7 @@ export default Dog; - Теперь вы можете добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запуÑтить `yarn test` или `yarn start`, и добавлÑть аннотации везде, где Ñтого попроÑит Flow. -Ð’Ñ‹ можете обнаружить неожиданный Ñлучай (результат) в `src/client/component/message.jsx`: (предлажение кривое надо заменить - неожиданную проблему?) +Ð’Ñ‹ можете обнаружить неожиданный пример в `src/client/component/message.jsx`: ```javascript const Message = ({ message }: { message: string }) => <div>{message}</div>; @@ -106,4 +106,4 @@ import * as Immutable from 'immutable'; Теперь, у Ð²Ð°Ñ ÐµÑть "пуленепробиваемый" код, который проанализирован, протипизирован и протеÑтирован - Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð°Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ð°! -Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/README.md). \ No newline at end of file diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index 83ef30e..d5ebf1e 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -6,7 +6,7 @@ Откройте `package.json`, чтобы увидеть, как Yarn автоматичеÑки добавил `color` в `dependencies` (завиÑимоÑти). -Сам пакет находитÑÑ Ð² Ñозданной Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ папке `node_modules`. +Сам пакет находитÑÑ Ð² Ñозданной папке `node_modules`, в которой хранÑÑ‚ÑÑ Ð¸Ð¼Ð¿Ð¾Ñ€Ñ‚Ð¸Ñ€ÑƒÐµÐ¼Ñ‹Ðµ пакеты. - Добавьте `node_modules/` в файл `.gitignore` (и запуÑтите `git init`, чтобы Ñоздать новый репозиторий, еÑли вы еще Ñтого не Ñделали) diff --git a/tutorial/4-es6-syntax-class/README.md b/tutorial/4-es6-syntax-class/README.md index 64ab11e..f976a31 100644 --- a/tutorial/4-es6-syntax-class/README.md +++ b/tutorial/4-es6-syntax-class/README.md @@ -1,6 +1,6 @@ -# 4 - ИÑпользование ES6 ÑинтактиÑа ~~и клаÑÑов~~ +# 4 - ИÑпользование ES6 клаÑÑов -- Создайте новый файл, `src/dog.js`, Ñодержащий Ñделующий ES6 клаÑÑ: +- Создайте новый файл `src/dog.js`, Ñодержащий Ñледующий ES6 клаÑÑ: ```javascript class Dog { @@ -16,9 +16,9 @@ class Dog { module.exports = Dog; ``` -Ðто не должно Ð²Ð°Ñ Ñмущать, еÑли вы ÑталкивалиÑÑŒ Ñ ÐžÐžÐŸ в любом другом Ñзыке программированиÑ, Ñ…Ð¾Ñ‚Ñ Ð² JavaScript клаÑÑÑ‹ поÑвилиÑÑŒ отноÑительно недавно. КлаÑÑ Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹Ñтвует Ñ Ð¾ÐºÑ€ÑƒÐ¶Ð°ÑŽÑ‰Ð¸Ð¼ миром, путем Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ `module.exports`. +Ðто не должно Ð²Ð°Ñ Ñмутить, еÑли вы ÑталкивалиÑÑŒ Ñ ÐžÐžÐŸ в любом другом Ñзыке программированиÑ, Ñ…Ð¾Ñ‚Ñ Ð² JavaScript клаÑÑÑ‹ поÑвилиÑÑŒ отноÑительно недавно. КлаÑÑ Ð²Ð·Ð°Ð¸Ð¼Ð¾Ð´ÐµÐ¹Ñтвует Ñ Ð¾ÐºÑ€ÑƒÐ¶Ð°ÑŽÑ‰Ð¸Ð¼ миром, путем Ð¾Ð¿Ñ€ÐµÐ´ÐµÐ»ÐµÐ½Ð¸Ñ `module.exports`. -Обычно в ES6 коде приÑутÑтвуют клаÑÑÑ‹, `const` и `let`, "шаблонные Ñтроки" (в обратных кавычках) как в функции `bark()` и Ñтрелочные функции (`(param) => { console.log('Hi'); }`), Ñ…Ð¾Ñ‚Ñ Ð¼Ñ‹ их не иÑпользуем в нашем примере. +Обычно в ES6 коде приÑутÑтвуют клаÑÑÑ‹, `const` и `let`, "шаблонные Ñтроки" (в обратных кавычках) как в функции `bark()` и Ñтрелочные функции (`(param) => { console.log('Hi'); }`) (поÑледнее мы не иÑпользуем в нашем примере). Ð’ `src/index.js`, напишите Ñледующее: @@ -29,11 +29,12 @@ const toby = new Dog('Toby'); console.log(toby.bark()); ``` -Как вы можете видеть в отличие от ~~community-made~~ пакета `color`, который мы иÑпользовали ранее, когда мы подключаем один из наших файлов, мы иÑпользуем `./` в `require()`. + +Как вы видите, в отличие от Ñозданного ÑообщеÑтвом пакета `color`, который мы иÑпользовали ранее, когда мы подключаем один из наших файлов, мы иÑпользуем `./` в `require()`. - ЗапуÑтите `yarn start` и должно отобразитьÑÑ 'Wah wah, I am Toby'. -- ПоÑмотрите на код Ñгенерированный в директории `lib`, чтобы увидеть как он выглÑдит в Ñкомпилированном виде (`var` вмеÑто `const`, например). +- ПоÑмотрите на код Ñгенерированный в директории `lib`, чтобы увидеть как он выглÑдит в Ñкомпилированном виде (например `var` вмеÑто `const`). Следующий раздел: [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 14018d2..4b5ccdf 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -4,7 +4,7 @@ Ð’ `dog.js`, мы также заменим `module.exports = Dog` на `export default Dog`. -Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, вмеÑто Ñтого, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñ‚Ð°ÐºÐ¸Ð¼ образом: +Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ. Таким образом: ```javascript export default class { @@ -18,17 +18,17 @@ export default class { } ``` -Ð’Ñ‹ возможно уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² `import` в `index.js` Ñовершенно по вашему уÑмотрению. Вполне будет работать: +Ð’Ð’Ñ‹ возможно уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² Ñтроке`import` файла `index.js` абÑолютно по вашему уÑмотрению. Вполне будет работать: ```javascript import Cat from './dog'; const toby = new Cat('Toby'); ``` -Очевидно, что в оÑновном вы будете вÑегда иÑпользовать тоже Ð¸Ð¼Ñ Ñ‡Ñ‚Ð¾ и Ð¸Ð¼Ñ ÐºÐ»Ð°ÑÑа/Ð¼Ð¾Ð´ÑƒÐ»Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ð¾Ð³Ð¾ вы импортируете. -Случай, когда вы не будете делать так, Ñто когда мы ~~иÑпользовали~~ `const babel = require('gulp-babel')` в нашем Gulp файле. +Очевидно, что в оÑновном вы будете иÑпользовать тоже имÑ, что и Ð¸Ð¼Ñ ÐºÐ»Ð°ÑÑа/Ð¼Ð¾Ð´ÑƒÐ»Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ñ‹Ð¹ вы импортируете. +Один из примеров когда можно Ñделать по-другому, Ñто то как мы применили `const babel = require('gulp-babel')` в нашем Gulp файле. -Так что наÑчет тех `require()` в нашем `gulpfile.js`? Можем мы иÑпользовать `import` вмеÑто них? ПоÑледнÑÑ Ð²ÐµÑ€ÑÐ¸Ñ Node поддерживает большую чаÑть возможноÑтей ES6, но не ES6 модули пока-что. К ÑчаÑтью Ð´Ð»Ñ Ð½Ð°Ñ, Gulp ÑпоÑобен призывать Babel на помощь. ЕÑли мы переименуем наш `gulpfile.js` в `gulpfile.babel.js`, Babel позаботитÑÑ Ð¾ передаче импортируемых через `import` модулей в Gulp. +Так что наÑчет `require()` в нашем `gulpfile.js`? Можем ли мы иÑпользовать вмеÑто них `import` ? ПоÑледнÑÑ Ð²ÐµÑ€ÑÐ¸Ñ Node поддерживает большую чаÑть возможноÑтей ES6, но пока что не ES6 модули. К ÑчаÑтью Ð´Ð»Ñ Ð½Ð°Ñ, Gulp ÑпоÑобен призывать Babel на помощь. ЕÑли мы переименуем наш `gulpfile.js` в `gulpfile.babel.js`, Babel позаботитÑÑ Ð¾ передаче импортируемых через `import` модулей в Gulp. - Переименуйте ваш `gulpfile.js` в `gulpfile.babel.js` @@ -43,7 +43,7 @@ import { exec } from 'child_process'; Обратите внимение на "ÑинтакÑичеÑкий Ñахар", позволÑющий получать `exec` напрÑмую из `child_process`. Довольно Ñлегантно! -- `yarn start` должно по прежнему выводить "Wah wah, I am Toby". +- `yarn start` должно по прежнему выдавать "Wah wah, I am Toby". Следующий раздел: [6 - ESLint](/tutorial/6-eslint) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index aeecc4e..c021ecb 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -1,12 +1,12 @@ # 6 - ESLint -Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (англ. lint - прим. переводчика) чтобы перехватывать потенциальные проблемы. ESLint - предпочтительный анализатор кода (англ. linter - прим. переводчика) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. +Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (англ. lint - прим. переводчика), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (англ. linter - прим. переводчика) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. - ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` Как вы видите, вы можете уÑтановить неÑколько пакетов одной командой. Как обычно, они вÑе добавÑÑ‚ÑÑ Ð² ваш `package.json`. -Ð’ `package.json`, добавьте ÑвойÑтво `eslintConfig` Ñ Ñ‚Ð°ÐºÐ¸Ð¼ Ñодержанием: +Ð’ `package.json`, добавьте ÑвойÑтво `eslintConfig` Ñо Ñледующим Ñодержанием: ```json "eslintConfig": { "extends": "airbnb", @@ -15,11 +15,11 @@ ] }, ``` -Ð’ разделе `plugins` мы Ñообщаем ESLint что иÑпользуем ÑинтакиÑÐ¸Ñ ES6 `import`. +Ð’ разделе `plugins` мы Ñообщаем ESLint, что иÑпользуем ÑинтакиÑÐ¸Ñ ES6 `import`. -**Замечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. +**Примечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. -Мы Ñоздадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкает ESLint Ð´Ð»Ñ Ð½Ð°Ñ. ПоÑтому уÑтановим также плагин ESLint Ð´Ð»Ñ Gulp: +Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. ПоÑтому уÑтановим плагин ESLint Ð´Ð»Ñ Gulp: (Ð”Ð»Ñ Ñтого также уÑтановим плагин ESLint Ð´Ð»Ñ Gulp) - запуÑтите `yarn add --dev gulp-eslint` @@ -47,7 +47,7 @@ gulp.task('lint', () => { }); ``` -ЗдеÑÑŒ мы говорм Gulp, что Ð´Ð»Ñ Ñтой задачи мы хотим подключить `gulpfile.babel.js` и JS файлы, раÑположенные в `src`. +ЗдеÑÑŒ мы Ñообщаем Gulp, что Ð´Ð»Ñ Ñтой задачи хотим подключить `gulpfile.babel.js` и JS файлы, раÑположенные в `src`. Откорректируйте задачу `build` так, чтобы `lint` предварÑла ее запуÑк: @@ -57,9 +57,9 @@ gulp.task('build', ['lint', 'clean'], () => { }); ``` -- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (англ. linting errors - прим. переводчика) в Ñтом Gulp-файле и предупреждений об иÑпользовании `console.log()` в `index.js`. +- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (англ. linting errors - прим. переводчика) в Ñтом Gulp-файле и Ð¿Ñ€ÐµÐ´ÑƒÐ¿Ñ€ÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð¾Ð± иÑпользовании `console.log()` в `index.js`. -Один из видов ошибок будет: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (англ. build - прим. переводчика ) а какие нет. ПоÑтому мы немного поможем ESLint иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: +Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (англ. build - прим. переводчика ) а какие нет. ПоÑтому мы немного поможем ESLint иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: ```javascript /* eslint-disable import/no-extraneous-dependencies */ @@ -75,13 +75,13 @@ gulp.task('build', ['lint', 'clean'], () => { } ``` -Ðто нужно перепиÑать так: +Ðто нужно перепиÑать Ñледующим образом: ```javascript () => 1 ``` -Потому что, когда в ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, вы можете опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. +Потому что, когда в ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, можно опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. Так что давайте обновим Gulp-файл ÑоответÑтвенно: @@ -109,7 +109,7 @@ gulp.task('build', ['lint', 'clean'], () => - ЗапуÑтите `yarn start` - теперь вÑе Ñнова без ошибок. -**Замечание**: Ð’ Ñтой чаÑти мы работали Ñ ESLint через конÑоль. Ðто хорошо Ð´Ð»Ñ Ð¿Ð¾Ð¸Ñка ошибок во Ð²Ñ€ÐµÐ¼Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции / перед ~~публикацией~~, но вы, так же, возможно, захотите интегрировать его в вашу IDE. ÐЕ ИСПОЛЬЗУЙТЕ вÑтроенный в вашу Ñреду анализатор кода Ð´Ð»Ñ ES6. Сконфигурируйте ее так, чтобы Ð´Ð»Ñ Ñтого иÑпользовалиÑÑŒ модули, раÑположенные в директории `node_modules`. Ð’ Ñтом Ñлучае будут иÑпользоватьÑÑ Ð²Ñе наÑтройки вашего проекта, правила Airbnb и так далее. Иначе, вы получите лишь уÑредненный ES6 анализатор. +**Примечание**: Ð’ Ñтой чаÑти мы работали Ñ ESLint через конÑоль. Ðто хорошо Ð´Ð»Ñ Ð¿Ð¾Ð¸Ñка ошибок во Ð²Ñ€ÐµÐ¼Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции / перед ~~публикацией~~, но вы, так же, возможно, захотите интегрировать его в вашу IDE. ÐЕ ИСПОЛЬЗУЙТЕ вÑтроенный в вашу Ñреду анализатор кода Ð´Ð»Ñ ES6. Сконфигурируйте ее так, чтобы Ð´Ð»Ñ Ñтого иÑпользовалиÑÑŒ модули, раÑположенные в директории `node_modules`. Ð’ Ñтом Ñлучае будут иÑпользоватьÑÑ Ð²Ñе наÑтройки вашего проекта, правила Airbnb и так далее. Иначе, вы получите лишь уÑредненный ES6 анализатор. Следующий раздел: [7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 896ce7e..365cc2d 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -1,4 +1,4 @@ -# 7 - КлиентÑкое приложение ~на оÑнове Webpack~ +# 7 - КлиентÑкое приложение на оÑнове Webpack ## Структура нашего Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index d2db020..0f9f67f 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -59,4 +59,4 @@ clientEntryPoint: 'src/client/app.jsx', Следующий раздел: [9 - Redux](/tutorial/9-redux) -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). \ No newline at end of file diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index 7e2c73c..4d30928 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -8,9 +8,9 @@ РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). -Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы продемонÑтрировать иÑпользование Redux наиболее доÑтупным ÑпоÑобом, наше приложение будет ÑоÑтоÑть и ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¸ кнопки. Сообщение будет показывать лает Ñобака или нет (изначально - нет), а кнопка будет заÑтавлÑть ее лаÑть, что должно будет отразитьÑÑ Ð² Ñообщении. +Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы продемонÑтрировать иÑпользование Redux наиболее доÑтупным ÑпоÑобом, наше приложение будет ÑоÑтоÑть из ÑÐ¾Ð¾Ð±Ñ‰ÐµÐ½Ð¸Ñ Ð¸ кнопки. Сообщение будет показывать лает Ñобака или нет (изначально - нет), а кнопка будет заÑтавлÑть ее лаÑть, что должно будет отражатьÑÑ Ð² Ñообщении. -Ðам потребуетÑÑ Ð´Ð²Ð° пакета в Ñтой чаÑти: `redux` и `react-redux`. +Ð’ Ñтой чаÑти нам потребуетÑÑ Ð´Ð²Ð° пакета: `redux` и `react-redux`. - ЗапуÑтите `yarn add redux react-redux`. @@ -49,9 +49,9 @@ const dogReducer = (state = initialState, action) => { export default dogReducer; ``` -ЗдеÑÑŒ мы определили иÑходное ÑоÑтоÑние приложениÑ, ÑвлÑющееÑÑ Ð¾Ð±ÑŠÐµÐºÑ‚Ð¾Ð¼, Ñодержащим ÑвойÑтво `hasBarked`, уÑтановленное в `false`, и `dogReducer` - функцию, ответÑвенную за перемену ÑоÑтоÑÐ½Ð¸Ñ Ð² завиÑимоÑти от того, какое дейÑтвие произошло. СоÑтоÑние не может быть изменено в Ñтой функции, но должн быть возвращен Ñовершенно новый объект ÑоÑтоÑниÑ. +ЗдеÑÑŒ мы определили иÑходное ÑоÑтоÑние приложениÑ, ÑвлÑющееÑÑ Ð¾Ð±ÑŠÐµÐºÑ‚Ð¾Ð¼, Ñодержащим ÑвойÑтво `hasBarked`, уÑтановленное в `false`, и `dogReducer` - функцию, ответÑвенную за перемену ÑоÑтоÑниÑ, в завиÑимоÑти от того, какое дейÑтвие произошло. СоÑтоÑние не может быть изменено в Ñтой функции, но должен быть возвращен Ñовершенно новый объект ÑоÑтоÑниÑ. -- Изменим `app.jsx` чтобы Ñоздать *хранилище*. Можете заменить веÑÑŒ файл Ñледующим Ñодержимым: +- Изменим `app.jsx`, чтобы Ñоздать *хранилище*. Можете заменить веÑÑŒ файл Ñледующим Ñодержимым: ```javascript import React from 'react'; @@ -77,13 +77,13 @@ ReactDOM.render( ); ``` -Ðаше хранилище Ñоздано функцией Redux `createStore`, вполне наглÑдно. Объект хранилища ÑобираетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ ÐºÐ¾Ð¼Ð±Ð¸Ð½Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ Ð²ÑÑ… редюÑеров (в нашем Ñлучае одного) Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ функции Redux `combineReducers`. Каждый редюÑер в ней имеет имÑ, наш назовем `dog`. +Ðаше хранилище Ñоздано функцией Redux `createStore`, вполне наглÑдно. Объект хранилища ÑобираетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ ÐºÐ¾Ð¼Ð±Ð¸Ð½Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ Ð²Ñех редюÑеров (в нашем Ñлучае одного) Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ функции Redux `combineReducers`. Каждый редюÑер в ней имеет имÑ, наш назовем `dog`. Мы Ñделали доÑтаточно, в чаÑти, отноÑÑщейÑÑ Ðº чиÑтому Redux. -Теперь мы подключим Redux к React, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð°ÐºÐµÑ‚ `react-redux`. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы `react-redux`, могу передать хранилище в наше Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð½Ð° React, нам нужно обернуть вÑе приложение в компонент `<Provider>`. Ðтот компонент должен Ñодержать единÑтвенный дочерний Ñлемент, так что мы добавли `<div>`, и Ñтот `<div>` Ñодержит два оÑновных Ñлемента нашего приложениÑ: `BarkMessage` и `BarkButton`. +Теперь мы подключим Redux к React, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ Ð¿Ð°ÐºÐµÑ‚ `react-redux`. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы `react-redux`, мог передать хранилище в наше приложение на React, нам нужно обернуть вÑе приложение в компонент `<Provider>`. Ðтот компонент должен Ñодержать единÑтвенный дочерний Ñлемент, так что мы добавли `<div>`, и Ñтот `<div>` Ñодержит два оÑновных Ñлемента нашего приложениÑ: `BarkMessage` и `BarkButton`. -Как вы могли заметить в разделе `import`, мы импортируем `BarkMessage` and `BarkButton` из директории `containers`. Ð¡ÐµÐ¹Ñ‡Ð°Ñ Ñамое Ð²Ñ€ÐµÐ¼Ñ Ð¿Ñ€ÐµÐ´Ñтавить концепцию **Компонентов** и **Контейнеров**. +Как вы могли заметить, в разделе `import`, мы импортируем `BarkMessage` and `BarkButton` из директории `containers`. Ð¡ÐµÐ¹Ñ‡Ð°Ñ Ñамое Ð²Ñ€ÐµÐ¼Ñ Ð¿Ñ€ÐµÐ´Ñтавить концепцию **Компонентов** и **Контейнеров**. *Компоненты* - Ñто *"глупые"* компоненты React, в том ÑмыÑле, что они ничего не знают о ÑоÑтоÑнии Redux. *Контейнеры* - *"умные"*, знают о ÑоÑтоÑнии и о том, что мы ÑобираемÑÑ *подключитьÑÑ* (*connect*) к "глупым" компонентам. @@ -121,9 +121,9 @@ export default Message; ``` -Ðто примеры *"глупых"* компонентов. Они практичеÑки лишены логики и проÑто оборажают то, что потребуетÑÑ Ð¿ÑƒÑ‚ÐµÐ¼ передачи им **ÑвойÑтв** (props) React. ОÑновное отличие `button.jsx` от `message.jsx`, в том, что поÑледний Ñодержит **дейÑтвие** в качеÑтве одного из параметров. Ðто дейÑтвие Ñрабатывет по Ñобытию `onClick`. Ð’ контекÑте нашего приложениÑ, надпиÑÑŒ `Button` никогда не будет изменÑтьÑÑ, однако компонент `Message` должен отражать ÑоÑтоÑние нашего приложениÑ, и будет изменÑтьÑÑ Ð½Ð° оÑнове Ñтого. +Ðто примеры *"глупых"* компонентов. Они практичеÑки лишены логики и проÑто оборажают то, что потребуетÑÑ, путем передачи им **ÑвойÑтв** (props) React. ОÑновное отличие `button.jsx` от `message.jsx`, в том, что поÑледний Ñодержит **дейÑтвие** в качеÑтве одного из параметров. Ðто дейÑтвие Ñрабатывет по Ñобытию `onClick`. Ð’ контекÑте нашего приложениÑ, надпиÑÑŒ `Button` никогда не будет изменÑтьÑÑ, однако, компонент `Message` должен отражать ÑоÑтоÑние нашего Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸ будет изменÑтьÑÑ Ð½Ð° оÑнове Ñтого. -ОпÑть же, *компоненты* ничего не знают о Redux **дейÑтвиÑÑ…** или о **ÑоÑтоÑнии** нашего приложениÑ, вот почему мы ÑобираемÑÑ Ñоздать "умные" **контейнеры** которые "подведут" нужные *дейÑтвиÑ* и *данные* к Ñтим двум "глупым" компонентам. +ОпÑть же, *компоненты* ничего не знают о Redux **дейÑтвиÑÑ…** или о **ÑоÑтоÑнии** нашего приложениÑ. Вот почему мы ÑобираемÑÑ Ñоздать "умные" **контейнеры** которые "подведут" нужные *дейÑтвиÑ* и *данные* к Ñтим двум "глупым" компонентам. - Ð’ `containers`, Ñоздайте Ñледующие файлы: @@ -161,4 +161,4 @@ export default connect(mapStateToProps)(Message); Следующий раздел: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). \ No newline at end of file -- GitLab From e2de4f192f6c6045b02512a1bf30e9a975675dfb Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Tue, 8 Nov 2016 00:49:39 +0700 Subject: [PATCH 31/73] pre-release 2 --- tutorial/12-flow/README.md | 2 +- tutorial/4-es6-syntax-class/README.md | 2 +- tutorial/5-es6-modules-syntax/README.md | 2 +- tutorial/6-eslint/README.md | 2 +- tutorial/7-client-webpack/README.md | 2 +- 5 files changed, 5 insertions(+), 5 deletions(-) diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index 9aa06db..f9de5bf 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -106,4 +106,4 @@ import * as Immutable from 'immutable'; Теперь, у Ð²Ð°Ñ ÐµÑть "пуленепробиваемый" код, который проанализирован, протипизирован и протеÑтирован - Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð°Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ð°! -Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/README.md). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/../../). \ No newline at end of file diff --git a/tutorial/4-es6-syntax-class/README.md b/tutorial/4-es6-syntax-class/README.md index f976a31..ea2f82d 100644 --- a/tutorial/4-es6-syntax-class/README.md +++ b/tutorial/4-es6-syntax-class/README.md @@ -39,4 +39,4 @@ console.log(toby.bark()); Следующий раздел: [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) -Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](/../../). diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 4b5ccdf..55818ac 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -47,4 +47,4 @@ import { exec } from 'child_process'; Следующий раздел: [6 - ESLint](/tutorial/6-eslint) -Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](/../../). diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index c021ecb..5374caf 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -114,4 +114,4 @@ gulp.task('build', ['lint', 'clean'], () => Следующий раздел: [7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) -Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](/../../). diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 365cc2d..4577e48 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -193,4 +193,4 @@ gulp.task('clean', () => del([ Следующий раздел: [8 - React](/tutorial/8-react) -Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](/README.md). +Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](/../../). -- GitLab From 658dd74b04adc75bf9162a3138c7059af90f39bb Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 19:22:03 +0700 Subject: [PATCH 32/73] Update README.md --- README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 3401419..14b288d 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,9 @@ Конечно, вам не нужны вÑе Ñти технологии, еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (доÑтаточно комбинаци Babel + jQuery), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. -ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. +ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить по ним более глубокие знаниÑ, изучайте их документацию или другие руководÑтва. -Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React, и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". +Ð’ большой чаÑти технологий, опиÑываемых здеÑÑŒ, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React, и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. -- GitLab From e7f527ce13eff8bd90396167de3df48beb28b3c7 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 19:28:52 +0700 Subject: [PATCH 33/73] Update README.md --- tutorial/1-node-npm-yarn-package-json/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index da7272c..3918d7a 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -20,7 +20,7 @@ sudo apt-get install -y nodejs [Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Ð’ данном руководÑтве мы будем иÑпользовать Yarn. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --dev` в Ñтом поÑобии. -- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (Верно, мы иÑпользуем NPM чтобы уÑтановить Yarn, вÑе равно, что иÑпользовать Internet Explorer или Safari чтобы уÑтановить Chrome!). +- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (Верно, мы иÑпользуем NPM, чтобы уÑтановить Yarn, вÑе равно, что иÑпользовать Internet Explorer или Safari, чтобы уÑтановить Chrome!). - Создайте новую директорию Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ и зайдите (`cd`) в нее. - ЗапуÑтите `yarn init` и ответьте на вопроÑÑ‹, чтобы Ñоздать файл `package.json` автоматичеÑки (`yarn init -y` чтобы пропуÑтить вопроÑÑ‹). @@ -29,7 +29,7 @@ sudo apt-get install -y nodejs Команда `node .` - Ñлегка Ð½Ð¸Ð·ÐºÐ¾ÑƒÑ€Ð¾Ð²Ð½ÐµÐ²Ð°Ñ Ð´Ð»Ñ Ð·Ð°Ð¿ÑƒÑка программ. ВмеÑто нее, мы будем иÑпользовать NPM/Yarn Ñкрипты, чтобы запуÑкать выполнение нужного кода. Ðто даÑÑ‚ нам хороший уровень абÑтракции, позволÑющий вÑегда иÑпользовать `yarn start`, даже когда наша программа Ñтанет более Ñложной. -- Ð’ файле `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтоб было так: +- Ð’ файле `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтобы было так: ``` "scripts": { -- GitLab From 8b08968394a38be984a8d52f1e1498bb7bb276fc Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 19:54:35 +0700 Subject: [PATCH 34/73] Update README.md --- tutorial/3-es6-babel-gulp/README.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index 40a2bfd..b3c8931 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -5,7 +5,7 @@ - ЗапуÑтите `yarn add --dev gulp` - ЗапуÑтите `yarn add --dev gulp-babel` - ЗапуÑтите `yarn add --dev babel-preset-latest` -- Ð’ `package.json`, добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel,Ñледующим образом: +- Ð’ `package.json` добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel, Ñледующим образом: ```json "babel": { @@ -73,8 +73,8 @@ Gulp, Ñам по Ñебе, имеет довольно понÑтный API. О Затем мы определили пÑть задач: `build` *(Ñоздать)*, `clean` *(очиÑтить)*, `main` *(оÑновнаÑ)*, `watch` *(наблюдать)*, and `default` *(по умолчанию)*. - `build` вызывает Babel, чтобы преобразовать вÑе иÑходные файлы из `src`, и запиÑывает результат в `lib`. -- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del` чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) -- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением того, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir` чтоб ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте, еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто лишь запуÑкает `node lib`. +- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del`, чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) +- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением того, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir`, чтобы ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте, еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто запуÑкает `node lib`. - `watch` запуÑкает задчу `main`, когда проиÑходÑÑ‚ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð¾Ð¹ ÑиÑтемы Ð´Ð»Ñ ÑƒÐºÐ°Ð·Ð°Ð½Ð½Ñ‹Ñ… файлов. - `default` - Ñто ÑÐ¿ÐµÑ†Ð¸Ð°Ð»ÑŒÐ½Ð°Ñ Ð·Ð°Ð´Ð°Ñ‡Ð°, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкаетÑÑ, еÑли вы проÑто вызываете `gulp` из CLI (коммандной Ñтроки). Ð’ нашем Ñлучае, мы хотим Ñначала запуÑтить `main` (один раз), а затем `watch`. @@ -83,7 +83,7 @@ Gulp, Ñам по Ñебе, имеет довольно понÑтный API. О Отлично! ПоÑмотрим как Ñто работает. - Ð’ `package.json`, замените Ñкрипт `start` на: `"start": "gulp"`. -- ЗапуÑтите `yarn start`. Должно вывеÑтиÑÑŒ "Hello ES6" и запуÑтитÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑкое отÑлеживание изменений. Попробуйте ввеÑти неверный код в `src/index.js` и увидите поÑле ÑохранениÑ, как Gulp автоматичеÑки указывает на ошибку. +- ЗапуÑтите `yarn start`. Должно выйти "Hello ES6" и запуÑтитьÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑкое отÑлеживание изменений. Попробуйте ввеÑти неверный код в `src/index.js` и увидите поÑле ÑохранениÑ, как Gulp автоматичеÑки указывает на ошибку. - Добавьте `/lib/` в `.gitignore` -- GitLab From 8a1fcf13e7f5fb22fd80da80941efc84fbce7803 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 20:12:01 +0700 Subject: [PATCH 35/73] Update README.md --- tutorial/5-es6-modules-syntax/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 55818ac..1c5257a 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -4,7 +4,7 @@ Ð’ `dog.js`, мы также заменим `module.exports = Dog` на `export default Dog`. -Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ. Таким образом: +Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ. Таким образом: (ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñледующим образом:) ```javascript export default class { @@ -18,7 +18,7 @@ export default class { } ``` -Ð’Ð’Ñ‹ возможно уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² Ñтроке`import` файла `index.js` абÑолютно по вашему уÑмотрению. Вполне будет работать: +Ð’Ñ‹, возможно, уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² Ñтроке`import` файла `index.js` абÑолютно по вашему уÑмотрению. Вполне будет работать: ```javascript import Cat from './dog'; @@ -43,7 +43,7 @@ import { exec } from 'child_process'; Обратите внимение на "ÑинтакÑичеÑкий Ñахар", позволÑющий получать `exec` напрÑмую из `child_process`. Довольно Ñлегантно! -- `yarn start` должно по прежнему выдавать "Wah wah, I am Toby". +- `yarn start` должно по-прежнему выдавать "Wah wah, I am Toby". Следующий раздел: [6 - ESLint](/tutorial/6-eslint) -- GitLab From 99c99520942a0109c4a607fa44f2c75c185029b0 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 20:24:36 +0700 Subject: [PATCH 36/73] Update README.md --- tutorial/6-eslint/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index 5374caf..d733e14 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -1,6 +1,6 @@ # 6 - ESLint -Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (англ. lint - прим. переводчика), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (англ. linter - прим. переводчика) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. +Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (lint), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (linter) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. - ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` @@ -19,7 +19,7 @@ **Примечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. -Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. ПоÑтому уÑтановим плагин ESLint Ð´Ð»Ñ Gulp: (Ð”Ð»Ñ Ñтого также уÑтановим плагин ESLint Ð´Ð»Ñ Gulp) +Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. Ð”Ð»Ñ Ñтого также уÑтановим плагин ESLint Ð´Ð»Ñ Gulp: - запуÑтите `yarn add --dev gulp-eslint` @@ -57,9 +57,9 @@ gulp.task('build', ['lint', 'clean'], () => { }); ``` -- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (англ. linting errors - прим. переводчика) в Ñтом Gulp-файле и Ð¿Ñ€ÐµÐ´ÑƒÐ¿Ñ€ÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð¾Ð± иÑпользовании `console.log()` в `index.js`. +- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (linting errors) в Ñтом Gulp-файле и Ð¿Ñ€ÐµÐ´ÑƒÐ¿Ñ€ÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð¾Ð± иÑпользовании `console.log()` в `index.js`. -Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (англ. build - прим. переводчика ) а какие нет. ПоÑтому мы немного поможем ESLint иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: +Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (build), а какие нет. ПоÑтому мы немного поможем ESLint, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: ```javascript /* eslint-disable import/no-extraneous-dependencies */ @@ -81,7 +81,7 @@ gulp.task('build', ['lint', 'clean'], () => { () => 1 ``` -Потому что, когда в ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, можно опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. +Потому что, когда ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, можно опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. Так что давайте обновим Gulp-файл ÑоответÑтвенно: @@ -105,7 +105,7 @@ gulp.task('build', ['lint', 'clean'], () => ); ``` -ПоÑледнÑÑ Ð¾ÑтавшаÑÑÑ Ð¿Ñ€Ð¾Ð±Ð»ÐµÐ¼Ð° ÑвÑзана Ñ `console.log()`. Давайте Ñкажем, что мы хотим в Ñтом примере, чтобы иÑпользование `console.log()` в `index.js` было правомерным, а не вызывало предупреждение. Как вы, возможно, догадалиÑÑŒ мы помеÑтим `/* eslint-disable no-console */` в начале нашего `index.js` файла. +ПоÑледнÑÑ Ð¾ÑтавшаÑÑÑ Ð¿Ñ€Ð¾Ð±Ð»ÐµÐ¼Ð° ÑвÑзана Ñ `console.log()`. Давайте Ñкажем, что мы хотим в Ñтом примере, чтобы иÑпользование `console.log()` в `index.js` было правомерным, а не вызывало предупреждение. Как вы, возможно, догадалиÑÑŒ, мы помеÑтим `/* eslint-disable no-console */` в начале нашего `index.js` файла. - ЗапуÑтите `yarn start` - теперь вÑе Ñнова без ошибок. -- GitLab From 201818c4528ecec3c2ee19a70043a82be23b19ca Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 21:35:11 +0700 Subject: [PATCH 37/73] Update README.md --- tutorial/7-client-webpack/README.md | 31 +++++++++++++---------------- 1 file changed, 14 insertions(+), 17 deletions(-) diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 4577e48..63f1a2d 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -2,7 +2,6 @@ ## Структура нашего Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ -- Create a `dist` folder at the root of your project, and add the following `index.html` file to it: - Создайте директорию `dist` в корне вашего проекта, и добавьте туда файл `index.html` Ñо Ñледующим Ñодержанием: ```html @@ -19,8 +18,7 @@ Ð’ директории `src` Ñоздайте Ñледующие поддиректории: `server`, `shared`, `client` и перемеÑтите текущий `index.js` в папку `server`, а `dog.js` в `shared`. Создайте `app.js` в директории `client`. -We are not going to do any Node back-end yet, but this separation will help you see more clearly where things belong. You'll need to change the `import Dog from './dog';` in `server/index.js` to `import Dog from '../shared/dog';` though, or ESLint will detect errors for unresolved modules. -Мы пока что не ÑобираемÑÑ Ñоздавать на Node Ñерверную чаÑть, но Ñто разделение поможет более ÑÑно понÑть что к чему отноÑитÑÑ. Вам нужно заменить `import Dog from './dog';` в `server/index.js` на `import Dog from '../shared/dog';`, иначе ESLint обнаружит ошибки неразрешаемых модулей. +Мы пока не ÑобираемÑÑ Ñоздавать на Node Ñерверную чаÑть, но Ñто разделение поможет более ÑÑно понÑть, что к чему отноÑитÑÑ. Вам нужно заменить `import Dog from './dog';` в `server/index.js` на `import Dog from '../shared/dog';`, иначе ESLint обнаружит ошибки неразрешаемых модулей. Ðапишите в `client/app.js`: @@ -39,9 +37,9 @@ document.querySelector('.app').innerText = browserToby.bark(); "browser": true } ``` -Таким образом мы Ñможем иÑпользовать такие переменные как `window` или `document`, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. +Таким образом мы можем иÑпользовать такие переменные как `window` или `document`, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. -ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (Ð¾Ð±ÐµÑ‰Ð°Ð½Ð¸Ñ - прим. пер.), вам нужно включить [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. +ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (обещаниÑ), вам нужно включить [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. - ЗапуÑтите `yarn add babel-polyfill` @@ -51,17 +49,17 @@ document.querySelector('.app').innerText = browserToby.bark(); import 'babel-polyfill'; ``` -Включение ~~полифила~~ (англ. polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только когда применÑете конÑтрукции, которые он охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ ÐµÐ³Ð¾ применÑÑŽ, и он поÑвитÑÑ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð°Ñ… в Ñледующих чаÑÑ‚ÑÑ…. +Включение Ð¿Ð¾Ð»Ð¸Ð·Ð°Ð¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ (polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только тогда, когда применÑете конÑтрукции, которые оно охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ Ð±ÑƒÐ´Ñƒ его прменÑть. Оно поÑвитÑÑ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð°Ñ… в Ñледующих чаÑÑ‚ÑÑ…. ## Webpack -Ð’ Ñреде Node вы можете Ñвободно иÑпользовать `import` Ð´Ð»Ñ Ñ€Ð°Ð·Ð»Ð¸Ñ‡Ð½Ñ‹Ñ… файлов и Node разрешит (англ. resolve) их поÑредÑтвом файловой ÑиÑтемы. Ð’ браузере Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð°Ñ ÑиÑтема отÑутÑтвует, Ñледовательно `import` ведет в никуда. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾ чтобы `app.js`, ÑвлÑющийÑÑ Ñ‚Ð¾Ñ‡ÐºÐ¾Ð¹ входа Ð´Ð»Ñ Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, получил вÑÑŽ древовидную Ñтруктуру импортируемых файлов, мы ÑобираемÑÑ "Ñобрать" вÑе Ñто дерево завиÑимоÑтей в один файл. Webpack - нужный Ð´Ð»Ñ Ñтого инÑтрумент. +Ð’ Ñреде Node вы можете Ñвободно иÑпользовать `import` Ð´Ð»Ñ Ñ€Ð°Ð·Ð»Ð¸Ñ‡Ð½Ñ‹Ñ… файлов, и Node разрешит (англ. resolve) их поÑредÑтвом файловой ÑиÑтемы. Ð’ браузере Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð°Ñ ÑиÑтема отÑутÑтвует, Ñледовательно `import` ведет в никуда. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾ чтобы `app.js`, ÑвлÑющийÑÑ Ñ‚Ð¾Ñ‡ÐºÐ¾Ð¹ входа Ð´Ð»Ñ Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, получил вÑÑŽ древовидную Ñтруктуру импортируемых файлов, мы ÑобираемÑÑ "Ñобрать" вÑе Ñто дерево завиÑимоÑтей в один файл. Webpack - нужный Ð´Ð»Ñ Ñтого инÑтрумент. Webpack, как и Gulp, иÑпользует конфигурационные файлы вида `webpack.config.js`. Ð’ них возможно иÑпользование ES6 импорта и ÑкÑпорта точно таким же ÑпоÑобом, как мы делали Ñ Gulp отноÑительно Babel: Ð¾Ð±Ð¾Ð·Ð½Ð°Ñ‡Ð°Ñ Ñтот файл как `webpack.config.babel.js`. - Создайте пуÑтой файл `webpack.config.babel.js` -- Пока вы в нем, добавьте `webpack.config.babel.js` в задачу `lint` в Gulp, и еще неÑколько конÑтант Ñ Ð¿ÑƒÑ‚Ñми (`paths` - англ): +- Пока вы в нем, добавьте `webpack.config.babel.js` в задачу `lint` в Gulp, и еще неÑколько конÑтант Ñ Ð¿ÑƒÑ‚Ñми (`paths`): ```javascript const paths = { @@ -86,7 +84,7 @@ gulp.task('lint', () => ); ``` -Мы должы научить Webpack обрабатывать ES6 файлы Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ Babel (точно так же как мы показали Gulp как Ñто делать через `gulp-babel`). Ð”Ð»Ñ Webpack, когда нужно обработать файлы, не ÑвлÑющиеÑÑ Ð¿Ñ€Ð¾Ñтым Ñтарым JavaScript, мы иÑпользуем *загрузчики* (loaders). Давайте уÑтановим загрузчик Babel Ð´Ð»Ñ Webpack: +Мы должы научить Webpack обрабатывать ES6 файлы Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ Babel (точно так же, как мы показали Gulp, как Ñто делать через `gulp-babel`). Ð”Ð»Ñ Webpack, когда нужно обработать файлы, не ÑвлÑющиеÑÑ Ð¿Ñ€Ð¾Ñтым Ñтарым JavaScript, мы иÑпользуем *загрузчики* (loaders). Давайте уÑтановим загрузчик Babel Ð´Ð»Ñ Webpack: - ЗапуÑтите `yarn add --dev babel-loader` @@ -115,18 +113,17 @@ export default { Давайте Ñто немного проанализируем: -Ðтот файл нужен чтобы Ñообщить Webpack некоторую информацию. `output.filename` - Ð¸Ð¼Ñ Ñ„Ð°Ð¹Ð»Ð° генерируемой Ñборки. `devtool: 'source-map'` - позволÑет иÑпользовать source maps (карты кода) Ð´Ð»Ñ ÑƒÐ¿Ñ€Ð¾Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ñ‚Ð»Ð°Ð´ÐºÐ¸ в браузере. Ð’ `module.loaders` еÑть ÑвойÑтво `test` Ñ Ñ€ÐµÐ³ÑƒÐ»Ñрным выражением, определÑющим какие файлы должны обрабатыватьÑÑ Ð·Ð°Ð³Ñ€ÑƒÐ·Ñ‡Ð¸ÐºÐ¾Ð¼ `babel-loader`. ПоÑкольку мы будем иÑпользовать как `.js` так и `.jsx` файлы (Ð´Ð»Ñ React) в Ñледующих чаÑÑ‚ÑÑ…, наше выражение выглÑдит как `/\.jsx?$/`. Ð”Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `node_modules` иÑключена (exclude) поÑкольку ее не нужно транÑпилировать. Таким образом, когда код импортирует (`import`) пакеты, раÑположенные в `node_modules`, Babel не тратит Ð²Ñ€ÐµÐ¼Ñ Ð½Ð° обработку Ñтих файлов. Раздел `resolve` Ñообщает Webpack файлы какого типа мы хотим подключать через `import`, позволÑÑ Ñ‚ÐµÐ¼ Ñамым опуÑкать раÑÑˆÐ¸Ñ€ÐµÐ½Ð¸Ñ Ð² именах файлов, например как в `import Foo from './foo'`, где `foo` может быть `foo.js` или `foo.jsx`. +Ðтот файл нужен, чтобы Ñообщить Webpack некоторую информацию. `output.filename` - Ð¸Ð¼Ñ Ñ„Ð°Ð¹Ð»Ð° генерируемой Ñборки. `devtool: 'source-map'` - позволÑет иÑпользовать source maps (карты кода) Ð´Ð»Ñ ÑƒÐ¿Ñ€Ð¾Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ñ‚Ð»Ð°Ð´ÐºÐ¸ в браузере. Ð’ `module.loaders` еÑть ÑвойÑтво `test` Ñ Ñ€ÐµÐ³ÑƒÐ»Ñрным выражением, определÑющим какие файлы должны обрабатыватьÑÑ Ð·Ð°Ð³Ñ€ÑƒÐ·Ñ‡Ð¸ÐºÐ¾Ð¼ `babel-loader`. ПоÑкольку мы будем иÑпользовать как `.js` так и `.jsx` файлы (Ð´Ð»Ñ React) в Ñледующих чаÑÑ‚ÑÑ…, наше выражение выглÑдит как `/\.jsx?$/`. Ð”Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `node_modules` иÑключена (exclude), поÑкольку ее не нужно транÑпилировать. Таким образом, когда код импортирует (`import`) пакеты, раÑположенные в `node_modules`, Babel не тратит Ð²Ñ€ÐµÐ¼Ñ Ð½Ð° обработку Ñтих файлов. Раздел `resolve` Ñообщает Webpack, файлы какого типа мы хотим подключать через `import`, позволÑÑ Ñ‚ÐµÐ¼ Ñамым опуÑкать раÑÑˆÐ¸Ñ€ÐµÐ½Ð¸Ñ Ð² именах файлов, например как в `import Foo from './foo'`, где `foo` может быть `foo.js` или `foo.jsx`. -И так, мы наÑтроили Webpack, но нам до Ñих пор требуетÑÑ ÑпоÑоб *запуÑтить* его. +Итак, мы наÑтроили Webpack, но нам до Ñих пор требуетÑÑ ÑпоÑоб *запуÑтить* его. ## Подключение Webpack к Gulp -Webpack может делать множеÑтво вещей. Он даже может полноÑтью заменить Gulp, еÑли проект в оÑновном выполнÑетÑÑ Ð½Ð° Ñтороне клиента. Gulp в Ñвою очередь, как более общий инÑтрумент, больше подходит Ð´Ð»Ñ Ñ‚Ð°ÐºÐ¸Ñ… вещей как анализ кода (linting), теÑтирование, запуÑк задач на Ñтороне Ñервера. Он так же проще в понимании Ð´Ð»Ñ Ð½Ð¾Ð²Ð¸Ñ‡ÐºÐ¾Ð² чем чем Ñложное конфигурирование Webpack. У Ð½Ð°Ñ ÑƒÐ¶Ðµ довольно хорошо наÑтроен рабочий процеÑÑ Ð½Ð° базе Gulp, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ Webpack в Ð¿Ñ€Ð¾Ñ†ÐµÑ Ñборки пройдет проще проÑтого. +Webpack может делать множеÑтво вещей. Он даже может полноÑтью заменить Gulp, еÑли проект в оÑновном выполнÑетÑÑ Ð½Ð° Ñтороне клиента. Gulp в Ñвою очередь, как более общий инÑтрумент, больше подходит Ð´Ð»Ñ Ñ‚Ð°ÐºÐ¸Ñ… вещей как анализ кода (linting), теÑтирование, запуÑк задач на Ñтороне Ñервера. Он так же проще в понимании Ð´Ð»Ñ Ð½Ð¾Ð²Ð¸Ñ‡ÐºÐ¾Ð², чем Ñложное конфигурирование Webpack. У Ð½Ð°Ñ ÑƒÐ¶Ðµ довольно хорошо наÑтроен рабочий процеÑÑ Ð½Ð° базе Gulp, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ Webpack в процеÑÑ Ñборки пройдет проще проÑтого. Давайте Ñоздадим в Gulp задачу по запуÑку Webpack. Откройте `gulpfile.babel.js`. - -We don't need the `main` task to execute `node lib/` anymore, since we will open `index.html` to run our app. -ПоÑкольку мы ~~will open~~ `index.html` чтобы запуÑкать наше приложение, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. + +ПоÑкольку мы будем иÑпользовать `index.html`, чтобы запуÑкать наше приложение, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. - Уберите `import { exec } from 'child_process'`. @@ -174,11 +171,11 @@ gulp.task('main', ['lint', 'clean'], () => ); ``` -**Замечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, то мы могли бы компилировать только `server` и `shared` (поÑкольку Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода чтобы теÑтировать его вне Webpack. Так что пока-что мы не дойдем до Ñтого раздела, будет ~~неÑколько избыточное дублирование в~~ `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще мы даже не будем иÑпользовать `build` и директорию `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что вÑе что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. +**Примечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, мы могли бы компилировать только `server` и `shared` (Ñ‚.к. Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода, чтобы теÑтировать его вне Webpack. Так что, пока мы не дойдем до Ñтого раздела, будет ~~неÑколько избыточное дублирование в~~ `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще, мы даже не будем иÑпользовать `build` и директории `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что, вÑе, что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. - ЗапуÑтите `yarn start`, вы должны увидеть поÑтроенный Webpack файл `client-bundle.js`. Откройте `index.html` в браузере. Должно отобразитьÑÑ "Wah wah, I am Browser Toby". -Одна поÑледнÑÑ Ð²ÐµÑ‰ÑŒ: в отличие от директории `lib`, файлы `dist/client-bundle.js` и `dist/client-bundle.js.map` не очищаютÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `clean` перед каждой Ñборкой. +Еще одна вещь: в отличие от директории `lib`, файлы `dist/client-bundle.js` и `dist/client-bundle.js.map` не очищаютÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `clean` перед каждой Ñборкой. - Добавьте `clientBundle: 'dist/client-bundle.js?(.map)'` в нашу конфигурацию путей (`paths`), и наÑтройте задачу `clean` Ñледующим образом: -- GitLab From 88823b05c31f7eb2d21a837f2574ae629200197e Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 21:44:19 +0700 Subject: [PATCH 38/73] Update README.md --- tutorial/8-react/README.md | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 0f9f67f..2664b49 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -32,7 +32,7 @@ App.propTypes = { ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); ``` -**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ (его) понимание Ñтой библиотеки. +**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ его понимание. Ð’ Gulp файле, измените в `clientEntryPoint` раÑширение на `.jsx`: @@ -40,9 +40,9 @@ ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); clientEntryPoint: 'src/client/app.jsx', ``` -ПоÑкольку мы иÑпользуем ÑÐ¸Ð½Ñ‚Ð°ÐºÑ JSX, нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. -УÑтановите React Babel preset, который научит Babel обрабатывать JSX ÑинтакÑ: -`yarn add --dev babel-preset-react` и откорректируйте раздел `babel` в `package.json` Ñледующим образом: +ПоÑкольку мы иÑпользуем ÑинтакÑÐ¸Ñ JSX, нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. +УÑтановите React Babel preset, который научит Babel обрабатывать JSX ÑинтакÑÐ¸Ñ +`yarn add --dev babel-preset-react`, и откорректируйте раздел `babel` в `package.json` Ñледующим образом: ```json "babel": { @@ -53,10 +53,10 @@ clientEntryPoint: 'src/client/app.jsx', }, ``` -Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby" Ñгенерированное React. +Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby", Ñгенерированное React. Следующий раздел: [9 - Redux](/tutorial/9-redux) -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). -- GitLab From 1117b0a3ba4bde009b7e961fd4fe0fceca1f2b7b Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 21:50:17 +0700 Subject: [PATCH 39/73] Update README.md --- tutorial/9-redux/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index 4d30928..c90a6b3 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -4,7 +4,7 @@ - **хранилище** (store) - проÑтой JavaScript объект, предÑтавлÑющий ÑоÑтоÑние вашего приложениÑ; - **дейÑтвиÑ** (actions), которые обычно запуÑкаютÑÑ Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚ÐµÐ»ÐµÐ¼; -- **редюÑеры** (reducers), которые можно раÑÑматривать как обработчики дейÑтвий. +- **редюÑеры** (reducers), которые можно раÑÑматривать, как обработчики дейÑтвий. РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). @@ -161,4 +161,4 @@ export default connect(mapStateToProps)(Message); Следующий раздел: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). -- GitLab From da036a11bfda578bcf4c617cc49e053c4c1c4159 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 21:57:10 +0700 Subject: [PATCH 40/73] Update README.md --- tutorial/10-immutable-redux-improvements/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index 8e3f539..ba49d76 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -16,7 +16,7 @@ const obj = Immutable.Map({ a: 1 }); obj.set('a', 2); // Возвращает новый объект не изменÑÑ `obj` ``` -Такой подход ÑоответÑтвует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообщето **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища (переданного в качеÑтве параметра), а вмеÑто Ñтого возвращать абÑолютно новое. Давайте воÑпользуемÑÑ Immutable чтобы доÑтичь Ñтого. +Такой подход ÑоответÑтвует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообще-то **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища (переданного в качеÑтве параметра), а вмеÑто Ñтого возвращать абÑолютно новое. Давайте воÑпользуемÑÑ Immutable, чтобы доÑтичь Ñтого. - ЗапуÑтите `yarn add immutable` -- GitLab From 3da403ae16e2ac5e15bc4ab83a1fe3e30f8e5f6b Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Fri, 11 Nov 2016 22:09:59 +0700 Subject: [PATCH 41/73] Update README.md --- tutorial/11-testing-mocha-chai-sinon/README.md | 14 ++++++-------- 1 file changed, 6 insertions(+), 8 deletions(-) diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 5cd74c5..f189d55 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -2,7 +2,7 @@ ## Mocha and Chai -- Создайте директорию `src/test`. Ðта папка будет отражать Ñтруктуру директорий нашего приложениÑ, поÑтому Ñоздайте также `src/test/client` (можете так же добавить `server` и `shared`, еÑли хотите, но мы не будем пиÑать теÑты Ð´Ð»Ñ Ð½Ð¸Ñ…). +- Создайте директорию `src/test`. Ðта папка будет отражать Ñтруктуру директорий нашего приложениÑ, поÑтому Ñоздайте также `src/test/client` (можете также добавить `server` и `shared`, еÑли хотите, но мы не будем пиÑать теÑты Ð´Ð»Ñ Ð½Ð¸Ñ…). - Ð’ `src/test/client`, Ñоздайте файл `state-test.js` , в котором мы будем теÑтировать жизненный цикл нашего Redux приложеиÑ. @@ -42,9 +42,9 @@ describe('App State', () => { }); }); ``` -Хорошо, давайте вÑе Ñто проанализируем. +Хорошо, теперь давайте вÑе Ñто проанализируем. -Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, что бы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. +Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. ТеÑты Mocha уÑтроены наподобие дерева. Ð’ нашем Ñлучае, мы хотим протеÑтировать функцию `makeBark`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð° воздейÑтвовать на атрибут `dog` ÑоÑтоÑÐ½Ð¸Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ приложениÑ, поÑтому имеет ÑмыÑл иÑпользовать Ñледующую иерархию теÑтов: `App State > Dog > makeBark`, что мы и опиÑали иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ `describe()`. `it()` - Ñто ÑобÑтвенно, теÑÑ‚Ð¸Ñ€ÑƒÑŽÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, а `beforeEach()` - Ñто функциÑ, Ð²Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼Ð°Ñ Ð¿ÐµÑ€ÐµÐ´ каждым вызовом теÑта `it()`. Ð’ нашем Ñлучае, мы хотим иметь новую чиÑтую верÑию хранилища перед запуÑком каждого теÑта. Мы обÑвили переменную `store` в начале файла, поÑкольку она нам пригодитÑÑ Ð² каждом теÑте. @@ -74,15 +74,13 @@ gulp.task('test', ['build'], () => Как вы можете видеть, теÑты запуÑкаютÑÑ Ð½Ð° транÑпилированом коде из папки `lib`, вот почему задачу `test` предварÑет запуÑк `build`. `build`, в Ñвою очередь, предварÑетÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `lint`, а Ñам `test` мы будем запуÑкать перед `main`, что в итоге даÑÑ‚ нам Ñледующий каÑкад задач Ð´Ð»Ñ `default`: `lint` > `build` > `test` > `main`. -`build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. -удалить Ñтрочку? - - УÑтановите в `main` предварительный запуÑк команды `test`: ```javascript gulp.task('main', ['test'], () => /* ... */ ); ``` -- Ð’ `package.json`, замените текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test`, чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ еÑли вÑе теÑты будут пройдены. +- Ð’ `package.json`, замените текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test`, чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾, еÑли вÑе теÑты будут пройдены. - ЗапуÑтите `yarn test` или `yarn start`, и должны будут выйти результаты ваших теÑтов, предпочтительно зеленые. @@ -143,7 +141,7 @@ describe('Shared', () => { }); ``` -Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° и им подобных заглушках. +Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° ЧЕМ???? и им подобных заглушках. - ЗапуÑтите `yarn add --dev sinon sinon-chai`, чтобы уÑтановить Ñти библиотеки. @@ -155,4 +153,4 @@ describe('Shared', () => { Следующий раздел: [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). -- GitLab From 584d94222dbd3c404bd863e2c4e39329bb1d1fa3 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 15:48:35 +0700 Subject: [PATCH 42/73] + --- tutorial/11-testing-mocha-chai-sinon/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index f189d55..d00f28a 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -141,7 +141,7 @@ describe('Shared', () => { }); ``` -Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° ЧЕМ???? и им подобных заглушках. +Тут мы иÑпользуем заглушки от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать Chai-ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° Sinon и им подобных заглушках. - ЗапуÑтите `yarn add --dev sinon sinon-chai`, чтобы уÑтановить Ñти библиотеки. -- GitLab From bb39025d7a5e58e6b22c4ffea303050af2c1b636 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 15:49:33 +0700 Subject: [PATCH 43/73] ++ --- tutorial/11-testing-mocha-chai-sinon/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index d00f28a..51bcbf7 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -141,7 +141,7 @@ describe('Shared', () => { }); ``` -Тут мы иÑпользуем заглушки от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать Chai-ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° Sinon и им подобных заглушках. +Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать Chai-ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° Sinon и им подобных заглушках. - ЗапуÑтите `yarn add --dev sinon sinon-chai`, чтобы уÑтановить Ñти библиотеки. -- GitLab From 05ab5c59ebde6c46373f421ed7fce29618140e78 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 15:50:55 +0700 Subject: [PATCH 44/73] + --- tutorial/5-es6-modules-syntax/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 1c5257a..4311fea 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -4,7 +4,7 @@ Ð’ `dog.js`, мы также заменим `module.exports = Dog` на `export default Dog`. -Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ. Таким образом: (ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñледующим образом:) +Заметьте, что в dog.js Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ Dog иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в export. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñледующим образом: ```javascript export default class { -- GitLab From 4720cd311c89f7d53ba2d6b2aadbb955d8065e05 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 15:56:56 +0700 Subject: [PATCH 45/73] + --- tutorial/6-eslint/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index d733e14..fdc827d 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -1,6 +1,6 @@ # 6 - ESLint -Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (lint), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (linter) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. +Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (to lint), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (linter) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. - ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` @@ -19,7 +19,7 @@ **Примечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. -Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. Ð”Ð»Ñ Ñтого также уÑтановим плагин ESLint Ð´Ð»Ñ Gulp: +Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. Ð”Ð»Ñ Ñтого уÑтановим еще и плагин ESLint Ð´Ð»Ñ Gulp: - запуÑтите `yarn add --dev gulp-eslint` @@ -59,7 +59,7 @@ gulp.task('build', ['lint', 'clean'], () => { - ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (linting errors) в Ñтом Gulp-файле и Ð¿Ñ€ÐµÐ´ÑƒÐ¿Ñ€ÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð¾Ð± иÑпользовании `console.log()` в `index.js`. -Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (build), а какие нет. ПоÑтому мы немного поможем ESLint, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: +Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в Ñкомпилированное приложение (build), а какие нет. ПоÑтому мы немного поможем ESLint, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: ```javascript /* eslint-disable import/no-extraneous-dependencies */ -- GitLab From ea71f4b7ce03fa85788f6585fcc028b799505ee7 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 16:06:20 +0700 Subject: [PATCH 46/73] + --- tutorial/7-client-webpack/README.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 63f1a2d..604f7a0 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -37,9 +37,9 @@ document.querySelector('.app').innerText = browserToby.bark(); "browser": true } ``` -Таким образом мы можем иÑпользовать такие переменные как `window` или `document`, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. +Таким образом мы Ñможем иÑпользовать такие переменные как window или document, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. -ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (обещаниÑ), вам нужно включить [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. +ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (обещаниÑ), вам нужно включить полифил (polyfill) [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. - ЗапуÑтите `yarn add babel-polyfill` @@ -49,7 +49,7 @@ document.querySelector('.app').innerText = browserToby.bark(); import 'babel-polyfill'; ``` -Включение Ð¿Ð¾Ð»Ð¸Ð·Ð°Ð¿Ð¾Ð»Ð½ÐµÐ½Ð¸Ñ (polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только тогда, когда применÑете конÑтрукции, которые оно охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ Ð±ÑƒÐ´Ñƒ его прменÑть. Оно поÑвитÑÑ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð°Ñ… в Ñледующих чаÑÑ‚ÑÑ…. +Включение полифила (polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только тогда, когда применÑете конÑтрукции, которые он охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ Ð±ÑƒÐ´Ñƒ его применÑть. Он поÑвитÑÑ Ð² примерах в Ñледующих чаÑÑ‚ÑÑ…. ## Webpack @@ -123,7 +123,7 @@ Webpack может делать множеÑтво вещей. Он даже м Давайте Ñоздадим в Gulp задачу по запуÑку Webpack. Откройте `gulpfile.babel.js`. -ПоÑкольку мы будем иÑпользовать `index.html`, чтобы запуÑкать наше приложение, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. +ПоÑкольку мы будем запуÑкать наше приложение, Ð¾Ñ‚ÐºÑ€Ñ‹Ð²Ð°Ñ `index.html`, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. - Уберите `import { exec } from 'child_process'`. @@ -171,7 +171,7 @@ gulp.task('main', ['lint', 'clean'], () => ); ``` -**Примечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, мы могли бы компилировать только `server` и `shared` (Ñ‚.к. Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода, чтобы теÑтировать его вне Webpack. Так что, пока мы не дойдем до Ñтого раздела, будет ~~неÑколько избыточное дублирование в~~ `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще, мы даже не будем иÑпользовать `build` и директории `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что, вÑе, что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. +**Примечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, мы могли бы компилировать только `server` и `shared` (Ñ‚.к. Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода, чтобы теÑтировать его вне Webpack. Так что, пока мы не дойдем до Ñтого раздела, будет неÑколько избыточное дублирование в `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще, мы даже не будем иÑпользовать `build` и директорию `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что, вÑе, что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. - ЗапуÑтите `yarn start`, вы должны увидеть поÑтроенный Webpack файл `client-bundle.js`. Откройте `index.html` в браузере. Должно отобразитьÑÑ "Wah wah, I am Browser Toby". -- GitLab From ff7ff328fa176c2825005a2ad08c524a2cee088d Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 16:08:41 +0700 Subject: [PATCH 47/73] + --- tutorial/8-react/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 2664b49..71375f9 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -32,7 +32,7 @@ App.propTypes = { ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); ``` -**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ его понимание. +**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes (типы параметров), ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ его понимание. Ð’ Gulp файле, измените в `clientEntryPoint` раÑширение на `.jsx`: -- GitLab From 8b3b88ec5936be67b2f08f68984f944474c7c3bb Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 16:09:33 +0700 Subject: [PATCH 48/73] + --- tutorial/9-redux/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index c90a6b3..a40498a 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -4,7 +4,7 @@ - **хранилище** (store) - проÑтой JavaScript объект, предÑтавлÑющий ÑоÑтоÑние вашего приложениÑ; - **дейÑтвиÑ** (actions), которые обычно запуÑкаютÑÑ Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚ÐµÐ»ÐµÐ¼; -- **редюÑеры** (reducers), которые можно раÑÑматривать, как обработчики дейÑтвий. +- **редюÑеры** (reducers),которые можно раÑÑматривать как обработчики дейÑтвий. РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). -- GitLab From 20b04ee214b3f7931f6aab4a99c306df17d77229 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 16:20:40 +0700 Subject: [PATCH 49/73] + --- tutorial/5-es6-modules-syntax/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 4311fea..8d9933f 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -4,7 +4,7 @@ Ð’ `dog.js`, мы также заменим `module.exports = Dog` на `export default Dog`. -Заметьте, что в dog.js Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ Dog иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в export. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñледующим образом: +Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñледующим образом: ```javascript export default class { -- GitLab From 5a75dea346dbd1327d4bedffb0e6ae46648f7e36 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sat, 12 Nov 2016 16:25:55 +0700 Subject: [PATCH 50/73] fix (#2) * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * Update README.md * + * ++ * + * + * + * + * + * + --- README.md | 4 +-- .../1-node-npm-yarn-package-json/README.md | 4 +-- .../10-immutable-redux-improvements/README.md | 2 +- .../11-testing-mocha-chai-sinon/README.md | 14 ++++----- tutorial/3-es6-babel-gulp/README.md | 8 ++--- tutorial/5-es6-modules-syntax/README.md | 6 ++-- tutorial/6-eslint/README.md | 12 +++---- tutorial/7-client-webpack/README.md | 31 +++++++++---------- tutorial/8-react/README.md | 12 +++---- tutorial/9-redux/README.md | 4 +-- 10 files changed, 46 insertions(+), 51 deletions(-) diff --git a/README.md b/README.md index 3401419..14b288d 100644 --- a/README.md +++ b/README.md @@ -27,9 +27,9 @@ Конечно, вам не нужны вÑе Ñти технологии, еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (доÑтаточно комбинаци Babel + jQuery), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. -ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить более глубокие Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ ним, изучайте их документацию или другие руководÑтва. +ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить по ним более глубокие знаниÑ, изучайте их документацию или другие руководÑтва. -Ð’ большой чаÑти технологий, опиÑываемых тут, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React, и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". +Ð’ большой чаÑти технологий, опиÑываемых здеÑÑŒ, иÑпользуетÑÑ React. ЕÑли вы только начинаете иÑпользовать React и проÑто хотите изучить его, то [create-react-app](https://github.com/facebookincubator/create-react-app) поможет вам и кратко ознакомит Ñ Ð¸Ð½Ñ„Ñ€Ð°Ñтруктурой React на оÑнове предуÑтановленной конфигурации. Я бы, например, порекомендовал такой подход Ð´Ð»Ñ Ñ‚ÐµÑ…, кому нужно влитьÑÑ Ð² команду, иÑпользующую React, и на чем-то потренироватьÑÑ, что бы подтÑнуть Ñвои знаниÑ. Ð’ Ñтом руководÑтве мы не будем пользоватьÑÑ Ð¿Ñ€ÐµÐ´ÑƒÑтановленными конфигурациÑми, поÑкольку Ñ Ñ…Ð¾Ñ‡Ñƒ, чтобы вы полноÑтью понимали вÑе, что проиÑходит "под капотом". Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index da7272c..3918d7a 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -20,7 +20,7 @@ sudo apt-get install -y nodejs [Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Ð’ данном руководÑтве мы будем иÑпользовать Yarn. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --dev` в Ñтом поÑобии. -- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (Верно, мы иÑпользуем NPM чтобы уÑтановить Yarn, вÑе равно, что иÑпользовать Internet Explorer или Safari чтобы уÑтановить Chrome!). +- УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (Верно, мы иÑпользуем NPM, чтобы уÑтановить Yarn, вÑе равно, что иÑпользовать Internet Explorer или Safari, чтобы уÑтановить Chrome!). - Создайте новую директорию Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ и зайдите (`cd`) в нее. - ЗапуÑтите `yarn init` и ответьте на вопроÑÑ‹, чтобы Ñоздать файл `package.json` автоматичеÑки (`yarn init -y` чтобы пропуÑтить вопроÑÑ‹). @@ -29,7 +29,7 @@ sudo apt-get install -y nodejs Команда `node .` - Ñлегка Ð½Ð¸Ð·ÐºÐ¾ÑƒÑ€Ð¾Ð²Ð½ÐµÐ²Ð°Ñ Ð´Ð»Ñ Ð·Ð°Ð¿ÑƒÑка программ. ВмеÑто нее, мы будем иÑпользовать NPM/Yarn Ñкрипты, чтобы запуÑкать выполнение нужного кода. Ðто даÑÑ‚ нам хороший уровень абÑтракции, позволÑющий вÑегда иÑпользовать `yarn start`, даже когда наша программа Ñтанет более Ñложной. -- Ð’ файле `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтоб было так: +- Ð’ файле `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтобы было так: ``` "scripts": { diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index 8e3f539..ba49d76 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -16,7 +16,7 @@ const obj = Immutable.Map({ a: 1 }); obj.set('a', 2); // Возвращает новый объект не изменÑÑ `obj` ``` -Такой подход ÑоответÑтвует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообщето **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища (переданного в качеÑтве параметра), а вмеÑто Ñтого возвращать абÑолютно новое. Давайте воÑпользуемÑÑ Immutable чтобы доÑтичь Ñтого. +Такой подход ÑоответÑтвует парадигме **функционального программированиÑ**, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñ…Ð¾Ñ€Ð¾ÑˆÐ¾ подходит Ð´Ð»Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ñ‹ Ñ Redux. Ваши reducer-функции вообще-то **должны** быть чиÑтыми и не изменÑть ÑоÑтоÑние хранилища (переданного в качеÑтве параметра), а вмеÑто Ñтого возвращать абÑолютно новое. Давайте воÑпользуемÑÑ Immutable, чтобы доÑтичь Ñтого. - ЗапуÑтите `yarn add immutable` diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 5cd74c5..51bcbf7 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -2,7 +2,7 @@ ## Mocha and Chai -- Создайте директорию `src/test`. Ðта папка будет отражать Ñтруктуру директорий нашего приложениÑ, поÑтому Ñоздайте также `src/test/client` (можете так же добавить `server` и `shared`, еÑли хотите, но мы не будем пиÑать теÑты Ð´Ð»Ñ Ð½Ð¸Ñ…). +- Создайте директорию `src/test`. Ðта папка будет отражать Ñтруктуру директорий нашего приложениÑ, поÑтому Ñоздайте также `src/test/client` (можете также добавить `server` и `shared`, еÑли хотите, но мы не будем пиÑать теÑты Ð´Ð»Ñ Ð½Ð¸Ñ…). - Ð’ `src/test/client`, Ñоздайте файл `state-test.js` , в котором мы будем теÑтировать жизненный цикл нашего Redux приложеиÑ. @@ -42,9 +42,9 @@ describe('App State', () => { }); }); ``` -Хорошо, давайте вÑе Ñто проанализируем. +Хорошо, теперь давайте вÑе Ñто проанализируем. -Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, что бы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. +Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. ТеÑты Mocha уÑтроены наподобие дерева. Ð’ нашем Ñлучае, мы хотим протеÑтировать функцию `makeBark`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð° воздейÑтвовать на атрибут `dog` ÑоÑтоÑÐ½Ð¸Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ приложениÑ, поÑтому имеет ÑмыÑл иÑпользовать Ñледующую иерархию теÑтов: `App State > Dog > makeBark`, что мы и опиÑали иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ `describe()`. `it()` - Ñто ÑобÑтвенно, теÑÑ‚Ð¸Ñ€ÑƒÑŽÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, а `beforeEach()` - Ñто функциÑ, Ð²Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼Ð°Ñ Ð¿ÐµÑ€ÐµÐ´ каждым вызовом теÑта `it()`. Ð’ нашем Ñлучае, мы хотим иметь новую чиÑтую верÑию хранилища перед запуÑком каждого теÑта. Мы обÑвили переменную `store` в начале файла, поÑкольку она нам пригодитÑÑ Ð² каждом теÑте. @@ -74,15 +74,13 @@ gulp.task('test', ['build'], () => Как вы можете видеть, теÑты запуÑкаютÑÑ Ð½Ð° транÑпилированом коде из папки `lib`, вот почему задачу `test` предварÑет запуÑк `build`. `build`, в Ñвою очередь, предварÑетÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `lint`, а Ñам `test` мы будем запуÑкать перед `main`, что в итоге даÑÑ‚ нам Ñледующий каÑкад задач Ð´Ð»Ñ `default`: `lint` > `build` > `test` > `main`. -`build` also has a prerequisite, `lint`, and finally, we are making `test` a prerequisite of `main`, which gives us the following task cascade for the `default` task: `lint` > `build` > `test` > `main`. -удалить Ñтрочку? - - УÑтановите в `main` предварительный запуÑк команды `test`: ```javascript gulp.task('main', ['test'], () => /* ... */ ); ``` -- Ð’ `package.json`, замените текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test`, чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ еÑли вÑе теÑты будут пройдены. +- Ð’ `package.json`, замените текущее значение Ñкрипта `"test"` на Ñледующее: `"test": "gulp test"`. Таким образом мы можем иÑпользовать `yarn test`, чтобы проÑто запуÑтить наши теÑты. Так же `test` - Ñто Ñтандартный Ñкрипт, который автоматичеÑки запуÑкаетÑÑ Ñ‚Ð°ÐºÐ¸Ð¼Ð¸ инÑтрументами, как, например, ÑервиÑÑ‹ непрерывной интеграции (continuous integration services, CI), так что вÑегда добавлÑйте запуÑк теÑтов через него. `yarn start` также запуÑтит теÑтирование перед поÑтроением Ñборки Webpack, так что Ñборка ÑгенерируетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾, еÑли вÑе теÑты будут пройдены. - ЗапуÑтите `yarn test` или `yarn start`, и должны будут выйти результаты ваших теÑтов, предпочтительно зеленые. @@ -143,7 +141,7 @@ describe('Shared', () => { }); ``` -Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать его ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° и им подобных заглушках. +Тут мы иÑпользуем *заглушки* от Sinon и плагин Ð´Ð»Ñ Chai, позволÑющий иÑпользовать Chai-ÑƒÑ‚Ð²ÐµÑ€Ð¶Ð´ÐµÐ½Ð¸Ñ Ð½Ð° Sinon и им подобных заглушках. - ЗапуÑтите `yarn add --dev sinon sinon-chai`, чтобы уÑтановить Ñти библиотеки. @@ -155,4 +153,4 @@ describe('Shared', () => { Следующий раздел: [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index 40a2bfd..b3c8931 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -5,7 +5,7 @@ - ЗапуÑтите `yarn add --dev gulp` - ЗапуÑтите `yarn add --dev gulp-babel` - ЗапуÑтите `yarn add --dev babel-preset-latest` -- Ð’ `package.json`, добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel,Ñледующим образом: +- Ð’ `package.json` добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel, Ñледующим образом: ```json "babel": { @@ -73,8 +73,8 @@ Gulp, Ñам по Ñебе, имеет довольно понÑтный API. О Затем мы определили пÑть задач: `build` *(Ñоздать)*, `clean` *(очиÑтить)*, `main` *(оÑновнаÑ)*, `watch` *(наблюдать)*, and `default` *(по умолчанию)*. - `build` вызывает Babel, чтобы преобразовать вÑе иÑходные файлы из `src`, и запиÑывает результат в `lib`. -- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del` чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) -- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением того, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir` чтоб ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте, еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто лишь запуÑкает `node lib`. +- `clean` - задача, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿Ñ€Ð¾Ñто удалÑет вÑÑŽ нашу автоматичеÑки Ñгенерированную директорию `lib` перед каждым `build`. Как правило, полезно избавлÑтьÑÑ Ð¾Ñ‚ Ñтарых Ñкомпилированых файлов (которые могут оÑтатьÑÑ Ð¿Ð¾Ñле Ð¿ÐµÑ€ÐµÐ¸Ð¼ÐµÐ½Ð¾Ð²Ð°Ð½Ð¸Ñ Ð¸Ð»Ð¸ ÑƒÐ´Ð°Ð»ÐµÐ½Ð¸Ñ Ñ‡ÐµÐ³Ð¾-то в `src`) Ð´Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы быть уверенным, что Ð´Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `lib` вÑегда Ñинхронна Ñ `src`, даже еÑли `build` не завершилÑÑ ÑƒÑпешно, а вы Ñтого не заметили. Мы иÑпользуем пакет `del`, чтобы удалÑть файлы путем, наиболее подходÑщим Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡ Gulp (Ñто [рекомендованый](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) Ð´Ð»Ñ Gulp ÑпоÑоб) +- `main` - аналогично запуÑку `node .` из предыдущией чаÑти, за иÑключением того, что теперь мы иÑпользуем `lib/index.js`. Мы можем проÑто пиÑать `node lib`, потому что по умолчанию Node найдет и запуÑтит `index.js` из указанной папки (мы иÑпользуем переменную `libDir`, чтобы ÑоответÑтвовать принципу DRY). `require('child_process').exec` и `exec` - Ñто функции Ñамого Node, вызывающие конÑольные команды. Мы перенаправим `stdout` в `console.log()` и возвратим возможную ошибку через функцию обратного вызова (callback), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¿ÐµÑ€ÐµÐ´Ð°ÐµÑ‚ÑÑ Ð² `gulp.task` в качеÑтве аргумента. Ðе переживайте, еÑли Ñта команда не ÑовÑем ÑÑна Ð´Ð»Ñ Ð²Ð°Ñ, помните, что Ñта задача проÑто запуÑкает `node lib`. - `watch` запуÑкает задчу `main`, когда проиÑходÑÑ‚ Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð¾Ð¹ ÑиÑтемы Ð´Ð»Ñ ÑƒÐºÐ°Ð·Ð°Ð½Ð½Ñ‹Ñ… файлов. - `default` - Ñто ÑÐ¿ÐµÑ†Ð¸Ð°Ð»ÑŒÐ½Ð°Ñ Ð·Ð°Ð´Ð°Ñ‡Ð°, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкаетÑÑ, еÑли вы проÑто вызываете `gulp` из CLI (коммандной Ñтроки). Ð’ нашем Ñлучае, мы хотим Ñначала запуÑтить `main` (один раз), а затем `watch`. @@ -83,7 +83,7 @@ Gulp, Ñам по Ñебе, имеет довольно понÑтный API. О Отлично! ПоÑмотрим как Ñто работает. - Ð’ `package.json`, замените Ñкрипт `start` на: `"start": "gulp"`. -- ЗапуÑтите `yarn start`. Должно вывеÑтиÑÑŒ "Hello ES6" и запуÑтитÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑкое отÑлеживание изменений. Попробуйте ввеÑти неверный код в `src/index.js` и увидите поÑле ÑохранениÑ, как Gulp автоматичеÑки указывает на ошибку. +- ЗапуÑтите `yarn start`. Должно выйти "Hello ES6" и запуÑтитьÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑкое отÑлеживание изменений. Попробуйте ввеÑти неверный код в `src/index.js` и увидите поÑле ÑохранениÑ, как Gulp автоматичеÑки указывает на ошибку. - Добавьте `/lib/` в `.gitignore` diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 55818ac..8d9933f 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -4,7 +4,7 @@ Ð’ `dog.js`, мы также заменим `module.exports = Dog` на `export default Dog`. -Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ. Таким образом: +Заметьте, что в `dog.js` Ð¿ÐµÑ€ÐµÐ¼ÐµÐ½Ð½Ð°Ñ `Dog` иÑпользуетÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ в `export`. ПоÑтому, можно напрÑмую ÑкÑпортировать анонимный клаÑÑ Ñледующим образом: ```javascript export default class { @@ -18,7 +18,7 @@ export default class { } ``` -Ð’Ð’Ñ‹ возможно уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² Ñтроке`import` файла `index.js` абÑолютно по вашему уÑмотрению. Вполне будет работать: +Ð’Ñ‹, возможно, уже догадалиÑÑŒ, что Ð¸Ð¼Ñ 'Dog' иÑпользуетÑÑ Ð² Ñтроке`import` файла `index.js` абÑолютно по вашему уÑмотрению. Вполне будет работать: ```javascript import Cat from './dog'; @@ -43,7 +43,7 @@ import { exec } from 'child_process'; Обратите внимение на "ÑинтакÑичеÑкий Ñахар", позволÑющий получать `exec` напрÑмую из `child_process`. Довольно Ñлегантно! -- `yarn start` должно по прежнему выдавать "Wah wah, I am Toby". +- `yarn start` должно по-прежнему выдавать "Wah wah, I am Toby". Следующий раздел: [6 - ESLint](/tutorial/6-eslint) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index 5374caf..fdc827d 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -1,6 +1,6 @@ # 6 - ESLint -Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (англ. lint - прим. переводчика), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (англ. linter - прим. переводчика) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. +Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (to lint), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (linter) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. - ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` @@ -19,7 +19,7 @@ **Примечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. -Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. ПоÑтому уÑтановим плагин ESLint Ð´Ð»Ñ Gulp: (Ð”Ð»Ñ Ñтого также уÑтановим плагин ESLint Ð´Ð»Ñ Gulp) +Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. Ð”Ð»Ñ Ñтого уÑтановим еще и плагин ESLint Ð´Ð»Ñ Gulp: - запуÑтите `yarn add --dev gulp-eslint` @@ -57,9 +57,9 @@ gulp.task('build', ['lint', 'clean'], () => { }); ``` -- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (англ. linting errors - прим. переводчика) в Ñтом Gulp-файле и Ð¿Ñ€ÐµÐ´ÑƒÐ¿Ñ€ÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð¾Ð± иÑпользовании `console.log()` в `index.js`. +- ЗапуÑтите `yarn start`. Ð’Ñ‹ должны увидеть набор ошибок кода (linting errors) в Ñтом Gulp-файле и Ð¿Ñ€ÐµÐ´ÑƒÐ¿Ñ€ÐµÐ¶Ð´ÐµÐ½Ð¸Ñ Ð¾Ð± иÑпользовании `console.log()` в `index.js`. -Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в ~~Ñкомпилированное приложение~~ (англ. build - прим. переводчика ) а какие нет. ПоÑтому мы немного поможем ESLint иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: +Один из видов ошибок будет выглÑдить Ñледующим образом: `'gulp' should be listed in the project's dependencies, not devDependencies (import/no-extraneous-dependencies)` ('gulp' должен подключатьÑÑ Ð² разделе `dependencies`, а не `devDependencies`). Вообще-то Ñто Ð½ÐµÐ²ÐµÑ€Ð½Ð°Ñ Ð¾ÑˆÐ¸Ð±ÐºÐ°. ESLint не может знать какие JS файлы будут входить только в Ñкомпилированное приложение (build), а какие нет. ПоÑтому мы немного поможем ESLint, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÐºÐ¾Ð¼Ð¼ÐµÐ½Ñ‚Ð°Ñ€Ð¸Ð¸ в коде. Ð’ `gulpfile.babel.js`, в Ñамом верху, добавьте: ```javascript /* eslint-disable import/no-extraneous-dependencies */ @@ -81,7 +81,7 @@ gulp.task('build', ['lint', 'clean'], () => { () => 1 ``` -Потому что, когда в ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, можно опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. +Потому что, когда ES6 Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ Ñодержит только возвращаемое выражение, можно опуÑтить фигурные Ñкобки, оператор return и точку Ñ Ð·Ð°Ð¿Ñтой. Так что давайте обновим Gulp-файл ÑоответÑтвенно: @@ -105,7 +105,7 @@ gulp.task('build', ['lint', 'clean'], () => ); ``` -ПоÑледнÑÑ Ð¾ÑтавшаÑÑÑ Ð¿Ñ€Ð¾Ð±Ð»ÐµÐ¼Ð° ÑвÑзана Ñ `console.log()`. Давайте Ñкажем, что мы хотим в Ñтом примере, чтобы иÑпользование `console.log()` в `index.js` было правомерным, а не вызывало предупреждение. Как вы, возможно, догадалиÑÑŒ мы помеÑтим `/* eslint-disable no-console */` в начале нашего `index.js` файла. +ПоÑледнÑÑ Ð¾ÑтавшаÑÑÑ Ð¿Ñ€Ð¾Ð±Ð»ÐµÐ¼Ð° ÑвÑзана Ñ `console.log()`. Давайте Ñкажем, что мы хотим в Ñтом примере, чтобы иÑпользование `console.log()` в `index.js` было правомерным, а не вызывало предупреждение. Как вы, возможно, догадалиÑÑŒ, мы помеÑтим `/* eslint-disable no-console */` в начале нашего `index.js` файла. - ЗапуÑтите `yarn start` - теперь вÑе Ñнова без ошибок. diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 4577e48..604f7a0 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -2,7 +2,6 @@ ## Структура нашего Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ -- Create a `dist` folder at the root of your project, and add the following `index.html` file to it: - Создайте директорию `dist` в корне вашего проекта, и добавьте туда файл `index.html` Ñо Ñледующим Ñодержанием: ```html @@ -19,8 +18,7 @@ Ð’ директории `src` Ñоздайте Ñледующие поддиректории: `server`, `shared`, `client` и перемеÑтите текущий `index.js` в папку `server`, а `dog.js` в `shared`. Создайте `app.js` в директории `client`. -We are not going to do any Node back-end yet, but this separation will help you see more clearly where things belong. You'll need to change the `import Dog from './dog';` in `server/index.js` to `import Dog from '../shared/dog';` though, or ESLint will detect errors for unresolved modules. -Мы пока что не ÑобираемÑÑ Ñоздавать на Node Ñерверную чаÑть, но Ñто разделение поможет более ÑÑно понÑть что к чему отноÑитÑÑ. Вам нужно заменить `import Dog from './dog';` в `server/index.js` на `import Dog from '../shared/dog';`, иначе ESLint обнаружит ошибки неразрешаемых модулей. +Мы пока не ÑобираемÑÑ Ñоздавать на Node Ñерверную чаÑть, но Ñто разделение поможет более ÑÑно понÑть, что к чему отноÑитÑÑ. Вам нужно заменить `import Dog from './dog';` в `server/index.js` на `import Dog from '../shared/dog';`, иначе ESLint обнаружит ошибки неразрешаемых модулей. Ðапишите в `client/app.js`: @@ -39,9 +37,9 @@ document.querySelector('.app').innerText = browserToby.bark(); "browser": true } ``` -Таким образом мы Ñможем иÑпользовать такие переменные как `window` или `document`, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. +Таким образом мы Ñможем иÑпользовать такие переменные как window или document, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. -ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (Ð¾Ð±ÐµÑ‰Ð°Ð½Ð¸Ñ - прим. пер.), вам нужно включить [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. +ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (обещаниÑ), вам нужно включить полифил (polyfill) [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. - ЗапуÑтите `yarn add babel-polyfill` @@ -51,17 +49,17 @@ document.querySelector('.app').innerText = browserToby.bark(); import 'babel-polyfill'; ``` -Включение ~~полифила~~ (англ. polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только когда применÑете конÑтрукции, которые он охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ ÐµÐ³Ð¾ применÑÑŽ, и он поÑвитÑÑ Ð¿Ñ€Ð¸Ð¼ÐµÑ€Ð°Ñ… в Ñледующих чаÑÑ‚ÑÑ…. +Включение полифила (polyfill) прибавлÑет объема вашей Ñборке, поÑтому подключайте его только тогда, когда применÑете конÑтрукции, которые он охватывает. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы показать более полный шаблон кода в Ñтом руководÑтве, Ñ Ð±ÑƒÐ´Ñƒ его применÑть. Он поÑвитÑÑ Ð² примерах в Ñледующих чаÑÑ‚ÑÑ…. ## Webpack -Ð’ Ñреде Node вы можете Ñвободно иÑпользовать `import` Ð´Ð»Ñ Ñ€Ð°Ð·Ð»Ð¸Ñ‡Ð½Ñ‹Ñ… файлов и Node разрешит (англ. resolve) их поÑредÑтвом файловой ÑиÑтемы. Ð’ браузере Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð°Ñ ÑиÑтема отÑутÑтвует, Ñледовательно `import` ведет в никуда. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾ чтобы `app.js`, ÑвлÑющийÑÑ Ñ‚Ð¾Ñ‡ÐºÐ¾Ð¹ входа Ð´Ð»Ñ Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, получил вÑÑŽ древовидную Ñтруктуру импортируемых файлов, мы ÑобираемÑÑ "Ñобрать" вÑе Ñто дерево завиÑимоÑтей в один файл. Webpack - нужный Ð´Ð»Ñ Ñтого инÑтрумент. +Ð’ Ñреде Node вы можете Ñвободно иÑпользовать `import` Ð´Ð»Ñ Ñ€Ð°Ð·Ð»Ð¸Ñ‡Ð½Ñ‹Ñ… файлов, и Node разрешит (англ. resolve) их поÑредÑтвом файловой ÑиÑтемы. Ð’ браузере Ñ„Ð°Ð¹Ð»Ð¾Ð²Ð°Ñ ÑиÑтема отÑутÑтвует, Ñледовательно `import` ведет в никуда. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾ чтобы `app.js`, ÑвлÑющийÑÑ Ñ‚Ð¾Ñ‡ÐºÐ¾Ð¹ входа Ð´Ð»Ñ Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ, получил вÑÑŽ древовидную Ñтруктуру импортируемых файлов, мы ÑобираемÑÑ "Ñобрать" вÑе Ñто дерево завиÑимоÑтей в один файл. Webpack - нужный Ð´Ð»Ñ Ñтого инÑтрумент. Webpack, как и Gulp, иÑпользует конфигурационные файлы вида `webpack.config.js`. Ð’ них возможно иÑпользование ES6 импорта и ÑкÑпорта точно таким же ÑпоÑобом, как мы делали Ñ Gulp отноÑительно Babel: Ð¾Ð±Ð¾Ð·Ð½Ð°Ñ‡Ð°Ñ Ñтот файл как `webpack.config.babel.js`. - Создайте пуÑтой файл `webpack.config.babel.js` -- Пока вы в нем, добавьте `webpack.config.babel.js` в задачу `lint` в Gulp, и еще неÑколько конÑтант Ñ Ð¿ÑƒÑ‚Ñми (`paths` - англ): +- Пока вы в нем, добавьте `webpack.config.babel.js` в задачу `lint` в Gulp, и еще неÑколько конÑтант Ñ Ð¿ÑƒÑ‚Ñми (`paths`): ```javascript const paths = { @@ -86,7 +84,7 @@ gulp.task('lint', () => ); ``` -Мы должы научить Webpack обрабатывать ES6 файлы Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ Babel (точно так же как мы показали Gulp как Ñто делать через `gulp-babel`). Ð”Ð»Ñ Webpack, когда нужно обработать файлы, не ÑвлÑющиеÑÑ Ð¿Ñ€Ð¾Ñтым Ñтарым JavaScript, мы иÑпользуем *загрузчики* (loaders). Давайте уÑтановим загрузчик Babel Ð´Ð»Ñ Webpack: +Мы должы научить Webpack обрабатывать ES6 файлы Ñ Ð¿Ð¾Ð¼Ð¾Ñ‰ÑŒÑŽ Babel (точно так же, как мы показали Gulp, как Ñто делать через `gulp-babel`). Ð”Ð»Ñ Webpack, когда нужно обработать файлы, не ÑвлÑющиеÑÑ Ð¿Ñ€Ð¾Ñтым Ñтарым JavaScript, мы иÑпользуем *загрузчики* (loaders). Давайте уÑтановим загрузчик Babel Ð´Ð»Ñ Webpack: - ЗапуÑтите `yarn add --dev babel-loader` @@ -115,18 +113,17 @@ export default { Давайте Ñто немного проанализируем: -Ðтот файл нужен чтобы Ñообщить Webpack некоторую информацию. `output.filename` - Ð¸Ð¼Ñ Ñ„Ð°Ð¹Ð»Ð° генерируемой Ñборки. `devtool: 'source-map'` - позволÑет иÑпользовать source maps (карты кода) Ð´Ð»Ñ ÑƒÐ¿Ñ€Ð¾Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ñ‚Ð»Ð°Ð´ÐºÐ¸ в браузере. Ð’ `module.loaders` еÑть ÑвойÑтво `test` Ñ Ñ€ÐµÐ³ÑƒÐ»Ñрным выражением, определÑющим какие файлы должны обрабатыватьÑÑ Ð·Ð°Ð³Ñ€ÑƒÐ·Ñ‡Ð¸ÐºÐ¾Ð¼ `babel-loader`. ПоÑкольку мы будем иÑпользовать как `.js` так и `.jsx` файлы (Ð´Ð»Ñ React) в Ñледующих чаÑÑ‚ÑÑ…, наше выражение выглÑдит как `/\.jsx?$/`. Ð”Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `node_modules` иÑключена (exclude) поÑкольку ее не нужно транÑпилировать. Таким образом, когда код импортирует (`import`) пакеты, раÑположенные в `node_modules`, Babel не тратит Ð²Ñ€ÐµÐ¼Ñ Ð½Ð° обработку Ñтих файлов. Раздел `resolve` Ñообщает Webpack файлы какого типа мы хотим подключать через `import`, позволÑÑ Ñ‚ÐµÐ¼ Ñамым опуÑкать раÑÑˆÐ¸Ñ€ÐµÐ½Ð¸Ñ Ð² именах файлов, например как в `import Foo from './foo'`, где `foo` может быть `foo.js` или `foo.jsx`. +Ðтот файл нужен, чтобы Ñообщить Webpack некоторую информацию. `output.filename` - Ð¸Ð¼Ñ Ñ„Ð°Ð¹Ð»Ð° генерируемой Ñборки. `devtool: 'source-map'` - позволÑет иÑпользовать source maps (карты кода) Ð´Ð»Ñ ÑƒÐ¿Ñ€Ð¾Ñ‰ÐµÐ½Ð¸Ñ Ð¾Ñ‚Ð»Ð°Ð´ÐºÐ¸ в браузере. Ð’ `module.loaders` еÑть ÑвойÑтво `test` Ñ Ñ€ÐµÐ³ÑƒÐ»Ñрным выражением, определÑющим какие файлы должны обрабатыватьÑÑ Ð·Ð°Ð³Ñ€ÑƒÐ·Ñ‡Ð¸ÐºÐ¾Ð¼ `babel-loader`. ПоÑкольку мы будем иÑпользовать как `.js` так и `.jsx` файлы (Ð´Ð»Ñ React) в Ñледующих чаÑÑ‚ÑÑ…, наше выражение выглÑдит как `/\.jsx?$/`. Ð”Ð¸Ñ€ÐµÐºÑ‚Ð¾Ñ€Ð¸Ñ `node_modules` иÑключена (exclude), поÑкольку ее не нужно транÑпилировать. Таким образом, когда код импортирует (`import`) пакеты, раÑположенные в `node_modules`, Babel не тратит Ð²Ñ€ÐµÐ¼Ñ Ð½Ð° обработку Ñтих файлов. Раздел `resolve` Ñообщает Webpack, файлы какого типа мы хотим подключать через `import`, позволÑÑ Ñ‚ÐµÐ¼ Ñамым опуÑкать раÑÑˆÐ¸Ñ€ÐµÐ½Ð¸Ñ Ð² именах файлов, например как в `import Foo from './foo'`, где `foo` может быть `foo.js` или `foo.jsx`. -И так, мы наÑтроили Webpack, но нам до Ñих пор требуетÑÑ ÑпоÑоб *запуÑтить* его. +Итак, мы наÑтроили Webpack, но нам до Ñих пор требуетÑÑ ÑпоÑоб *запуÑтить* его. ## Подключение Webpack к Gulp -Webpack может делать множеÑтво вещей. Он даже может полноÑтью заменить Gulp, еÑли проект в оÑновном выполнÑетÑÑ Ð½Ð° Ñтороне клиента. Gulp в Ñвою очередь, как более общий инÑтрумент, больше подходит Ð´Ð»Ñ Ñ‚Ð°ÐºÐ¸Ñ… вещей как анализ кода (linting), теÑтирование, запуÑк задач на Ñтороне Ñервера. Он так же проще в понимании Ð´Ð»Ñ Ð½Ð¾Ð²Ð¸Ñ‡ÐºÐ¾Ð² чем чем Ñложное конфигурирование Webpack. У Ð½Ð°Ñ ÑƒÐ¶Ðµ довольно хорошо наÑтроен рабочий процеÑÑ Ð½Ð° базе Gulp, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ Webpack в Ð¿Ñ€Ð¾Ñ†ÐµÑ Ñборки пройдет проще проÑтого. +Webpack может делать множеÑтво вещей. Он даже может полноÑтью заменить Gulp, еÑли проект в оÑновном выполнÑетÑÑ Ð½Ð° Ñтороне клиента. Gulp в Ñвою очередь, как более общий инÑтрумент, больше подходит Ð´Ð»Ñ Ñ‚Ð°ÐºÐ¸Ñ… вещей как анализ кода (linting), теÑтирование, запуÑк задач на Ñтороне Ñервера. Он так же проще в понимании Ð´Ð»Ñ Ð½Ð¾Ð²Ð¸Ñ‡ÐºÐ¾Ð², чем Ñложное конфигурирование Webpack. У Ð½Ð°Ñ ÑƒÐ¶Ðµ довольно хорошо наÑтроен рабочий процеÑÑ Ð½Ð° базе Gulp, так что Ð¸Ð½Ñ‚ÐµÐ³Ñ€Ð°Ñ†Ð¸Ñ Webpack в процеÑÑ Ñборки пройдет проще проÑтого. Давайте Ñоздадим в Gulp задачу по запуÑку Webpack. Откройте `gulpfile.babel.js`. - -We don't need the `main` task to execute `node lib/` anymore, since we will open `index.html` to run our app. -ПоÑкольку мы ~~will open~~ `index.html` чтобы запуÑкать наше приложение, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. + +ПоÑкольку мы будем запуÑкать наше приложение, Ð¾Ñ‚ÐºÑ€Ñ‹Ð²Ð°Ñ `index.html`, нам больше не требуетÑÑ Ð·Ð°Ð´Ð°Ñ‡Ð° `main` чтобы выполнÑть `node lib/`. - Уберите `import { exec } from 'child_process'`. @@ -174,11 +171,11 @@ gulp.task('main', ['lint', 'clean'], () => ); ``` -**Замечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, то мы могли бы компилировать только `server` и `shared` (поÑкольку Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода чтобы теÑтировать его вне Webpack. Так что пока-что мы не дойдем до Ñтого раздела, будет ~~неÑколько избыточное дублирование в~~ `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще мы даже не будем иÑпользовать `build` и директорию `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что вÑе что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. +**Примечание**: Задача `build` ÑÐµÐ¹Ñ‡Ð°Ñ Ñ‚Ñ€Ð°Ð½Ñпилирует код ES6 в ES5 Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ `.js` файла, раÑположенного в `src`. ПоÑкольку мы разделили код на `server`, `shared` и `client`, мы могли бы компилировать только `server` и `shared` (Ñ‚.к. Webpack позаботитÑÑ Ð¾ `client`). Тем не менее, в разделе ТеÑтирование нам потребуетÑÑ Gulp Ð´Ð»Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции клиентÑкого кода, чтобы теÑтировать его вне Webpack. Так что, пока мы не дойдем до Ñтого раздела, будет неÑколько избыточное дублирование в `build`. Давайте договоримÑÑ, что пока Ñто нормально. Вообще, мы даже не будем иÑпользовать `build` и директорию `lib` пока не доберемÑÑ Ð´Ð¾ Ñтой чаÑти, так что, вÑе, что Ð½Ð°Ñ ÑÐµÐ¹Ñ‡Ð°Ñ Ð²Ð¾Ð»Ð½ÑƒÐµÑ‚ - Ñто клиентÑÐºÐ°Ñ Ñборка. - ЗапуÑтите `yarn start`, вы должны увидеть поÑтроенный Webpack файл `client-bundle.js`. Откройте `index.html` в браузере. Должно отобразитьÑÑ "Wah wah, I am Browser Toby". -Одна поÑледнÑÑ Ð²ÐµÑ‰ÑŒ: в отличие от директории `lib`, файлы `dist/client-bundle.js` и `dist/client-bundle.js.map` не очищаютÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `clean` перед каждой Ñборкой. +Еще одна вещь: в отличие от директории `lib`, файлы `dist/client-bundle.js` и `dist/client-bundle.js.map` не очищаютÑÑ Ð·Ð°Ð´Ð°Ñ‡ÐµÐ¹ `clean` перед каждой Ñборкой. - Добавьте `clientBundle: 'dist/client-bundle.js?(.map)'` в нашу конфигурацию путей (`paths`), и наÑтройте задачу `clean` Ñледующим образом: diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 0f9f67f..71375f9 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -32,7 +32,7 @@ App.propTypes = { ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); ``` -**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes, ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ (его) понимание Ñтой библиотеки. +**Примечание**: ЕÑли вы не знакомы Ñ React или его PropTypes (типы параметров), ознакомьтеÑÑŒ Ñначала Ñ Ð½Ð¸Ð¼ и затем возвращайтеÑÑŒ в Ñто руководÑтво. Ð’ Ñледующих главах мы будем иÑпользовать React, поÑтому вам понадобитÑÑ Ñ…Ð¾Ñ€Ð¾ÑˆÐµÐµ его понимание. Ð’ Gulp файле, измените в `clientEntryPoint` раÑширение на `.jsx`: @@ -40,9 +40,9 @@ ReactDOM.render(<App message={dogBark} />, document.querySelector('.app')); clientEntryPoint: 'src/client/app.jsx', ``` -ПоÑкольку мы иÑпользуем ÑÐ¸Ð½Ñ‚Ð°ÐºÑ JSX, нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. -УÑтановите React Babel preset, который научит Babel обрабатывать JSX ÑинтакÑ: -`yarn add --dev babel-preset-react` и откорректируйте раздел `babel` в `package.json` Ñледующим образом: +ПоÑкольку мы иÑпользуем ÑинтакÑÐ¸Ñ JSX, нам так же нужен Babel Ð´Ð»Ñ ÐµÐ³Ð¾ обработки. +УÑтановите React Babel preset, который научит Babel обрабатывать JSX ÑинтакÑÐ¸Ñ +`yarn add --dev babel-preset-react`, и откорректируйте раздел `babel` в `package.json` Ñледующим образом: ```json "babel": { @@ -53,10 +53,10 @@ clientEntryPoint: 'src/client/app.jsx', }, ``` -Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby" Ñгенерированное React. +Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby", Ñгенерированное React. Следующий раздел: [9 - Redux](/tutorial/9-redux) -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index 4d30928..a40498a 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -4,7 +4,7 @@ - **хранилище** (store) - проÑтой JavaScript объект, предÑтавлÑющий ÑоÑтоÑние вашего приложениÑ; - **дейÑтвиÑ** (actions), которые обычно запуÑкаютÑÑ Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚ÐµÐ»ÐµÐ¼; -- **редюÑеры** (reducers), которые можно раÑÑматривать как обработчики дейÑтвий. +- **редюÑеры** (reducers),которые можно раÑÑматривать как обработчики дейÑтвий. РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). @@ -161,4 +161,4 @@ export default connect(mapStateToProps)(Message); Следующий раздел: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). -- GitLab From c082c000180a2b55bc152126d9c4fc09632c2983 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Sun, 13 Nov 2016 18:19:33 +0700 Subject: [PATCH 51/73] check --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 14b288d..ec3aba5 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ >Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@verekia](https://twitter.com/verekia)). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. -## Перевод практичеÑки завершен. Идет правка текÑта. +### Перевод практичеÑки завершен. Идет правка текÑта. [будем благодарны за помощь в обнаружении опечаток и неточноÑтей](https://github.com/UsulPro/js-stack-from-scratch/issues) -- GitLab From 963901cb422545622449327cfc3366f0ffcb2362 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Sun, 13 Nov 2016 18:57:33 +0700 Subject: [PATCH 52/73] check --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 14b288d..ec3aba5 100644 --- a/README.md +++ b/README.md @@ -15,7 +15,7 @@ >Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@verekia](https://twitter.com/verekia)). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. -## Перевод практичеÑки завершен. Идет правка текÑта. +### Перевод практичеÑки завершен. Идет правка текÑта. [будем благодарны за помощь в обнаружении опечаток и неточноÑтей](https://github.com/UsulPro/js-stack-from-scratch/issues) -- GitLab From 30229fc4441e8caa911d43f23934c5d776638000 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Sun, 13 Nov 2016 19:15:56 +0700 Subject: [PATCH 53/73] upd enlish ver to 11d7ac52647b602ba2d2840f600a05542e9f2845 --- READMEeng.md | 11 +++-- how-to-translate.md | 8 +++- mdlint.js | 23 ++++++++++ package.json | 5 +- .../1-node-npm-yarn-package-json/READMEeng.md | 7 +-- .../READMEeng.md | 6 ++- .../11-testing-mocha-chai-sinon/READMEeng.md | 5 +- tutorial/12-flow/READMEeng.md | 6 ++- tutorial/2-packages/READMEeng.md | 3 +- tutorial/3-es6-babel-gulp/READMEeng.md | 8 ++-- tutorial/4-es6-syntax-class/READMEeng.md | 6 +-- tutorial/5-es6-modules-syntax/READMEeng.md | 3 +- tutorial/6-eslint/READMEeng.md | 9 ++-- tutorial/7-client-webpack/READMEeng.md | 3 +- tutorial/8-react/READMEeng.md | 3 +- tutorial/9-redux/READMEeng.md | 11 ++--- yarn.lock | 46 ++++++++++++++++++- 17 files changed, 122 insertions(+), 41 deletions(-) create mode 100644 mdlint.js diff --git a/READMEeng.md b/READMEeng.md index 27cfdaa..d9ab0b2 100644 --- a/READMEeng.md +++ b/READMEeng.md @@ -1,5 +1,7 @@ # JavaScript Stack from Scratch +[](https://travis-ci.org/verekia/js-stack-from-scratch) [](https://gitter.im/js-stack-from-scratch/Lobby) + [](https://yarnpkg.com/) [](https://facebook.github.io/react/) [](http://gulpjs.com/) @@ -10,13 +12,11 @@ [](http://chaijs.com/) [](https://flowtype.org/) -[](https://travis-ci.org/verekia/js-stack-from-scratch) - Welcome to my modern JavaScript stack tutorial: **JavaScript Stack from Scratch**. This is a minimalistic and straight-to-the-point guide to assembling a JavaScript stack. It requires some general programming knowledge, and JavaScript basics. **It focuses on wiring tools together** and giving you the **simplest possible example** for each tool. You can see this tutorial as *a way to write your own boilerplate from scratch*. -You don't need to use this entire stack if you build a simple web page with a few JS interactions of course (a combination of Babel + jQuery is enough!), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you. +You don't need to use this entire stack if you build a simple web page with a few JS interactions of course (a combination of Browserify/Webpack + Babel + jQuery is enough to be able to write ES6 code in different files with CLI compilation), but if you want to build a web app that scales, and need help setting things up, this tutorial will work great for you. Since the goal of this tutorial is to assemble various tools, I do not go into details about how these tools work individually. Refer to their documentation or find other tutorials if you want to acquire deeper knowledge in them. @@ -62,8 +62,9 @@ Production / development environments, Express, React Router, Server-Side Render ## Translations -- [Chinese](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10) -- [Italian](https://github.com/fbertone/js-stack-from-scratch) by [Fabrizio Bertone](https://github.com/fbertone) +- [䏿–‡](https://github.com/pd4d10/js-stack-from-scratch) by [@pd4d10](http://github.com/pd4d10) +- [Italiano](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) If you want to add your translation, please read the [translation recommendations](/how-to-translate.md) to get started! diff --git a/how-to-translate.md b/how-to-translate.md index 28ac21e..102687c 100644 --- a/how-to-translate.md +++ b/how-to-translate.md @@ -6,10 +6,14 @@ This tutorial is in constant evolution to provide the best learning experience t Here is what I think is a good workflow: -- Check if there is already a translation issue open for your language. If that's the case, get in touch with the folks who opened it and consider collaborating. All maintainers will be mentioned on the English repo, so team work is encouraged! +- Check if there is already a translation issue open for your language. If that's the case, get in touch with the folks who opened it and consider collaborating. All maintainers will be mentioned on the English repo, so team work is encouraged! You can open issues on their translation fork project to offer your help on certain chapters for instance. + +- Join the [Translations Gitter room](https://gitter.im/js-stack-from-scratch/Translations) if you're feeling chatty. - Fork the main [English repository](https://github.com/verekia/js-stack-from-scratch). +- Open an issue on the English repo to show you're currently working on a translation. + - Translate the `README.md` files. - Add a note somewhere explaining on the main `README.md` that this is a translation, with a link to the English repository. If you don't plan to make the translation evolve over time, you can maybe add a little note saying to refer to the English one for an up-to-date version of the tutorial. I'll leave that up to your preference. @@ -30,6 +34,8 @@ Since I want to reward you for your good work as much as possible, you can put a - After your original one-shot translation, if you want to update your repo with the latest change from the main English repo, [sync your fork](https://help.github.com/articles/syncing-a-fork/) with my repo. To make it easy to see what changed since your initial translation, you can use Github's feature to [compare commits](https://help.github.com/articles/comparing-commits-across-time/#comparing-commits). Set the **base** to the last commit from the English repo you used to translate, and compare it to **master**, like so: +<!-- markdownlint-disable MD034 --> https://github.com/verekia/js-stack-from-scratch/compare/dfab78b581a3da800daeb3686b900dd9ea972da0...master +<!-- markdownlint-enable MD034 --> That should give you a easy-to-read diff to see exactly what changed in `README.md` files since your translation! diff --git a/mdlint.js b/mdlint.js new file mode 100644 index 0000000..101582f --- /dev/null +++ b/mdlint.js @@ -0,0 +1,23 @@ +const glob = require('glob'); +const markdownlint = require('markdownlint'); + +const config = { + 'default': true, + 'line_length': false, + 'no-emphasis-as-header': false +} + +const files = glob.sync('**/*.md', { ignore: '**/node_modules/**' }); + +markdownlint({ files, config }, (err, result) => { + if (!err) { + const resultString = result.toString(); + console.log('== Linting Markdown Files...'); + if (resultString) { + console.log(resultString); + process.exit(1); + } else { + console.log('== OK!'); + } + } +}); diff --git a/package.json b/package.json index 41d42b2..e4aa2a3 100644 --- a/package.json +++ b/package.json @@ -3,9 +3,12 @@ "version": "1.0.0", "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack", "scripts": { - "test": "cd tutorial/1-node-npm-yarn-package-json && yarn && yarn run tutorial-test && cd ../2-packages && yarn && yarn run tutorial-test && cd ../3-es6-babel-gulp && yarn && yarn run tutorial-test && cd ../4-es6-syntax-class && yarn && yarn run tutorial-test && cd ../5-es6-modules-syntax && yarn && yarn run tutorial-test && cd ../6-eslint && yarn && yarn run tutorial-test && cd ../7-client-webpack && yarn && yarn run tutorial-test && cd ../8-react && yarn && yarn run tutorial-test && cd ../9-redux && yarn && yarn run tutorial-test && cd ../10-immutable-redux-improvements && yarn && yarn run tutorial-test && cd ../11-testing-mocha-chai-sinon && yarn && yarn run tutorial-test && cd ../12-flow && yarn && yarn run tutorial-test" + "test": "yarn run mdlint && cd tutorial/1-node-npm-yarn-package-json && yarn && yarn run tutorial-test && cd ../2-packages && yarn && yarn run tutorial-test && cd ../3-es6-babel-gulp && yarn && yarn run tutorial-test && cd ../4-es6-syntax-class && yarn && yarn run tutorial-test && cd ../5-es6-modules-syntax && yarn && yarn run tutorial-test && cd ../6-eslint && yarn && yarn run tutorial-test && cd ../7-client-webpack && yarn && yarn run tutorial-test && cd ../8-react && yarn && yarn run tutorial-test && cd ../9-redux && yarn && yarn run tutorial-test && cd ../10-immutable-redux-improvements && yarn && yarn run tutorial-test && cd ../11-testing-mocha-chai-sinon && yarn && yarn run tutorial-test && cd ../12-flow && yarn && yarn run tutorial-test", + "mdlint": "node mdlint.js" }, "devDependencies": { + "glob": "^7.1.1", + "markdownlint": "^0.3.0", "yarn": "^0.16.1" }, "repository": "verekia/js-stack-from-scratch", diff --git a/tutorial/1-node-npm-yarn-package-json/READMEeng.md b/tutorial/1-node-npm-yarn-package-json/READMEeng.md index 05d7484..2bdab96 100644 --- a/tutorial/1-node-npm-yarn-package-json/READMEeng.md +++ b/tutorial/1-node-npm-yarn-package-json/READMEeng.md @@ -12,6 +12,7 @@ For instance, on **Ubuntu / Debian**, you would run the following commands to in curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - sudo apt-get install -y nodejs ``` + You want any version of Node > 6.5.0. `npm`, the default package manager for Node, comes automatically with Node, so you don't have to install it yourself. @@ -31,7 +32,7 @@ Running `node .` to execute our program is a bit too low-level. We are going to - In `package.json`, add a `scripts` object to the root object like so: -``` +```json "scripts": { "start": "node ." } @@ -43,7 +44,7 @@ Running `node .` to execute our program is a bit too low-level. We are going to - Create a `.gitignore` file and add the following to it: -``` +```gitignore npm-debug.log yarn-error.log ``` @@ -52,4 +53,4 @@ yarn-error.log Next section: [2 - Installing and using a package](/tutorial/2-packages) -Back to the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/10-immutable-redux-improvements/READMEeng.md b/tutorial/10-immutable-redux-improvements/READMEeng.md index ca56507..d0c2af4 100644 --- a/tutorial/10-immutable-redux-improvements/READMEeng.md +++ b/tutorial/10-immutable-redux-improvements/READMEeng.md @@ -10,7 +10,9 @@ First, we are going to add **Immutable JS** to our codebase. Immutable is a libr const obj = { a: 1 }; obj.a = 2; // Mutates `obj` ``` + You would do: + ```javascript const obj = Immutable.Map({ a: 1 }); obj.set('a', 2); // Returns a new object without mutating `obj` @@ -35,6 +37,7 @@ We are going to use `Map` in our codebase, but ESLint and the Airbnb config will ] } ``` + This makes `Map` and `List` (the 2 Immutable objects you'll use all the time) exceptions to that ESLint rule. This verbose JSON formatting is actually done automatically by Yarn/NPM, so we cannot make it more compact unfortunately. Anyway, back to Immutable: @@ -78,6 +81,7 @@ The app should still behave exactly the way it did before. As you can see from the code snippet above, our state object still contains a plain old `dog` object attribute, which isn't immutable. It is fine this way, but if you want to only manipulate immutable objects, you could install the `redux-immutable` package to replace Redux's `combineReducers` function. **Optional**: + - Run `yarn add redux-immutable` - Replace your `combineReducers` function in `app.jsx` to use the one imported from `redux-immutable` instead. - In `bark-message.js` replace `state.dog.get('hasBarked')` by `state.getIn(['dog', 'hasBarked'])`. @@ -99,4 +103,4 @@ export const makeBark = createAction(MAKE_BARK, () => true); Next section: [11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon) -Back to the [previous section](/tutorial/9-redux) or the [table of contents](/README.md). +Back to the [previous section](/tutorial/9-redux) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/11-testing-mocha-chai-sinon/READMEeng.md b/tutorial/11-testing-mocha-chai-sinon/READMEeng.md index 53a2766..08653bf 100644 --- a/tutorial/11-testing-mocha-chai-sinon/READMEeng.md +++ b/tutorial/11-testing-mocha-chai-sinon/READMEeng.md @@ -42,6 +42,7 @@ describe('App State', () => { }); }); ``` + Alright, let's analyze this whole thing. First, notice how we import the `should` assertion style from `chai`. This lets us assert things using a syntax like `mynumber.should.equal(3)`, pretty neat. In order to be able to call `should` on any object, we need to run the function `should()` before anything. Some of these assertion are *expressions*, like `mybook.should.be.true`, which will make ESLint grumpy, so we've added an ESLint comment at the top to disable the `no-unused-expressions` rule in this file. @@ -52,7 +53,7 @@ Our `makeBark` test is very explicit, and the description provided as a string i Alright, let's run this test! -- Create the following `test` task, which relies on the `gulp-mocha` plugin: +- In `gulpfile.babel.js`, create the following `test` task, which relies on the `gulp-mocha` plugin: ```javascript import mocha from 'gulp-mocha'; @@ -154,4 +155,4 @@ If everything went well in this chapter, you should have 2 passing tests. Next section: [12 - Type Checking with Flow](/tutorial/12-flow) -Back to the [previous section](/tutorial/10-immutable-redux-improvements) or the [table of contents](/README.md). +Back to the [previous section](/tutorial/10-immutable-redux-improvements) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/12-flow/READMEeng.md b/tutorial/12-flow/READMEeng.md index f80e409..694a1b0 100644 --- a/tutorial/12-flow/READMEeng.md +++ b/tutorial/12-flow/READMEeng.md @@ -96,13 +96,15 @@ import * as Immutable from 'immutable'; Until Immutable officially adresses the issue, just pick whichever looks better to you when importing Immutable components. I'm personally going for `import * as Immutable from 'immutable'` since it's shorter and won't require refactoring the code when this issue gets fixed. **Note**: If Flow detects type errors in your `node_modules` folder, add an `[ignore]` section in your `.flowconfig` to ignore the packages causing issues specifically (do not ignore the entire `node_modules` directory). It could look like this: -``` + +```flowconfig [ignore] .*/node_modules/gulp-flowtype/.* ``` + In my case, the `linter-flow` plugin for Atom was detecting type errors in the `node_modules/gulp-flowtype` directory, which contains files annotated with `// @flow`. You now have bullet-proof code that is linted, typechecked, and tested, good job! -Back to the [previous section](/tutorial/11-testing-mocha-chai-sinon) or the [table of contents](/README.md). +Back to the [previous section](/tutorial/11-testing-mocha-chai-sinon) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/2-packages/READMEeng.md b/tutorial/2-packages/READMEeng.md index 66b71a6..dd694b1 100644 --- a/tutorial/2-packages/READMEeng.md +++ b/tutorial/2-packages/READMEeng.md @@ -25,7 +25,6 @@ Congratulations, you installed and used a package! **Note**: There are 2 kinds of package dependencies, `"dependencies"` and `"devDependencies"`. `"dependencies"` is more general than `"devDependencies"`, which are packages that you only need during development, not production (typically, build-related packages, linters, etc). For `"devDependencies"`, we will use `yarn add --dev [package]`. - Next section: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -Back to the [previous section](/tutorial/1-node-npm-yarn-package-json) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/1-node-npm-yarn-package-json) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/3-es6-babel-gulp/READMEeng.md b/tutorial/3-es6-babel-gulp/READMEeng.md index 64543c1..483e08e 100644 --- a/tutorial/3-es6-babel-gulp/READMEeng.md +++ b/tutorial/3-es6-babel-gulp/READMEeng.md @@ -5,7 +5,8 @@ We're now going to use ES6 syntax, which is a great improvement over the "old" E - Run `yarn add --dev gulp` - Run `yarn add --dev gulp-babel` - Run `yarn add --dev babel-preset-latest` -- In `package.json`, add a `babel` field for the babel configuration. Make it use the latest Babel preset like this: +- Run `yarn add --dev del` (for the `clean` task, as you will see below) +- In `package.json`, add a `babel` field for the Babel configuration. Make it use the latest Babel preset like this: ```json "babel": { @@ -73,7 +74,7 @@ First we define a `paths` object to store all our different file paths and keep Then we define 5 tasks: `build`, `clean`, `main`, `watch`, and `default`. - `build` is where Babel is called to transform all of our source files located under `src` and write the transformed ones to `lib`. -- `clean` is a task that simply deletes our entire auto-generated `lib` folder before every `build`. This is typically useful to get rid of old compiled files after renaming or deleting some in `src`, or to make sure the `lib` folder is in sync with the `src` folder if your build fails and you don't notice. We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). Run `yarn add --dev del` to install that package. +- `clean` is a task that simply deletes our entire auto-generated `lib` folder before every `build`. This is typically useful to get rid of old compiled files after renaming or deleting some in `src`, or to make sure the `lib` folder is in sync with the `src` folder if your build fails and you don't notice. We use the `del` package to delete files in a way that integrates well with Gulp's stream (this is the [recommended](https://github.com/gulpjs/gulp/blob/master/docs/recipes/delete-files-folder.md) way to delete files with Gulp). - `main` is the equivalent of running `node .` in the previous chapter, except this time, we want to run it on `lib/index.js`. Since `index.js` is the default file Node looks for, we can simply write `node lib` (we use the `libDir` variable to keep things DRY). The `require('child_process').exec` and `exec` part in the task is a native Node function that executes a shell command. We forward `stdout` to `console.log()` and return a potential error using `gulp.task`'s callback function. Don't worry if this part is not super clear to you, remember that this task is basically just running `node lib`. - `watch` runs the `main` task when filesystem changes happen in the specified files. - `default` is a special task that will be run if you simply call `gulp` from the CLI. In our case we want it to run both `watch` and `main` (for the first execution). @@ -87,7 +88,6 @@ Alright! Let's see if this works. - Add `/lib/` to your `.gitignore` - Next section: [4 - Using the ES6 syntax with a class](/tutorial/4-es6-syntax-class) -Back to the [previous section](/tutorial/2-packages) or the [table of contents](/README.md). +Back to the [previous section](/tutorial/2-packages) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/4-es6-syntax-class/READMEeng.md b/tutorial/4-es6-syntax-class/READMEeng.md index 4dc8c7c..3a8848d 100644 --- a/tutorial/4-es6-syntax-class/READMEeng.md +++ b/tutorial/4-es6-syntax-class/READMEeng.md @@ -29,13 +29,13 @@ const toby = new Dog('Toby'); console.log(toby.bark()); ``` + As you can see, unlike the community-made package `color` that we used before, when we require one of our files, we use `./` in the `require()`. - Run `yarn start` and it should print 'Wah wah, I am Toby'. -- Take a look at the code generated in `lib` to see how your compiled code looks like (`var` instead of `const` for instance). - +- Take a look at the code generated in `lib` to see what your compiled code looks like (`var` instead of `const` for instance). Next section: [5 - The ES6 modules syntax](/tutorial/5-es6-modules-syntax) -Back to the [previous section](/tutorial/3-es6-babel-gulp) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/3-es6-babel-gulp) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/5-es6-modules-syntax/READMEeng.md b/tutorial/5-es6-modules-syntax/READMEeng.md index 0d5ce9e..bdde0ab 100644 --- a/tutorial/5-es6-modules-syntax/READMEeng.md +++ b/tutorial/5-es6-modules-syntax/READMEeng.md @@ -25,6 +25,7 @@ import Cat from './dog'; const toby = new Cat('Toby'); ``` + Obviously, most of the time you will use the same name as the class / module you're importing. A case where you don't do that is how we `const babel = require('gulp-babel')` in our Gulp file. @@ -47,4 +48,4 @@ Note the syntactic sugar to extract `exec` directly from `child_process`. Pretty Next section: [6 - ESLint](/tutorial/6-eslint) -Back to the [previous section](/tutorial/4-es6-syntax-class) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/4-es6-syntax-class) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/6-eslint/READMEeng.md b/tutorial/6-eslint/READMEeng.md index ef29ef2..cf781e0 100644 --- a/tutorial/6-eslint/READMEeng.md +++ b/tutorial/6-eslint/READMEeng.md @@ -2,11 +2,12 @@ We're going to lint our code to catch potential issues. ESLint is the linter of choice for ES6 code. Instead of configuring the rules we want for our code ourselves, we will use the config created by Airbnb. This config uses a few plugins, so we need to install those as well to use their config. -- Run `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` +- Run `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-react` As you can see, you can install several packages in one command. It will add all of these to your `package.json`, as usual. In `package.json`, add an `eslintConfig` field like so: + ```json "eslintConfig": { "extends": "airbnb", @@ -15,9 +16,10 @@ In `package.json`, add an `eslintConfig` field like so: ] }, ``` + The `plugins` part is to tell ESLint that we use the ES6 import syntax. -**Note**: An `.eslintrc.js` file at the root of your project could also be used instead of the `eslintConfig` field of `package.json`. Just like for the Babel configuration, we try to avoid bloating the root folder with too many files, but if you have a complex ESLint config, consider this alternative. +**Note**: An `.eslintrc.js`, `.eslintrc.json`, or `.eslintrc.yaml` file at the root of your project could also be used instead of the `eslintConfig` field of `package.json`. Just like for the Babel configuration, we try to avoid bloating the root folder with too many files, but if you have a complex ESLint config, consider this alternative. We'll create a Gulp task that runs ESLint for us. So we'll install the ESLint Gulp plugin as well: @@ -111,7 +113,6 @@ The last issue left is about `console.log()`. Let's say that we want this `conso **Note**: This section sets you up with ESLint in the console. It is great for catching errors at build time / before pushing, but you also probably want it integrated to your IDE. Do NOT use your IDE's native linting for ES6. Configure it so the binary it uses for linting is the one in your `node_modules` folder. This way it can use all of your project's config, the Airbnb preset, etc. Otherwise you will just get a generic ES6 linting. - Next section: [7 - Client app with Webpack](/tutorial/7-client-webpack) -Back to the [previous section](/tutorial/5-es6-modules-syntax) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/5-es6-modules-syntax) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/7-client-webpack/READMEeng.md b/tutorial/7-client-webpack/READMEeng.md index f69dcdf..c958dfb 100644 --- a/tutorial/7-client-webpack/READMEeng.md +++ b/tutorial/7-client-webpack/READMEeng.md @@ -37,6 +37,7 @@ Add the following to your `package.json`, under `eslintConfig`: "browser": true } ``` + This way we can use variables such as `window` or `document` which are always accessible in the browser without ESLint complaining about undeclared variables. If you want to use some of the most recent ES features in your client code, like `Promise`s, you need to include the [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) in your client code. @@ -190,4 +191,4 @@ gulp.task('clean', () => del([ Next section: [8 - React](/tutorial/8-react) -Back to the [previous section](/tutorial/6-eslint) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/6-eslint) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/8-react/READMEeng.md b/tutorial/8-react/READMEeng.md index b612b7d..3281bee 100644 --- a/tutorial/8-react/READMEeng.md +++ b/tutorial/8-react/READMEeng.md @@ -55,7 +55,6 @@ Install the React Babel preset, which will teach Babel how to process the JSX sy Now after running `yarn start`, if we open `index.html`, we should see "The dog says: Wah wah, I am Browser Toby" rendered by React. - Next section: [9 - Redux](/tutorial/9-redux) -Back to the [previous section](/tutorial/7-client-webpack) or the [table of contents](https://github.com/verekia/js-stack-from-scratch). +Back to the [previous section](/tutorial/7-client-webpack) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/tutorial/9-redux/READMEeng.md b/tutorial/9-redux/READMEeng.md index 6d174d6..82f94bf 100644 --- a/tutorial/9-redux/READMEeng.md +++ b/tutorial/9-redux/READMEeng.md @@ -1,12 +1,6 @@ # 9 - Redux -Ð’ Ñтой чаÑти (ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð½Ð°Ð¸Ð±Ð¾Ð»ÐµÐµ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ Ð¸Ð· пройденных), мы добавим в наше приложение [Redux](http://redux.js.org/) ([Ð´Ð¾ÐºÑƒÐ¼ÐµÐ½Ñ‚Ð°Ñ†Ð¸Ñ Ð½Ð° РуÑÑком](https://www.gitbook.com/book/rajdee/redux-in-russian/details)) и подключим его к React. Redux управлÑет ÑоÑтоÑнием приложениÑ. Он включает в ÑÐµÐ±Ñ Ñ‚Ð°ÐºÐ¸Ðµ понÑтиÑ, как: - -- **хранилище** (store) - проÑтой JavaScript объект, предÑтавлÑющий ÑоÑтоÑние вашего приложениÑ; -- **дейÑтвиÑ** (actions), которые обычно запуÑкаютÑÑ Ð¿Ð¾Ð»ÑŒÐ·Ð¾Ð²Ð°Ñ‚ÐµÐ»ÐµÐ¼; -- **редюÑеры** (reducers), которые можно раÑÑматривать как обработчики дейÑтвий. - -РедюÑеры воздеÑтвуют на ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (**хранилище**), и когда ÑоÑтоÑние Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ Ð¸Ð·Ð¼ÐµÐ½ÑетÑÑ, что-то проиÑходит в вашем приложении. Ð¥Ð¾Ñ€Ð¾ÑˆÐ°Ñ Ð²Ð¸Ð·ÑƒÐ°Ð»ÑŒÐ½Ð°Ñ Ð´ÐµÐ¼Ð¾Ð½ÑÑ‚Ñ€Ð°Ñ†Ð¸Ñ Redux находитÑÑ [здеÑÑŒ](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). +In this chapter (which is the most difficult so far) we will be adding [Redux](http://redux.js.org/) to our application and will hook it up with React. Redux manages the state of your application. It is composed of a **store** which is a plain JavaScript object representing the state of your app, **actions** which are typically triggered by users, and **reducers** which can be seen as action handlers. Reducers affect your application state (the *store*), and when the application state is modified, things happen in your app. A good visual demonstration of Redux can be found [here](http://slides.com/jenyaterpil/redux-from-twitter-hype-to-production#/9). In order to demonstrate how to use Redux in the simplest possible way, our app will consist of a message and a button. The message says whether the dog has barked or not (it initially hasn't), and the button makes the dog bark, which should update the message. @@ -26,6 +20,7 @@ export const makeBark = () => ({ payload: true, }); ``` + Here we define an action type, `MAKE_BARK`, and a function (also known as *action creator*) that triggers a `MAKE_BARK` action called `makeBark`. Both are exported because we'll need them both in other files. This action implements the [Flux Standard Action](https://github.com/acdlite/flux-standard-action) model, which is why it has `type` and `payload` attributes. - In `reducers`, create `dog-reducer.js`: @@ -161,4 +156,4 @@ export default connect(mapStateToProps)(Message); Next section: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Back to the [previous section](/tutorial/8-react) or the [table of contents](/README.md). +Back to the [previous section](/tutorial/8-react) or the [table of contents](https://github.com/verekia/js-stack-from-scratch#table-of-contents). diff --git a/yarn.lock b/yarn.lock index 82a0aec..7c581d5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -33,6 +33,12 @@ are-we-there-yet@~1.1.2: delegates "^1.0.0" readable-stream "^2.0.0 || ^1.1.13" +argparse@^1.0.7: + version "1.0.9" + resolved "https://registry.yarnpkg.com/argparse/-/argparse-1.0.9.tgz#73d83bc263f86e97f8cc4f6bae1b0e90a7d22c86" + dependencies: + sprintf-js "~1.0.2" + array-find-index@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/array-find-index/-/array-find-index-1.0.2.tgz#df010aa1287e164bbda6f9723b0a96a1ec4187a1" @@ -262,6 +268,10 @@ end-of-stream@^1.0.0: dependencies: once "~1.3.0" +entities@~1.1.1: + version "1.1.1" + resolved "https://registry.yarnpkg.com/entities/-/entities-1.1.1.tgz#6e5c2d0a5621b5dadaecef80b90edfb5cd7772f0" + err-code@^1.0.0: version "1.1.1" resolved "https://registry.yarnpkg.com/err-code/-/err-code-1.1.1.tgz#739d71b6851f24d050ea18c79a5b722420771d59" @@ -366,7 +376,7 @@ getpass@^0.1.1: dependencies: assert-plus "^1.0.0" -glob@^7.0.3, glob@^7.0.5: +glob, glob@^7.0.3, glob@^7.0.5: version "7.1.1" resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.1.tgz#805211df04faaf1c63a3600306cdf5ade50b2ec8" dependencies: @@ -546,6 +556,12 @@ leven@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/leven/-/leven-2.0.0.tgz#74c45744439550da185801912829f61d22071bc1" +linkify-it@^2.0.0: + version "2.0.2" + resolved "https://registry.yarnpkg.com/linkify-it/-/linkify-it-2.0.2.tgz#994629a4adfa5a7d34e08c075611575ab9b6fcfc" + dependencies: + uc.micro "^1.0.1" + loose-envify@^1.0.0: version "1.2.0" resolved "https://registry.yarnpkg.com/loose-envify/-/loose-envify-1.2.0.tgz#69a65aad3de542cf4ee0f4fe74e8e33c709ccb0f" @@ -559,6 +575,26 @@ loud-rejection@^1.2.0: currently-unhandled "^0.4.1" signal-exit "^3.0.0" +markdown-it@^8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/markdown-it/-/markdown-it-8.0.1.tgz#ff60e2103d17896cb6c57407baa9766f916495cb" + dependencies: + argparse "^1.0.7" + entities "~1.1.1" + linkify-it "^2.0.0" + mdurl "^1.0.1" + uc.micro "^1.0.3" + +markdownlint: + version "0.3.0" + resolved "https://registry.yarnpkg.com/markdownlint/-/markdownlint-0.3.0.tgz#af428c09cf6a5dcc32fa561161d43981d6609bf2" + dependencies: + markdown-it "^8.0.1" + +mdurl@^1.0.1: + version "1.0.1" + resolved "https://registry.yarnpkg.com/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e" + mime-db@~1.24.0: version "1.24.0" resolved "https://registry.yarnpkg.com/mime-db/-/mime-db-1.24.0.tgz#e2d13f939f0016c6e4e9ad25a8652f126c467f0c" @@ -832,6 +868,10 @@ spdx-license-ids@^1.0.2: version "1.2.2" resolved "https://registry.yarnpkg.com/spdx-license-ids/-/spdx-license-ids-1.2.2.tgz#c9df7a3424594ade6bd11900d596696dc06bac57" +sprintf-js@~1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/sprintf-js/-/sprintf-js-1.0.3.tgz#04e6926f662895354f3dd015203633b857297e2c" + sshpk@^1.7.0: version "1.10.1" resolved "https://registry.yarnpkg.com/sshpk/-/sshpk-1.10.1.tgz#30e1a5d329244974a1af61511339d595af6638b0" @@ -912,6 +952,10 @@ tweetnacl@^0.14.3, tweetnacl@~0.14.0: version "0.14.3" resolved "https://registry.yarnpkg.com/tweetnacl/-/tweetnacl-0.14.3.tgz#3da382f670f25ded78d7b3d1792119bca0b7132d" +uc.micro@^1.0.1, uc.micro@^1.0.3: + version "1.0.3" + resolved "https://registry.yarnpkg.com/uc.micro/-/uc.micro-1.0.3.tgz#7ed50d5e0f9a9fb0a573379259f2a77458d50192" + user-home@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/user-home/-/user-home-2.0.0.tgz#9c70bfd8169bc1dcbf48604e0f04b8b49cde9e9f" -- GitLab From f4337f7ffc8dbf6fcf40ebf17553115f2b38ff89 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 19:35:20 +0700 Subject: [PATCH 54/73] up-to-date rus intro --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index ec3aba5..20efe1f 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,8 @@ # Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ ## JavaScript Stack from Scratch +[](https://travis-ci.org/verekia/js-stack-from-scratch) [](https://gitter.im/js-stack-from-scratch/Lobby) + + [](https://yarnpkg.com/) [](https://facebook.github.io/react/) [](http://gulpjs.com/) @@ -11,8 +13,6 @@ [](http://chaijs.com/) [](https://flowtype.org/) -[](https://travis-ci.org/verekia/js-stack-from-scratch) - >Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@verekia](https://twitter.com/verekia)). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. ### Перевод практичеÑки завершен. Идет правка текÑта. @@ -25,7 +25,7 @@ Ðто минималиÑтичное и практико-ориентированное поÑобие по применению JavaScript технологий. Вам потребуютÑÑ Ð¾Ð±Ñ‰Ð¸Ðµ Ð·Ð½Ð°Ð½Ð¸Ñ Ð¿Ð¾ программированию и оÑновы JavaScript. Ðто поÑобие **нацелено на интеграцию необходимых инÑтрументов** и предоÑтавлÑет **макÑимально проÑтые примеры** Ð´Ð»Ñ ÐºÐ°Ð¶Ð´Ð¾Ð³Ð¾ инÑтрумента. Ð’Ñ‹ можете раÑÑматривать данный документ, как *возможноÑть Ñоздать Ñвой ÑобÑтвенный шаблонный проект Ñ Ð½ÑƒÐ»Ñ*. -Конечно, вам не нужны вÑе Ñти технологии, еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (доÑтаточно комбинаци Babel + jQuery), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. +Конечно, вам не нужны вÑе Ñти технологии, еÑли вы делаете проÑтую веб Ñтраницу Ñ Ð¿Ð°Ñ€Ð¾Ð¹ JS функций (комбинаци Browserify/Webpack + Babel + jQuery доÑтаточно чтобы напиÑать ES6 код в неÑкольких файлах и Ñкомпилировать вÑе через командную Ñтроку), но еÑли вы ÑобираетеÑÑŒ Ñоздать маÑштабируемое веб приложение, и вам нужно вÑе правильно наÑтроить, то Ñто руководÑтво отлично вам подходит. ПоÑкольку целью Ñтого руководÑтва ÑвлÑетÑÑ Ñборка различных инÑтрументов, Ñ Ð½Ðµ буду вдаватьÑÑ Ð² детали по каждому из них. ЕÑли вы хотите получить по ним более глубокие знаниÑ, изучайте их документацию или другие руководÑтва. -- GitLab From a7179488cd426715909b4ccae6b8cdef2ec6f8d7 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 19:36:19 +0700 Subject: [PATCH 55/73] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 20efe1f..880eb5b 100644 --- a/README.md +++ b/README.md @@ -2,7 +2,7 @@ ## JavaScript Stack from Scratch [](https://travis-ci.org/verekia/js-stack-from-scratch) [](https://gitter.im/js-stack-from-scratch/Lobby) - + + [](https://yarnpkg.com/) [](https://facebook.github.io/react/) [](http://gulpjs.com/) -- GitLab From 8af26d20f45b6b3b4c2934adf748c70cd351ce2f Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 19:43:42 +0700 Subject: [PATCH 56/73] up-to-date rus section1 --- tutorial/1-node-npm-yarn-package-json/README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 3918d7a..1b972ed 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -31,7 +31,7 @@ sudo apt-get install -y nodejs - Ð’ файле `package.json`, в корневом объекте Ñоздайте объект `scripts`, чтобы было так: -``` +```json "scripts": { "start": "node ." } @@ -43,7 +43,7 @@ sudo apt-get install -y nodejs - Создайте файл `.gitignore` и добавьте туда Ñледующее: -``` +```gitignore npm-debug.log yarn-error.log ``` @@ -52,4 +52,4 @@ yarn-error.log Следующий раздел: [2 - Installing and using a package](/tutorial/2-packages) -Ðазад в [Содержание](/README.md). +Ðазад в [Содержание](/../../#Содержание). -- GitLab From e912ed920d6f8cab3927d6940b5af9c77406d732 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 19:48:53 +0700 Subject: [PATCH 57/73] up-to-date rus section 10 --- tutorial/10-immutable-redux-improvements/README.md | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/tutorial/10-immutable-redux-improvements/README.md b/tutorial/10-immutable-redux-improvements/README.md index ba49d76..be4dc14 100644 --- a/tutorial/10-immutable-redux-improvements/README.md +++ b/tutorial/10-immutable-redux-improvements/README.md @@ -10,7 +10,9 @@ const obj = { a: 1 }; obj.a = 2; // ИзменÑет `obj` ``` + Мы можем Ñделать так: + ```javascript const obj = Immutable.Map({ a: 1 }); obj.set('a', 2); // Возвращает новый объект не изменÑÑ `obj` @@ -35,6 +37,7 @@ obj.set('a', 2); // Возвращает новый объект не измен ] } ``` + Таким образом мы внеÑли `Map` и `List` (два Immutable объекта, которые мы будем иÑпользовать поÑтоÑно) в иÑÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ðº Ñтому ESLint правилу. Такой подробный Ñтиль Ñ„Ð¾Ñ€Ð¼Ð°Ñ‚Ð¸Ñ€Ð¾Ð²Ð°Ð½Ð¸Ñ JSON, выполнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ð¼Ð°Ñ‚Ð¸Ñ‡ÐµÑки Yarn/NPM, так что мы, к Ñожалению, не можем Ñделать его более компактным. Ð’ любом Ñлучае, вернемÑÑ Ðº Immutable: @@ -78,6 +81,7 @@ const mapStateToProps = state => ({ Как вы можете видеть из предыдущего фрагмента кода, Ñам объект state вÑе еще Ñодержит Ñтарый атрибут `dog`, ÑвлÑющийÑÑ Ð¿Ñ€Ð¾Ñтым объектом и подверженный мутациÑм. Ð’ нашем Ñлучае Ñто нормально, но еÑли вы хотите манипулировать только немутируемыми объектами, можете уÑтановить пакет `redux-immutable`, чтобы заменить функцию `combineReducers` у Redux. **Ðе обÑзательно**: + - ЗапуÑтите `yarn add redux-immutable` - Замените функцию `combineReducers` из `app.jsx` на ту, что мы импортировали из `redux-immutable`. - Ð’ `bark-message.js` замените `state.dog.get('hasBarked')` на `state.getIn(['dog', 'hasBarked'])`. @@ -99,4 +103,4 @@ export const makeBark = createAction(MAKE_BARK, () => true); Следующий раздел: [11 - ТеÑтировние Ñ Mocha, Chai, и Sinon](/tutorial/11-testing-mocha-chai-sinon) -Ðазад в [предыдущий раздел](/tutorial/9-redux) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/9-redux) или [Содержание](/../../#Содержание). -- GitLab From a5fd6f6a521eca5ec20c829a0e74d0bfe885d9f0 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 19:54:54 +0700 Subject: [PATCH 58/73] up-to-date rus section 11 --- tutorial/11-testing-mocha-chai-sinon/README.md | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 51bcbf7..00dd879 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -42,6 +42,7 @@ describe('App State', () => { }); }); ``` + Хорошо, теперь давайте вÑе Ñто проанализируем. Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. @@ -52,7 +53,7 @@ describe('App State', () => { Отлично, запуÑтим Ñтот теÑÑ‚! -- Создайте Ñледующую задачу `test`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¾ÑновываетÑÑ Ð½Ð° плагине `gulp-mocha`: +- Ð’ файле `gulpfile.babel.js` Ñоздайте Ñледующую задачу `test`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð¾ÑновываетÑÑ Ð½Ð° плагине `gulp-mocha`: ```javascript import mocha from 'gulp-mocha'; @@ -153,4 +154,4 @@ describe('Shared', () => { Следующий раздел: [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../#Содержание). -- GitLab From f71dc6b1b43f21a7483f9ad227876f8b9a792125 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 19:58:09 +0700 Subject: [PATCH 59/73] up-to-date rus section 12 --- tutorial/12-flow/README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index f9de5bf..0aa86b5 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -97,13 +97,15 @@ import * as Immutable from 'immutable'; Пока Immutable официально не решит проблему, проÑто выберите то, что вам больше нравитÑÑ, когда импортируете компоненты Immutable. Лично Ñ, буду иÑпользовать `import * as Immutable from 'immutable'`, поÑкольку Ñто короче и не потребует рефакторинга кода, поÑле того, как проблема будет решена. **Примечание**: ЕÑли Flow выÑвлÑет ошибки типизации в папке `node_modules`, добавьте раздел `[ignore]` в файл `.flowconfig`, чтобы указать какие именно пакеты игнорировать (не игнорируйте полноÑтью директорию `node_modules`). Ðто может выглÑдеть так: -``` + +```flowconfig [ignore] .*/node_modules/gulp-flowtype/.* ``` + Ð’ моем Ñлуче, плагин `linter-flow` Ð´Ð»Ñ Atom обнаружил ошибки типизации в директории `node_modules/gulp-flowtype`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ñодержит файлы аннотированные `// @flow`. Теперь, у Ð²Ð°Ñ ÐµÑть "пуленепробиваемый" код, который проанализирован, протипизирован и протеÑтирован - Ð¾Ñ‚Ð»Ð¸Ñ‡Ð½Ð°Ñ Ñ€Ð°Ð±Ð¾Ñ‚Ð°! -Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/../../). \ No newline at end of file +Ðазад в [предыдущий раздел](/tutorial/11-testing-mocha-chai-sinon) или [Содержание](/../../#Содержание). -- GitLab From cad9fc537c8de0dc03dc71947f0d7cf856b7d91d Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:00:31 +0700 Subject: [PATCH 60/73] up-to-date rus section 2 --- tutorial/2-packages/README.md | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/tutorial/2-packages/README.md b/tutorial/2-packages/README.md index d5ebf1e..5897b33 100644 --- a/tutorial/2-packages/README.md +++ b/tutorial/2-packages/README.md @@ -25,7 +25,6 @@ **Примечание**: СущеÑтвует два вида завиÑимоÑтей Ð´Ð»Ñ Ð¿Ð¾Ð´ÐºÐ»ÑŽÑ‡ÐµÐ½Ð¸Ñ Ð¿Ð°ÐºÐµÑ‚Ð¾Ð²: `"dependencies"` и `"devDependencies"`. `"dependencies"` - более общее понÑтие, чем `"devDependencies"`, так как поÑледние иÑпользуютьÑÑ Ñ‚Ð¾Ð»ÑŒÐºÐ¾ Ð´Ð»Ñ Ñ€Ð°Ð·Ñ€Ð°Ð±Ð¾Ñ‚ÐºÐ¸, а не выпуÑка (production) Ð¿Ñ€Ð¸Ð»Ð¾Ð¶ÐµÐ½Ð¸Ñ (обычно Ñто пакеты ÑвÑзанные Ñ Ð¿Ñ€Ð¾Ñ†ÐµÑÑом поÑтроениÑ, анализаторы кода и Ñ‚.п.). Ð”Ð»Ñ `"devDependencies"`, будем иÑпользовать `yarn add --dev [package]`. (прим. пер. `npm install [package] --save-dev`) - Следующий раздел: [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp) -Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/1-node-npm-yarn-package-json) или [Содержание](/../../#Содержание). -- GitLab From ee0f631230754c1a11be00d7e59739926d378906 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:06:54 +0700 Subject: [PATCH 61/73] up-to-date rus section 3 --- tutorial/3-es6-babel-gulp/README.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index b3c8931..a6c74e9 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -5,6 +5,7 @@ - ЗапуÑтите `yarn add --dev gulp` - ЗапуÑтите `yarn add --dev gulp-babel` - ЗапуÑтите `yarn add --dev babel-preset-latest` +- ЗапуÑтите `yarn add --dev del` (Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡Ð¸ `clean` - очиÑтки, как вы увидете ниже) - Ð’ `package.json` добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel, Ñледующим образом: ```json @@ -87,7 +88,6 @@ Gulp, Ñам по Ñебе, имеет довольно понÑтный API. О - Добавьте `/lib/` в `.gitignore` - Следующий раздел: [4 - ИÑпользование ES6 клаÑÑов](/tutorial/4-es6-syntax-class) -Ðазад в [предыдущий раздел](/tutorial/2-packages)или [Содержание](/../../).. +Ðазад в [предыдущий раздел](/tutorial/2-packages)или [Содержание](/../../#Содержание). -- GitLab From 9fe2b9cf57ebb7f4786fe3691a78c0f3caf23116 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:09:00 +0700 Subject: [PATCH 62/73] up-to-date rus section 4 --- tutorial/4-es6-syntax-class/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/4-es6-syntax-class/README.md b/tutorial/4-es6-syntax-class/README.md index ea2f82d..5bcdf8d 100644 --- a/tutorial/4-es6-syntax-class/README.md +++ b/tutorial/4-es6-syntax-class/README.md @@ -39,4 +39,4 @@ console.log(toby.bark()); Следующий раздел: [5 - СинтакÑÐ¸Ñ Ð¼Ð¾Ð´ÑƒÐ»ÐµÐ¹ ES6](/tutorial/5-es6-modules-syntax) -Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/3-es6-babel-gulp) или [Содержание](/../../#Содержание). -- GitLab From 1f7f224419462ec985b464943958ef8200108e46 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:10:16 +0700 Subject: [PATCH 63/73] up-to-date rus section 5 --- tutorial/5-es6-modules-syntax/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tutorial/5-es6-modules-syntax/README.md b/tutorial/5-es6-modules-syntax/README.md index 8d9933f..41dbe9e 100644 --- a/tutorial/5-es6-modules-syntax/README.md +++ b/tutorial/5-es6-modules-syntax/README.md @@ -25,6 +25,7 @@ import Cat from './dog'; const toby = new Cat('Toby'); ``` + Очевидно, что в оÑновном вы будете иÑпользовать тоже имÑ, что и Ð¸Ð¼Ñ ÐºÐ»Ð°ÑÑа/Ð¼Ð¾Ð´ÑƒÐ»Ñ ÐºÐ¾Ñ‚Ð¾Ñ€Ñ‹Ð¹ вы импортируете. Один из примеров когда можно Ñделать по-другому, Ñто то как мы применили `const babel = require('gulp-babel')` в нашем Gulp файле. @@ -47,4 +48,4 @@ import { exec } from 'child_process'; Следующий раздел: [6 - ESLint](/tutorial/6-eslint) -Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/4-es6-syntax-class) или [Содержание](/../../#Содержание). -- GitLab From ab7f327fd170feef494b9644b6f52cd5903ea855 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:16:01 +0700 Subject: [PATCH 64/73] up-to-date rus section 6 --- tutorial/6-eslint/README.md | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index fdc827d..b026c13 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -2,11 +2,12 @@ Мы ÑобираемÑÑ ÐºÐ¾Ð½Ñ‚Ñ€Ð¾Ð»Ð¸Ñ€Ð¾Ð²Ð°Ñ‚ÑŒ качеÑтво кода (to lint), чтобы перехватывать потенциальные проблемы. ESLint - наиболее предпочтительный анализатор кода (linter) Ð´Ð»Ñ ES6. ВмеÑто того чтобы Ñамим определÑть правила Ð´Ð»Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ кода, мы воÑпользуемÑÑ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹, Ñозданной Airbnb. Ð’ Ñтой конфигурации иÑпользуетÑÑ Ð½ÐµÑколько плагинов, поÑтому мы их тоже уÑтановим. -- ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react` +- ЗапуÑтите `yarn add --dev eslint eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y@2.2.3 eslint-plugin-react` Как вы видите, вы можете уÑтановить неÑколько пакетов одной командой. Как обычно, они вÑе добавÑÑ‚ÑÑ Ð² ваш `package.json`. Ð’ `package.json`, добавьте ÑвойÑтво `eslintConfig` Ñо Ñледующим Ñодержанием: + ```json "eslintConfig": { "extends": "airbnb", @@ -15,9 +16,10 @@ ] }, ``` + Ð’ разделе `plugins` мы Ñообщаем ESLint, что иÑпользуем ÑинтакиÑÐ¸Ñ ES6 `import`. -**Примечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. +**Примечание**: ВмеÑто ÑвойÑтва `eslintConfig` в `package.json` можно иÑпользовать файл `.eslintrc.js`, `.eslintrc.json` или `.eslintrc.yaml` в корне вашего проекта. Так же как и Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸ÐµÐ¹ Babel, мы ÑтараемÑÑ Ð¸Ð·Ð±ÐµÐ³Ð°Ñ‚ÑŒ Ð·Ð°Ð³Ñ€Ð¾Ð¼Ð¾Ð¶Ð´ÐµÐ½Ð¸Ñ ÐºÐ¾Ñ€Ð½ÐµÐ²Ð¾Ð¹ директории большим количеÑтвом файлов, но еÑли у Ð²Ð°Ñ ÑÐ»Ð¾Ð¶Ð½Ð°Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ñ ESLint, раÑÑмотрите такую альтернативу. Создадим задачу Ð´Ð»Ñ Gulp, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð±ÑƒÐ´ÐµÑ‚ запуÑкать ESLint. Ð”Ð»Ñ Ñтого уÑтановим еще и плагин ESLint Ð´Ð»Ñ Gulp: @@ -109,9 +111,9 @@ gulp.task('build', ['lint', 'clean'], () => - ЗапуÑтите `yarn start` - теперь вÑе Ñнова без ошибок. -**Примечание**: Ð’ Ñтой чаÑти мы работали Ñ ESLint через конÑоль. Ðто хорошо Ð´Ð»Ñ Ð¿Ð¾Ð¸Ñка ошибок во Ð²Ñ€ÐµÐ¼Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции / перед ~~публикацией~~, но вы, так же, возможно, захотите интегрировать его в вашу IDE. ÐЕ ИСПОЛЬЗУЙТЕ вÑтроенный в вашу Ñреду анализатор кода Ð´Ð»Ñ ES6. Сконфигурируйте ее так, чтобы Ð´Ð»Ñ Ñтого иÑпользовалиÑÑŒ модули, раÑположенные в директории `node_modules`. Ð’ Ñтом Ñлучае будут иÑпользоватьÑÑ Ð²Ñе наÑтройки вашего проекта, правила Airbnb и так далее. Иначе, вы получите лишь уÑредненный ES6 анализатор. +**Примечание**: Ð’ Ñтой чаÑти мы работали Ñ ESLint через конÑоль. Ðто хорошо Ð´Ð»Ñ Ð¿Ð¾Ð¸Ñка ошибок во Ð²Ñ€ÐµÐ¼Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции / перед публикацией, но вы, так же, возможно, захотите интегрировать его в вашу IDE. ÐЕ ИСПОЛЬЗУЙТЕ вÑтроенный в вашу Ñреду анализатор кода Ð´Ð»Ñ ES6. Сконфигурируйте ее так, чтобы Ð´Ð»Ñ Ñтого иÑпользовалиÑÑŒ модули, раÑположенные в директории `node_modules`. Ð’ Ñтом Ñлучае будут иÑпользоватьÑÑ Ð²Ñе наÑтройки вашего проекта, правила Airbnb и так далее. Иначе, вы получите лишь уÑредненный ES6 анализатор. Следующий раздел: [7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) -Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](/../../#Содержание). -- GitLab From d1cb2ce9f815a1dd082a3b76f8f9eadc2cb861ac Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:17:06 +0700 Subject: [PATCH 65/73] up-to-date rus section 7 --- tutorial/7-client-webpack/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 604f7a0..b209d5a 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -37,6 +37,7 @@ document.querySelector('.app').innerText = browserToby.bark(); "browser": true } ``` + Таким образом мы Ñможем иÑпользовать такие переменные как window или document, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (обещаниÑ), вам нужно включить полифил (polyfill) [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. @@ -190,4 +191,4 @@ gulp.task('clean', () => del([ Следующий раздел: [8 - React](/tutorial/8-react) -Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/6-eslint) или [Содержание](/../../#Содержание). -- GitLab From 1be86a0ba40f021174f773862f3b0876f764688a Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:19:01 +0700 Subject: [PATCH 66/73] up-to-date rus section 8 --- tutorial/8-react/README.md | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 71375f9..53ac8b1 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -55,8 +55,6 @@ clientEntryPoint: 'src/client/app.jsx', Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby", Ñгенерированное React. - - Следующий раздел: [9 - Redux](/tutorial/9-redux) -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../#Содержание). -- GitLab From e923dbc5abecc22fea32add1421c59678ff2ebf1 Mon Sep 17 00:00:00 2001 From: dalikat <dalikat@mail.ru> Date: Sun, 13 Nov 2016 20:21:21 +0700 Subject: [PATCH 67/73] up-to-date rus section 9 --- tutorial/9-redux/README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index a40498a..17b8c36 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -26,6 +26,7 @@ export const makeBark = () => ({ payload: true, }); ``` + Тут мы определÑем тип дейÑÑ‚Ð²Ð¸Ñ - `MAKE_BARK`, и функцию `makeBark` (именуемую *генератор дейÑтвий*), ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð·Ð°Ð¿ÑƒÑкает дейÑтвие `MAKE_BARK`. Мы их ÑкÑпортируем Ñ‚.к. они нам понадобÑÑ‚ÑÑ Ð² других файлах. Ðто дейÑтвие поÑтроено на оÑнове модели [Flux Standard Action](https://github.com/acdlite/flux-standard-action), вот почему оно имеет атрибуты `type` и `payload`. - Ð’ `reducers`, Ñоздайте `dog-reducer.js`: @@ -161,4 +162,4 @@ export default connect(mapStateToProps)(Message); Следующий раздел: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). +Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../#Содержание). -- GitLab From f9d97c7c67ca363436998afe517064beeaf0edd2 Mon Sep 17 00:00:00 2001 From: UsulPro <regx@usul.su> Date: Sun, 13 Nov 2016 20:45:03 +0700 Subject: [PATCH 68/73] finish merge --- tutorial/11-testing-mocha-chai-sinon/README.md | 9 --------- tutorial/3-es6-babel-gulp/README.md | 3 --- tutorial/7-client-webpack/README.md | 5 ----- tutorial/8-react/README.md | 9 --------- tutorial/9-redux/README.md | 4 ---- 5 files changed, 30 deletions(-) diff --git a/tutorial/11-testing-mocha-chai-sinon/README.md b/tutorial/11-testing-mocha-chai-sinon/README.md index 09e61d6..00dd879 100644 --- a/tutorial/11-testing-mocha-chai-sinon/README.md +++ b/tutorial/11-testing-mocha-chai-sinon/README.md @@ -42,14 +42,9 @@ describe('App State', () => { }); }); ``` -<<<<<<< HEAD -Хорошо, теперь давайте вÑе Ñто проанализируем. - -======= Хорошо, теперь давайте вÑе Ñто проанализируем. ->>>>>>> e923dbc5abecc22fea32add1421c59678ff2ebf1 Во-первых, заметьте, что мы импортировали Ñтиль утверждений `should` из пакета `chai`. Ðто позволит нам делать утверждениÑ, иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ ÑинтакÑÐ¸Ñ Ð²Ð¸Ð´Ð° `mynumber.should.equal(3)` (что в РуÑÑком переводе можно предÑтавить как: `моечиÑло.должно.ровнÑтьÑÑ(3)` - прим. пер.), довольно изÑщно. Ð”Ð»Ñ Ñ‚Ð¾Ð³Ð¾, чтобы мы могли вызывать `should` на любом объекте, мы должны прежде вÑего запуÑтить функцию `should()`. Ðекоторые из Ñтих утверждений ÑвлÑÑŽÑ‚ÑÑ *выражениÑми*, как `mybook.should.be.true`, что заÑтавлÑет ESLint ÑердитьÑÑ, так что мы добавлÑем Ð´Ð»Ñ Ð½ÐµÐ³Ð¾ комментарий в начале, чтобы отключить правило `no-unused-expressions` Ð´Ð»Ñ Ñтого файла. ТеÑты Mocha уÑтроены наподобие дерева. Ð’ нашем Ñлучае, мы хотим протеÑтировать функцию `makeBark`, ÐºÐ¾Ñ‚Ð¾Ñ€Ð°Ñ Ð´Ð¾Ð»Ð¶Ð½Ð° воздейÑтвовать на атрибут `dog` ÑоÑтоÑÐ½Ð¸Ñ Ð½Ð°ÑˆÐµÐ³Ð¾ приложениÑ, поÑтому имеет ÑмыÑл иÑпользовать Ñледующую иерархию теÑтов: `App State > Dog > makeBark`, что мы и опиÑали иÑÐ¿Ð¾Ð»ÑŒÐ·ÑƒÑ `describe()`. `it()` - Ñто ÑобÑтвенно, теÑÑ‚Ð¸Ñ€ÑƒÑŽÑ‰Ð°Ñ Ñ„ÑƒÐ½ÐºÑ†Ð¸Ñ, а `beforeEach()` - Ñто функциÑ, Ð²Ñ‹Ð·Ñ‹Ð²Ð°ÐµÐ¼Ð°Ñ Ð¿ÐµÑ€ÐµÐ´ каждым вызовом теÑта `it()`. Ð’ нашем Ñлучае, мы хотим иметь новую чиÑтую верÑию хранилища перед запуÑком каждого теÑта. Мы обÑвили переменную `store` в начале файла, поÑкольку она нам пригодитÑÑ Ð² каждом теÑте. @@ -159,8 +154,4 @@ describe('Shared', () => { Следующий раздел: [12 - Ð¢Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ñ Flow](/tutorial/12-flow) -<<<<<<< HEAD -Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../). -======= Ðазад в [предыдущий раздел](/tutorial/10-immutable-redux-improvements) или [Содержание](/../../#Содержание). ->>>>>>> e923dbc5abecc22fea32add1421c59678ff2ebf1 diff --git a/tutorial/3-es6-babel-gulp/README.md b/tutorial/3-es6-babel-gulp/README.md index a40c798..a6c74e9 100644 --- a/tutorial/3-es6-babel-gulp/README.md +++ b/tutorial/3-es6-babel-gulp/README.md @@ -5,10 +5,7 @@ - ЗапуÑтите `yarn add --dev gulp` - ЗапуÑтите `yarn add --dev gulp-babel` - ЗапуÑтите `yarn add --dev babel-preset-latest` -<<<<<<< HEAD -======= - ЗапуÑтите `yarn add --dev del` (Ð´Ð»Ñ Ð·Ð°Ð´Ð°Ñ‡Ð¸ `clean` - очиÑтки, как вы увидете ниже) ->>>>>>> e923dbc5abecc22fea32add1421c59678ff2ebf1 - Ð’ `package.json` добавьте поле `babel` Ð´Ð»Ñ ÐºÐ¾Ð½Ñ„Ð¸Ð³ÑƒÑ€Ð°Ñ†Ð¸Ð¸ Babel. Укажем, что хотим иÑпользовать новейшую конфигурацию Babel, Ñледующим образом: ```json diff --git a/tutorial/7-client-webpack/README.md b/tutorial/7-client-webpack/README.md index 56a62bc..b209d5a 100644 --- a/tutorial/7-client-webpack/README.md +++ b/tutorial/7-client-webpack/README.md @@ -37,14 +37,9 @@ document.querySelector('.app').innerText = browserToby.bark(); "browser": true } ``` -<<<<<<< HEAD -Таким образом мы Ñможем иÑпользовать такие переменные как window или document, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. - -======= Таким образом мы Ñможем иÑпользовать такие переменные как window или document, которые вÑегда доÑтупны в браузере, без предупреждений ESLint о необъÑвленных переменных. ->>>>>>> e923dbc5abecc22fea32add1421c59678ff2ebf1 ЕÑли вы желаете иÑпользовать Ñамые поÑледние возможноÑти ES6 в клиентÑком коде, такие как `Promise` (обещаниÑ), вам нужно включить полифил (polyfill) [Babel Polyfill](https://babeljs.io/docs/usage/polyfill/) в ваш код. - ЗапуÑтите `yarn add babel-polyfill` diff --git a/tutorial/8-react/README.md b/tutorial/8-react/README.md index 99f5760..53ac8b1 100644 --- a/tutorial/8-react/README.md +++ b/tutorial/8-react/README.md @@ -54,16 +54,7 @@ clientEntryPoint: 'src/client/app.jsx', ``` Теперь, поÑле запуÑка `yarn start`, открыв `index.html`, мы должны увидеть "The dog says: Wah wah, I am Browser Toby", Ñгенерированное React. -<<<<<<< HEAD - - - -Следующий раздел: [9 - Redux](/tutorial/9-redux) - -Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../). -======= Следующий раздел: [9 - Redux](/tutorial/9-redux) Ðазад в [предыдущий раздел](/tutorial/7-client-webpack) или [Содержание](/../../#Содержание). ->>>>>>> e923dbc5abecc22fea32add1421c59678ff2ebf1 diff --git a/tutorial/9-redux/README.md b/tutorial/9-redux/README.md index ece9932..17b8c36 100644 --- a/tutorial/9-redux/README.md +++ b/tutorial/9-redux/README.md @@ -162,8 +162,4 @@ export default connect(mapStateToProps)(Message); Следующий раздел: [10 - Immutable JS and Redux Improvements](/tutorial/10-immutable-redux-improvements) -<<<<<<< HEAD -Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../). -======= Ðазад в [предыдущий раздел](/tutorial/8-react) или [Содержание](/../../#Содержание). ->>>>>>> e923dbc5abecc22fea32add1421c59678ff2ebf1 -- GitLab From b94b13fcd416b5b5703fb7e030f0626fd5f0fa94 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin <regx@usul.su> Date: Sun, 13 Nov 2016 20:56:27 +0700 Subject: [PATCH 69/73] Update README.md --- README.md | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/README.md b/README.md index 880eb5b..1c604b8 100644 --- a/README.md +++ b/README.md @@ -13,13 +13,8 @@ [](http://chaijs.com/) [](https://flowtype.org/) ->Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@verekia](https://twitter.com/verekia)). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. - -### Перевод практичеÑки завершен. Идет правка текÑта. - -[будем благодарны за помощь в обнаружении опечаток и неточноÑтей](https://github.com/UsulPro/js-stack-from-scratch/issues) - -**Далее текÑÑ‚ автора** +>Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@verekia](https://twitter.com/verekia)). Оригинальное руководÑтво раÑположено [здеÑÑŒ](https://github.com/verekia/js-stack-from-scratch). Данное поÑобие поÑтоÑнно развиваетÑÑ Ð¸ дополнÑетÑÑ Ð°Ð²Ñ‚Ð¾Ñ€Ð¾Ð¼, предоÑтавлÑÑ Ñ‡Ð¸Ñ‚Ð°Ñ‚ÐµÐ»Ñм макÑимально Ñвежую и качеÑтвенную информацию. ТекÑÑ‚ оригинального поÑÐ¾Ð±Ð¸Ñ Ð¸ прилагаемый код будут менÑтьÑÑ Ñ Ñ‚ÐµÑ‡ÐµÐ½Ð¸ÐµÐ¼ времени. Мы так же будем ÑтаратьÑÑ Ð¿Ð¾Ð´Ð´ÐµÑ€Ð¶Ð¸Ð²Ð°Ñ‚ÑŒ руÑÑкоÑзычную верÑию в актуальном ÑоÑтоÑнии. Данный перевод ÑоответÑтвует английÑкой верÑии по ÑоÑтоÑнию на [commit](https://github.com/verekia/js-stack-from-scratch/tree/11d7ac52647b602ba2d2840f600a05542e9f2845). +Мы будем рады вашим [замечаниÑм и вопроÑам](https://github.com/UsulPro/js-stack-from-scratch/issues) Добро пожаловать в мое Ñовременное руководÑтво по Ñтеку технологий JavaScript: **Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ** @@ -33,7 +28,7 @@ Примеры кода имеютÑÑ Ð² каждой чаÑти, и вы можете запуÑкать их через `yarn && yarn start` или `npm install && npm start`. Я рекомендую пиÑать вÑе Ñ Ð½ÑƒÐ»Ñ ÑамоÑтоÑтельно, ÑÐ»ÐµÐ´ÑƒÑ **пошаговым инÑтрукциÑм** каждого раздела. -**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что, еÑли вы проÑто хотите получить окончательный вариант проекта, Ñодержащий вÑе необходимое, проÑто Ñкопируйте поÑледний раздел и пользуйтеÑÑŒ на здоровье. +**ÐšÐ°Ð¶Ð´Ð°Ñ Ñ‡Ð°Ñть Ñодержит код, напиÑанный в предыдущих чаÑÑ‚ÑÑ…**, так что, еÑли вы проÑто хотите получить окончательный вариант проекта, Ñодержащий вÑе необходимое, проÑто Ñкопируйте поÑледний раздел и Ñмело пользуйтеÑÑŒ. Примечание: ПорÑдок чаÑтей не вÑегда обÑзателен. К примеру, теÑтирование / Ñ‚Ð¸Ð¿Ð¸Ð·Ð°Ñ†Ð¸Ñ Ð¼Ð¾Ð³ÑƒÑ‚ быть выполнены до Ð²Ð²ÐµÐ´ÐµÐ½Ð¸Ñ Ð² React. Довольно Ñложно перемещать или редактировать опубликованные разделы, поÑкольку приходитÑÑ Ð²Ð½Ð¾Ñить Ð¸Ð·Ð¼ÐµÐ½ÐµÐ½Ð¸Ñ Ð²Ð¾ вÑе Ñледующие за ними чаÑти. Возможно, когда вÑе определитÑÑ, Ñ Ð¿Ñ€Ð¸Ð²ÐµÐ´Ñƒ вÑÑŽ документацию к более удобному виду. -- GitLab From 2899ca9a3338be6a5c74a6f63935966d3fc2cae4 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin <regx@usul.su> Date: Tue, 22 Nov 2016 22:54:18 +0700 Subject: [PATCH 70/73] Update README.md --- tutorial/6-eslint/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/6-eslint/README.md b/tutorial/6-eslint/README.md index b026c13..5f55ba3 100644 --- a/tutorial/6-eslint/README.md +++ b/tutorial/6-eslint/README.md @@ -114,6 +114,6 @@ gulp.task('build', ['lint', 'clean'], () => **Примечание**: Ð’ Ñтой чаÑти мы работали Ñ ESLint через конÑоль. Ðто хорошо Ð´Ð»Ñ Ð¿Ð¾Ð¸Ñка ошибок во Ð²Ñ€ÐµÐ¼Ñ ÐºÐ¾Ð¼Ð¿Ð¸Ð»Ñции / перед публикацией, но вы, так же, возможно, захотите интегрировать его в вашу IDE. ÐЕ ИСПОЛЬЗУЙТЕ вÑтроенный в вашу Ñреду анализатор кода Ð´Ð»Ñ ES6. Сконфигурируйте ее так, чтобы Ð´Ð»Ñ Ñтого иÑпользовалиÑÑŒ модули, раÑположенные в директории `node_modules`. Ð’ Ñтом Ñлучае будут иÑпользоватьÑÑ Ð²Ñе наÑтройки вашего проекта, правила Airbnb и так далее. Иначе, вы получите лишь уÑредненный ES6 анализатор. -Следующий раздел: [7 - КлиентÑкое приложение ~на оÑнове Webpack~](/tutorial/7-client-webpack) +Следующий раздел: [7 - КлиентÑкое приложение на оÑнове Webpack](/tutorial/7-client-webpack) Ðазад в [предыдущий раздел](/tutorial/5-es6-modules-syntax) или [Содержание](/../../#Содержание). -- GitLab From f0abc86d0d13ea850fd1c0169d780713575f9c92 Mon Sep 17 00:00:00 2001 From: Oleg Proskurin <regx@usul.su> Date: Mon, 28 Nov 2016 12:59:19 +0700 Subject: [PATCH 71/73] Update README.md --- tutorial/1-node-npm-yarn-package-json/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/1-node-npm-yarn-package-json/README.md b/tutorial/1-node-npm-yarn-package-json/README.md index 1b972ed..a65f1ab 100644 --- a/tutorial/1-node-npm-yarn-package-json/README.md +++ b/tutorial/1-node-npm-yarn-package-json/README.md @@ -18,7 +18,7 @@ sudo apt-get install -y nodejs **Примечание**: ЕÑли Node уже уÑтановлен, уÑтановите `nvm` ([Node Version Manager](https://github.com/creationix/nvm))(Менеджер верÑий Node), выполните `nvm` install и пользуйтеÑÑŒ поÑледней верÑией Node. -[Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Ð’ данном руководÑтве мы будем иÑпользовать Yarn. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --dev` в Ñтом поÑобии. +[Yarn](https://yarnpkg.com/) - еще один менеджер пакетов. Он намного быÑтрее чем NPM, поддерживает работу офлайн и [лучше предугадывает](https://yarnpkg.com/en/docs/yarn-lock) подгрузку нужных завиÑимоÑтей. С момента его [выхода](https://code.facebook.com/posts/1840075619545360) в ОктÑбре 2016, он был очень быÑтро принÑÑ‚ ÑообщеÑтвом и поÑтепенно ÑтановитÑÑ Ð»ÑƒÑ‡ÑˆÐ¸Ð¼ решением Ð´Ð»Ñ JavaScript. Ð’ данном руководÑтве мы будем иÑпользовать Yarn. ЕÑли вы предпочетаете оÑтаватьÑÑ Ñ NPM, проÑто замените вÑе команды `yarn add` и `yarn add --dev` на `npm install --save` и `npm install --save-dev` в Ñтом поÑобии. - УÑтановите Yarn ÑÐ»ÐµÐ´ÑƒÑ [инÑтрукциÑм](https://yarnpkg.com/en/docs/install). Проще вÑего Ñто Ñделать через `npm install -g yarn` или `sudo npm install -g yarn` (Верно, мы иÑпользуем NPM, чтобы уÑтановить Yarn, вÑе равно, что иÑпользовать Internet Explorer или Safari, чтобы уÑтановить Chrome!). -- GitLab From e561a8d603de33e64f1274ad333645b4f4093b5c Mon Sep 17 00:00:00 2001 From: Oleg Proskurin <regx@usul.su> Date: Mon, 28 Nov 2016 13:01:11 +0700 Subject: [PATCH 72/73] Update README.md --- tutorial/12-flow/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/tutorial/12-flow/README.md b/tutorial/12-flow/README.md index 0aa86b5..eb00250 100644 --- a/tutorial/12-flow/README.md +++ b/tutorial/12-flow/README.md @@ -78,7 +78,7 @@ export default Dog; - Теперь вы можете добавить `// @flow` в каждый `.js` и `.jsx` файл в папке `src`, запуÑтить `yarn test` или `yarn start`, и добавлÑть аннотации везде, где Ñтого попроÑит Flow. -Ð’Ñ‹ можете обнаружить неожиданный пример в `src/client/component/message.jsx`: +Ð’Ñ‹ можете обнаружить неожиданный пример в `src/client/components/message.jsx`: ```javascript const Message = ({ message }: { message: string }) => <div>{message}</div>; -- GitLab From 287c40318bded74b190d92c0fab68c885f47b58a Mon Sep 17 00:00:00 2001 From: Oleg Proskurin <regx@usul.su> Date: Mon, 28 Nov 2016 13:09:44 +0700 Subject: [PATCH 73/73] Update README.md --- README.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 1c604b8..a76f70e 100644 --- a/README.md +++ b/README.md @@ -13,7 +13,7 @@ [](http://chaijs.com/) [](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/tree/11d7ac52647b602ba2d2840f600a05542e9f2845). +>Ðто руÑÑкоÑÐ·Ñ‹Ñ‡Ð½Ð°Ñ Ð²ÐµÑ€ÑÐ¸Ñ Ñ€ÑƒÐºÐ¾Ð²Ð¾Ð´Ñтва Джонатана Верекии ([@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) Добро пожаловать в мое Ñовременное руководÑтво по Ñтеку технологий JavaScript: **Стек технологий JavaScript Ñ Ð½ÑƒÐ»Ñ** @@ -69,6 +69,7 @@ Production / development окружение, Express, React Router, Сервер - [КитайÑкий](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) чтобы начать! -- GitLab