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

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

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

Ρύθμιση του διακομιστή έργου και ανάπτυξης

Τα πακέτα που χρειάζονται για αυτό το έργο περιλαμβάνουν:

• React Router για το χειρισμό της δρομολόγησης στο Εφαρμογή Μονής Σελίδας (SPA).
• HTMLReactParser για την ανάλυση του HTML που επιστρέφεται από το Διεπαφή προγραμματισμού εφαρμογών (API).
• MomentJS για το χειρισμό των ημερομηνιών που επιστρέφονται από το API.

Ανοίξτε το τερματικό και εκτελέστε:

νήμα δημιουργία βιτέ

Μπορείτε επίσης να χρησιμοποιήσετε το Node Package Manager (NPM) αν το προτιμάτε από το νήμα. Η παραπάνω εντολή θα πρέπει να χρησιμοποιεί το εργαλείο δημιουργίας Vite για να δημιουργήσει ένα βασικό έργο. Ονομάστε το έργο σας και όταν σας ζητηθεί το πλαίσιο, επιλέξτε Αντιδρώ και ορίστε την παραλλαγή σε JavaScript.

Τώρα CD στον φάκελο του έργου και εγκαταστήστε τα πακέτα που αναφέρθηκαν προηγουμένως εκτελώντας τις ακόλουθες εντολές στο τερματικό:

νήμα προσθήκη html-react-parser
νήμα προσθήκη react-router-dom
νήματα προσθέτουν στιγμή
νήματα dev

Αφού εγκαταστήσετε όλα τα πακέτα και ξεκινήσετε τον διακομιστή ανάπτυξης, ανοίξτε το έργο σε οποιοδήποτε πρόγραμμα επεξεργασίας κώδικα και δημιουργήστε τρεις φακέλους στο src φάκελο και συγκεκριμένα: συστατικά, αγκίστρια, και σελίδες.

Στο συστατικά φάκελο, προσθέστε δύο αρχεία Σχόλια.jsx και Navbar.jsx. Στο αγκίστρια φάκελο, προσθέστε ένα αρχείο useFetch.jsx. Στη συνέχεια στο σελίδες φάκελο, προσθέστε δύο αρχεία ListPage.jsx και PostPage.jsx.

Διαγράψτε το App.css αρχείο και αντικαταστήστε τα περιεχόμενα του main.jsx αρχείο με τα εξής:

εισαγωγή Αντιδρώ από'αντιδρώ'
εισαγωγή { BrowserRouter } από'react-router-dom'
εισαγωγή ReactDOM από'react-dom/client'
εισαγωγή App από"./App.jsx"
εισαγωγή"./index.css"
ReactDOM.createRoot(έγγραφο.getElementById('ρίζα')).καθιστώ(



 </BrowserRouter>
 </React.StrictMode>,
)

Στο App.jsx αρχείο, αφαιρέστε όλο τον κώδικα του boilerplate και τροποποιήστε το αρχείο έτσι ώστε να απομένει μόνο το λειτουργικό στοιχείο:

λειτουργίαApp() {
ΕΠΙΣΤΡΟΦΗ (
 <>
 </>
 )
}
εξαγωγήΠροκαθορισμένο App

Εισαγάγετε τις απαραίτητες ενότητες:

εισαγωγή { Διαδρομές, Διαδρομή } από'react-router-dom'
εισαγωγή Σελίδα λίστας από'./pages/ListPage'
εισαγωγή Navbar από'./components/Navbar'
εισαγωγή PostPage από"./pages/PostPage"

Στο τμήμα React, προσθέστε το Διαδρομές εξαρτήματα με τρία Διαδρομή θυγατρικά εξαρτήματα με μονοπάτια: /, /:type, και /item/:id αντίστοιχα.

'/'
 στοιχείο={<> <Navbar /><Σελίδα λίστας /></>}>
 </Route>
'/:τύπος'
 στοιχείο={<> <Navbar /><Σελίδα λίστας /></>}>
 </Route>
'/item/:id'
 στοιχείο ={}>
 </Route>
</Routes>

Δημιουργία του UseFetch Custom Hook

Αυτό το έργο χρησιμοποιεί δύο API. Το πρώτο API είναι υπεύθυνο για την ανάκτηση της λίστας αναρτήσεων σε μια δεδομένη κατηγορία (τύπος), ενώ το δεύτερο API είναι το Algolia API το οποίο είναι υπεύθυνο για την ανάκτηση μιας συγκεκριμένης ανάρτησης και σχόλια.

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

εισαγωγή { useState, useEffect } από"αντιδρώ";
εξαγωγήΠροκαθορισμένολειτουργίαχρήσηFetch(τύπος, id) {
}

Ορίστε τρεις μεταβλητές κατάστασης και συγκεκριμένα: δεδομένα, λάθος, και φόρτωση, με τις αντίστοιχες συναρτήσεις ρυθμιστή τους.

συνθ [data, setData] = useState();
συνθ [σφάλμα, setError] = useState(ψευδής);
συνθ [φόρτωση, setLoading] = useState(αληθής);

Στη συνέχεια, προσθέστε ένα useEffect γάντζο με τις εξαρτήσεις: ταυτότητα και τύπος.

useEffect(() => {
}, [αναγνωριστικό, τύπος])

Στη συνέχεια, στη λειτουργία επανάκλησης, προσθέστε τη συνάρτηση fetchData() για να ανακτήσετε τα δεδομένα από τα κατάλληλα API. Αν η παράμετρος που πέρασε είναι τύπος, χρησιμοποιήστε το πρώτο API. Διαφορετικά, χρησιμοποιήστε το δεύτερο API.

ασυγχρονισμόςλειτουργίαfetchData() {
αφήνω απόκριση, url, παράμετρος.
αν (τύπος) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 παράμετρος = type.toLowerCase(); 
 }
αλλούαν (id) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 παράμετρος = id.toLowerCase(); 
 }
δοκιμάστε {
 ανταπόκριση = αναμένω φέρω(`${url}${parameter}`);
 } σύλληψη (λάθος) {
 setError(αληθής);
 }
αν (απάντηση) αν (response.status !== 200) {
 setError(αληθής);
 } αλλού {
αφήνω δεδομένα = αναμένω answer.json();
 setLoading(ψευδής);
 setData (δεδομένα);
 }
}
fetchData();

Τέλος, επιστρέψτε το φόρτωση, λάθος, και δεδομένα δηλώστε τις μεταβλητές ως αντικείμενο.

ΕΠΙΣΤΡΟΦΗ { φόρτωση, σφάλμα, δεδομένα };

Απόδοση της Λίστας Αναρτήσεων Ανάλογα με την Ζητούμενη Κατηγορία

Κάθε φορά που ο χρήστης πλοηγείται σε / ή /:type, το React θα πρέπει να αποδώσει το Σελίδα λίστας συστατικό. Για να εφαρμόσετε αυτήν τη λειτουργία, πρώτα εισάγετε τις απαραίτητες ενότητες:

εισαγωγή { useNavigate, useParams } από"react-router-dom";
εισαγωγή χρήσηFetch από"../hooks/useFetch";

Στη συνέχεια, ορίστε το λειτουργικό στοιχείο και, στη συνέχεια, αντιστοιχίστε τη δυναμική παράμετρο, τύπος στο τύπος μεταβλητός. Εάν η δυναμική παράμετρος δεν είναι διαθέσιμη, ορίστε το τύπος μεταβλητή σε Νέα. Στη συνέχεια, καλέστε το χρήσηFetch άγκιστρο.

εξαγωγήΠροκαθορισμένολειτουργίαΣελίδα λίστας() {
αφήνω { type } = useParams();
συνθ navigate = useNavigate();
αν (!τύπος) τύπος = "Νέα";
συνθ { φόρτωση, σφάλμα, δεδομένα } = useFetch (τύπος, μηδενικό);
}

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

αν (λάθος) {
ΕΠΙΣΤΡΟΦΗ<div>Κάτι πήγε στραβά!div>
}
αν (φόρτωση) {
ΕΠΙΣΤΡΟΦΗ<div>Φόρτωσηdiv>
}
αν (δεδομένα) {
έγγραφο.title = type.toUpperCase();
ΕΠΙΣΤΡΟΦΗ<div>
"τύπος λίστας">{πληκτρολογήστε}</div>
{data.map(είδος =>
"είδος">
"στοιχείο-τίτλος"
 onClick={() => πλοήγηση(`/item/${item.id}`)}>
 {item.title}
 </div>
 {item.domain && 
"στοιχείο-σύνδεσμος"
 onClick={() => άνοιγμα(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

Δημιουργία του στοιχείου PostPage

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

εισαγωγή { Link, useParams } από"react-router-dom";
εισαγωγή αναλύω λέξη από'html-react-parser';
εισαγωγή στιγμή από"στιγμή";
εισαγωγή Σχόλια από"../components/Σχόλια";
εισαγωγή χρήσηFetch από"../hooks/useFetch";
εξαγωγήΠροκαθορισμένολειτουργίαPostPage() {
συνθ { id } = useParams();
συνθ { φόρτωση, σφάλμα, δεδομένα } = useFetch(μηδενικό, id);
}

Και όπως ακριβώς συμβαίνει με το Σελίδα λίστας στοιχείο, αποδίδετε το κατάλληλο JSX με βάση την κατάσταση των ακόλουθων μεταβλητών: φόρτωση, λάθος, και δεδομένα.

αν (λάθος) {
ΕΠΙΣΤΡΟΦΗ<div>Κάτι πήγε στραβά!div>
}
αν (φόρτωση) {
ΕΠΙΣΤΡΟΦΗ<div>Φόρτωσηdiv>
}
αν (δεδομένα) {
έγγραφο.title=data.title;
ΕΠΙΣΤΡΟΦΗ<div>
"Τίτλος ανάρτησης">{data.title}</div>
"μεταμεταδεδομένα">
 {data.url && 
 className="post-link">Επισκεφτείτε τον ιστότοπο</Link>}
"μετα-συγγραφέας">{data.author}</span>
"μεταχρονος">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"μετακείμενο">
 {parse (data.text)}</div>}
"ανάρτηση σχολίων">
"σχόλια-ετικέτα">Σχόλια</div>

 </div>
 </div>
}

Εισαγάγετε το αναλύω λέξη ενότητα και το στιγμή μονάδα μέτρησης. Ορίστε το προεπιλεγμένο λειτουργικό στοιχείο Σχόλια που παίρνει στο σχόλιαΔεδομένα array ως prop, διασχίζει τους πίνακες και αποδίδει a Κόμβος συστατικό για κάθε στοιχείο.

εισαγωγή αναλύω λέξη από'html-react-parser';
εισαγωγή στιγμή από"στιγμή";
εξαγωγήΠροκαθορισμένολειτουργίαΣχόλια({ σχόλιαΔεδομένα }) {
ΕΠΙΣΤΡΟΦΗ<>
 {commentsData.map(σχόλιο Δεδομένα =><Κόμβοςσχόλιο Δεδομένα={commentData}κλειδί={commentData.id}
 />)}
 </>
}

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

λειτουργίαΚόμβος({ commentData }) {
ΕΠΙΣΤΡΟΦΗ<divόνομα τάξης="σχόλιο">
 {
 commentData.text &&
 <>
"σχόλιο-μεταδεδομένα">
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
"σχόλιο-κείμενο">
 {parse (commentData.text)}</div>
 </>
 }
'σχολιασμός-απαντήσεις'>
 {(commentData.children) && 
 commentData.children.map(παιδί =>
)}
 </div>
 </div>
}

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

Δημιουργία του στοιχείου Navbar

Ανοιξε το Navbar.jsx αρχείο και εισαγωγή του NavLink ενότητα από το react-router-dom μονάδα μέτρησης. Τέλος, ορίστε το λειτουργικό στοιχείο και επιστρέψτε ένα γονικό στοιχείο nav στοιχείο με πέντε NavLink στοιχεία που δείχνουν τις κατάλληλες κατηγορίες (ή τύπους).

εισαγωγή { NavLink } από"react-router-dom"
εξαγωγήΠροκαθορισμένολειτουργίαNavbar() {
ΕΠΙΣΤΡΟΦΗ<nav>
"/Νέα">Σπίτι</NavLink>
"/καλύτερος">Το καλύτερο</NavLink>
"/προβολή">Εμφάνιση</NavLink>
"/παρακαλώ">Ρωτήστε</NavLink>
"/θέσεις εργασίας">Δουλειές</NavLink>
 </nav>
}

Συγχαρητήρια! Μόλις δημιουργήσατε το δικό σας πρόγραμμα-πελάτη front-end για Hacker News.

Στερεώστε τις δεξιότητές σας στο React δημιουργώντας εφαρμογή κλώνου

Η δημιουργία ενός κλώνου Hacker News με το React μπορεί να σας βοηθήσει να ενισχύσετε τις δεξιότητές σας στο React και να παράσχετε μια πρακτική εφαρμογή Single Page Application για να εργαστείτε. Υπάρχουν πολλοί τρόποι με τους οποίους μπορείτε να προχωρήσετε τα πράγματα. Για παράδειγμα, μπορείτε να προσθέσετε τη δυνατότητα αναζήτησης αναρτήσεων και χρηστών στην εφαρμογή.

Αντί να προσπαθείτε να δημιουργήσετε το δικό σας δρομολογητή από την αρχή, είναι προτιμότερο να χρησιμοποιήσετε ένα εργαλείο κατασκευασμένο από επαγγελματίες που είναι αφοσιωμένοι στο να διευκολύνουν τη δημιουργία SPA.