Scribd
Upload
811 views

React Native - Guideline

The document provides coding guidelines for React Native projects, including naming conventions, file and folder structures, and code standards. Component names should use PascalCase, while other files use camelCase. Unit tests should match the file name. Imports should be grouped at the top. Components should follow a consistent structure with imports, types, functions, styles, and exports. Functional components using React Hooks are preferred. Double quotes are used for JSX and single quotes for JavaScript code.

Uploaded by

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

React Native - Guideline

The document provides coding guidelines for React Native projects, including naming conventions, file and folder structures, and code standards. Component names should use PascalCase, while other files use camelCase. Unit tests should match the file name. Imports should be grouped at the top. Components should follow a consistent structure with imports, types, functions, styles, and exports. Functional components using React Hooks are preferred. Double quotes are used for JSX and single quotes for JavaScript code.

Uploaded by

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

React Native: Coding Guideline

1 NAMING CONVENTIONS

1.1 Component’s names should be written using pascal case

Header.js
FloatingTextInput.js
CustomButton.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 Global StyleSheet file should be written using camel case

globalStyle.js

1.5 All fonts, colors, and font sizes should be in one file

fontsConfig.js

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 Native 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 Navigation
One of the common approach to structure projects is to locate all main screens in one folder, all
reusable components in one folder and style related files in one folder grouped by feature or
navigation.

2.2 Grouping by File Type


Another popular approach 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)

Additional variables
Component
- Definitions
- Functions
- Effects
- Additional destructures
Styles (if required)
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 Avoid storing uncrypted data in AsyncStorage.

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 StyleSheet

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 Use implicit return in small functions

3.30 Remove console.logs

3.31 Remove all commented-out codes

3.32 Use comments to explain why we did something

You might also like