Scribd
Upload
53 views

ReactJS - Guideline

The document provides guidelines for naming conventions and file/folder structure when coding React applications. It recommends component files use PascalCase and non-component files use camelCase. Unit test files should match the component name. CSS files should also match the component name. When multiple files are needed, group them in a component folder. Import statements should be at the top in a consistent order. Files should follow a standard structure of imports, types, styles, variables, component, exports. Functional components using React hooks are preferred. Double quotes should be used for JSX attributes and single quotes for JS code.

Uploaded by

Moinak Dutta
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
53 views

ReactJS - Guideline

The document provides guidelines for naming conventions and file/folder structure when coding React applications. It recommends component files use PascalCase and non-component files use camelCase. Unit test files should match the component name. CSS files should also match the component name. When multiple files are needed, group them in a component folder. Import statements should be at the top in a consistent order. Files should follow a standard structure of imports, types, styles, variables, component, exports. Functional components using React hooks are preferred. Double quotes should be used for JSX attributes and single quotes for JS code.

Uploaded by

Moinak Dutta
Copyright
© © All Rights Reserved
Available Formats
Download as DOC, PDF, TXT or read online on Scribd
You are on page 1/ 3

React JS: Coding Guideline

1 NAMING CONVENTIONS

1.1 Component’s names should be written using pascal case

Header.js
HeroBanner.js
CookieBanner.js
Footer.js

1.2 Non-component’s name should be written using camel case

myUtilityFile.js
cookieHelper.js
fetchApi.js

1.3 Unit test files should use the same name as its corresponding file

HeroBanner.js
HeroBanner.test.js

CookieBanner.js
CookieBanner.test.js

1.4 CSS files should be named the same as the component

Header.css
CookieBanner.css

1.5 If a component requires multiple files (css, test) locate all files within component a folder

1.6 Attribute name should be camel case

className
onClick

1.7 Variable names should be camel case


(Variable names can contain number and special characters)

const variable = 'test';


let variableBoolean = true;

1.8 Use .jsx or .tsx extension a for React components

2 FILES AND FOLDERS STRUCTURE

React doesn’t have any preferences in this regard. There are a few common approaches popular in
the ecosystem we may want to consider.
2.1 Grouping by Features or Routes
One of the common approache to structure projects is to locate CSS, JS, and tests together inside
folders grouped by feature or route.

2.2 Grouping by File Type


Another popular approache to structure projects is to group similar files together.

3 CODE

To create a new React App follow the React’s recommended standard steps, please check.
https://reactjs.org/docs/create-a-new-react-app.html

3.1 Import Order

Put all imports in order at the very top of the code file.
Make sure all your imports statements are on new lines.

3.2 Component structure

Keep all the component files consistent

Imports
Types (if required)
Styles (if required)
Additional variables
Component
- Definitions
- Functions
- Effects
- Additional destructures
Exports

Use index.js for each folder to export so that all the imports are referenced on the index.js file.

3.3 Use functional components by starting to use React Hooks

3.4 Usage of Double Quotes (" ") & Single Quotes (' ')

To avoide the confusion about double quotes (" ") & single quotes (' '), use double quotes (" ") for
JSX attributes and single quotes (' ') for the JS code.

3.5 Avoid using indexes as key props

3.6 Use fragments

3.7 Prefer destructuring properties

3.8 Create PURE functions and avoid side-effects

3.9 Avoid mutating state when working with arrays


3.10 Treat props as read-only. Do not try to modify them

3.11 No DRY violations. Create utility files to avoid duplicate code

3.12 Components should follow the single responsibility principle

3.13 Use Higher Order Components where appropriate

3.14 Split code into respective files, JavaScript, test, and CSS

3.15 Avoid multiple if-else blocks. Instead, use ternary - best for clean code practice

3.16 Write Tests for each component

3.17 Use/Create Custom Hooks instead of just putting a useEffect or multiple useStates directly to
your component

3.18 Avoid huge components, split your component into smaller chunks

3.19 Group the state whenever possible

3.20 Use shorthand for boolean props

3.21 Avoid curly braces for string props

3.22 Avoid using inline styles

3.23 Prefer conditional rendering with ternary operator

3.24 Use constants or enums for string values

3.25 Only use let or const

3.26 Favour arrow functions

3.27 Try using optional chaining if possible.

3.28 Avoid long list of function arguments

3.29 Prefer using template literals

3.30 Use implicit return in small functions

3.31 Remove console.logs

3.32 Remove all commented-out codes

3.33 Use comments to explain why we did something

You might also like