Skip to content

Latest commit

 

History

History
385 lines (282 loc) · 6.68 KB

s1.md

File metadata and controls

385 lines (282 loc) · 6.68 KB

PRE REACT


## Adem Bavaş __*Frontend Developer, VNGRS*__

## ECMAScript

ECMAScript, Ecma International tarafından ECMA-262 ve ISO/IEC 16262 standartlarıyla standartlaştırılmış, markalaşmış bir betik dili spesifikasyonudur. Şu anda kendisini izleyen Javascript tabanlı olarak geliştirilmiştir. Yaygın olarak Dünya Çapında Ağ (www) için istemci taraflı betik dili olarak kullanılır. ECMAScript'in diğer uygulamaları JSCript ve ActionScript'tir.

ecma site

### ES5

  • Shortcut for ECMAScript 5
  • ECMAScript 2009

### ES5 ile gelen yeni özellikler

  • The "use strict" Directive
  • String.trim()
  • Array#{isArray, forEach, map, filter, reduce, reduceRight,
    every, some, indexOf, lastIndexOf}
  • JSON#{parse, stringify}
  • Date.now()
  • Property Getters and Setters
  • New Object Property Methods

ES6

  • Shortcut for EcmaScript 6
  • ECMAScript 2015

### ES6 ile gelen yeni özellikler

  • Value export/import
  • Class
  • Symbol Type, iterators
  • Generators
  • Map / Set
  • Object#{assign}
  • Array#{find, findeIndex}
  • String#{startsWith, endsWith}
  • Number#{isNaN, isFinite}
  • Exponentiation
  • Always in Strict Mode
  • const, let, block scope
  • Arrow Functions, lexical this
  • Spread Operator
  • Default parameter values
  • Rest parameter
  • Template Literals
  • Property shorthand
  • Method properties
  • Array, Object Matching

http://es6-features.org

ES10

  • Shortcut for EcmaScript 10
  • ECMAScript 2019

### ES10 ile gelen yeni özellikler

  • Array#{flat,flatMap}
  • Object.fromEntries
  • String#{trimStart,trimEnd}
  • Symbol#description
  • try { } catch {}
  • JSON ⊂ ECMAScript
  • well-formed JSON.stringify
  • stable Array#sort
  • revised Function#toString

block scope

var x = 10;
// Here x is 10
{
  let x = 2;
  // Here x is 2
}
// Here x is 10

arrow functions

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

TC39

Technical Committee 39

babel site

  • stage-0 strawman
  • stage-1 proposal
  • stage-2 draft
  • stage-3 candidate
  • stage-4 finished
  • next ECMAScript Release...

https://github.com/tc39/proposals

Object.observe() // :(

async functions (stage-4)

fetch('/api/products')
  .then(response => response.json())
  .then(data => {
    updateView(data)
  })
  .catch(err => {
    console.log('Update failed', err)
  })
async function run() {
  try {
    const response = await fetch('/api/products')
    const data = await response.json()
    updateView(data)
  } catch(err) {
    console.log('Update failed', err)
  }
}

object rest & spread (stage-4)

Object.assign(
 {},
 { foo: 3 },
 { bar: 5 }
)
{
 ...{ foo: 3 },
 ...{ bar: 5 }
}

class decorators (stage-2)

@pure // class decorator
class View {

  @throttle(200) // method decorator
  reconcile() {
    ...
  }

}

Daha fazla bilgi için:

https://tc39.github.io

https://github.com/tc39

http://exploringjs.com/es2016-es2017/ch_tc39-process.html

https://ponyfoo.com/articles/es6

BABELJS

Transpiler

babel site

PAKET YÖNETİCİLERİ

Paket yönetim sistemi ya da paket yöneticisi; yazılım paketlerinin ve kütüphanelerinin kurulum, güncelleme, konfigürasyon, kaldırılması işlemlerinin tutarlı ve stabil bir şekilde yürütülmesini sağlayan sistemlerdir. Tipik olarak paket ve kütüphanelerin hangi versiyonunun kurulduğunu ve birbirlerine olan bağımlılıklarını da hesaba katarlar. Modern paket yöneticilerinin birçoğu merkezi bir kaynaktan yazılım ve kütüphanelerin indirilip yüklenmesi işlevine sahiptirler.

npm

yarn

pnpm

npm site

$ brew install yarn
$ npm install -g yarn
$ npm install -g pnpm
$ npm install react
$ yarn add react
$ pnpm install react

package.json

{
  "name": "React Boilerplate",
  "version": "1.0.0",
  "description": "Boilerplate for react and webpack",
  "main": "index.js",
  "scripts": {
    "start": "NODE_ENV=development webpack-dev-server --open",
    "build": "NODE_ENV=production webpack",
    "test": "jest --watchAll --coverage"
  },
  "repository": "https://github.com/johndoe/react-boilerplate",
  "author": "John Doe",
  "license": "ISC",
  "dependencies": {
    "prop-types": "15.6.2",
    "react": "16.7.0",
    "react-dom": "16.7.0",
    "react-hot-loader": "4.6.3"
  },
  "devDependencies": {
    "@babel/core": "7.2.2",
    "@babel/preset-env": "7.2.3",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.0.0",
    "@babel/runtime": "7.2.0",
    "css-loader": "2.1.0",
    "style-loader": "0.23.1",
    "webpack": "4.28.1",
    "webpack-cli": "3.2.1",
    "webpack-dev-server": "3.1.14"
  }
}

BUILD TOOLS

### Task Runners

  • npm scripts
  • Grunt
  • Gulp

### Module Bundlers

  • Browserify
  • Webpack
  • Rollup
  • Parcel

CREATE-REACT-APP

$ npm create-react-app my-app
$ cd my-app
$ npm start

thx.