Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jsiqbal/ibilling
https://github.com/jsiqbal/ibilling
Last synced: about 4 hours ago
JSON representation
- Host: GitHub
- URL: https://github.com/jsiqbal/ibilling
- Owner: JsIqbal
- Created: 2023-05-02T08:09:50.000Z (over 1 year ago)
- Default Branch: develop
- Last Pushed: 2023-05-08T08:55:42.000Z (over 1 year ago)
- Last Synced: 2024-04-30T02:53:15.388Z (6 months ago)
- Language: TypeScript
- Size: 445 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
This is Iqbal
Believes that Software Engineering is pure philosphy.
[](https://github.com/ryo-ma/github-profile-trophy)
- currently working on [Middleware](https://cesomni.com/)
- currently learning **Software Engineering**
- looking to collaborate on **comming soon**
- 💬 Ask me about **JavaScript, React, Node, Frontend, Backend**
- Certification on - [Node.js](https://drive.google.com/file/d/15rLCTVbZHhEe4aMGKwyXOk5b7BMhnPLM/view?usp=sharing)
- Certification on - [React.js](https://drive.google.com/file/d/1nlvSWZX1BlIFNY0g-iWLXBPuReWDle7V/view?usp=sharing)
- My Resume - [Know Iqbal More!](https://drive.google.com/file/d/1NnRKY3tRAMzZeveAqif5AWnXHAKUkoiY/view?usp=sharing)
- Reach me in **https://www.linkedin.com/in/jsiqbal/**
Connect with me:
Languages and Tools:
---
## 📊 Github Stats
[](https://github.com/JsIqbal/github-readme-stats)
# Project Docs:
# Installing Typescript
npm i -g typescript
# Transpiling a TypeScript file to JavaScript
tsc hello.ts
# tsconfig.json configuration
{
"compilerOptions": {
"target": "ES2015",
"watch": true
}
}
# Creating a TypeScript React app using Create React App
npx create-react-app counter --template typescript
# Installing Axios and its TypeScript definitions
npm install --save axios
npm install --save-dev @types/axios
# Deleting node_modules folder, clearing npm cache, and reinstalling packages
Delete the node_modules folder.
Clear the npm cache by running npm cache clean --force.
Install the packages again by running npm install.
Run your application again by running npm start.
# SOLID principles
Single responsibility principle
Open-closed principle (open for implementation and closed for modification)
Liskov Substitution principle
interface IsSearchInputProps extends React.InputHTMLAttributes{
isLarge?: boolean
}
Interface Segregation principle
export interface IProduct {
id: string;
title: string
}
interface IProductProps {
product: IProduct
}
# One component should have its own interface of the particular props it uses so that all the interface properties are not imported directly.
Dependency Inversion principle
One entity should depend upon abstractions not concretions. DIP
# Custom Hooks
Custom React hooks are reusable functions that can encapsulate and abstract away some of the common and often repetitive logic in React components. Here are some scenarios where custom React hooks can be useful:
State management: If you find yourself writing the same code to manage state in multiple components, you can create a custom hook to handle that logic for you. For example, you can create a hook to manage form state or to handle API calls.
Handling side effects: If you have code that handles side effects like fetching data from an API or interacting with the browser's local storage, you can create a custom hook to handle that logic for you.
Abstracting complex logic: If you have complex logic that you need to reuse across multiple components, you can create a custom hook to encapsulate that logic and make it more reusable.
Improving readability: Custom hooks can improve the readability of your code by abstracting away complex logic and making your components more focused on rendering UI.
# Here are some reasons why you should use custom React hooks:
Reusability: Custom hooks make it easy to reuse logic across different components, reducing duplication and making your code more modular.
Abstraction: Custom hooks allow you to abstract away complex logic and make your components more focused on rendering UI.
Simplification: Custom hooks simplify your code by removing the need for repetitive code and providing a centralized place to manage state and side effects.