◀

The basics

"With good basics you'll have endless options"

What is ECMAScript?

ES Versions History

ES5

ES5 ► ES6

ES5 ► ES2015

ES5 ► ES2015 ► ES2016 ► ... 🔮

ESNext

https://kangax.github.io/compat-table/esnext/

Typescript

Static Typing
Syntactical superset of JavaScript
Transpiles to JavaScript

Dev environment

Git
Node.js
npm / yarn
Webpack
VSCode
Windows CMD / Other cli tool

🛠 What are we going to build?

How to debug

Chrome Developer Tools
React Developer Tools

Starting a FE project

package.json, tsconfig.json, tslint.json, webpack.config.js, webpack.config.prod.js, index.html, uglify.js, service-worker.js, jest.config.js... 🤯

😌

create-react-app my-app --scripts-version=react-scripts-ts

🛠 Try it

  • Create a new React-ts project using create-react-app
  • Change title to Hello Memorize!