Πώς να δημιουργήσετε μια εφαρμογή ταμπλό με αντιδράσει

Sep 12, 2025

πως να

Σελίδα 1 από 2:

Κάντε μια εφαρμογή ταμπλό σε αντιδράσει - Βήματα 1-10

Κάντε μια εφαρμογή ταμπλό σε αντιδράσει - Βήματα 1-10
Κάντε μια εφαρμογή ταμπλό σε αντιδράσει - Βήματα 11-21

Σε αυτό το σεμινάριο, θα περπατήσουμε Πώς να δημιουργήσετε μια εφαρμογή χρησιμοποιώντας Αντιδρώ - Βιβλιοθήκη JavaScript για οικοδόμηση διεπαφών χρήστη. Αυτό Εργαλείο σχεδίασης ιστοσελίδων Είναι ιδιαίτερα χρήσιμο όταν πρόκειται για δημιουργία εξαρτημάτων, προσφέροντας σημαντικά οφέλη σε κάτι σαν το jquery.

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

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

Θέλετε να δημιουργήσετε έναν ιστότοπο, αντί για μια εφαρμογή; Χρειάζεστε τους οδηγούς μας στο καλύτερο οικοδόμος ιστότοπου και web hosting υπηρεσία.

19 λαμπρά plugins jquery

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

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

Κατεβάστε τα αρχεία για αυτό το σεμινάριο εδώ .

01. Κατεβάστε τις εξαρτήσεις

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

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

Καταχωρίστε τα παρακάτω στη γραμμή εντολών ενώ βρίσκεστε στο σπίτι του έργου:

 / * σε ένα παράθυρο * /
& gt; Εγκατάσταση νημάτων
& gt; Ξεκινήστε το νήμα
/ * σε ένα άλλο παράθυρο * /
& gt; Το νήμα εξυπηρετεί

02. Προσθέστε το πρώτο γραφικό στοιχείο

react dashboard app — Ξεκινήστε με ένα απλό στοιχείο

Για να ξεκινήσετε τα πράγματα, θα κάνουμε ένα απλό στοιχείο στη σελίδα. Με τη δημιουργία Babel, μπορούμε να γράψουμε εξαρτήματα χρησιμοποιώντας μαθήματα ES2015. Το μόνο που πρέπει να κάνουμε είναι να τα εισάγαμε όταν χρειαστεί και η Babel με webpack θα κάνει τα υπόλοιπα.

Ανοίγω /src/components/app.js και προσθέστε την εισαγωγή στην κορυφή της σελίδας. Στη συνέχεια, μέσα στη λειτουργία δημιουργίας, τοποθετήστε το στοιχείο μέσα στο δοχείο & lt; div & gt; .

 Widget εισαγωγής από
  '../components/widget';
[...]
& lt; div classname = "app" & gt;
  & lt; widget / & gt;
& lt; / div & gt;

03. Στυλ ένα κουτί widget

Σε αυτό το έργο, το WebPack έχει συσταθεί για την παραλαβή των εισαγωγών CSS. Αυτό σημαίνει ότι μπορούμε να εισαγάγουμε αρχεία CSS όπως κάναμε με javascript στο προηγούμενο βήμα, το οποίο μας επιτρέπει να δημιουργήσουμε ξεχωριστά αρχεία για κάθε στοιχείο. Προσθέστε την ακόλουθη εισαγωγή στην κορυφή του Widget.js. Αυτό θα συνδέσει με το όνομα του 'widget' και θα περιορίσει τα στυλ σε αυτό το συστατικό.

 Εισαγωγή »../styles/widget.css» ,

04. Προσθήκη τίτλου και περιεχομένου

Κάθε widget θα χρειαστεί μια σύντομη περιγραφή των δεδομένων που εμφανίζονται. Για να διατηρήσετε τα πράγματα προσαρμόσιμα, θα περάσουμε αυτό το σε ένα ακίνητο - ή «prop» - στο στοιχείο όταν το χρησιμοποιούμε.

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

Αντικαταστήστε το σύμβολο κράτησης θέσης & lt; p & gt; Στη λειτουργία δημιουργίας με τα ακόλουθα. Το στοιχείο φόρτωσης θα τεθεί σε λειτουργία αργότερα.

 & lt; div classname = "header" & gt;
  & lt; h2 & gt; {this.props.heading} & lt; / h2 & gt;
  {this.props.loading; & lt; loading / & gt;: ""}
& lt; / div & gt;
& lt; div classname = "περιεχόμενο" & gt;
  {this.props.childrens}
& lt; / div & gt;

05. Αφήστε το widget να ανοίξει το πλέγμα

Εκτός από τα φύλλα styleshes που εισάγουμε, μπορούμε επίσης να δημιουργήσουμε αντιδρά στυλ που βασίζονται δυναμικά στις πλάτες που πέφτει.

Για να ανοίξετε στήλες και σειρές με το πλέγμα CSS Χρησιμοποιήστε τις ιδιότητες του πλέγματος και της γραμμής πλέγματος. Μπορούμε να περάσουμε μέσα από τη θέση «Colspan» και «Rowspan» να αλλάξουμε αυτό ανά συστατικό με παρόμοιο τρόπο με το πώς λειτουργούν τα επιτραπέζια κύτταρα σε HTML.

Εφαρμόστε στυλ στον κατασκευαστή widget και συνδέστε τα στο δοχείο & lt; div & gt; .

 εάν (TROPS.Colspan! == 1) {
  αυτό.spanstyles.gridcolumn
  = `Span $ {TROPS.Colspan}`;
}
Εάν (Props.Rowspan! == 1) {
  αυτό.spanstyles.gridrow
  = `Span $ {TROPS.ROWSPAN}`;
}
[...]
& lt; div style = {that.spanstyles}
  ClassName = "Widget" & GT;

06. Παροχή προεπιλεγμένων στηρίγματα

Αυτή τη στιγμή το widget μας είναι κενό καθώς δεν προμηθεύουμε καμία στηρίγματα. Σε αυτές τις περιπτώσεις, μπορούμε να προμηθεύουμε προεπιλεγμένες στηρίγματα να χρησιμοποιηθούν αντ 'αυτού.

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

 widget.defaultprops = {
  Επικεφαλής: "Ανόητο widget",
  Colspan: 1,
  Rowspan: 1
}

07. Εφαρμογή συγκεκριμένων στηρίξεων

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

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

 widget.proptypes = {
  Επικεφαλίδα: αντιδράστε.Proptypes.string,
  COLSPAN: REACT.PROPTYPES.Number,
  rowspan: αντιδράστε.proptypes.number,
  παιδιά:
    Αντιδρά .proptypes.element.isrequired
}

08. Προσθέστε στηρίγματα στην εφαρμογή

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

Επιστρέψτε το κεφάλι στο app.js και προσθέστε μια επικεφαλίδα στο widget που δημιουργήσαμε νωρίτερα. Αντί να κάνετε την ετικέτα self-κλείσιμο, να το ανοίξετε και να προσθέσετε κάποιο περιεχόμενο κράτησης θέσης για να δείξει ότι λειτουργεί.

 & lt; Widget τίτλος = "Open Ticket Total" & GT;
  & lt; p & gt; αυτό είναι κάποιο περιεχόμενο & lt; / p & gt;
& lt; / widget & gt;

09. Εμφανίστε ορισμένα δεδομένα

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

Εισαγάγετε το συστατικό του αριθμού στην κορυφή και χρησιμοποιήστε το για να αντικαταστήσετε το περιεχόμενο θέσης θέσης που μόλις προσθέσατε στο Widget.

 Αριθμός εισαγωγής από το '../components/numberdisplay'.
[...]
& lt; numberdisplay max = {9} τιμή = {5} / & gt;

10. Μετατρέψτε στο NumberWidget

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

Αντικαταστήστε τις εισαγωγές γραφικού και αριθμητικού στοιχείου στο επάνω μέρος του App.Js με το NumberWidget. Βεβαιωθείτε ότι έχετε αντικαταστήσει επίσης τη μέθοδο δημιουργίας.

 Αριθμός εισαγωγής από το
  '../Components/Numberwidget'.
[...]
& lt; numberwidget
  Επικεφαλίδα = "Ανοιχτό Ticket Total"
max = {9} τιμή = {5} / & gt;

Επόμενη Σελίδα: Συμπληρώστε την εφαρμογή ταμπλό σας σε αντιδράσει

Τρέχουσα σελίδα: Κάντε μια εφαρμογή ταμπλό σε αντιδράσει - Βήματα 1-10

Επόμενη σελίδα Κάντε μια εφαρμογή ταμπλό σε αντιδράσει - Βήματα 11-21

Πώς να δημιουργήσετε μια εφαρμογή ταμπλό με αντιδράσει

01. Κατεβάστε τις εξαρτήσεις

02. Προσθέστε το πρώτο γραφικό στοιχείο

03. Στυλ ένα κουτί widget

04. Προσθήκη τίτλου και περιεχομένου

05. Αφήστε το widget να ανοίξει το πλέγμα

06. Παροχή προεπιλεγμένων στηρίγματα

07. Εφαρμογή συγκεκριμένων στηρίξεων

08. Προσθέστε στηρίγματα στην εφαρμογή

09. Εμφανίστε ορισμένα δεδομένα

10. Μετατρέψτε στο NumberWidget

πως να - Τα πιο δημοφιλή άρθρα

Δημιουργήστε μια σελίδα προορισμού WebGL 3D

Ξεκινήστε με την Adobe Dimension CC

Ένας οδηγός για το όραμα σύννεφο της Google

8 Βασικά μυστικά ασφαλείας Wordpress

Πώς να δημιουργήσετε στυλιζαρισμένα έργα τέχνης παιχνιδιών

Δημιουργήστε εκπληκτικά τοπία στο Houdini

Πώς να αναμίξετε το χρώμα σκιάς σε βαφή

Μοντελοποίηση διαστημόπλοιο για το σχεδιασμό gameplay

Κατηγορίες