W grudniu opublikowałem 8 wpisów:

JavaScript:

1. Jak iterować n-razy?

RxJS:

1. Operator forkJoin
2. Operator combineLatest

React:

1. Czym jest JSX?
2. Komponenty podstawy
3. Jak przekazać komponent do innego komponentu?

NodeJS:

1. Mongoose jak zapobiegać dodawania identyfikatora do zagnieżdżonego dokumentu?

Inne:

1. Podsumowanie 2022 roku

Przeczytałem dwie książki:

1. Szczypta nienawiści - Joe Abercrombie
2. Kłopotliwy pokój - Joe Abercrombie

Przesłuchałem trzy audiobooki:

1. Morfina - Szczepan Twardoch
2. Blaze - Stephen King
3. Sprzedawczyk - Paul Beatty

Zbliża się koniec 2022 więc czas na krótkie podsumowanie.

Jest to pierwszy "pełny" rok mojego bloga (licząc od stycznia do grudnia). Z kolei pierwszego kwietnia minął pierwszy rok istnienia bloga. Mogę śmiało stwierdzić, że decyzja o prowadzeniu własnego bloga to była bardzo dobra decyzja! Dalej trzymam się zasady: minimum jeden wpis na tydzień.

Opublikowałem 90 wpisów.

Narysowałem 14 komiksów:

1. Cookie policy
2. It is not a bug, it is a feature!
3. CRUD Dev - It ain't much but it's honest work
4. Motivation vs Habit
5. Deep Work
6. Deployment on Friday
7. What color is it?
8. Big problem, small steps
9. "Is task ready?" Driven Development
10. Deadline
11. New code vs Old code
12. Code - The Good, The Bad, The Ugly
13. Technical debt
14. I am your father!

Dodałem nowy dział: Demo

Zapału do dalszego rozwoju bloga mi nie brakuje więc czas na nowy rok!

Zagnieżdżone dokumenty

Mongoose pozwala na dodawanie zagnieżdżonych dokumentów do kolekcji:

import { model, Schema } from 'mongoose';

export interface Tag {
    name: string;
    value: string;
}

export interface Product {
    title: string;
    description: string;
    tags: Tag[];
}

const ProductSchema = new Schema<Product>({
    title: { type: String, required: true },
    description: { type: String, required: true },
    tags: { type: [{
            name: { type: String, required: true },
            value: { type: String, required: true },
        }],
        default: () => []
    }
}, { versionKey: false });

export const ProductModel = model('Product', ProductSchema);

Kiedy dodamy do kolekcji nowy rekord:

const productToAdd: Product = {
    title: 'Some product',
    description: 'Lorem ipsum',
    tags: [
        { name: 'Tag 1', tag: 'tag1' },
        { name: 'Tag 2', tag: 'tag2' },
    ]
};

const addedProduct: Product = await ProductModel.create(productToAdd);
console.log(addedProduct);

Powstanie coś takiego:

{
    _id: '5c2dcec42161327d7bf6bd63',
    title: 'Some product',
    description: 'Lorem ipsum',
    tags: [
        { 
            _id: '5caa542e2161327d7bf6c086'  
            name: 'Tag 1',
            tag: 'tag1' 
        },
        { 
            _id: '5cb183c82161327d7bf6c097',
            name: 'Tag 2', 
            tag: 'tag2'
        },
    ]
};

Po utworzeniu nowego dokumentu do rekordu zostały dodane trzy pola: _id. Jak pozbyć się identyfikatorów w zagnieżdżonym dokumencie (tags), jeśli ich nie potrzebujemy?

Zapobieganie dodawania identyfikatorów

Rozwiązanie jest banalne. Wróćmy do definicji naszego modelu. Skupmy się problematycznym tags:

tags: { 
    type: [{
        _id: false, // Ustawiamy flagę
        name: { type: String, required: true },
        value: { type: String, required: true },
    }],
    default: () => []
}

Jak widać, wystarczy dodać pole: _id: false, aby pozbyć się niechcianych identyfikatorów!

Jak przekazać komponent do innego komponentu?

React pozwala na przekazywanie komponentu lub komponentów do już istniejącego.

Żeby przekazać komponent do innego komponentu, korzystamy ze specjalnej właściwości o nazwie children. Wykorzystujemy ją w komponencie nadrzędnym:

function Component1({ label, children }) {
    return (
        <div>
            <h2>{label}</h2>
            {children}
        </div>
    );
}

function Component2({ text }) {
    return <p>{text}</p>;
}

Następnie za pomocą składni JSX piszemy:

<Component1 label="Section 1">
    <Component2 text="Lorem ipsum..." />
</Component1>

Wyrenderuje:

<div>
    <h2>Section 1</h2>
    <p>Lorem ipsum...</p>
</div>

Możemy przekazać więcej niż jeden komponent:

<Component1 label="Section 1">
    <Component2 text="Lorem ipsum..." />
    <Component2 text="Etiam vel varius mi" />
    <Component2 text="Nullam metus orci" />
</Component1>

Jak stworzyć własny komponent?

Żeby stworzyć własny komponent, wystarczy napisać:

function Header() {
	return <h2>Some header</h2>
}

Jak widać, użyliśmy tutaj zwykłej funkcji i to wystarczy. Komponenty w React można stworzyć za pomocą funkcji i klas. W tym wpisie przedstawiamy przykłady komponentów stworzonych za pomocą funkcji.

Żeby go użyć, piszemy:

function App() {
	return (
		<div>
			<Header />
		</div>
	);
}

We fragmentach kodu korzystamy z JSX

Jak wyświetlić dane w komponencie?

Jeśli chcemy wyświetlić jakieś dane w komponencie, musimy użyć nawiasów klamrowych: { }

function Header() {
    const title = 'Some header';
    return <h2>{title}</h2>
}

Jak przekazać dane do komponentu?

Żeby przekazać dane do komponentu, korzystamy z obiektu, który nazywa się: props:

function Header(props) {
    return <h2>{props.title}</h2>
}

albo krócej:

function Header({ title }) {
    return <h2>{title}</h2>
}

Następnie:

function App() {
	return (
		<div>
			<Header title="My header" />
		</div>
	);
}

Jeśli wartość, którą chcemy przekazać, przechowujemy w zmiennej, to musimy użyć nawiasów klamrowych:

function App() {
    const myHeader = 'My header';

    return (
        <div>
            <Header title={myHeader} />
        </div>
    );
}