PRDXN's React Best Practices

Facebook's React is een declaratieve, efficiënte en flexibele JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces (UI).

Toen ik voor het eerst begon met het schrijven van code in React, herinner ik me dat ik veel verschillende benaderingen heb gezien die sterk variëren van zelfstudie tot zelfstudie. Dus mijn team bij PRDXN en ik kwamen met een gids / lijst met best practices (BP's) waarmee we allemaal sneller aan de slag konden.

Facebook's React is een declaratieve, efficiënte en flexibele JavaScript-bibliotheek voor het bouwen van gebruikersinterfaces (UI).

Het volgende is onze gids. We hopen dat dit u helpt uw ​​acceptatie en gebruik van React te versnellen; of u net begint / een beginner of een ervaren ontwikkelaar bent.

1. Handhaaf een georganiseerde mapstructuur:

Zoals bij elk programmerings- / coderingsproject, is dit erg belangrijk! Als uw projectbestanden niet logisch zijn georganiseerd, kunnen u en uw medewerkers in de war raken en kostbare tijd verspillen aan het zoeken naar bestanden of het bewerken van de verkeerde bestanden.

Bij PRDXN hebben we de volgende mappenstructuur bedacht om het voor iedereen eenvoudiger en minder frustrerend te maken. Klik op spelen om te bekijken.

2. Componenten - Brokken en bomen. Hé, je bent een Javascript-houthakker!

Componenten vormen het hart van een React. Een React-component is eigenlijk elk onderdeel van een gebruikersinterface.

Maak logische UI-chunks (groepen): verdeel uw componenten altijd in chunks (ook wel logische groepen genoemd). Overweeg elke applicatie-interface en deel de gebruikersinterface in kleinere logische brokken. Elk van deze UI-chunks (groepen) zijn potentiële componenten.

Boom, takken en subtakken: de volledige / volledige weergave van de gebruikersinterface (de boom of stam) is verdeeld in logische brokken (ook wel takken genoemd). De boom wordt de startcomponent (een lay-outcomponent) en vervolgens wordt elk deel in de gebruikersinterface (ook wel branch genoemd) een subcomponent die verder kan worden onderverdeeld in subcomponenten (ook wel subtakken genoemd). Dit houdt de gebruikersinterface geordend en zorgt er ook voor dat gegevens en statuswijzigingen logisch van de boom naar de takken en vervolgens de sub-takken kunnen stromen.

Creëer logische UI Groupings (Chunks): Boom, Takken, Subtakken!

3. Componenten - functioneel en op klassen gebaseerd:

Er zijn twee soorten componenten: functioneel en op klassen gebaseerd.

Wanneer moet ik met een functionele component gaan? Ga met een functionele component als uw component niet veel meer doet dan het weergeven van rekwisieten. Beschouw functionele componenten als pure functies: ze zullen altijd op dezelfde manier worden weergegeven en zich op dezelfde manier gedragen, gezien dezelfde rekwisieten. Ook geven ze niet om levenscyclusmethoden; het zijn staatloze componenten.

Functionele component, voorbeeld.

Wanneer moet ik gaan met een op klassen gebaseerd onderdeel? Als uw component interne status en componentlevenscyclusmethoden nodig heeft, kies dan voor een op klasse gebaseerd component. Bekijk dit voor meer informatie over "interne status" en "levenscyclusmethoden".

Op klasse gebaseerd onderdeel, bijvoorbeeld.

4. rekwisieten! Rekwisieten voor jou! Rekwisieten voor mij! Maar nee, we hebben het over React Props!

“Conceptueel lijken componenten op JavaScript-functies. Ze accepteren willekeurige invoer ("rekwisieten" genoemd) en retourneren React-elementen die beschrijven wat er op het scherm zou moeten verschijnen. ”Klik voor bron.

Breng de kamelen binnen! Nee, je kunt die kamelen in het dessert laten. We hebben het hier over camelCase. Gebruik altijd camelCase voor propnamen. Props kunnen ook worden gezien als attributen, en de conventie die is ingesteld door React is om camelCase te gebruiken voor JSX-attributen.

Gebruik altijd camelCase voor propnamen.

Geloof me, het is waar, ik zweer het! Laat de waarde van de steun weg wanneer deze expliciet waar is. Zelfs als we geen echte waarde aan een prop toekennen, wordt het als een echte waarde beschouwd, dus het is niet nodig om ‘true’ als waarde aan de prop toe te kennen.

Laat de waarde van de steun weg wanneer deze expliciet waar is.

Gebruik geen array-index als sleutelprop; gebruik in plaats daarvan een unieke ID: we hebben gezien dat te veel ontwikkelaars de index van een item als sleutel gebruiken bij het weergeven van een lijst, wat ZO niet goed is! Dit is wat ze ten onrechte schrijven ...

DIT IS EEN VOORBEELD VAN WAT JE ZOU MOETEN *** NIET *** DOEN!

Een sleutel is het enige dat React gebruikt om DOM-elementen te identificeren. Dus wat gebeurt er als u een item naar de lijst duwt of iets uit het midden verwijdert? Als de sleutel dezelfde is als hiervoor, gaat React ervan uit dat het DOM-element dezelfde set componenten vertegenwoordigt (zoals eerder). Maar dit is niet het geval!

Daarom moet u een unieke ID gebruiken. Elk item moet een permanente en unieke eigenschap (ID) hebben. En idealiter zou het (de ID) moeten worden toegewezen wanneer het item wordt gemaakt. Dus het is zoiets geschreven ...

DIT IS EEN VOORBEELD VAN WAT JE *** MOET DOEN ***!

Definieer altijd expliciete defaultProps voor alle niet-vereiste rekwisieten. Het aanbieden van defaultProps betekent dat de lezer van uw code geen dingen hoeft aan te nemen, omdat ze de standaardwaarde voor de prop weten, gewoon door te kijken naar defaultProps tijdens het renderen van componenten.

Slecht versus goed voorbeeld opnieuw: defaultProps definiëren.

Zoals u kunt zien, zijn er kleine maar zeer belangrijke dingen die ertoe bijdragen uw React-code relatief foutvrij te maken tijdens het beoordelingsproces. Besteed vooraf tijd aan het leren van deze best practices en gebruik ze, zodat u minder tijd hoeft te besteden aan het opnieuw schrijven van code om uw fouten te herstellen, waardoor u meer tijd hebt om de dingen te doen waar u van houdt. En als het doen van de dingen die je leuk vindt, het schrijven van code betekent, krijg je meer tijd om code te schrijven voor een ander project!

Meer van PRDXN's React best practices zijn hier te vinden op Github: https://github.com/prdxn/React-JS-Checklist. Aarzel niet om deze lijst te delen en bij te dragen. En als u problemen ondervindt bij de toegang, neem dan contact met ons op in de reacties hier.

Interesse om met PRDXN te werken als klant of als werknemer? Sla ons dan op! Ga hier www.prdxn.com voor meer informatie, inclusief contactgegevens.