Add Yarn

Author: verekia

README.md

@@ -1,6 +1,6 @@
 # JavaScript Stack from Scratch
 
-![JS](/img/js.png)
+![JS](/img/yarn.png)
 ![React](/img/react.png)
 ![Gulp](/img/gulp.png)
 ![Redux](/img/redux.png)
@@ -20,7 +20,7 @@ Since the goal of this tutorial is to assemble various tools, I do not go into d
 
 A big chunk of the stack described in this tutorial uses React. A lot of React tutorials completely skip the setup part, which makes newcomers build their learning on weak foundations. Instead of giving beginners a "black box" configuration, the approach I'm taking here is to set up the foundations in the simplest possible way, for a thorough understanding.
 
-Code examples are available for each section, and you can run them all with `npm install && npm start`. I recommend writing everything from scratch yourself by following the **step-by-step instructions** of each chapter.
+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.
 
@@ -30,9 +30,9 @@ The code of this tutorial works on Linux, macOS, and Windows.
 
 ## Table of contents
 
-[1 - Node, NPM, and package.json](/tutorial/1-npm-and-package-json)
+[1 - Node, NPM, Yarn, and package.json](/tutorial/1-node-npm-yarn-package-json)
 
-[2 - Installing and using an NPM package](/tutorial/2-packages)
+[2 - Installing and using a package](/tutorial/2-packages)
 
 [3 - Setting up ES6 with Babel and Gulp](/tutorial/3-es6-babel-gulp)
 
@@ -58,4 +58,4 @@ Coming up: React Router, Server-Side Rendering, Styling, Enzyme, Yarn, Minificat
 
 Created by [@verekia](https://twitter.com/verekia) – [verekia.com](http://verekia.com/).
 
-License: ISC
+License: MIT

img/yarn.png

@@ -3,7 +3,7 @@
   "version": "1.0.0",
   "description": "JavaScript Stack from Scratch - Step-by-step tutorial to build a modern JavaScript stack",
   "scripts": {
-    "test": "cd tutorial/1-npm-and-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": "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"
   },
   "devDependencies": {
     "yarn": "^0.16.1"

package.json

@@ -0,0 +1,49 @@
+# 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 must faster than NPM, caches packages offline, and fetches dependencies more predictably. 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 `"start": "node ."` in the `scripts` object.
+
+`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).

tutorial/1-node-npm-yarn-package-json/README.md

@@ -1,4 +1,5 @@
 node_modules
 npm-debug.log
+yarn-error.log
 lib
 dist/client-bundle.js

tutorial/1-npm-and-package-json/index.js renamed to tutorial/1-node-npm-yarn-package-json/index.js

@@ -18,7 +18,7 @@ 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 `npm install --save immutable`
+- 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`:
 
@@ -35,7 +35,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 NPM, so we cannot make it more compact unfortunately.
+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,7 +78,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 `npm install --save redux-immutable`
+- 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'])`.
 
@@ -95,7 +95,7 @@ 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 `npm install --save redux-actions`.
+- Don't forget to run `yarn add redux-actions`.
 
 Next section: [11 - Testing with Mocha, Chai, and Sinon](/tutorial/11-testing-mocha-chai-sinon)
 

tutorial/1-npm-and-package-json/package.json renamed to tutorial/1-node-npm-yarn-package-json/package.json

@@ -1,4 +1,5 @@
 node_modules
 npm-debug.log
+yarn-error.log
 lib
 dist/client-bundle.js

tutorial/1-npm-and-package-json/README.md

@@ -8,7 +8,7 @@
 
 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 `npm install --save-dev mocha chai`
+- Let's install Mocha and Chai by running `yarn --dev mocha chai`
 
 In `state-test.js`, write the following:
 
@@ -70,7 +70,7 @@ gulp.task('test', ['build'], () =>
 );
 ```
 
-- Run `npm install --save-dev gulp-mocha` of course.
+- 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`.
 
@@ -80,9 +80,9 @@ As you can see, tests are run on transpiled code in `lib`, which is why `build`
 gulp.task('main', ['test'], () => /* ... */ );
 ```
 
-- In `package.json`, replace the current `"test"` script by: `"test": "gulp test"`. This way you can use `npm test` to just run your tests. `npm test` is also the standard command that will be automatically called by tools like continuous integration services for instance, so you should always bind your test task to it. `npm start` will run the tests before building the Webpack client bundle as well, so it will only build it if all tests pass.
+- 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 `npm test` or `npm start`, and it should print the result for our test, hopefully green.
+- Run `yarn test` or `yarn start`, and it should print the result for our test, hopefully green.
 
 ## Sinon
 
@@ -144,7 +144,7 @@ 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.
 
-- Run `npm install --save-dev sinon sinon-chai` to install these libraries.
+- 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.
 

tutorial/10-immutable-redux-improvements/.gitignore

@@ -1,4 +1,5 @@
 node_modules
 npm-debug.log
+yarn-error.log
 lib
 dist/client-bundle.js