=== Intro ===

1. Read this: https://babeljs.io/docs/learn-es2015/

2. Use create-react-app or a webpack/babel/react boilerplate to built a little something. Ignore all the things you don't need in the boilerplate and don't try to optimise for production right now.

3. If you're comfortable with this, gradually remove the parts you don't need.

=== Node, npm and webpack ===

All of the tools are installed and configured using "npm install" which installs everything listed in a "package.json" in every project. You don't need to install anything globally except nodeJS to get "npm".

* You install all your runtime-library-dependencies also via npm. Ignore "bower", you don't need it anymore.

* There are a couple of different module-systems to split up javascript code ("requireJS", "commonJS" etc.) Just use the ES2015 "import" syntax. Webpack handles the rest for you.

* There are many tools ("gulp", "brunch", "requireJS") that bundle your javascript-files together into something for the browser. Most people use Webpack now, which is confusing to configure, but does everything you want.

* With Webpack you can just import/require text-files or CSS or images as modules in your code (see "import" above). Webpack will figure out how to serve them (as files, or inline with the HTML or else). It also does everything on-the-fly while you are coding, called "Hot reloading".

## ES 2015, ES6, ES7

* The JS world kinda settled on ES6 syntax / ES2015 now. But JS-syntax is rapidly improving and many people use additional plugins for "babel" (see next point) to enable them to have, for example, class-properties.

* Most people use "babel" for transpilation from ES6 to code that browsers understand, webpack does all of this for you with "babel-loader".

## ESLINT

* "eslint" is generally used to format code and correct warnings. It is also installed by npm and run by a script in "package.json".

## React / Vue

* React brought back the virtues of functional programming to the web. If you use React, I'd recommend using it with the JSX syntax, which is enabled in the boilerplate by default. There is also vue.js, which seems to be better in various points. I don't like it because I prefer JSX, but it doesn't really matter for the beginning.

* Many people don't like react because it's too big. I wouldn't really care about that if you don't build for production now. There are a couple of improvements like tree-shaking (removal of unused code) that are around in the corner as well.

### State / reflux/ redux

* There is a war going on about how to best organise your code and your logic. There is "redux", but also stuff like "mobx". Just try anything you want for the beginning and see how your thoughts involve.

### CSS / SCSS / POSTCSS / SASS

* There is another war going on about how to do styling. There are various helpers like SCSS and SASS that provide improvements over CSS. These processors are usually run by "postcss" which, in turn, is also run by Webpack.
There are also various CSS-frameworks and the possibility to just write your CSS inline with the React/Vue code you are producing.

I personally would recommend "tachyons.css", because you won't need any other framework, nor postCSS, nor SCSS anymore, but it's all your choice.