From vanilla to modern JS.

If you have only vanilla JavaScript/jQuery knowledge and want to learn modern JS/React, this article will help you start.

JavaScript Refresher

Let’s refresh our JavaScript memory first:

And of course, anything else you find useful/missing for you.


ECMAScript 6 (ES6) is the sixth major release of the ECMAScript language specification. ECMAScript is the “proper” name for the language commonly called JavaScript. This is what we will be using. ES6 in Depth articles explain new, modern features of ES6. I’ve found these parts important:

You will need these things, so I suggest to cover them well and anything else you find useful.

Terminology & Ecosystem

Whenever I enter into new technology, it’s confusing for the first few days, until I connect all the dots, terminology and ecosystem, let’s see:

  • Node.js – JavaScript run-time environment that executes JavaScript code server-side.
  • npm – a package manager for JavaScript and the world’s largest software registry. You will use it a lot in your projects.
  • Babel – JavaScript transpiler that converts edge JavaScript into plain old ES5 JavaScript that can run in any browser.
  • Webpack – JavaScript module bundler. It takes modules with dependencies and generates static assets representing those modules.

The good thing is that, for starting with React, you don’t need to know a lot about these things. You merely have to have a general overview of what they are and do.

  • You will use npm to fetch dependencies for your project and run tasks like building, starting the app, etc.
  • Babel lets you write modern JavaScript which is then translated to old JS that can run in any browser.
  • Webpack is bundling all the small pieces/modules of your well-structured app into one single JavaScript bundle.

You will initially use create-react-app to bootstrap your React app with no build configuration – Babel, Webpack, and other things will already be configured and hidden from you, so you can focus on React. Later, if you need some custom configuration, you can eject.


Before you start, you will need an IDE/editor. I suggest WebStorm, but it seems like Visual Studio Code is also a good option.

Start with the official docs:

After this, you will have solid basic knowledge of what React is and how it works, but also many questions, so it’s time to get your hands dirty and practice on your own project!

The Playground Project

My playground project goals were to practice:

  • React basics
  • Project organization and structure
  • Using libraries
  • Creating and using modules
  • Using REST API via fetch
  • Deploy to AWS
  • Configure CI
  • And generally getting comfortable, making conclusions and generating questions.

The result is the mini app React Countries and source code on GitHub. Feel free to explore 🙂

Next Steps

My next focus will be to learn Redux:

This is just tip of the iceberg, but an excellent way to start!