Grzesiek - Strona 17 - Kody, triki, sztuczki

8 cze 2018

Stworzenie sitemapy w node.js

Mały przyjemny kod 😉
Na początku pobieramy wszystkie pliki z foldera build za pomocą readdir, następnie pętelka po tych plikach. Robimy split po kropce aby dobrać się do rozszerzenia a interesuje nas oczywiście html
Jeżeli rozszerzeniem okaże się html to wszystko pakujemy do tablicy urlPart.
Na końcu budujemy xml sitemap i zapisujemy to przez writeFile i to tyle.

const fs = require("fs");

const htmlPlace = "build";
const ulrPart = [];

fs.readdir(`${htmlPlace}`, function (err, files) {
    if (err)
        throw err;
    for (let index in files) {
        let rest = files[index].split('.')[1];
        if (rest === 'html') {
            let path = `
                <url>
                    <loc>http://blog.grzegorztomicki.pl/${files[index]}</loc>
                    <changefreq>monthly</changefreq>
                </url>
            `;
            ulrPart.push(path);
        }

    }

    const template = `
        <?xml version="1.0" encoding="UTF-8"?>
        <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"> 
            ${ulrPart.join('')}</urlset>`;

    fs.writeFile(`./sitemap.xml`, template, function (err) {});
});

19 mar 2018

Ładowanie CSS i CSS modules w tym samym czasie Webpack

W react możemy importować css jak i css jako moduły.
Ale co jeśli chcemy zrobić do w tym samym czasie powiedzmy dodać globalny styl np. normalize.css?

Importowanie jako moduł:

import React from 'react'
import styles from './moj-komponent.css';

const MyComponent => <div className={styles.jakasKlasa}></div>

Czytaj dalej

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));
}