react academywe need to have: react, jsx, es2015, dev server, css and image loaders, autoprexers,...
Post on 19-Aug-2020
4 Views
Preview:
TRANSCRIPT
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
top related