PRDXN Реагирайте на най-добрите практики

Facebook React е декларативна, ефективна и гъвкава JavaScript библиотека за изграждане на потребителски интерфейси (потребителски интерфейс).

Когато за пръв път започнах да пиша код в React, си спомням, че видях много различни подходи, вариращи значително от урок до урок. Така че моят екип от PRDXN и аз създадохме ръководство / списък с най-добри практики (БП), които ще ни помогнат да станем по-бързи и по-бързи.

Facebook React е декларативна, ефективна и гъвкава JavaScript библиотека за изграждане на потребителски интерфейси (потребителски интерфейс).

Следното е нашето ръководство. Надяваме се това да ви помогне да ускорите приемането и използването на React; дали започвате / начинаещ или опитен разработчик.

1. Поддържайте организирана структура на папки:

Както при всеки проект за програмиране / кодиране, това е много важно! Ако вашите проектни файлове не са организирани логично, вие и вашите сътрудници можете да се объркате и да губите ценно време в търсене на файлове или редактиране на грешни файлове.

В PRDXN създадохме следната структура на папките, за да направим нещата по-лесни и по-малко разочароващи за всички. Кликнете, за да гледате.

2. Компоненти - парчета и дървета. Хей, ти си Javascript Lumberjack!

Компонентите са сърцето на Реактив. Реактивен компонент е по същество всяка част от потребителския интерфейс.

Създаване на логически парчета от потребителски интерфейс (групиране): Винаги разделяйте вашите компоненти на парчета (известни също като логически групировки). Помислете за всеки интерфейс на приложението и започнете да разделяте потребителския интерфейс на по-малки логически парчета. Всеки един от тези UI парчета (групи) са потенциални компоненти.

Дърво, клони и подразделения: Пълният / пълен изглед на потребителския интерфейс (дървото или ствола) е разделен на логически парчета (известни още като клони). Дървото се превръща в начален компонент (компонент на оформление) и тогава всеки парче в потребителския интерфейс (известен още като клон) ще се превърне в подкомпонент, който може да бъде разделен допълнително на подкомпоненти (известни още като под-клонове). Това поддържа организационния интерфейс организиран и също така позволява данни и промени в състоянието логично да протичат от дървото към клоните, а след това и под-клоните.

Създаване на логически групи от потребителски интерфейс (парчета): дърво, клони, под-клонове!

3. Компоненти - функционални и базирани на класа:

Има два вида компоненти: функционални и базирани на класа.

Кога трябва да премина с функционален компонент? Отидете с функционален компонент, ако вашият компонент не прави много повече от рендиране на реквизит. Мислете за функционалните компоненти като за чисти функции: те винаги ще се представят по един и същи начин и ще се държат по същия начин, като се имат предвид същите реквизити. Също така, те не се интересуват от методите на жизнения цикъл; те са компоненти без гражданство.

Функционален компонент, пример.

Кога трябва да премина с клас базиран компонент? Ако вашият компонент се нуждае от вътрешно състояние и методи на жизнения цикъл на компонентите, тогава преминете към компонент, базиран на клас. Вижте това, за да ви помогнем да разберете повече за „вътрешното състояние“ и „методите на жизнения цикъл“.

Компонентен клас, например.

4. Реквизит! Реквизит към вас! Реквизит към мен! Но не, говорим за React Props!

„Концептуално компонентите са като JavaScript функции. Те приемат произволни входове (наречени „подпори“) и връщат React елементи, описващи какво трябва да се появи на екрана. “Кликнете за източник.

Вкарайте камилите! Не, можете да оставите тези камили в десерта. Тук говорим camelCase Винаги използвайте camelCase за имена на опори. Реквизитите също могат да се разглеждат като атрибути, а конвенцията, зададена от React, е да се използва camelCase за JSX атрибути.

Винаги използвайте camelCase за имена на опори.

Повярвайте ми, истина е, кълна се! Пропуснете стойността на опората, когато тя е изрично вярна. Дори ако не присвоим истинска стойност на опора, тя се счита за истинска стойност, така че няма нужда да присвояваме „true“ като стойност на опората.

Пропуснете стойността на опората, когато тя е изрично вярна.

Избягвайте използването на индекс на масива като ключова опора; вместо това използвайте уникален идентификатор: Видяхме твърде много разработчици да използват индекса на даден елемент като свой ключ, когато рендерират списък, което НЕ е добре! Това пишат неправилно ...

ТОВА Е ПРИМЕР НА КАКВОТО ТРЯБВА ДА НЕ *** ДОБРЕ!

Ключ е единственото, което React използва за идентифициране на DOM елементи. И така, какво се случва, ако натиснете елемент към списъка или премахнете нещо от средата? Ако ключът е същият като преди, React приема, че DOM елементът представлява същия набор от компоненти (както преди). Но това не е така!

Ето защо трябва да използвате уникален идентификационен номер. Всеки артикул трябва да има постоянно и уникално свойство (ID). И в идеалния случай тя (ID) трябва да бъде присвоена, когато елементът е създаден. Така че е изписано нещо подобно ...

ТОВА Е ПРИМЕР НА КАКВОТО ДА СЕ ДОБРИ ***!

Винаги дефинирайте изричните defaultProps за всички не-необходими подпори. Предоставянето на defaultProps означава, че четецът на вашия код не трябва да приема неща, тъй като те ще познаят стойността по подразбиране за опората, само като гледат defaultProps, докато изобразяват компоненти.

Лош срещу Добър пример re: дефиниране на defaultProps.

Както можете да видите, има малки, но много важни неща, които превръщат вашия код React в относително без грешки по време на процеса на преглед. Прекарването на времето предварително, за да научите тези най-добри практики и да ги използвате, означава, че отделяте по-малко време за пренаписване на код, за да поправите грешките си, като ви предоставя повече време да правите нещата, които обичате. И ако правите нещата, които обичате, означава да пишете код, ще получите повече време да напишете код за различен проект!

Повече от най-добрите практики на PRDXN за React можете да намерите тук на Github: https://github.com/prdxn/React-JS-Checklist. Моля, не се колебайте да споделите и да участвате в този списък. И ако имате някакви проблеми с достъпа, ударете ни в коментарите тук.

Интересувате се от работа с PRDXN като клиент или като служител? Тогава ни удари! Отидете тук www.prdxn.com за повече подробности, включително данни за контакт.