To on wrócił?

ES6 w React.js, mała zmiana planów

Witam po dość sporej przerwie… Nie ma czasu na wyjaśnienia, więc przejdźmy od razu do rzeczy 😊

Myślałem nad umieszczeniem Webdotnet na React.js ale stwierdziłem, że nie będę w stanie wykorzystać wszystkich ficzerów, których bym użył przy pracy nad nowym projektem. Blog przecież jedynie prezentuje dane zapisane w CMS i tyle. A chciałbym również zawrzeć takie rzeczy jak wysyłanie swoich danych do serwera itp. Doszedłem do wniosku, że stworzę swoją własną „to do” apkę. Jest już mnóstwo tego typu rzeczy, więc nie będę musiał się za bardzo zmóżdżać nad funkcjonalnością, którą chcę dodać, a także będę mógł stworzyć backend na nowo i będzie to w .NET Core, by także po stronie backendu spróbować czegoś nowego 😊 Jeśli będę czuł niedosyt po projekcie webowym, wykorzystam React Native by stworzyć mobilną wersję.

Aby nie był to kolejny post w stylu „Plany na…” przejdźmy od razu do mięska.

W pierwszym poście zawierającym konkrety, chciałbym się skupić na kilku możliwościach ES6, które są nieocenione przy tworzeniu aplikacji frontendowej w React.js

Zmienne

Do wyboru mamy 3 opcje na deklarację zmiennych:

  
    var varVariable = 'some data';
let letVariable = 'other data';
const constVariable = 'const data';
  

Czym się od siebie różnią, co wybrać? Var był z nami od zawsze i jest to zmienna, której zasięg jest do najbliższej funkcji. const i let są nieco inne (w końcu po coś ktoś je wprowadził 😊). Let jest bardzo zbliżony do var’a, jednak jego zasięg jest do najbliższej „klamerki”, więc nieco bardziej znajomo dla osób programujących w Javie czy C#.

  
    function funnctionX(boolean){
    if(boolean){
       var x = 5;
       let y = 6;
    }
    let iWantX = x;   //iWantX === boolean ? 5 : undefined;
    let iWantY = y;   //iWantX === undefined bez względu na wszystko :)
}
  

Jak widać na przykładzie, zmienna x jest widoczna wewnątrz całej funkcji, mimo iż jej stworzenie jest warunkowe i wewnątrz „ifa”, natomiast y jest dostępna tylko do domknięcia „klamerki”. To samo tyczy się pętli i innych bloków kodu wewnątrz funkcji.

Czym zatem jest const?

  
    const nazwa = "Jan"
nazwa = nazwa + " Kowalski" //błąd, nie można zmieniać wartości const'a

const obj = {
    name : "Jan"
};

obj.name = obj.name + " Kowalski"; // Jak najbardziej OK!
  

Wartość const-a nie może zostać zmieniona, jeśli jest typu prostego. Natomiast jeśli nasz const jest obiektem, który ma zagnieżdżone w sobie inne obiekty, to można wartość tych obiektów zmieniać dowolnie.

Jeżeli chcemy pisać w podejściu „nowoczesnym”, powinniśmy się wyzbyć używania var’a na rzecz const’ów i let’ów. Jednym z podejść do tematu (którego także ja będę używać w projekcie) jest używanie const’ów wszędzie gdzie się da, chyba że mamy potrzebę zmieniać wartość typu prostego, wówczas używamy let.

Arrow functions

Kolejną nowością, która jest bardzo przydatna są arrow functions:

  
    var oldFunction = function(x, y){
    return x + y;
};

const arrowFunction = (x,y) => x + y;
  

Już na pierwszy rzut oka możemy zaobserwować, że sama funkcja jest znacznie bardziej zwięzła. Mi osobiście bardzo przypomina to używanie lambda expressions w C#. Jeśli zamieścimy naszą logikę w jednej linii, możemy odpuścić sobie klamerki. Domyślnie w jednolinijkowych funkcjach zwracane jest to co po „=>”, więc możemy odpuścić sobie słowo kluczowe „return”. Zbędne jest także słowo „function”, wystarczy, że zaczyniemy od nawiasów z ewentualnymi parametrami. A to jeszcze nie koniec różnic!  Zapewne już kiedyś spotkałeś się z tym, że „this” nie jest tym czego się spodziewałeś. W arrow function nastąpiła pewna zmiana z kontekstem funkcji:

  
    $(document).ready(function() {
    this.x =5;
    $('#target1').click(function(){
        console.log(this.x, "old");     //konsola loguje "undefined old"
    });
    $('#target2').click(()=>{
        console.log(this.x, "arrow");   //konsola loguje "5 arrow"
    });
});
  

Jak widać na przykładzie, jeżeli używamy arrow function, naszym kontekstem jest funkcja, w której arrow jest zagnieżdżona, a co za tym idzie wszystkie obiekty naszego rodzica są dostępne wewnątrz funkcji i możemy uniknąć tworzenia tego:

  
    $(document).ready(function() {
    this.x =5;
    $('#target1').click(function(){
        console.log(this.x, "old");     //teraz poprawnie, konsola loguje "5 old"
    }).bind(this);
});

$(document).ready(function() {
    this.x =5;
    var that = this;                    // druga opcja z "that"
    $('#target1').click(function(){
        console.log(that.x, "old");     //teraz poprawnie, konsola loguje "5 old"
    });
});
  

Import i Export Modułów

Ostatnią poruszaną przeze mnie kwestią będzie dziś import modułów w ES6. Dzięki tej funkcjonalności możemy wyeksportować część lub wszystkie moduły z danego pliku i zaimportować je w innym.

  
    const mySuperFunction  = function () {
    // do some stuff
}

export { mySuperFunction }

// inny plik

import { mySuperFunction } from '.path/to/file';
// funkcja mySuperFunction jest dostępna w tym pliku
  

W pierwszym pliku eksportujemy funkcję i wykorzystując dokładnie tę samą nazwę w drugim, możemy jej używać pod tą samą nazwą w innym pliku. Można zdefiniować więcej niż jeden obiekt do importu.

  
    export { firstFunction, second, third}
export default firstFunction;

import {second as first, third} from '.path/to/file'; // tylko 2 z trzech eksportowanych funkcji będzie dostępne
import myDefault from '.path/to/file'; // myDefault będzie firstFunction z importowanego pliku
  

Możemy zdeklarować domyślny export. Importując obiekt z takiego pliku, nie musimy mieć tej samej nazwy i domyślny eksport zostanie zaciągnięty. Gdy chcemy zmienić nazwę obiektu eksportowanego, możemy to zrobić używając „as”.

I to by było na tyle, w następnym odcinku opiszę klasy w ES6.
Pozdrawiam serdecznie!

Data publikacji: 10.10.2017 Ostatnie z kategorii: