REACT ACADEMY

INTRODUCTION TO ES2015

⚪ECMAScript is the scripting language standardized by EcmaInternational.

⚪ The probably most well-known implementation is JavaScript.⚪ Whatever becomes standardized browser vendors will implement.

A BIT OF HISTORY

⚪ Version 1/2 was published 1997/1998

⚪ Version 3.1 was published in 1999.

⚪Version 4 was abandoned mostly due political di�erences concerninglanguage complexity

time gap where little happened and it took them 10 years to publish the next version

⚪ Version 5 was published in 2009 (6 years)

⚪ Finally we see very old browsers being deprecated

ES2015 IS FINALIZED

ECMAScript 2015 was �nalized in June 2015http://www.ecma-international.org/ecma-262/6.0/

��✨

WHY SHOULD I USE ES2015?

A LOT OFNEW

FEATURES

EASIERDEVELOPMENT

FUTUREPROOF

ES2015 FEATURES

⚪Block-scoped binding constructs(const/let)

⚪ Arrow functions

⚪ Classes

⚪ Imports and modules

⚪ Promises

⚪ Multi-line strings

⚪ Tepmlate literals

⚪ Default parameters

⚪ Destructuring assignment

⚪ Enhanced object literals

⚪ Modules

BLOCK-SCOPED BINDING

CONSTRUCTS (CONST/LET)

let is the new var - makes coding way more saner

const is single-assignment - this doesn't make the objectimmutable, but helps you to make sure not to re-assign variables

Scoping to function

1. var width = 50; 2. var height = 100; 3. 4. function sumNumbers() { 5. var result = width + height; 6. return result; 7. } 8. 9. sumNumbers(); 10.

10.

1. var weight = 100; 2. var height = 100; 3. 4. if (weight > 0 && height > 0) { 5. var bmi = (weight + height) * 2; 6. console.log(`Your bmi is: ${bmi}`); 7. //output: Your bmi is: 400 8. } 9. 10. console.log(bmi);

10. console.log(bmi);

1. var weight = 100; 2. var height = 100; 3. 4. if (weight > 0 && height > 0) { 5. let bmi = (weight + height) * 2; 6. console.log(`Your bmi is: ${bmi}`); 7. //output: Your bmi is: 400 8. } 9. 10. console.log(bmi);

10. console.log(bmi);

1. var pokemonName = 'Pikachu';

2. let pokemonAge = 3;

3.

4. pokemonName = 'Raichu';

5. pokemonAge = 4;

6.

7. const pokemonHeight = 100;

8.

9. pokemonHeight = 150;

10.

10.

ARROW FUNCTIONS

shorter - in most functional patterns, shorter functions are welcome

implicit return - return something without the "return" keyword

lexical this - simplify function scoping and the "this" keyword

1. const pokemon = [ 2. "Pikachu", 3. "Raichu", 4. "Dragonite", 5. "Squirtle" 6. ]; 7. 8. //es5 9. var result = pokemon.map(function (s) { 10. return s.length

11. }); 12. 13. //es6

13. //es6

1. function Pokemon() { 2. this.age = 0; 3. 4. setInterval(function growUp() { 5. this.age++; 6. }, 1000); 7. } 8. 9. //ES5 solution 10. function Pokemon() {

11. var self = this; 12. 13. self.age = 0; 14.

Pokemon is a custom constructor function

14.

1. const pokemon = [ 2. "Pikachu", 3. "Raichu", 4. "Dragonite", 5. "Squirtle" 6. ]; 7. 8. //es5 9. pokemon.map(s => { 10. return {

11. name: s.name 12. } 13. });

13. });

CLASSES

1. class Pokemon { 2. name; 3. age; 4. weight; 5. height; 6. attackPoints; 7. 8. constructor(name, age, weight, height) { 9. this.name = name; 10. this.weight = weight;

1. class Pokemon { 2. constructor(name) { 3. this.name = name; 4. } 5. 6. speak() { 7. console.log(this.name + ' speaks.'); 8. } 9. } 10.

11. class Monster extends Pokemon { 12. speak() { 13. super.speak(); 14. console.log(this.name + ' roars.'); 15. }

15. }

CLASSES

⚪ Introduced in ECMAScript 6.

⚪Syntactical sugar over JavaScript'sexisting prototype-based inheritance.

⚪Not introducing a new object-orientedinheritance model to JavaScript.

DESTRUCTURING

1. var person = { 2. name: 'Kristijan', 3. surname: 'Ristovski' 4. }; 5. 6. //es5 7. var name = person.name; 8. var surname = person.surname; 9. var age = person.age || 25; 10.

11. //es6 12. const {name, surname, age = 25} = person;

12. const {name, surname, age = 25} = person; 13.

1. let trainer = {name: 'Jane', surname: 'Doe'}; 2. 3. let {name, surname} = trainer; 4. console.log(name, surname); 5. 6. let {name: n, surname: l} = trainer; 7. console.log(n, l); 8. 9. let {age} = trainer; 10. console.log(age);

11.

11.

DESTRUCTURING

⚪ It binds properties to as many variables as you need

⚪ It makes it quick to pull out speci�c properties

⚪ It works with both Arrays and Objects

MODULES

1. var React = require('react')

2.

3. import React from 'react'

4. import ReactDOM from 'react-dom'

5.

6. import formatTime from '../utils/formattime';

7.

8. import {render} from 'react-dom'

9.

10. //------ lib.js ------

11. export const sqrt = Math.sqrt;

You might be familiar with the CommonJS require

statement

11. export const sqrt = Math.sqrt;

MODULES

⚪ Their syntax is even more compact than CommonJS’s.

⚪Their structure can be statically analyzed (for staticchecking, optimization, etc.).

⚪Their support for cyclic dependencies is better thanCommonJS’s.

PROBLEMS WITH ES2015

BROWSERSUPPORT

IMPORTS

HOW CAN WE USE ES2015 NOW

babel - A compiler for writing next generation JavaScript.

BABEL

let trainer = {name: 'Jane', surname: 'Doe'}; let {name, surname} = trainer; let {name: n, surname: l} = trainer;  setInterval(() => age++, 1000);  class Trainer {   constructor(name) {     this.name = name;   } }

� var trainer = {name: 'Jane', surname: 'Doe'}; var name = trainer.name; var surname = trainer.surname; var n = trainer.name; var l = trainer.surname;  setInterval(function () {   return age++; }, 1000);  function _classCallCheck(instance, Constructor) {   if (!(instance instanceof Constructor)) {     throw new TypeError("Cannot call a class as a function");   } }  var Trainer = function Trainer(name) {   _classCallCheck(this, Trainer);    this.name = name; };

FEATURES

v6 - does nothing out of the box �

con�guration - a .babelrc �le in the root of the app

plugins - apply transformations to your code

presets - sharable .babelrc con�gs or simply an array of babel plugins..

SO WHAT EXACTLY DO WE NEEDFOR REACT?

babel-preset-2015 - transform ES2015 to ES5

babel-preset-react - transform JSX into createElement calls, strip �ow typesetc.

EXAMPLE CONFIG

IS BABEL ENOUGH? NOPE.⚪ Dev Server

⚪ CSS (or Sass, Less, Stylus) Loader �

⚪ Autopre�xing

⚪ Image Loader

⚪ Linting

⚪ Build script for production

⚪ A 15 kilo dog �

WEBPACK

what ?! - A module bundler which takes modules with dependencies andgenerates static assets representing those modules.

WEBPACK

FEATURES

con�g - a simple json in a webpack.con�g.js �le

production con�g - additional con�g for building the app in productionmode

plugins - add functionality typically related to bundles in webpack

loaders - allow you to preprocess �les as you require() or “load” them

EXAMPLE LOADERS

style/css/sass/less loaders - allow importing of styles, and processing themby a preprocessor

babel - import JS & run through babel presets and plugins

json - allows importing of json

�le - allows importing of various �les: images, fonts, svg, etc.

Example Con�g

1. module.exports = { 2. entry: "./index.js", 3. output: { 4. path: __dirname, 5. filename: "bundle.js" 6. }, 7. module: { 8. loaders: [ 9. { 10. test: /\.css$/,

10. test: /\.css$/,

Example App

1. import 'normalize.css';

2. import 'style.css';

3. import textGenerator from 'text-gen.js';

4.

5. document.write('Hello ' +

textGenerator('World') + '!');

OUTPUT: /BUILD FOLDER

index.html - the main html �le that will import bundle.js

bundle.js - the compiled version of all the bundled js modules

style.css - preprocessed, autopre�xed, mini�ed version of the bundled css

CUSTOM SETUP === �

⚪ custom setups can get pretty complicated

⚪we need to have: React, JSX, ES2015, dev server, css and image loaders,autopre�xers, build scripts

⚪ we can use a boilerplate but usually they're bloated and over-engineered

CREATE-REACT-APP

One Dependency - There is just one build dependency. It usesWebpack, Babel, ESLint, etc.

No Con�guration - Zero con�guration �les or command lineoptions. Con�guring both development and production builds isautomatic.

No Lock-In - You can “eject” to a custom setup at any time withrunning a single command.

INSTALLING MODULES

WHY? PROBLEMS WITH NPM:#1 - slow � - you can cook meals for an entire small village while the

dependencies install

queued install - it installs each dependency one after the other, very timeconsuming

online only - no o�ine installations � �

etc, etc, - etc, etc

OK, AND WHY YARN?#1 - FAST � - the installing of modules, especially after they're cached, is

ultra fast. Sorry, small village.

caching - it caches every package it downloads, allows for o�ine installation� �

parallel installs - maximize resource utilization, minimize waiting time

secure - uses checksums to verify the integrity of every installed package

yarn.lock - will ensure that other people will get precisely the samedependencies

react-academy.com

Lesson: "Tools"

Password: toolsrock