Како да направите клон хакерских вести користећи Реацт

Хацкер Невс је популарна веб локација међу предузетницима и програмерима. Садржи садржај фокусиран на информатику и предузетништво.

Једноставан изглед Хакерских вести може одговарати одређеним појединцима. Међутим, ако желите привлачнију и персонализованију верзију, можете користити корисне АПИ-је за креирање сопственог прилагођеног искуства Хакерских вести. Такође, прављење клона Хацкер Невс може вам помоћи да учврстите своје Реацт вештине.

Подешавање сервера за пројекат и развој

Пакети потребни за овај пројекат укључују:

• Реацт Роутер за руковање рутирањем у Апликација за једну страницу (СПА).
instagram viewer
• ХТМЛРеацтПарсер за рашчлањивање ХТМЛ-а који је вратио Програмски интерфејс апликације (АПИ).
• МоментЈС за руковање датумима које је вратио АПИ.

Отворите терминал и покрените:

предиво створити вите

Такође можете користити Ноде Пацкаге Манагер (НПМ) ако вам је драже од предива. Горња команда би требало да користи алатку за прављење Вите-а за израду основног пројекта. Именујте свој пројекат и када се од вас затражи оквир, изаберите Реаговати и подесите варијанту на ЈаваСцрипт.

Сада цд у фасциклу пројекта и инсталирајте раније поменуте пакете покретањем следећих команди у терминалу:

иарн адд хтмл-реацт-парсер
иарн адд реацт-роутер-дом
пређе додати тренутак
иарн дев

Након што инсталирате све пакете и покренете развојни сервер, отворите пројекат у било ком уређивачу кода и креирајте три фасцикле у срц фолдер и то: компоненте, куке, и странице.

У компоненте фолдер, додајте две датотеке Цомментс.јск и Навбар.јск. У куке фолдер, додајте једну датотеку усеФетцх.јск. Затим у странице фолдер, додајте две датотеке ЛистПаге.јск и ПостПаге.јск.

Обришите Апп.цсс датотеку и замените садржај маин.јск фајл са следећим:

увоз Реаговати из'реаговати'
увоз {БровсерРоутер} из'реаговати-рутер-дом'
увоз РеацтДОМ из'реацт-дом/цлиент'
увоз Апликација из'./Апп.јск'
увоз'./индек.цсс'
РеацтДОМ.цреатеРоот(документ.гетЕлементБиИд('корен')).дати, пружити(



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

У Апп.јск датотеку, уклоните сав шаблонски код и измените датотеку тако да вам остане само функционална компонента:

функцијаАпликација() {
повратак (
 <>
 </>
 )
}
извозУобичајено Апликација

Увезите потребне модуле:

увоз { Руте, рута } из'реаговати-рутер-дом'
увоз ЛистПаге из'./пагес/ЛистПаге'
увоз Навбар из'./цомпонентс/Навбар'
увоз ПостПаге из'./пагес/ПостПаге'

У Реацт фрагмент додајте Руте компоненте са три Рута подређене компоненте са путањама: /, /:type, и /item/:id редом.

'/'
 елемент={<> <Навбар /><ЛистПаге /></>}>
 </Route>
'/:тип'
 елемент={<> <Навбар /><ЛистПаге /></>}>
 </Route>
'/итем/:ид'
 елемент={}>
 </Route>
</Routes>

Креирање усеФетцх прилагођене куке

Овај пројекат користи два АПИ-ја. Први АПИ је одговоран за преузимање листе постова у датој категорији (тип), док је други АПИ Алголиа АПИ који је одговоран за преузимање одређеног поста и његовог коментари.

Отвори усеФетцх.јск датотеку, дефинишите куку као подразумевани извоз и увезите усеСтате и усеЕффецт куке.

увоз { усеСтате, усеЕффецт } из"реаговати";
извозУобичајенофункцијаусеФетцх(тип, ид) {
}

Дефинишите три променљиве стања и то: података, грешка, и лоадинг, са њиховим одговарајућим функцијама подешавања.

конст [дата, сетДата] = усеСтате();
конст [еррор, сетЕррор] = усеСтате(лажно);
конст [лоадинг, сетЛоадинг] = усеСтате(истина);

Затим додајте а усеЕффецт кука са зависностима: ид и тип.

усеЕффецт(() => {
}, [ид, тип])

Затим у функцији повратног позива додајте функцију фетцхДата() да преузме податке из одговарајућих АПИ-ја. Ако је параметар прослеђен тип, користите први АПИ. У супротном, користите други АПИ.

асинцфункцијафетцхДата() {
дозволити одговор, урл, параметар;
ако (тип) { 
 урл = " https://node-hnapi.herokuapp.com/"; 
 параметар = типе.тоЛоверЦасе(); 
 }
другоако (ид) { 
 урл = " https://hn.algolia.com/api/v1/items/"; 
 параметар = ид.тоЛоверЦасе(); 
 }
покушати {
 одговор = чекати донеси (`${урл}${параметер}`);
 } улов (грешка) {
 сетЕррор(истина);
 }
ако (одговор) ако (респонсе.статус !== 200) {
 сетЕррор(истина);
 } друго {
дозволити подаци = чекати респонсе.јсон();
 сетЛоадинг(лажно);
 сетДата (подаци);
 }
}
фетцхДата();

На крају, вратите лоадинг, грешка, и података променљиве стања као објекат.

повратак { лоадинг, еррор, дата };

Рендеровање листе постова у зависности од захтеване категорије

Кад год корисник дође до / или /:type, Реацт треба да прикаже ЛистПаге саставни део. Да бисте имплементирали ову функционалност, прво увезите потребне модуле:

увоз { усеНавигате, усеПарамс } из"реаговати-рутер-дом";
увоз усеФетцх из"../хоокс/усеФетцх";

Затим дефинишите функционалну компоненту и затим доделите динамички параметар, тип до тип променљива. Ако динамички параметар није доступан, подесите тип променљива до вести. Затим позовите усеФетцх кука.

извозУобичајенофункцијаЛистПаге() {
дозволити { тип } = усеПарамс();
конст навигате = усеНавигате();
ако (!тип) тип = "вести";
конст { лоадинг, еррор, дата } = усеФетцх (тип, нула);
}

Затим вратите одговарајући ЈСКС код у зависности од тога који од њих лоадинг, грешка, или података променљиве је тачно.

ако (грешка) {
повратак<див>Нешто није у реду!див>
}
ако (учитавање) {
повратак<див>Лоадингдив>
}
ако (подаци) {
документ.титле = типе.тоУпперЦасе();
повратак<див>
'тип-лист'>{типе}</div>
{дата.мап(предмет =>
"ставка">
"наслов-ставка"
 онЦлицк={() => навигате(`/итем/${итем.ид}`)}>
 {итем.титле}
 </div>
 {итем.домаин && 
"ставка-линк"
 онЦлицк={() => отвори(`${итем.урл}`)}>
 ({итем.домаин})</span>}
 </div>)}
 </div>
 </div>
}

Креирање компоненте ПостПаге

Прво увезите одговарајуће модуле и компоненте, затим дефинишите подразумевану функционалну компоненту, доделите ид динамички параметар за ид променљива и, позовите усеФетцх кука. Уверите се да сте деструктурирали одговор.

увоз { Линк, усеПарамс } из"реаговати-рутер-дом";
увоз анализирати из'хтмл-реацт-парсер';
увоз тренутак из"тренутак";
увоз Коментари из"../цомпонентс/Цомментс";
увоз усеФетцх из"../хоокс/усеФетцх";
извозУобичајенофункцијаПостПаге() {
конст { ид } = усеПарамс();
конст { лоадинг, еррор, дата } = усеФетцх(нула, ид);
}

И баш као и са ЛистПаге компоненту, рендерујте одговарајући ЈСКС на основу стања следећих променљивих: лоадинг, грешка, и података.

ако (грешка) {
повратак<див>Нешто није у реду!див>
}
ако (учитавање) {
повратак<див>Лоадингдив>
}
ако (подаци) {
документ.титле=дата.титле;
повратак<див>
"Наслов поста">{дата.титле}</div>
"пост-метаподаци">
 {дата.урл && 
 цлассНаме="пост-линк">Посетите веб локацију</Link>}
"пост-аутор">{дата.аутхор}</span>
"пост-тиме">
 {момент (дата.цреатед_ат).фромНов()}
 </span>
 </div>
 {дата.тект && 
"пост-текст">
 {парсе (дата.тект)}</div>}
"пост-коментари">
"коментари-ознака">Коментари</div>

 </div>
 </div>
}

Увезите анализирати модул и тренутак модул. Дефинишите подразумевану функционалну компоненту Коментари који узима у цомментсДата низ као проп, пролази кроз низове и приказује а Чвор компонента за сваки елемент.

увоз анализирати из'хтмл-реацт-парсер';
увоз тренутак из"тренутак";
извозУобичајенофункцијаКоментари({ цомментсДата }) {
повратак<>
 {цомментсДата.мап(цомментДата =><ЧворцомментДата={цомментДата}кључ={цомментДата.ид}
 />)}
 </>
}

Затим дефинишите Чвор функционална компонента одмах испод Коментари саставни део. Тхе Чвор компонента приказује коментар, метаподатке и одговара на сваки коментар (ако постоји) рекурзивним приказивањем себе.

функцијаЧвор({ цомментДата }) {
повратак<дивНазив класе="коментар">
 {
 цомментДата.тект &&
 <>
'коментар-метаподаци'>
{цомментДата.аутхор}</span>

 {момент (цомментДата.цреатед_ат).фромНов()}
 </span>
 </div>
'коментар-текст'>
 {парсе (цомментДата.тект)}</div>
 </>
 }
'коментари-одговори'>
 {(цомментДата.цхилдрен) && 
 цомментДата.цхилдрен.мап(дете =>
)}
 </div>
 </div>
}

У блоку кода изнад, анализирати је одговоран за рашчлањивање ХТМЛ сачуваног у цомментДата.тект, док тренутак је одговоран за рашчлањивање времена коментара и враћање релативног времена користећи од сада() методом.

Креирање компоненте Навбар-а

Отвори Навбар.јск датотеку и увозите НавЛинк модул из реаговати-рутер-дом модул. На крају, дефинишите функционалну компоненту и вратите родитељ нав елемент са пет НавЛинк елементи који указују на одговарајуће категорије (или типове).

увоз { НавЛинк } из"реаговати-рутер-дом"
извозУобичајенофункцијаНавбар() {
повратак<нав>
"/вести">Кућа</NavLink>
"/најбољи">Најбољи</NavLink>
"/Прикажи">Прикажи</NavLink>
"/питати">Питај</NavLink>
"/послови">Послови</NavLink>
 </nav>
}

Цонгратс! Управо сте направили сопствени фронт-енд клијент за Хацкер Невс.

Учврстите своје вештине реаговања изградњом апликације за клонирање

Прављење клона Хацкер Невс помоћу Реацт-а може вам помоћи да учврстите своје Реацт вештине и обезбедите практичну апликацију на једној страници за рад. Постоји много начина на које можете да идете даље. На пример, можете додати могућност претраживања постова и корисника у апликацију.

Уместо да покушавате да направите сопствени рутер од нуле, боље је користити алат који су направили професионалци који су посвећени да олакшају креирање СПА.