Целта на Desklamp е да предостави на разработчиците прост контейнер с постоянно неизменно състояние, комбиниран с вградено маршрутизиране. По-долу е описано примерно приложение с две страници, създадено с помощта на Desklamp и React.
Първата стъпка е да инсталирате npm desklamp във вашия React проект —
След това създайте файл index.js и импортирайте свойствата на Desklamp и Container от Desklamp заедно с React и ReactDOM.
Следващата стъпка е да използвате компонента Desklamp Container, за да обградите компонентите от най-високо ниво, коитоискате да бъдат маршрути. За този пример ще имаме два компонента, вход и публикации, така че нашият ReactDOM.render ще изглежда така:
По подразбиране компонентите за вход и публикации вече са нашите маршрути под имената „вход“ и „публикации“. Ако искаме да променим името, което се показва в URL адреса, ние просто добавяме свойство име към нашите компоненти и Desklamp ще се справи с останалото!
Сега нашата URL лента изглежда така, когато потребителят навигира до страницата за вход —
Готино! Сега, след като сме решили какво искаме да изобразим, нека създадем нашето първоначално състояние. В нашия файл index.js, точно под функцията ReactDOM.render, нека създадем обект и поставим желаното от нас първоначално състояние в него—
Ще използваме нашето първоначално състояние, за да съхраним потребителското име на лицето, след като влезе, публикациите, които е създал, и тяхната потребителска информация.
Следващата ни стъпка е да създадем нашия обект с функции. Този обект ще бъде предаден на функцията Desklamp.on() и ще бъде предаден автоматично към всички компоненти на маршрута от най-високо ниво, изброени в нашия компонент Контейнер по-горе.
Както можете да видите, създадохме функция, наречена „login“ вътре в нашия func обект. Ние ще предадем потребителското име и паролата от нашия формуляр за вход (който ще ви покажа след минута) към функцията за вход. След това ще използваме jQuery, за да направим проста заявка за публикуване до нашия сървър. Тази заявка за публикация ще ни изпрати обратно цялата потребителска информация и ще задейства заявка за получаване до същия сървър, за да получим цялата информация за публикацията.
Нещо друго, което може да забележите, е функцията Desklamp.changeView(). Функцията changeView приема маршрут като първи параметър (маршрута, към който искате да превключите) и обект. Обектът е как бихте искали да промените състоянието си (не забравяйте, че обработваме тези промени в състоянието, използвайки неизменната парадигма).
Следващата стъпка е да създадем Nav компонент, който ще помогне за контролиране на нашите маршрути. Създайте папка, наречена „компоненти“, за да запазите всички ваши персонализирани компоненти. В тази папка създайте файл Nav.jsx.
Тъй като Desklamp обработва състоянието и функцията вместо нас, ние ще направим Nav React компонент без състояние.
Друга функция, която Desklamp предоставя, е персонализиран компонент Link. Всичко, което трябва да направите, е да зададете изглед с желания от вас маршрут, не забравяйте, че това е името на компонента, изцяло с малки букви по подразбиране, или етикета с име, който сте избрали по-горе. Можете също така да предоставите атрибут на етикет с низ от текста, който искате вашата връзка да показва.
Друг компонент, от който ще се нуждаем, е входът. Във вашата папка с компоненти създайте файл, наречен Login.jsx. Ето как може да изглежда вашата страница за вход с Desklamp —
Основната точка, която трябва да разберете тук, е, че вашите персонализирани функции, които поставяме в обекта func по-горе, се предават на всички ваши компоненти от най-високо ниво като „правомощия“. Друг важен момент е, че това ви позволява да използвате компоненти без състояние навсякъде! /наздраве
Следващият и последен React компонент, който ще създадем, ще бъде нашият компонент Posts. В нашата папка с компоненти трябва да създадем файл, наречен Posts.jsx. Ето пример за това как могат да изглеждат публикациите –
Точно както „правомощията“ по-горе, обектът на състоянието се предава на всички ваши компоненти от най-високо ниво от Desklamp. Благодаря, Desklamp!
Следващата стъпка е да се върнем към нашия файл index.js и да предадем обекта за първоначално състояние, обекта funcs и компонента Nav, който създадохме, към функцията Desklamp.on(). Тук се случва цялата магия!
Както можете да видите, с няколко функции можете да създадете страхотно приложение, на което вие и вашите приятели да се наслаждавате години напред!!!
Разгледайте Desklamp в GitHub или инсталирайте Desklamp с помощта на npm!
