JavaScript - Strona 11 - Kody, triki, sztuczki

11 mar 2018

Importowanie absolutne w Create React App

Jak pozbyć się zagnieżdżonych ścieżek w pejekcie.
Np. taka nieładna ścieżka jak poniżej.

import TopImage from '../../../components/TopImage/TopImage';

Chcemy mieć coś takiego, czy do foldera components czy do containers czy innych folderów w src.

import TopImage from 'components/TopImage/TopImage';

Najprościej jak można to tworzymy plik w folderze src o nazwie .env tak z kropką na początku.
W nim wpisujemy NODE_PATH=src/ robimy save i uruchamiamy project jak zwykle przez npm run start

Od tej chili zamiast podawać całą ścieżkę podajemy components, containers, hoc czy inne foldery jakie mamy w projekcie.

Czytaj dalej

10 mar 2018

Wysłanie formularza w React

Proste wysłanie formularza w React do tego axios czyli biblioteka oparta na obiektach HTTP dla przeglądarek i Node.js więcej można przeczytać tutaj - axios

import React, { Component } from 'react';
import axios from 'axios';

class UserForm extends Component {
    state = {
        imie: "",
        nazwisko: "",
        email: "",
    };

    onChange = (event) => {
        const state = this.state
        state[event.target.name] = event.target.value;
        this.setState(state);
    }

    onSubmit = (event) => {
        event.preventDefault();
        const { imie, nazwisko, email } = this.state;

        axios.post('/', { imie, nazwisko, email })
            .then((result) => {
                // a tuj coś robimy z danymi
            });
    }

    render() {
        const { imie, nazwisko, email } = this.state;
        return (
            <form onSubmit={this.onSubmit}>
                <input type="text" name="imie" value={imie} onChange={this.onChange} />
                <input type="text" name="nazwisko" value={nazwisko} onChange={this.onChange} />
                <input type="text" name="email" value={email} onChange={this.onChange} />
                <button type="submit">Wyślij</button>
            </form>
        );
    }
}

export default UserForm;

9 mar 2018

ES6, var vs let

Przykład użycia let oraz var

for (var i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Wynik 5 razy 5 :)
  }, 100);  
}

for (let i = 0; i < 5; ++i) {
  setTimeout(function () {
    console.log(i); // Wynik 0, 1, 2, 3, 4 
  }, 100);  
}

Żeby to wykonać bez let można by zrobić tak jak poniżej.

for (var i = 0; i < 5; ++i) {
    (function(n) {
        setTimeout(function(){
            console.log(n); // Wynik 0, 1, 2, 3, 4 
        }, 100);
    }(i));
}

9 mar 2018

Object.keys, values, entries

Poniżej kilka przykładów jak dobrać się do obiektów 🙂

var codes = {
  reset: [0, 0],
  bold: [1, 22]
};

Object.keys(codes).forEach(function (key) {
  console.log(key); // "reset", "bold"
});

Object.values(codes).forEach(function (key) {
  console.log(key); // [0,0] [1,22]
});

Object.entries(codes).forEach(function (key) {
  console.log(key); // ["reset", [0, 0]] ["bold", [1, 22]]
});

9 mar 2018

Użycie operator spread syntax czyli [...]

W ES6 pojawiła się nowa funkcjonalność nazywana "Spread syntax" operacje na tablicach czy obiektach. Poniżej kilka przykładów użycia. W ES5 jest to concat.

W ES6

const boys = ["Jaś", "Grześ", "Adaś"];
const girls = ["Małgosia", "Ania", "Czesia"];

let people = [...boys, ...girls];

console.log(people); // ["Jaś", "Grześ", "Adaś", "Małgosia", "Ania", "Czesia"]

Czytaj dalej