كيفية إنشاء استنساخ لأخبار القراصنة باستخدام React

Hacker News هو موقع شهير بين رواد الأعمال والمطورين. يتميز بمحتوى يركز على علوم الكمبيوتر وريادة الأعمال.

قد يناسب التصميم البسيط لـ Hacker News بعض الأفراد. ومع ذلك ، إذا كنت ترغب في إصدار أكثر جاذبية وتخصيصًا ، فيمكنك استخدام واجهات برمجة التطبيقات المفيدة لإنشاء تجربة Hacker News المخصصة الخاصة بك. أيضًا ، يمكن أن يساعدك إنشاء استنساخ Hacker News على ترسيخ مهارات React الخاصة بك.

إعداد خادم المشروع والتطوير

الحزم اللازمة لهذا المشروع تشمل:

• React Router للتعامل مع التوجيه في ملف تطبيق صفحة واحدة (واس).
• HTMLReactParser لتحليل HTML الذي تم إرجاعه بواسطة واجهة برمجة التطبيقات (API).
• MomentJS للتعامل مع التواريخ التي أرجعها API.

افتح الجهاز وقم بتشغيل:

الغزل يخلق vite

يمكنك أيضًا استخدام ملف مدير حزمة العقدة (NPM) إذا كنت تفضله على الغزل. يجب أن يستخدم الأمر أعلاه أداة بناء Vite لسقالة مشروع أساسي. قم بتسمية مشروعك وعند مطالبتك بإطار العمل ، اختر تتفاعل وقم بتعيين المتغير على جافا سكريبت.

الآن قرص مضغوط في مجلد المشروع وقم بتثبيت الحزم المذكورة سابقًا عن طريق تشغيل الأوامر التالية في الجهاز:

إضافة الغزل المحلل اللغوي html- رد فعل
إضافة الغزل إلى رد فعل جهاز التوجيه دوم
إضافة لحظة الغزل
ديف الغزل

بعد تثبيت جميع الحزم وبدء خادم التطوير ، افتح المشروع في أي محرر تعليمات برمجية وأنشئ ثلاثة مجلدات في ملف src المجلد وهو: عناصر, خطافات، و الصفحات.

في ال عناصر المجلد ، أضف ملفين التعليقات. jsx و Navbar.jsx. في ال خطافات مجلد ، أضف ملفًا واحدًا useFetch.jsx. ثم في الصفحات المجلد ، أضف ملفين ListPage.jsx و PostPage.jsx.

احذف ملف App.css ملف واستبدال محتويات ملف main.jsx ملف مع ما يلي:

يستورد تتفاعل من'تتفاعل'
يستورد {BrowserRouter} من"رد فعل جهاز التوجيه دوم"
يستورد رد فعل من"رد فعل دوم / العميل"
يستورد برنامج من"./App.jsx"
يستورد"./index.css"
ReactDOM.createRoot (وثيقة.getElementById ('جذر')).يجعل(



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

في ال App.jsx ملف ، قم بإزالة جميع التعليمات البرمجية المعيارية وتعديل الملف بحيث لا يتبقى لديك سوى المكون الوظيفي:

وظيفةبرنامج() {
يعود (
 <>
 </>
 )
}
يصدّرتقصير برنامج

استيراد الوحدات اللازمة:

يستورد {المسارات ، المسار} من"رد فعل جهاز التوجيه دوم"
يستورد ListPage من"./pages/ListPage"
يستورد نافبار من"./components/Navbar"
يستورد PostPage من"./pages/PostPage"

في جزء React ، أضف الامتداد طرق مكونات مع ثلاثة طريق المكونات الفرعية ذات المسارات: /, /:type، و /item/:id على التوالى.

'/'
 العنصر = {<> <نافبار /><ListPage /></>}>
 </Route>
'/:يكتب'
 العنصر = {<> <نافبار /><ListPage /></>}>
 </Route>
'/ item /: id'
 العنصر = {}>
 </Route>
</Routes>

إنشاء خطاف useFetch المخصص

يستخدم هذا المشروع اثنين من واجهات برمجة التطبيقات. واجهة برمجة التطبيقات الأولى مسؤولة عن جلب قائمة المشاركات في فئة معينة (النوع) ، في حين أن واجهة برمجة التطبيقات الثانية هي واجهة برمجة تطبيقات Algolia المسؤولة عن جلب منشور معين وملفه تعليقات.

افتح ال useFetch.jsx ملف ، حدد الخطاف كتصدير افتراضي واستورد ملف useState و useEffect خطافات.

يستورد {useState ، useEffect} من"تتفاعل";
يصدّرتقصيروظيفةuseFetch(اكتب معرف) {
}

تحديد ثلاثة متغيرات حالة وهي: بيانات, خطأ، و تحميل، مع وظائف واضع كل منها.

مقدار ثابت [data، setData] = useState () ؛
مقدار ثابت [error، setError] = useState (خطأ شنيع);
مقدار ثابت [تحميل ، setLoading] = useState (حقيقي);

ثم أضف useEffect ربط مع التبعيات: بطاقة تعريف و يكتب.

useEffect (() => {
} ، [معرف ، نوع])

بعد ذلك في وظيفة رد الاتصال ، أضف الوظيفة ابحث عن المعلومة() لجلب البيانات من واجهات برمجة التطبيقات المناسبة. إذا تم تمرير المعلمة هي يكتب، استخدم API الأول. خلاف ذلك ، استخدم واجهة برمجة التطبيقات الثانية.

غير متزامنوظيفةابحث عن المعلومة() {
يترك استجابة ، url ، معلمة ؛
لو (يكتب) { 
 url = " https://node-hnapi.herokuapp.com/"; 
 المعلمة = type.toLowerCase () ، 
 }
آخرلو (بطاقة تعريف) { 
 url = " https://hn.algolia.com/api/v1/items/"; 
 المعلمة = id.toLowerCase () ؛ 
 }
يحاول {
 استجابة = انتظر أحضر(`$ {url}$ {معلمة}`);
 } يمسك (خطأ) {
 setError (حقيقي);
 }
لو (إجابة) لو (response.status! == 200) {
 setError (حقيقي);
 } آخر {
يترك البيانات = انتظر response.json () ؛
 setLoading (خطأ شنيع);
 setData (البيانات) ؛
 }
}
ابحث عن المعلومة()؛

أخيرًا ، أعد ملف تحميل, خطأ، و بيانات متغيرات الحالة ككائن.

يعود {تحميل ، خطأ ، بيانات} ؛

عرض قائمة الوظائف حسب الفئة المطلوبة

متى ينتقل المستخدم إلى / أو /:type، يجب أن تجعل React ملف ListPage عنصر. لتنفيذ هذه الوظيفة ، أولاً ، قم باستيراد الوحدات النمطية الضرورية:

يستورد {useNavigate، useParams} من"رد فعل جهاز التوجيه دوم";
يستورد useFetch من"../hooks/useFetch";

بعد ذلك ، حدد المكون الوظيفي ثم قم بتعيين المعلمة الديناميكية ، يكتب الى يكتب عامل. إذا لم تكن المعلمة الديناميكية متاحة ، فاضبط يكتب متغير ل أخبار. ثم اتصل ب useFetch خطاف.

يصدّرتقصيروظيفةListPage() {
يترك {type} = useParams () ،
مقدار ثابت التنقل = useNavigate () ؛
لو (! type) type = "أخبار";
مقدار ثابت {loading، error، data} = useFetch (type، باطل);
}

بعد ذلك ، قم بإرجاع كود JSX المناسب اعتمادًا على أي ملف تحميل, خطأ، أو بيانات المتغيرات صحيحة.

لو (خطأ) {
يعود<شعبة>هناك خطأ ما!شعبة>
}
لو (تحميل) {
يعود<شعبة>تحميلشعبة>
}
لو (بيانات) {
وثيقة.title = type.toUpperCase () ،
يعود<شعبة>
"نوع القائمة"> {type} </div>
{data.map (غرض =>
"غرض">
"عنوان البند"
 onClick = {() => تنقل (`/ عنصر /$ {item.id}`)}>
 {عنوان البند}
 </div>
 {item.domain && 
"ارتباط العنصر"
 onClick = {() => فتح (`$ {item.url}`)}>
 ({item.domain}) </span>}
 </div>)}
 </div>
 </div>
}

إنشاء مكون PostPage

أولاً ، قم باستيراد الوحدات النمطية والمكونات المناسبة ، ثم حدد المكون الوظيفي الافتراضي ، وقم بتعيين ملف بطاقة تعريف المعلمة الديناميكية لـ بطاقة تعريف متغير واستدعاء useFetch خطاف. تأكد من تدمير الاستجابة.

يستورد {Link، useParams} من"رد فعل جهاز التوجيه دوم";
يستورد تحليل من"html-reaction-parser";
يستورد لحظة من"لحظة";
يستورد تعليقات من"../components/Comments";
يستورد useFetch من"../hooks/useFetch";
يصدّرتقصيروظيفةPostPage() {
مقدار ثابت {id} = useParams () ،
مقدار ثابت {تحميل ، خطأ ، بيانات} = useFetch (باطل، بطاقة تعريف)؛
}

ومثلما هو الحال مع ListPage المكون ، اعرض JSX المناسب بناءً على حالة المتغيرات التالية: تحميل, خطأ، و بيانات.

لو (خطأ) {
يعود<شعبة>هناك خطأ ما!شعبة>
}
لو (تحميل) {
يعود<شعبة>تحميلشعبة>
}
لو (بيانات) {
وثيقة.title = data.title؛
يعود<شعبة>
"عنوان آخر"> {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-reaction-parser";
يستورد لحظة من"لحظة";
يصدّرتقصيروظيفةتعليقات({commentsData}) {
يعود<>
 {commentsData.map (التعليقات =><العقدةالتعليقات={commentData}مفتاح={commentData.id}
 />)}
 </>
}

بعد ذلك ، حدد ملف العقدة عنصر وظيفي الحق تحت تعليقات عنصر. ال العقدة يعرض المكون التعليق والبيانات الوصفية والردود على كل تعليق (إن وجد) عن طريق عرض نفسه بشكل متكرر.

وظيفةالعقدة({commentData}) {
يعود<شعبةاسم الطبقة="تعليق">
 {
 نص بيانات &&
 <>
"بيانات وصفية للتعليق">
{commentData.author} </span>

 {moment (commentData.created_at) .fromNow ()}
 </span>
 </div>
"نص التعليق">
 {تحليل (commentData.text)} </div>
 </>
 }
"تعليق-ردود">
 {(commentData.children) && 
 التعليقات Data.children.map (طفل =>
)}
 </div>
 </div>
}

في كتلة التعليمات البرمجية أعلاه ، تحليل مسؤول عن تحليل HTML المخزن في commentData.text، بينما لحظة مسؤول عن تحليل وقت التعليق وإعادة الوقت النسبي باستخدام من الان() طريقة.

تكوين مكون Navbar

افتح ال Navbar.jsx ملف واستيراد ملف نافلينك وحدة من رد فعل جهاز التوجيه دوم وحدة. أخيرًا ، حدد المكون الوظيفي وأعد أحد الوالدين التنقل عنصر بخمسة نافلينك عناصر تشير إلى الفئات (أو الأنواع) المناسبة.

يستورد {NavLink} من"رد فعل جهاز التوجيه دوم"
يصدّرتقصيروظيفةنافبار() {
يعود<التنقل>
"/أخبار"> الصفحة الرئيسية </NavLink>
"/أفضل"> أفضل </NavLink>
"/يعرض"> عرض </NavLink>
"/بسأل"> اسأل </NavLink>
"/وظائف"> وظائف </NavLink>
 </nav>
}

تهاني! لقد قمت للتو بإنشاء عميل الواجهة الأمامية الخاص بك لـ Hacker News.

ترسيخ مهارات رد الفعل الخاصة بك عن طريق بناء تطبيق استنساخ

يمكن أن يساعد إنشاء استنساخ Hacker News باستخدام React في ترسيخ مهارات React الخاصة بك وتوفير تطبيق عملي للصفحة الواحدة للعمل عليه. هناك العديد من الطرق التي يمكنك من خلالها المضي قدمًا في الأمور. على سبيل المثال ، يمكنك إضافة القدرة على البحث عن المشاركات والمستخدمين في التطبيق.

بدلاً من محاولة إنشاء جهاز التوجيه الخاص بك من البداية ، من الأفضل استخدام أداة تم إنشاؤها بواسطة محترفين يكرسون جهودهم لتسهيل إنشاء SPAs.