React е много популярна рамка днес и с право. След като се почувствате удобно с него, изживяването от писането на уеб приложение става направо приятно. Общността на разработчиците на React е жизнена. Скоростта на промяна в рамката е бърза (може би малко прекалено бърза на моменти), но добре поддържана от Facebook и общността с отворен код. Най-важното е, че ви позволява да се съсредоточите върху прости части от функционалност, които лесно могат да бъдат композирани и повторно използвани във вашето приложение.

Наистина ми харесва да пиша код с React и искам и вие да имате възможно най-доброто изживяване.

Front end разработката никога не е била толкова сложна и вълнуваща, както е днес. Всеки ден се появяват нови инструменти, библиотеки, рамки и добавки. Има толкова много за учене.

Обикновено правихме администраторска страница, като използваме React, за да я защитим по много начини, но това не означава, че казвам, че другите езици не са сигурни, разбира се, нито един език не е 100% защитен. Но основната причина е, че можем да кажем, че популярността и напредъкът в React.

Не по-долу са няколкото съвета, които могат да ни помогнат да улесним разбирането на нашия код за другите, защото адски е да разбереш кода на някой друг и какво, по дяволите, е да намериш грешката от част от кода, който не знаеш Не трябва да правя нищо, така че след години кодиране в кодиране мога да заключа опита си в точките по-долу, специално за react:

1. Винаги използвайте типове реквизити, за да дефинирате всички реквизити във вашите компоненти

Prop-types ще ви помогне да проверите дали желаният тип проп се предава във вашия компонент или не. Ако правилният тип на конкретен проп не е предаден във вашия компонент, тогава пакетът ще изведе предупреждение в конзолата на вашия браузър.

По-долу е най-добрият пример за грешката за разбиране на друг човек

„Предупреждение: Неуспешен тип проп: Невалидно проп `message` от тип `string`, предоставено на `Hello`, очаква се `array`. In Hello”

2. Използвайте displayName, за да дефинирате конкретно име на вашия компонент

Низът displayName се използва в съобщенията за отстраняване на грешки. Ако не използвате displayName във вашите компоненти, трябва да го използвате от сега нататък. Обикновено, ако дебъгвате компонента си с помощта на инструменти за разработчици на React, ще видите компонентите, защото това се извежда от името на функцията или класа, който дефинира компонента. Ако обаче срещнете ситуация, в която имате два компонента с едно и също име (бутон, падащо меню и т.н.); може да се наложи да преименувате компонентите. Няма да можете да ги различите. Можете да разрешите горния проблем, като използвате displayName. Просто преименувайте един от компонентите, като използвате displayName. В примера по-горе можете да видите, че въпреки че името на класа е Component, ще видите името „Hello“ в инструмента за разработчици на React, защото има Hello като displayName. Това е много полезно за целите на отстраняване на грешки и често се пренебрегва.

3. Използвайте линтер, за да улесните прегледа на кода си

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

4. Прегледайте собствения си код, преди да създадете заявка за изтегляне

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

5. Разделете кода си на множество по-малки функции

Разделянето на вашите по-големи функции на множество по-малки функции ще направи по-малките функции многократно използвани. Те също ще станат много по-лесни за тестване. Можете също така да създадете много помощни файлове, които могат да ви помогнат да премахнете дублиращия се код от множество файлове. След като създадете няколко файла, погледнете ги и ще видите, че има много дублирани редове код. Можете да вземете тези редове за създаване на помощен файл. След това можете да използвате повторно същия помощен файл в множество файлове.

6. Създайте няколко файла, вместо да пишете голям файл

Ако разделите кода си на няколко по-малки файла и всеки файл съдържа само една логика, тогава за проверяващия става много лесно да прегледа този файл.

7. Бъдете много внимателни, докато именувате вашите файлове

Друго нещо, което трябва да запомните тук е, че ако именувате файловете си според работата, която изпълняват, това също ще ви помогне в бъдеще, както и на други разработчици, да разберете какво всъщност прави файлът. След като разгледат името на файла, другите разработчици трябва да разберат какво трябва да прави файлът.

8. Заключение

Надявам се, че тези точки ще ви помогнат да напишете по-добър ReactJS код и по-добър JavaScript код като цяло. Уведомете ме, ако използвате още подходи, които пропуснах тук.