From 6b034b0515a316e729143142556fa9d0aaac91fa Mon Sep 17 00:00:00 2001 From: Tudor Morar Date: Wed, 6 Dec 2023 10:12:04 +0200 Subject: [PATCH] Update React guidelines (#763) Update react-guidelines --- .../guidelines/react-development.md | 49 ++++++++++--------- 1 file changed, 25 insertions(+), 24 deletions(-) diff --git a/docs/developers/guidelines/react-development.md b/docs/developers/guidelines/react-development.md index 93190f074..5d37d8d18 100644 --- a/docs/developers/guidelines/react-development.md +++ b/docs/developers/guidelines/react-development.md @@ -127,14 +127,15 @@ if (array?.length > 0){ For folder and file naming we're using the following convention: **camelCase for all folders and files, except when it's a React Component or a Module Root Folder**, in which case we're using PascalCase. Also, for components' and containers' subcomponents, we create separate folders, even if there is no style file present. + Each folder that has an exportable component will have an **`index.tsx`** file for ease of import.
Each folder that has an exportable file will have an **`index.ts`** file for ease of import. -### File length convetions: +### File length convetions - < 100 lines of code - ✅ OK - 100 - 200 lines of code - try to split the file into smaller files - 200 - 300 lines of code - should be split the file into smaller files -- > 300 lines of code 🚫 DON'T +- \> 300 lines of code 🚫 DON'T ### Naming conventions * When naming types, use the suffix **`Type`**. This helps us differentiate between types and components. When naming component props types, use MyComponentPropsType. When naming a type that is not a component, use MyFunctionType. When naming return values, use MyFunctionReturnType. @@ -225,9 +226,9 @@ const handlePress = useCallback(() => setPressed(true), []); ``` -### Conditionally rendered JSX +### Conditionally rendered TSX -In React, conditionally rendered JSX is very common. Given the ability to render it inline, it's very easy to include it inside normal JSX: +In React, conditionally rendered TSX is very common. Given the ability to render it inline, it's very easy to include it inside normal TSX: ```jsx @@ -239,6 +240,25 @@ In React, conditionally rendered JSX is very common. Given the ability to render ``` +However, TSX sometimes tends to grow very big and it requires a certain amount of mental load to stop at these conditionals and understand what's rendered inside. + +One could argue that there's an "organism" inside, a certain piece of logic that results in a component being rendered after some calculations and state changes. We try to give names to these operations that result in a TSX, so the developer knows what's in that TSX. + +**Thus, all conditionally rendered TSX** **goes into a constant**. We don't render conditional TSX inline + +```jsx +const achievementsContainer = hasAchievements? : ; +const mysteryBoxesContainer = mysteryBoxEnabled && ; + + + {achievementsContainer} + + {title} + {mysteryBoxesContainer} + + +``` + ## Rules for hooks 1. **Fake modularization**: @@ -380,26 +400,7 @@ if (myClaimableAuctions != null && myClaimableAuctions.length > 0) { } ``` -Here, it's not worth moving the if logic inside a local variable, it would be redundant, as it's very easy to read through it. - -However, JSX sometimes tends to grow very big and it requires a certain amount of mental load to stop at these conditionals and understand what's rendered inside. - -One could argue that there's an "organism" inside, a certain piece of logic that results in a component being rendered after some calculations and state changes. We try to give names to these operations that result in a JSX, so the developer knows what's in that JSX. - -**Thus, all conditionally rendered JSX** **goes into a constant**. We don't render conditional JSX inline - -```jsx -const achievementsContainer = hasAchievements? : ; -const mysteryBoxesContainer = mysteryBoxEnabled && ; - - - {achievementsContainer} - - {title} - {mysteryBoxesContainer} - - -``` +👆 Here, it's not worth moving the if logic inside a local variable, it would be redundant, as it's very easy to read through it. ### New functions/hooks