Reactception -› Създаване на React.js
Когато започнете да изучавате React.js, първото нещо, което вероятно ще чуете е, че е базиран на компоненти. Когато започнах да изучавам тази JavaScript библиотека преди около година-година и половина, думата „компонент“ беше нещо, което много ценях, старателно създавах .js файловете с друг компонент вътре в моя Visual Studio Code и в моя глава, имаше „Страхотно! Успяхте! 90% от React.js уменията са готови!“
☹️
Когато започнах да работя като уеб разработчик, разбира се, с времето нещата се усложниха и преди да създам друг .js файл, трябва да помисля предварително, вероятно да напиша нещо или да нарисувам. Родител -› Дете? Братя и сестри? Какво ще бъде обратно повикване и къде? Как ще предаваме данните между тях? Или Бог да ме пази, HOC? (Всъщност HOC е добър, но понякога може да бъде малко труден, но по-късно ще говоря за него повече)
Точно сега, нека поговорим за много простия сценарий там само с 3 компонента; забавно и просто нещо, което внедрих, когато веднъж работех върху преобразуването си в psd-›html.
Добре, тук ни е даден прост пример — изобразете малка колона от статии, сега няма значение как ще получим данните за тези статии (прост JSON, създаден в приложението, или извикване на API); първо, имаме нужда от „скелет“. какво виждаме Прилича на карта, нали?
Тук започва забавлението. Има толкова много начини да създадете тези карти, фантастични или прости, но практиката ми показа, че винаги има по-прост и по-гъвкав начин за правене на нещата и е по-добре да го направите. Не усложнявайте нещата там, където не е необходимо. Така че Bootstrap 4!
Виждате ли какво изобразяваме? Това е компонентът за картата, използващ контейнера за съдържание на Bootstrap, наречен „карта“. Сега имаме готов нашия „скелет“!
‹div className=”card”›*други свързани с bootstrap карти divs влизат вътре*‹/div›
След това трябва да покажем нещо в тези карти. В моя родителски компонент, нареченArticles.js, извиквам Card.js (като ‹Card /›). Вместо да пишем 2+ пъти ‹div›..‹div› на тялото на картата, ние просто създадохме друг компонент, който можем да използваме където пожелаем в нашето приложение (не непременно само в Articles.js). Бинго!
Виж. Това е важно. Тук изпращаме данните към компонента Card вътре в { } (какво ще се покаже). Така че в този пример изпращаме изображение, текст, статус, оценка. Да се върнем към Card.js
{this.props. …}Ето как получаваме данните от Articles.js! Внимавайте, името на реквизита трябва да е точно както сте го декларирали в ‹Card /›,напр. ‹Card name={“…”}/› в Card.js е {this.props.name}
Това е! Изпратихме данните, получихме ги, показахме.
Това е, което виждам сега. Но виждам и звезди тук… И това е моят друг компонент вътре в компонента (Reactception) Нарича се Stars.js. Причината, поради която създадох друг компонент за това, е просто, че ще имам нужда от тези звезди в някои други части на уебсайта и не искам да пиша този код отново.
какво се случва тук Просто извиквам функцията, където правя тези звезди в моя render(). Иска ми се да има елемент като ‹звезди› ‹/звезди›, но не, начинът, по който мога да го направя, е просто да създам празен масив, където натискам икона във формата на звезда 5 пъти. Защо 5? Връщам се към моята ‹Card /› в Articles.js
Виждаш ли? Тук имам 5. {this.props.rating} в Stars.js е просто „ръка“, която взема това 5. Така че имаме показани 5 звезди ;) Това е всичко.
Articles.js (статии, известни още като карти) -› Card.js (единична карта) -› Stars.js (звезди, известни още като рейтинг, извикан в нашия Card.js и използван в Articles.js)
Това е всичко. Постигнахме не 90%, а да кажем 5%. Но тези 5% са част от 100%, без тях ще са само 95% ;)
Благодаря, че сте с мен! Ще се видим скоро!
