Clean Code Rules in React-Native
Clean code is important in any programming language, including React-Native.
Here are some rules to follow for writing clean code:
Use meaningful variable and function names:
Use descriptive names for variables and functions that clearly convey their purpose. Avoid using abbreviations or single-letter variable names.By using meaningful variable and function names, you can make your code more readable and easier to understand for yourself and other developers who may work on your code in the future.
Variable names:
// Bad example
const a = 10;
const b = 20;
// Good example
const width = 10;
const height = 20;
Function names:
// Bad example
function doSomething() {
// code here
}
// Good example
function calculateTotalPrice() {
// code here
}
Component names:
// Bad example
function Card(props) {
// code here
}
// Good example
function ProductCard(props) {
// code here
}
Event handler names:
// Bad example
function handleClick() {
// code here
}
// Good example
function handleAddToCartClick() {
// code here
}
Keep your code organized:
Use proper indentation, spacing, and comments to make your code easy to read and understand. Group related code together and separate unrelated code.By keeping your code organized, you can make it easier to read and understand, which can save you time and effort in the long run.
Use proper indentation:
// Bad example
function calculateTotalPrice() {
return (price * quantity) + tax;
}
// Good example
function calculateTotalPrice() {
return (price * quantity) + tax;
}
Use spacing:
// Bad example
const product={name:'iPhone',price:999};
// Good example
const product = { name: 'iPhone', price: 999 };
Use comments:
// Bad example
function calculateTotalPrice() {
return (price * quantity) + tax;
}
// Good example
function calculateTotalPrice() {
// Calculate total price including tax
return (price * quantity) + tax;
}
Group related code together:
// Bad example
function render() {
return (
<View>
<Text>Hello</Text>
<Image source={...} />
<Button title="Click me" onPress={...} />
</View>
);
}
// Good example
function render() {
return (
<View>
<Text>Hello</Text>
<Button title="Click me" onPress={...} />
<Image source={...} />
</View>
);
}
Use consistent formatting:
Use a consistent coding style throughout your project. This makes it easier for other developers to read and understand your code.By using consistent formatting, you can make your code more readable and easier to understand for yourself and other developers who may work on your code in the future.
Indentation:
// Bad example
function calculateTotalPrice() {
return (price * quantity) + tax;
}
// Good example
function calculateTotalPrice() {
return (price * quantity) + tax;
}
Spacing:
// Bad example
const product={name:'iPhone',price:999};
// Good example
const product = { name: 'iPhone', price: 999 };
Comments:
// Bad example
function calculateTotalPrice() {
// Calculate total price including tax
return (price * quantity) + tax;
}
// Good example
function calculateTotalPrice() {
// Calculate total price including tax
return (price * quantity) + tax;
}
Component structure:
// Bad example
function ProductCard(props) {
return (
<View>
<Text>{props.name}</Text>
<Text>{props.price}</Text>
</View>
);
}
// Good example
function ProductCard(props) {
return (
<View>
<Text>{props.name}</Text>
<Text>{props.price}</Text>
</View>
);
}
Avoid long functions:
Break down long functions into smaller, more manageable functions. This makes your code easier to read and maintain.By breaking down the long function into smaller, more manageable functions, you can make your code more readable and easier to understand. This also makes it easier to test and maintain your code.
Long function:
// Long function example
function calculateTotalPrice(products) {
let totalPrice = 0;
for (let i = 0; i < products.length; i++) {
const product = products[i];
const price = product.price;
const quantity = product.quantity;
const tax = calculateTax(price);
const total = (price * quantity) + tax;
totalPrice += total;
}
return totalPrice;
}
// Refactored example
function calculateTotalPrice(products) {
let totalPrice = 0;
for (let i = 0; i < products.length; i++) {
const product = products[i];
const total = calculateProductTotal(product);
totalPrice += total;
}
return totalPrice;
}
function calculateProductTotal(product) {
const price = product.price;
const quantity = product.quantity;
const tax = calculateTax(price);
const total = (price * quantity) + tax;
return total;
}
function calculateTax(price) {
const taxRate = 0.1;
const tax = price * taxRate;
return tax;
}
Use reusable components:
Use reusable components to avoid duplicating code. This makes your code more efficient and easier to maintain.By using reusable components, you can avoid duplicating code and make your code more efficient and easier to maintain.
Reusable Component:
// Bad example
function ProductCard(props) {
return (
<View>
<Text>{props.name}</Text>
<Text>{props.price}</Text>
<Button title="Add to cart" onPress={props.onAddToCart} />
</View>
);
}
function HomePage(props) {
return (
<View>
<ProductCard name="iPhone" price="$999" onAddToCart={...} />
<ProductCard name="Samsung Galaxy" price="$799" onAddToCart={...} />
</View>
);
}
// Good example
function ProductCard(props) {
return (
<View>
<Text>{props.name}</Text>
<Text>{props.price}</Text>
<Button title="Add to cart" onPress={props.onAddToCart} />
</View>
);
}
function HomePage(props) {
return (
<View>
<ProductCard product={{ name: "iPhone", price: "$999" }} onAddToCart={...} />
<ProductCard product={{ name: "Samsung Galaxy", price: "$799" }} onAddToCart={...} />
</View>
);
}
In the bad example, the ProductCard component is not reusable because it is tightly coupled to the HomePage component. This means that if you want to use the ProductCard component in another part of your app, you would have to copy and paste the code.
In the good example, the ProductCard component is reusable because it accepts a product prop instead of individual name and price props. This means that you can use the ProductCard component anywhere in your app by passing in a product prop.
Use propTypes and defaultProps:
Use propTypes and defaultProps to define the expected types and default values of your component's props. This makes your code more robust and easier to debug.By using propTypes and defaultProps, you can make your code more robust and easier to debug. If a prop is passed in with the wrong type or is missing, you will get a warning in the console. If a prop is not provided, the default value will be used instead.
import React from 'react';
import PropTypes from 'prop-types';
import { View, Text, Image, Button } from 'react-native';
function ProductCard(props) {
const { product, onAddToCart } = props;
const { name, price, image } = product;
return (
<View>
<Image source={image} />
<Text>{name}</Text>
<Text>{price}</Text>
<Button title="Add to cart" onPress={onAddToCart} />
</View>
);
}
ProductCard.propTypes = {
product: PropTypes.shape({
name: PropTypes.string.isRequired,
price: PropTypes.string.isRequired,
image: PropTypes.number.isRequired,
}).isRequired,
onAddToCart: PropTypes.func.isRequired,
};
ProductCard.defaultProps = {
product: {
name: 'Product name',
price: '$0.00',
image: require('./default-image.png'),
},
onAddToCart: () => {},
};
In this example, the ProductCard component defines propTypes and defaultProps. The propTypes define the expected types and whether they are required or not. The defaultProps define default values for the props in case they are not provided.
Use stateless functional components:
Use stateless functional components whenever possible. They are simpler and more efficient than class components.By using stateless functional components, you can write simpler and more efficient code. They are also easier to test and maintain than class components.
import React from 'react';
import { View, Text, Image, Button } from 'react-native';
const ProductCard = ({ product, onAddToCart }) => {
const { name, price, image } = product;
return (
<View>
<Image source={image} />
<Text>{name}</Text>
<Text>{price}</Text>
<Button title="Add to cart" onPress={onAddToCart} />
</View>
);
};
export default ProductCard;
In this example, the ProductCard component is defined as a stateless functional component. It accepts props as an argument and returns JSX. Since it doesn't have any state or lifecycle methods, it can be defined as a simple function.
Use ES6 features:
Use ES6 features like arrow functions, template literals, and destructuring to write cleaner and more concise code.By using ES6 features, you can write cleaner and more concise code. This can make your code easier to read and understand, and can also make it more efficient.
import React from 'react';
import { View, Text, Image, Button } from 'react-native';
const ProductCard = ({ product, onAddToCart }) => {
const { name, price, image } = product;
const handleAddToCartClick = () => {
onAddToCart(product);
};
return (
<View>
<Image source={image} />
<Text>{name}</Text>
<Text>{price}</Text>
<Button title="Add to cart" onPress={handleAddToCartClick} />
</View>
);
};
export default ProductCard;
In this example, we're using arrow functions and object destructuring. The handleAddToCartClick function is defined as an arrow function, which is a shorthand way of defining a function. We're also using object destructuring to extract the name, price, and image properties from the product prop.
Conclustion:
By following these rules, you can write clean and maintainable code in React-Native.