כיצד ליצור שיבוט חדשות של האקרים באמצעות React

Hacker News הוא אתר פופולרי בקרב יזמים ומפתחים. הוא כולל תוכן המתמקד במדעי המחשב ויזמות.

הפריסה הפשוטה של ​​האקר ניוז עשויה להתאים לאנשים מסוימים. עם זאת, אם אתה רוצה גרסה מושכת ומותאמת יותר, אתה יכול להשתמש בממשקי API מועילים כדי ליצור חוויית Hacker News מותאמת אישית משלך. כמו כן, בניית שיבוט האקר ניוז יכולה לעזור לך לגבש את כישורי ה-React שלך.

הגדרת שרת הפרויקט והפיתוח

החבילות הדרושות לפרויקט זה כוללות:

• React Router לטיפול בניתוב ב- יישום עמוד יחיד (SPA).
• HTMLReactParser לניתוח ה-HTML המוחזר על ידי ה- ממשק תכנות יישומים (API).
• MomentJS לטיפול בתאריכים המוחזרים על ידי ה-API.

פתח את הטרמינל והפעל:

חוט ליצור vite

אתה יכול גם להשתמש ב מנהל חבילות צומת (NPM) אם אתה מעדיף את זה על פני חוט. הפקודה שלמעלה צריכה להשתמש בכלי הבנייה של Vite כדי פיגום פרויקט בסיסי. תן שם לפרויקט שלך וכשתתבקש להזין את המסגרת, בחר

עַכשָׁיו CD לתוך תיקיית הפרויקט והתקן את החבילות שהוזכרו קודם לכן על ידי הפעלת הפקודות הבאות בטרמינל:

הוסף חוט html-react-parser
חוט להוסיף react-router-dom
חוט להוסיף רגע
מפתח חוט

לאחר התקנת כל החבילות והפעלת שרת הפיתוח, פתח את הפרוייקט בכל עורך קוד וצור שלוש תיקיות ב- src תיקייה כלומר: רכיבים, ווים, ו דפים.

בתוך ה רכיבים תיקייה, הוסף שני קבצים Comments.jsx ו Navbar.jsx. בתוך ה ווים תיקייה, הוסף קובץ אחד useFetch.jsx. ואז ב דפים תיקייה, הוסף שני קבצים ListPage.jsx ו PostPage.jsx.

מחק את ה App.css קובץ והחלף את התוכן של main.jsx קובץ עם הדברים הבאים:

יְבוּא לְהָגִיב מ'לְהָגִיב'
יְבוּא { BrowserRouter } מ'react-router-dom'
יְבוּא ReactDOM מ'react-dom/client'
יְבוּא אפליקציה מ'./App.jsx'
יְבוּא'./index.css'
ReactDOM.createRoot(מסמך.getElementById('שורש')).לְדַקלֵם(



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

בתוך ה App.jsx קובץ, הסר את כל קוד ה-boilerplate ושנה את הקובץ כך שיישאר לך רק הרכיב הפונקציונלי:

פוּנקצִיָהאפליקציה() {
לַחֲזוֹר (
 <>
 </>
 )
}
יְצוּאבְּרִירַת מֶחדָל אפליקציה

ייבא את המודולים הדרושים:

יְבוּא { מסלולים, מסלול } מ'react-router-dom'
יְבוּא דף רשימה מ'./pages/ListPage'
יְבוּא Navbar מ'./components/Navbar'
יְבוּא PostPage מ'./pages/PostPage'

בקטע React, הוסף את מסלולים רכיבים עם שלושה מַסלוּל רכיבי צאצא עם נתיבים: /, /:type, ו /item/:id בהתאמה.

'/'
 element={<> <Navbar /><דף רשימה /></>}>
 </Route>
'/:סוּג'
 element={<> <Navbar /><דף רשימה /></>}>
 </Route>
'/מספר זיהוי של הפריט'
 element={}>
 </Route>
</Routes>

יצירת ה-useFetch Custom Hook

פרויקט זה משתמש בשני ממשקי API. ה-API הראשון אחראי על שליפת רשימת הפוסטים בקטגוריה נתונה (סוג), בעוד ה-API השני הוא ה-API של Algolia שאחראי על שליפת פוסט מסוים ושלו הערות.

פתח את ה useFetch.jsx קובץ, הגדר את ה-hook כיצוא ברירת מחדל וייבא את useState ו useEffect ווים.

יְבוּא { useState, useEffect } מ"לְהָגִיב";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהuseFetch(סוג, מזהה) {
}

הגדר שלושה משתני מצב, כלומר: נתונים, שְׁגִיאָה, ו טוען, עם פונקציות הקובע שלהם.

const [data, setData] = useState();
const [error, setError] = useState(שֶׁקֶר);
const [loading, setLoading] = useState(נָכוֹן);

לאחר מכן, הוסף א useEffect הוק עם התלות: תְעוּדַת זֶהוּת ו סוּג.

useEffect(() => {
}, [מזהה, סוג])

הבא בפונקציית ההתקשרות חזרה, הוסף את הפונקציה fetchData() כדי להביא את הנתונים מממשקי ה-API המתאימים. אם הפרמטר שעבר הוא סוּג, השתמש ב-API הראשון. אחרת, השתמש ב-API השני.

אסינכרוןפוּנקצִיָהfetchData() {
לתת תגובה, כתובת אתר, פרמטר;
אם (סוג) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 פרמטר = type.toLowerCase(); 
 }
אַחֵראם (מזהה) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 פרמטר = id.toLowerCase(); 
 }
לְנַסוֹת {
 תגובה = לְהַמתִין לְהָבִיא(`${url}${parameter}`);
 } לתפוס (שגיאה) {
 setError(נָכוֹן);
 }
אם (תְגוּבָה) אם (response.status !== 200) {
 setError(נָכוֹן);
 } אַחֵר {
לתת נתונים = לְהַמתִין response.json();
 setLoading(שֶׁקֶר);
 setData (נתונים);
 }
}
fetchData();

לבסוף, החזר את טוען, שְׁגִיאָה, ו נתונים משתני מצב כאובייקט.

לַחֲזוֹר { loading, error, data };

עיבוד רשימת הפוסטים בהתאם לקטגוריה המבוקשת

בכל פעם שהמשתמש מנווט אל / אוֹ /:type, React צריך לעבד את דף רשימה רְכִיב. כדי ליישם פונקציונליות זו, ראשית, ייבא את המודולים הדרושים:

יְבוּא { useNavigate, useParams } מ"react-router-dom";
יְבוּא useFetch מ"../hooks/useFetch";

לאחר מכן, הגדר את הרכיב הפונקציונלי ולאחר מכן הקצה את הפרמטר הדינמי, סוּג אל ה סוּג מִשְׁתַנֶה. אם הפרמטר הדינמי אינו זמין, הגדר את סוּג משתנה ל חֲדָשׁוֹת. לאחר מכן, התקשר ל useFetch וו.

יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהדף רשימה() {
לתת { type } = useParams();
const navigate = useNavigate();
אם (!סוג) סוג = "חֲדָשׁוֹת";
const { loading, error, data } = useFetch (סוג, ריק);
}

לאחר מכן, החזר את קוד ה-JSX המתאים בהתאם לאיזה טוען, שְׁגִיאָה, או נתונים משתנים זה נכון.

אם (שגיאה) {
לַחֲזוֹר<div>משהו השתבש!div>
}
אם (טוען) {
לַחֲזוֹר<div>טועןdiv>
}
אם (נתונים) {
מסמך.title = type.toUpperCase();
לַחֲזוֹר<div>
'סוג רשימה'>{type}</div>
{data.map(פריט =>
"פריט">
"כותרת פריט"
 onClick={() => לנווט(`/item/${item.id}`)}>
 {כותרת פריט}
 </div>
 {item.domain && 
"קישור פריט"
 onClick={() => פתוח(`${item.url}`)}>
 ({item.domain})</span>}
 </div>)}
 </div>
 </div>
}

יצירת רכיב PostPage

ראשית, ייבא את המודולים והרכיבים המתאימים, ולאחר מכן הגדר את רכיב ברירת המחדל הפונקציונלי, הקצה את תְעוּדַת זֶהוּת פרמטר דינמי ל תְעוּדַת זֶהוּת משתנה ו, קרא את useFetch וו. ודא שאתה מפרק את התגובה.

יְבוּא { Link, useParams } מ"react-router-dom";
יְבוּא לְנַתֵחַ מ'html-react-parser';
יְבוּא רֶגַע מ"רֶגַע";
יְבוּא הערות מ"../components/Comments";
יְבוּא useFetch מ"../hooks/useFetch";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהPostPage() {
const { id } = useParams();
const { loading, error, data } = useFetch(ריק, id);
}

ובדיוק כמו עם ה דף רשימה רכיב, עבד את ה-JSX המתאים בהתבסס על המצב של המשתנים הבאים: טוען, שְׁגִיאָה, ו נתונים.

אם (שגיאה) {
לַחֲזוֹר<div>משהו השתבש!div>
}
אם (טוען) {
לַחֲזוֹר<div>טועןdiv>
}
אם (נתונים) {
מסמך.title=data.title;
לַחֲזוֹר<div>
"פוסט כותרת">{data.title}</div>
"פוסט-מטא נתונים">
 {data.url && 
 className="פוסט קישור">בקר באתר</Link>}
"פוסט מחבר">{data.author}</span>
"פוסט-זמן">
 {moment (data.created_at).fromNow()}
 </span>
 </div>
 {data.text && 
"פוסט טקסט">
 {נתח (data.text)}</div>}
"פרסם תגובות">
"תגובות-תווית">תגובות</div>

 </div>
 </div>
}

ייבא את לְנַתֵחַ מודול ואת רֶגַע מודול. הגדר את רכיב ברירת המחדל הפונקציונלי הערות שמקבל את הערות נתונים מערך כאביזר, חוצה את המערכים, ומציג את א צוֹמֶת רכיב עבור כל אלמנט.

יְבוּא לְנַתֵחַ מ'html-react-parser';
יְבוּא רֶגַע מ"רֶגַע";
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָההערות({ commentsData }) {
לַחֲזוֹר<>
 {commentsData.map(commentData =><צוֹמֶתcommentData={commentData}מַפְתֵחַ={commentData.id}
 />)}
 </>
}

לאחר מכן, הגדר את ה צוֹמֶת רכיב פונקציונלי ממש מתחת ל הערות רְכִיב. ה צוֹמֶת רכיב מעבד את ההערה, המטא נתונים ומשיב לכל הערה (אם יש) על ידי עיבוד רקורסיבי של עצמו.

פוּנקצִיָהצוֹמֶת({ commentData }) {
לַחֲזוֹר<divclassName="תגובה">
 {
 commentData.text &&
 <>
'comment-metadata'>
{commentData.author}</span>

 {moment (commentData.created_at).fromNow()}
 </span>
 </div>
'תגובה-טקסט'>
 {נתח (commentData.text)}</div>
 </>
 }
'תגובות-תשובות'>
 {(commentData.children) && 
 commentData.children.map(יֶלֶד =>
)}
 </div>
 </div>
}

בגוש הקוד למעלה, לְנַתֵחַ אחראי על ניתוח ה-HTML המאוחסן ב commentData.text, בזמן רֶגַע אחראית לנתח את זמן ההערות ולהחזרת הזמן היחסי באמצעות מעכשיו() שיטה.

יצירת רכיב Navbar

פתח את ה Navbar.jsx קובץ וייבא את NavLink מודול מה- תגובה-נתב-דום מודול. לבסוף, הגדר את הרכיב הפונקציונלי והחזר הורה nav אלמנט עם חמישה NavLink אלמנטים המצביעים על הקטגוריות (או הסוגים) המתאימות.

יְבוּא { NavLink } מ"react-router-dom"
יְצוּאבְּרִירַת מֶחדָלפוּנקצִיָהNavbar() {
לַחֲזוֹר<nav>
"/חֲדָשׁוֹת">בית</NavLink>
"/הטוב ביותר"> הכי טוב</NavLink>
"/הופעה">הצג</NavLink>
"/לִשְׁאוֹל">שאל</NavLink>
"/מקומות תעסוקה">עבודות</NavLink>
 </nav>
}

מזל טוב! זה עתה בנית לקוח חזיתי משלך עבור Hacker News.

חיזוק כישורי התגובה שלך על ידי בניית אפליקציית שיבוט

בניית שיבוט של Hacker News עם React יכולה לעזור לגבש את כישורי ה-React שלך ולספק אפליקציה מעשית לדף אחד לעבוד עליו. ישנן דרכים רבות שאתה יכול לקחת דברים רחוק יותר. לדוגמה, תוכל להוסיף לאפליקציה את היכולת לחפש פוסטים ומשתמשים.

במקום לנסות לבנות נתב משלך מאפס, עדיף להשתמש בכלי שנבנה על ידי אנשי מקצוע המוקדשים להקל על יצירת SPAs.