Ξεκινώντας με το Storybook στο React

Προσπαθήσατε ποτέ να τοποθετήσετε όλα τα στοιχεία διεπαφής χρήστη σε ένα μέρος στο React;

Εάν είστε νέος στον κόσμο του React, τότε μάλλον δεν θα το κάνετε.

Τι εννοείται με αυτό;

Δείτε το αντιδρώ-όμορφο-δνδ παραδείγματα.

Αυτά που έχετε δει στα παραδείγματα ονομάζονται ιστορίες. Και το εργαλείο που χρησιμοποιείται για τη δημιουργία ιστοριών ονομάζεται Storybook.

Τώρα, καταλάβατε για τι πρόκειται να μιλήσουμε σε αυτό το άρθρο. Χωρίς καθυστέρηση, ας εξερευνήσουμε.

Τι είναι το Storybook;

Το Storybook είναι ένα περιβάλλον ανάπτυξης μεμονωμένο περιβάλλον εργασίας χρήστη που παρέχει μια παιδική χαρά για τα στοιχεία σας. Μπορούμε να παίξουμε με τα στοιχεία μας με διαφορετικούς τρόπους χωρίς να εκτελούμε την κύρια εφαρμογή μας. Μπορούμε να τρέξουμε το βιβλίο ιστοριών στη θύρα του με τη ρύθμιση.

Δεν περιορίζεται στο React. Μπορούμε να χρησιμοποιήσουμε το βιβλίο ιστοριών με τα περισσότερα πλαίσια frontend όπως Vue, Angular, Mithril, Marko, Svelte κ.λπ.,

Μπορείτε να βρείτε περισσότερα για το βιβλίο παραμυθιών εδώ.

Τι είναι μια ιστορία;

Μια ιστορία ορίζει την κατάσταση απόδοσης του στοιχείου σας. Αν πάρουμε ένα κοινό στοιχείο, μπορούμε να το χρησιμοποιήσουμε με διαφορετικούς τρόπους με στηρίγματα. Μπορούμε να γράψουμε μια ιστορία για καθεμία από αυτές τις καταστάσεις.

Ας υποθέσουμε ότι έχουμε ένα στοιχείο Button.

Ένα κουμπί μπορεί να υπάρχει σε διαφορετικές καταστάσεις, όπως απενεργοποιημένη, φόρτωση, κύρια, δευτερεύουσα, μικρή, μεγάλη, μεσαία, κ.λπ.. Εάν αναφέρουμε όλες τις καταστάσεις, τότε θα είναι πολύ δύσκολο να προχωρήσουμε στο σεμινάριο. Νομίζω ότι το καταλαβαίνεις. Θα το αποκτήσετε περισσότερο όταν αρχίσετε να εργάζεστε με το βιβλίο παραμυθιών.

Μπορείτε να δείτε τις ιστορίες του κουμπιού σε διαφορετικές περιπτώσεις (Μεγάλο, Μεσαίο, Μικρό).

Ρύθμιση του βιβλίου ιστοριών σε ένα έργο

Θα δημιουργήσουμε ένα βιβλίο ιστοριών σε ένα έργο react.

Πάμε.

• Δημιουργήστε ένα έργο react με την ακόλουθη εντολή. Μπορείτε να ονομάσετε ό,τι θέλετε.

npx create-react-app storybook-demo

• Τώρα, εγκαταστήστε το βιβλίο ιστοριών στο έργο σας με την ακόλουθη εντολή.

npx sb init

Ολοκληρώσαμε τη ρύθμιση για το βιβλίο παραμυθιών.

Το παραμύθι παρέχει έναν ξεχωριστό διακομιστή για εμάς.

Πώς να το ξεκινήσετε;

Το βιβλίο ιστοριών προσθέτει αυτόματα μια εντολή στο αρχείο σεναρίου μας. Μπορείτε να το ελέγξετε στο αρχείο package.json μέσα στην ενότητα scripts. Προς το παρόν, εκτελέστε την ακόλουθη εντολή για να ξεκινήσετε τον διακομιστή βιβλίων ιστοριών.

npm run storybook

Το Storybook θα ξεκινήσει έναν νέο διακομιστή με τη θύρα που δίνεται στην ενότητα scripts του αρχείου package.json. Θα ανοίξει αυτόματα το βιβλίο ιστοριών στο προεπιλεγμένο πρόγραμμα περιήγησής μας (ίδιο με τον διακομιστή react).

Θα δείτε διαφορετικές ιστορίες σε αυτό από προεπιλογή. Μπορείτε να τα αφαιρέσετε αν δεν θέλετε ή να τα διατηρήσετε για αναφορά. Όπως συζητήσαμε στην προηγούμενη ενότητα, ένα κουμπί μπορεί να έχει πολλές καταστάσεις, μπορείτε να τις δείτε στο βιβλίο ιστοριών (δεν αναφέρονται όλες οι καταστάσεις). Θα γράψουμε ένα μεγάλο σύνολο ιστοριών για το κουμπί στην τελευταία ενότητα αυτού του σεμιναρίου.

Εξερευνήστε διάφορες ενότητες του βιβλίου ιστοριών και εξοικειωθείτε με τη διαφορετική ενότητα. Θα καλύψουμε μερικά από αυτά στο σεμινάριο.

Ας γράψουμε την πρώτη μας ιστορία.

Δοκιμαστικό βιβλίο ιστοριών

Είδαμε το βιβλίο ιστοριών να τρέχει και μερικά παραδείγματα σε αυτό.

• Δημιουργήστε έναν φάκελο που ονομάζεται Button μέσα στο φάκελο src.
• Δημιουργήστε αρχεία που ονομάζονται Button.jsx, Button.css καιconstants.js
• Τοποθετήστε τον αντίστοιχο κώδικα από τα παρακάτω αποσπάσματα στα αρχεία.

Κουμπί.jsx

import React, { Component } from "react";
import PropTypes from "prop-types";

import "./Button.css";

import { buttonTypes, buttonVariants, buttonSizes } from "./constants";

class Button extends Component {
    static defaultProps = {
        isDisabled: false,
        type: "filled",
        variant: "oval",
        size: "medium",
        backgroundColor: "#1ea7fd",
        textColor: "#ffffff",
    };

    static buttonTypes = buttonTypes;
    static buttonVariants = buttonVariants;
    static buttonSizes = buttonSizes;

    renderButton = () => {
        const {
            text,
            isDisabled,
            type,
            variant,
            size,
            backgroundColor,
            textColor,
            onClick,
        } = this.props;
        return (
            <button
                onClick={onClick}
                className={`default ${variant} ${size} ${
                    isDisabled ? "disabled" : ""
                }`}
                style={
                    type === buttonTypes.outline
                        ? {
                              border: `1px solid ${backgroundColor}`,
                              color: "#000000",
                              backgroundColor: "transparent",
                          }
                        : {
                              backgroundColor: `${backgroundColor}`,
                              border: `1px solid ${backgroundColor}`,
                              color: textColor,
                          }
                }
                disabled={isDisabled}
            >
                {text}
            </button>
        );
    };

    render() {
        return this.renderButton();
    }
}

Button.propTypes = {
    text: PropTypes.string,
    isDisabled: PropTypes.bool,
    type: PropTypes.oneOf([buttonTypes.outline, buttonTypes.filled]),
    variant: PropTypes.oneOf([buttonVariants.oval, buttonVariants.rectangular]),
    size: PropTypes.oneOf([
        buttonSizes.small,
        buttonSizes.medium,
        buttonSizes.large,
    ]),
    backgroundColor: PropTypes.string,
    textColor: PropTypes.string,
    onClick: PropTypes.func,
};

export { Button };

Κουμπί.css

.default {
    border: none;
    cursor: pointer;
    background-color: transparent;
}

.default:focus {
    outline: none;
}

.disabled {
    opacity: 0.75; 
    cursor: not-allowed;
}
.small {
    font-size: 12px;
    padding: 4px 8px;
}

.medium {
    font-size: 14px;
    padding: 8px 12px;
}

.large {
    font-size: 16px;
    padding: 12px 16px;
}

.oval {
    border-radius: 4px;
}

.rectangular {
    border-radius: 0;
}

σταθερές.js

export const buttonTypes = {
    outline: "outline",
    filled: "filled",
};

export const buttonVariants = {
    oval: "oval",
    rectangular: "rectangular",
};

export const buttonSizes = {
    small: "small",
    medium: "medium",
    large: "large",
};

Ποιος είναι αυτός ο κωδικός;

Έχουμε γράψει ένα κοινό στοιχείο για το κουμπί που μπορεί να χρησιμοποιηθεί με διαφορετικούς τρόπους. Τώρα, έχουμε ένα συστατικό που μπορεί να έχει διαφορετικές καταστάσεις.

Ας γράψουμε την πρώτη μας ιστορία ακολουθώντας τα παρακάτω βήματα.

• Δημιουργήστε ένα αρχείο που ονομάζεται Button.stories.jsx
• Εισαγάγετε το React και το στοιχείο Button στο αρχείο.
• Τώρα, ορίστε έναν τίτλο ή μια διαδρομή για τις ιστορίες των στοιχείων μας. Θα το ορίσουμε χρησιμοποιώντας τον παρακάτω κώδικα.

export default {
   title: ‘common/Button’,
}

Ο παραπάνω κώδικας θα τοποθετήσει όλες τις ιστορίες που βρίσκονται στο τρέχον αρχείο στον κοινό/Κουμπί/ κατάλογο.

• Εξαγωγή ενός κουμπιού με υποχρεωτικά στηρίγματα ως εξής.

export const defaultButton = () => (
    <Button text=”Default Button” onClick={() => {}} />
);

Ολοκληρώσαμε την πρώτη μας ιστορία. Εκτελέστε το βιβλίο ιστοριών με την ακόλουθη εντολή και δείτε την έξοδο.

npm run storybook

Θα γράψουμε κι άλλες ιστορίες, στο τέλος, μην ανησυχείτε.

Πώς είναι χρήσιμο στην ανάπτυξη του Frontend;

Ποιο είναι το κύριο πλεονέκτημα της χρήσης ενός βιβλίου με παραμύθια;

Ας πούμε ότι εργαζόμαστε σε μια ομάδα 10 μελών. Και πρέπει να ελέγξουμε τα κοινά στοιχεία που έχουν γράψει όλοι για το τρέχον έργο εργασίας.

Πώς μπορούμε να το κάνουμε αυτό;

Πρέπει να πάμε σε κάθε κοινό στοιχείο για να τα ελέγξουμε. Αλλά, είναι χρονοβόρο και δεν είναι ένας προτιμώμενος τρόπος για εμάς. Εδώ έρχεται το νέο μας βιβλίο με καλεσμένους.

Πώς να το χρησιμοποιήσουμε για να ξεπεράσουμε το πρόβλημά μας;

Μπορούμε να γράψουμε ιστορίες για τα κοινά στοιχεία (οποιαδήποτε στοιχεία διεπαφής χρήστη) χρησιμοποιώντας το βιβλίο ιστοριών. Και όποτε ο συμπαίκτης σας θέλει να ελέγξει τα κοινά στοιχεία άλλων, τότε απλώς εκτελεί τον διακομιστή ιστοριών και θα δει όλα τα στοιχεία διεπαφής χρήστη εκεί, όπως είδαμε παραπάνω.

Μπορούμε να κάνουμε πολλά περισσότερα με τα αποδομένα στοιχεία στο βιβλίο ιστοριών. Το Storybook έχει μια ιδέα που ονομάζεται Addons που δίνει υπερδυνάμεις στις ιστορίες μας.

Ας υποθέσουμε ότι πρέπει να ελέγξουμε την ανταπόκριση των στοιχείων διεπαφής χρήστη στο ίδιο το βιβλίο ιστοριών, μπορούμε να χρησιμοποιήσουμε ένα πρόσθετο που ονομάζεται Viewport στο βιβλίο ιστοριών. Θα μάθουμε περισσότερα για τα πρόσθετα στις επόμενες ενότητες.

Εργασία με το Storybook

Σε αυτήν την ενότητα, θα γράψουμε διαφορετικές ιστορίες που ορίζουν διαφορετικές καταστάσεις του κοινού μας στοιχείου Button.

Το να γράφεις ιστορίες δεν είναι τόσο δύσκολο. Μια ιστορία ορίζει μια κατάσταση ενός συστατικού. Αν δείτε τα στηρίγματα ενός εξαρτήματος, τότε θα καταλάβετε εύκολα διαφορετικές περιπτώσεις χρήσης του εξαρτήματος.

Ας γράψουμε μερικές ιστορίες δίνοντας προαιρετικά στηρίγματα.

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);
export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);
export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);


export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);


export const warningButton = () => (
    <Button
        text="Warning Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

Οι παραπάνω τρεις ιστορίες ορίζουν διαφορετικές περιπτώσεις χρήσης του στοιχείου μας Button. Τώρα, είναι η σειρά σας να προσθέσετε μερικές άλλες περιπτώσεις ιστοριών για το κοινό μας στοιχείο. Προσπαθήστε να προσθέσετε disabledSamllRectangularButton, DangerButton, successDisabledButton, κ.λπ.,

Δεν πρόκειται να δώσω κωδικό για τις παραπάνω περιπτώσεις. Πρέπει να το γράψεις μόνος σου για να το καταλάβεις. Μπορείτε να δείτε τον πλήρη κώδικα ιστοριών που έχουμε γράψει μέχρι τώρα.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
};

export const defaultButton = () => (
    <Button text="Default Button" onClick={() => {}} />
);

export const largeButton = () => (
    <Button text="Large Button" onClick={() => {}} size="large" />
);

export const outlineSmallButton = () => (
    <Button
        text="Outline Small Button"
        onClick={() => {}}
        size="small"
        type="outline"
    />
);

export const rectangularLargeButton = () => (
    <Button
        text="Rectangular Large Button"
        onClick={() => {}}
        size="large"
        variant="rectangular"
    />
);

export const disabledButton = () => (
    <Button text="Disabled Button" onClick={() => {}} isDisabled={true} />
);

export const warningButton = () => (
    <Button
        text="Disabled Button"
        onClick={() => {}}
        backgroundColor="orange"
    />
);

Τώρα, έχετε πλήρη έλεγχο στη συγγραφή ιστοριών για ένα στοιχείο.

Ας μεταβούμε στην επόμενη ενότητα όπου θα μάθουμε για τα πρόσθετα και πώς ενισχύουν τις ιστορίες μας.

Προσθήκες βιβλίου ιστοριών

Θα έχουμε πολλά πρόσθετα διαθέσιμα από προεπιλογή. Στην ενότητα, θα εξερευνήσουμε τα πιο χρήσιμα πρόσθετα για την ανάπτυξή μας.

Ας ενισχύσουμε τις ιστορίες μας για το κουμπί.

Έλεγχοι

Τα στοιχεία ελέγχου προσθέτουν μια δυνατότητα για να δώσουν προσαρμοσμένα στηρίγματα στο στοιχείο στο ίδιο το βιβλίο ιστοριών. Για το στοιχείο Button, μπορούμε να προσθέσουμε στοιχεία ελέγχου για να αλλάξουμε τα διαφορετικά στηρίγματα στο βιβλίο ιστοριών.

Ας υποθέσουμε ότι πρέπει να βρούμε το καλύτερο χρώμα για το χρώμα φόντου Button. Θα είναι χρονοβόρο αν το δοκιμάσουμε για να ελέγξουμε το χρώμα του φόντου δίνοντας ένα προς ένα στο στοιχείο. Αντίθετα, μπορούμε να προσθέσουμε ένα στοιχείο ελέγχου που μας επιτρέπει να επιλέγουμε το διαφορετικό χρώμα στο βιβλίο ιστοριών. Μπορούμε να δοκιμάσουμε το χρώμα του φόντου στο ίδιο το βιβλίο ιστοριών.

Ας δούμε πώς να προσθέσουμε στοιχεία ελέγχου στις ιστορίες μας στο κουμπί.

Αρχικά, πρέπει να ορίσουμε όλα τα στηρίγματα κάτω από τον τίτλο ως εξής.

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

Στη συνέχεια, διαχωρίστε τα στηρίγματα από το εξάρτημα και δώστε τα ως args ως εξής.

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

Μπορείτε να δείτε τα στοιχεία ελέγχου στο κάτω μέρος του παραθύρου προεπισκόπησης στοιχείων.

Μπορείτε να δείτε την καρτέλα ελέγχου στο κάτω μέρος του παραθύρου προεπισκόπησης στοιχείων. Παίξτε γύρω από αυτό.

Ενημερώστε όλες τις ιστορίες όπως παραπάνω. Αυτό μοιάζει περισσότερο σαν να γνωρίζετε τη σύνταξη των πρόσθετων βιβλίων ιστοριών. Στο argTypes, έχουμε χρησιμοποιήσει διαφορετικούς τύπους στοιχείων ελέγχου. Μπορείτε να βρείτε όλα τα στοιχεία ελέγχου που υπάρχουν στο βιβλίο ιστοριών εδώ.

Οι ενημερωμένες ιστορίες κουμπιών θα έχουν ως εξής.

import React from "react";

import { Button } from "./Button";

export default {
    title: "src/common/Button",
    argTypes: {
        text: { control: "text" },
        backgroundColor: { control: "color" },
        isDisabled: { control: "boolean" },
        size: {
            control: { type: "select", options: ["small", "medium", "large"] },
        },
        type: {
            control: { type: "select", options: ["filled", "outline"] },
        },
        variant: {
            control: { type: "select", options: ["oval", "rectangular"] },
        },
    },
};

export const defaultButton = (args) => <Button {...args} onClick={() => {}} />;
defaultButton.args = {
    text: "Default Button",
};

export const largeButton = (args) => (
    <Button {...args} onClick={() => {}} size="large" />
);
largeButton.args = {
    text: "Large Button",
};

export const outlineSmallButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
outlineSmallButton.args = {
    text: "Outline Small Button",
    size: "small",
    type: "outline",
};

export const rectangularLargeButton = (args) => (
    <Button {...args} onClick={() => {}} />
);
rectangularLargeButton.args = {
    text: "Rectangular Large Button",
    size: "large",
    variant: "rectangular",
};

export const disabledButton = (args) => <Button {...args} onClick={() => {}} />;
disabledButton.args = {
    text: "Disabled Button",
    isDisabled: true,
};

export const warningButton = (args) => <Button {...args} onClick={() => {}} />;
warningButton.args = {
    text: "Warning Button",
    backgroundColor: "orange",
};

Ενέργειες

Οι ενέργειες είναι συμβάντα σε JavaScript. Μπορούμε να κάνουμε κλικ σε ένα κουμπί που είναι ένα συμβάν στο JavaScript. Μπορούμε να κάνουμε κάποιες ενέργειες με κλικ στο κουμπί χρησιμοποιώντας το πρόσθετο ενεργειών.

Με ενέργειες, μπορούμε να ελέγξουμε αν τα συμβάντα λειτουργούν σωστά ή όχι. Δεν μπορείτε να κάνετε κλικ στο κουμπί “Απενεργοποιημένο” και το κουμπί “Ενεργοποίηση” πρέπει να έχει δυνατότητα κλικ. Μπορούμε να το διασφαλίσουμε χρησιμοποιώντας τις ενέργειες.

Ας δούμε πώς μπορείτε να προσθέσετε ενέργεια στο κλικ στο κουμπί.

Έχουμε δώσει ανώνυμη λειτουργία στα στηρίγματα onClick στο παρελθόν. Τώρα, πρέπει να το ενημερώσουμε.

• Εισαγάγετε την ενέργεια από το πρόσθετο του βιβλίου ιστοριών χρησιμοποιώντας την ακόλουθη πρόταση.

import { action } from "@storybook/addon-actions";

• Αντικαταστήστε όλα τα () => {} με την ακόλουθη πρόταση.

action("Button is clicked!")

Τώρα, μεταβείτε στο βιβλίο ιστοριών και κάντε κλικ σε ένα κουμπί. Θα δείτε το μήνυμα να εκτυπώνεται κάτω από την καρτέλα ενεργειών που βρίσκεται δίπλα στην καρτέλα ελέγχου. Το μήνυμα δεν θα εκτυπωθεί εάν κάνετε κλικ στο κουμπί απενεργοποίηση καθώς είναι απενεργοποιημένο.

Μπορούμε να χρησιμοποιήσουμε την ενέργεια για διαφορετικά συμβάντα όπως onChange, onMouseOver, onMouseOut κ.λπ., για να βεβαιωθούμε ότι λειτουργούν σωστά. Δοκιμάστε να εφαρμόσετε το ίδιο για το onChange για ένα στοιχείο εισόδου.

Δείτε την τεκμηρίωση για ενέργειες εδώ.

Ιστορικό

Μπορούμε να αλλάξουμε το φόντο του παραθύρου προεπισκόπησης χρησιμοποιώντας το πρόσθετο φόντου. Δεν χρειάζεται να γράψουμε κανέναν κώδικα. Απλώς αλλάξτε το μέσα στο βιβλίο ιστοριών. Μπορείτε να δείτε το gif παρακάτω.

Θύρα προβολής

Μπορούμε επίσης να ελέγξουμε την ανταπόκριση των στοιχείων μας στο βιβλίο ιστοριών. Δείτε το παρακάτω gif για να μάθετε για τις επιλογές της θύρας προβολής.

Έγγραφα

Μπορούμε να τεκμηριώσουμε τα στοιχεία μας στο βιβλίο ιστοριών χρησιμοποιώντας το πρόσθετο εγγράφων. Είναι πιο χρήσιμο όταν εργαζόμαστε σε μια ομάδα. Θα διαβάσουν το στοιχείο και θα το καταλάβουν άμεσα. Εξοικονομεί πολύ χρόνο για τους προγραμματιστές.

Στο παράθυρο προεπισκόπησης στοιχείων των βιβλίων ιστοριών μπορείτε να δείτε τα Έγγραφα επάνω δεξιά στην καρτέλα Καμβάς. Θα περιέχει όλα τα έγγραφα όλων των ιστοριών ενός στοιχείου. Πρέπει να χρησιμοποιήσουμε το Button.stories.mdx αν θέλουμε να τεκμηριώσουμε για το στοιχείο που περιλαμβάνει και τη σήμανση και την απόδοση στοιχείων. Απλώς γράφουμε κάποιο επιπλέον κώδικα σήμανσης μέσα σε αυτό μαζί με τις ιστορίες στοιχείων.

Γράφουμε ένα ντοκουμέντο για τις ιστορίες μας. Ο κώδικας περιλαμβάνει τη σήμανση και την απόδοση στοιχείων. Όλα είναι απλά μαθαίνοντας τη σύνταξη. Θα το καταλάβεις με την πρώτη ματιά.

Ας δούμε τον κώδικα εγγράφου Button.stories.mdx.

<!--- Button.stories.mdx -->

import {
    Meta,
    Story,
    Preview,
    ArgsTable
} from '@storybook/addon-docs/blocks';

import { Button } from './Button';

<Meta title="MDX/Button" component={Button} />

# Button Documentation

With `MDX` we can define a story for `Button` right in the middle of our
Markdown documentation.

<ArgsTable of={Button} />

export const Template = (args) => <Button {...args} />

## Default Button
We can write the documentation related to the Default Button
<Preview>
    <Story name="Default Button" args={{
        text: 'Default Button'
    }}>
    {Template.bind({})}
   </Story>
</Preview>

## Large Button
We are writing sample docs for two stories, you can write rest of them
<Preview>
    <Story name="Large Button" args={{
        text: "Large Button",
        }}>
        {Template.bind({})}
    </Story>
</Preview>

Μάθετε περισσότερα για τα στοιχεία τεκμηρίωσης εδώ.

Μπορείτε να μάθετε περισσότερα σχετικά με τα πρόσθετα εδώ.

συμπέρασμα

Ελπίζω να σας άρεσε το σεμινάριο και να μάθατε για το βιβλίο ιστοριών. Και χρησιμοποιήστε το αποτελεσματικά στην ομάδα σας για να κάνετε τη δουλειά σας παραγωγικά.

Νέος στο React; Ελέγξτε αυτούς τους πόρους εκμάθησης.

Καλή Κωδικοποίηση 🙂